razorpay-react-sdk/readme.md

A simple Razorpay integration package for React & Next.js with TypeScript support.

# 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

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

## 🛠 Usage

### ✅ Using `useRazorpay` Hook

```tsx
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: "john@example.com",
      contact: "9999999999",
    },
    theme: {
      color: "#3399cc",
    },
    handler: (response) => {
      console.log("Payment Successful!", response);
    },
  });

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

### ✅ Using `RazorpayProvider`

```tsx
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:
   ```sh
   git clone https://github.com/your-repo/razorpay-client-ts.git
   cd razorpay-client-ts
   npm install
   ```
2. Build the package:
   ```sh
   npm run build
   ```
3. Link the package locally for testing:
   ```sh
   npm link
   ```
4. Use it in a test project:
   ```sh
   cd ../your-test-app
   npm link razorpay-client-ts
   ```

## 📜 License

MIT License © 2025 Piyush Soni