How to integrate Razorpay payment gateway with react.js and node.js

Here is the flow we are going to take to complete our task.

Payment Flow

Before Starting Let’s generate our razorpay API Keys First.

Genrate API Keys :

1. Log into your Dashboard with appropriate credentials.
2. Select the mode (Test or Live) for which you want to generate the API key.
3. Navigate to Settings → API Keys → Generate Key to generate the key for the selected mode.

4. Save Your Keys locally for future reference.

Building Api’s With Nodejs

Now Let’s Create Api’s with nodejs to create orders and to capture payments.

Type Following Commands to initialize the node project

mkdir server
cd server
npm init -y

Now install the required dependencies for our project.

npm install express cors razorpay

Let’s Start listening for API requests at port 8000

const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.listen(8000, () => {
    console.log("Server is listening at http://localhost:8000");
});

Then initialize the Razorpay SDK with your API Keys

const Razorpay = require("razorpay");
const instance = new Razorpay({
    key_id: config.RAZOR_PAY_KEY_ID,
    key_secret: config.RAZOR_PAY_KEY_SECRET,
});

Now let’s create API for creating orders using Razorpay SDK

app.get("/order", (req, res) => {
  try {
    const options = {
      amount: 10 * 100, // amount == Rs 10
      currency: "INR",
      receipt: "receipt#1",
      payment_capture: 0,
 // 1 for automatic capture // 0 for manual capture
    };
  instance.orders.create(options, async function (err, order) {
    if (err) {
      return res.status(500).json({
        message: "Something Went Wrong",
      });
    }
  return res.status(200).json(order);
 });
} catch (err) {
  return res.status(500).json({
    message: "Something Went Wrong",
  });
 }
});

Then create an API the captures the payment

app.post("/capture/:paymentId", (req, res) => {
  try {
    return request(
     {
     method: "POST",
     url: `https://${config.RAZOR_PAY_KEY_ID}:${config.RAZOR_PAY_KEY_SECRET}@api.razorpay.com/v1/payments/${req.params.paymentId}/capture`,
     form: {
        amount: 10 * 100, // amount == Rs 10 // Same As Order amount
        currency: "INR",
      },
    },
   async function (err, response, body) {
     if (err) {
      return res.status(500).json({
         message: "Something Went Wrong",
       }); 
     }
      console.log("Status:", response.statusCode);
      console.log("Headers:", JSON.stringify(response.headers));
      console.log("Response:", body);
      return res.status(200).json(body);
    });
  } catch (err) {
    return res.status(500).json({
      message: "Something Went Wrong",
   });
  }
});

Alright Now we have one last task to do let’s create our client-side with reactjs

Create A React App

npm create-react-app react-razorpay
cd react-razorpay
npm install axios
npm start

Copy the following script tag in public/index.html to initialize Razorpay object in our app

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

Now create a function that will call when the user wants to pay money by clicking a button.

const paymentHandler = async (e) => {
const API_URL = 'http://localhost:8000/
e.preventDefault();
const orderUrl = `${API_URL}order`;
const response = await Axios.get(orderUrl);
const { data } = response;
const options = {
  key: process.env.RAZOR_PAY_KEY_ID,
  name: "Your App Name",
  description: "Some Description",
  order_id: data.id,
  handler: async (response) => {
    try {
     const paymentId = response.razorpay_payment_id;
     const url = `${API_URL}capture/${paymentId}`;
     const captureResponse = await Axios.post(url, {})
     console.log(captureResponse.data);
    } catch (err) {
      console.log(err);
    }
  },
  theme: {
    color: "#686CFD",
  },
};
const rzp1 = new window.Razorpay(options);
rzp1.open();
};

Now call this onClick of your payment button like

<button onClick={paymentHandler}>Pay Now</button>