Skip to content

Update README.md #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update README.md #16

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 71 additions & 127 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,162 +1,106 @@
# React Razorpay
# React Razorpay Documentation

Integrate Razorpay Payment gateway in your react application.
## Overview
`react-razorpay` is a React library that allows you to easily integrate the Razorpay payment gateway into your React applications. It provides a simple API to load the Razorpay script and handle payments.

## Basic Example
## Installation
To install the library, use npm or yarn:

```js
// Import the package
import useRazorpay from "react-razorpay";
```sh
npm install react-razorpay
```
or
```sh
yarn add react-razorpay
```

```js
const [Razorpay] = useRazorpay();

const handlePayment = async (params) => {
const order = await createOrder(params); // Create order on your backend

const options = {
key: "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
amount: "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
currency: "INR",
name: "Acme Corp",
description: "Test Transaction",
image: "https://example.com/your_logo",
order_id: "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of createOrder().
handler: function (response) {
alert(response.razorpay_payment_id);
alert(response.razorpay_order_id);
alert(response.razorpay_signature);
},
prefill: {
name: "Piyush Garg",
email: "youremail@example.com",
contact: "9999999999",
},
notes: {
address: "Razorpay Corporate Office",
},
theme: {
color: "#3399cc",
},
};

const rzp1 = new Razorpay(options);
## Usage

rzp1.on("payment.failed", function (response) {
alert(response.error.code);
alert(response.error.description);
alert(response.error.source);
alert(response.error.step);
alert(response.error.reason);
alert(response.error.metadata.order_id);
alert(response.error.metadata.payment_id);
});
### Importing the Library
You can import the `useRazorpay` hook and the `RazorpayOrderOptions` class from the library:

rzp1.open();
};
```javascript
import { useRazorpay, RazorpayOrderOptions } from "react-razorpay";
```

Offical Docs of Razorpay: https://razorpay.com/docs/payment-gateway/web-integration/standard/
### Using the `useRazorpay` Hook
The `useRazorpay` hook is used to load the Razorpay script and manage the loading state and errors.

# Full Code Example
```javascript
const { error, isLoading, Razorpay } = useRazorpay();
```

```ts
import { useCallback } from "react";
import useRazorpay from "react-razorpay";
### Example Component
Here’s an example of how to use the `useRazorpay` hook in a functional component:

export default function App() {
const [Razorpay] = useRazorpay();
```javascript
import React from "react";
import { useRazorpay, RazorpayOrderOptions } from "react-razorpay";

const handlePayment = useCallback(() => {
const order = await createOrder(params);
const PaymentComponent = () => {
const { error, isLoading, Razorpay } = useRazorpay();

const options: RazorpayOptions = {
key: "YOUR_KEY_ID",
amount: "3000",
const handlePayment = () => {
const options: RazorpayOrderOptions = {
key: "YOUR_RAZORPAY_KEY",
amount: 50000, // Amount in paise
currency: "INR",
name: "Acme Corp",
name: "Test Company",
description: "Test Transaction",
image: "https://example.com/your_logo",
order_id: order.id,
handler: (res) => {
console.log(res);
order_id: "order_9A33XWu170gUtm", // Generate order_id on server
handler: (response) => {
console.log(response);
alert("Payment Successful!");
},
prefill: {
name: "Piyush Garg",
email: "youremail@example.com",
name: "John Doe",
email: "john.doe@example.com",
contact: "9999999999",
},
notes: {
address: "Razorpay Corporate Office",
},
theme: {
color: "#3399cc",
color: "#F37254",
},
};

const rzpay = new Razorpay(options);
rzpay.open();
}, [Razorpay]);
const razorpayInstance = new Razorpay(options);
razorpayInstance.open();
};

return (
<div className="App">
<button onClick={handlePayment}>Click</button>
<div>
<h1>Payment Page</h1>
{isLoading && <p>Loading Razorpay...</p>}
{error && <p>Error loading Razorpay: {error}</p>}
<button onClick={handlePayment} disabled={isLoading}>
Pay Now
</button>
</div>
);
}
};

export default PaymentComponent;
```

# Full example with trigger on page load
## RazorpayOrderOptions
The `RazorpayOrderOptions` interface defines the options you can pass when creating a Razorpay instance. Here are the key properties:

```ts
import { useCallback } from "react";
import useRazorpay from "react-razorpay";
- `key`: Your Razorpay API key.
- `amount`: Amount to be charged (in paise).
- `currency`: Currency code (e.g., `"INR"`).
- `name`: Name of the company.
- `description`: Description of the transaction.
- `order_id`: Unique order ID.
- `handler`: Callback function to handle the payment response.
- `prefill`: Pre-fill customer details (name, email, contact).
- `theme`: Customization options for the Razorpay modal.

export default function App() {
const [Razorpay, isLoaded] = useRazorpay();
## Error Handling
The `useRazorpay` hook provides an `error` state that you can use to display any issues that occur while loading the Razorpay script.

const handlePayment = useCallback(() => {
const order = await createOrder(params);
## Conclusion
The `react-razorpay` library simplifies the integration of Razorpay into your React applications. With just a few lines of code, you can set up payment processing and handle user interactions seamlessly. For more details, refer to the [Razorpay documentation](https://razorpay.com/docs/).

const options: RazorpayOptions = {
key: "YOUR_KEY_ID",
amount: "3000",
currency: "INR",
name: "Acme Corp",
description: "Test Transaction",
image: "https://example.com/your_logo",
order_id: order.id,
handler: (res) => {
console.log(res);
},
prefill: {
name: "Piyush Garg",
email: "youremail@example.com",
contact: "9999999999",
},
notes: {
address: "Razorpay Corporate Office",
},
theme: {
color: "#3399cc",
},
};
## Readme

const rzpay = new Razorpay(options);
rzpay.open();
}, [Razorpay]);

useEffect(() => {
if (isLoaded) {
handlePayment();
}
}, [isLoaded, handlePayment])

return (
<div className="App">
<button onClick={handlePayment}>Click</button>
</div>
);
}
```
### Keywords
`react-razorpay`, `razorpay`, `razorpay payments`, `react razorpay`