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: "[email protected]",
      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