razorpay-react-sdk

Razorpay Client for React & Next.js

A TypeScript-based npm package to simplify Razorpay payment gateway integration in React and Next.js applications.

🚀 Features

• Lightweight and easy to use.
• Supports both React Hooks and Provider-based integration.
• Fully typed with TypeScript.
• Customizable checkout options.

📦 Installation

npm install razorpay-client-ts
# or
yarn add razorpay-client-ts

🛠 Usage

✅ Using useRazorpay Hook

import {useRazorpay} from "razorpay-client-ts";

function PaymentButton() {
  const openPayment = useRazorpay({
    key: "rzp_test_xxxxxxxx",
    amount: 50000, // ₹500
    currency: "INR",
    name: "Acme Corp",
    description: "Purchase Order #12345",
    image: "https://example.com/logo.png",
    order_id: "order_9A33XWu170gUtm",
    prefill: {
      name: "John Doe",
      email: "[e-mail]",
      contact: "9999999999",
    },
    theme: {
      color: "#3399cc",
    },
    handler: (response) => {
      console.log("Payment Successful!", response);
    },
  });

  return <button onClick={openPayment}>Pay Now</button>;
}

✅ Using RazorpayProvider

import {RazorpayProvider, useRazorpayFromProvider} from "razorpay-client-ts";

function PaymentButton() {
  const openPayment = useRazorpayFromProvider();
  return <button onClick={openPayment}>Pay Now</button>;
}

export default function App() {
  return (
    <RazorpayProvider
      options={{
        key: "rzp_test_xxxxxxxx",
        amount: 50000,
        currency: "INR",
        name: "Acme Corp",
      }}
    >
      <PaymentButton />
    </RazorpayProvider>
  );
}

🔧 API Reference

RazorpayOptions

Property	Type	Description
key	string	Razorpay API key.
amount	number	Payment amount (in smallest currency unit).
currency	string	Transaction currency (default: INR).
name	string	Business or app name.
description	string	Short description of the transaction.
image	string	URL of the business logo.
order_id	string	Razorpay order ID.
prefill	object	Prefilled user details.
theme	object	Custom styling options.
handler	(response) => void	Callback for successful payment.
callback_url	string	URL to redirect after successful payment.
modal	object	Custom modal settings.

🛠 Development & Testing

To test the package locally:

1. Clone the repo and install dependencies:

   git clone https://github.com/your-repo/razorpay-client-ts.git
   cd razorpay-client-ts
   npm install

2. Build the package:

   npm run build

3. Link the package locally for testing:

   npm link

4. Use it in a test project:

   cd ../your-test-app
   npm link razorpay-client-ts

📜 License

MIT License © 2025 Piyush Soni