React Razorpay

Integrate Razorpay Payment gateway in your react application.

Basic Example

1// Import the package
2import useRazorpay from "react-razorpay";

1const Razorpay = useRazorpay();
2
3const handlePayment = async (params) => {
4  const order = await createOrder(params); //  Create order on your backend
5
6  const options = {
7    key: "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
8    amount: "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
9    currency: "INR",
10    name: "Acme Corp",
11    description: "Test Transaction",
12    image: "https://example.com/your_logo",
13    order_id: "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of createOrder().
14    handler: function (response) {
15      alert(response.razorpay_payment_id);
16      alert(response.razorpay_order_id);
17      alert(response.razorpay_signature);
18    },
19    prefill: {
20      name: "Piyush Garg",
21      email: "youremail@example.com",
22      contact: "9999999999",
23    },
24    notes: {
25      address: "Razorpay Corporate Office",
26    },
27    theme: {
28      color: "#3399cc",
29    },
30  };
31
32  const rzp1 = new Razorpay(options);
33
34  rzp1.on("payment.failed", function (response) {
35    alert(response.error.code);
36    alert(response.error.description);
37    alert(response.error.source);
38    alert(response.error.step);
39    alert(response.error.reason);
40    alert(response.error.metadata.order_id);
41    alert(response.error.metadata.payment_id);
42  });
43
44  rzp1.open();
45};

Offical Docs of Razorpay: https://razorpay.com/docs/payment-gateway/web-integration/standard/

Full Code Example

1import { useCallback } from "react";
2import useRazorpay from "react-razorpay";
3
4export default function App() {
5  const Razorpay = useRazorpay();
6
7  const handlePayment = useCallback(() => {
8    const order = await createOrder(params);
9
10    const options: RazorpayOptions = {
11      key: "YOUR_KEY_ID",
12      amount: "3000",
13      currency: "INR",
14      name: "Acme Corp",
15      description: "Test Transaction",
16      image: "https://example.com/your_logo",
17      order_id: order.id,
18      handler: (res) => {
19        console.log(res);
20      },
21      prefill: {
22        name: "Piyush Garg",
23        email: "youremail@example.com",
24        contact: "9999999999",
25      },
26      notes: {
27        address: "Razorpay Corporate Office",
28      },
29      theme: {
30        color: "#3399cc",
31      },
32    };
33
34    const rzpay = new Razorpay(options);
35    rzpay.open();
36  }, [Razorpay]);
37
38  return (
39    <div className="App">
40      <button onClick={handlePayment}>Click</button>
41    </div>
42  );
43}