DEV Community

Cover image for How to Integrate Razorpay Payment Gateway in React and Node. js
Tech Tales
Tech Tales

Posted on

How to Integrate Razorpay Payment Gateway in React and Node. js

#react #softwaredevelopment #apigateway

How to Integrate Razorpay Payment Gateway in React and Node.js

Meta Description: Learn how to integrate Razorpay Payment Gateway with React and Node.js. Follow this step-by-step guide to create orders, integrate Checkout, verify payments, configure webhooks, and securely accept online payments.

Online payments are an essential part of modern websites and applications. Whether you are building an e-commerce platform, booking system, SaaS application, or service-based website, a reliable payment gateway makes it easier for customers to complete transactions securely.

Razorpay is one of the popular payment gateways used by businesses in India to accept online payments through UPI, credit cards, debit cards, net banking, and wallets.

When building a React and Node.js application, Razorpay should be integrated securely through the backend. The backend creates the Razorpay order and verifies the payment before the application confirms the transaction.

In this guide, we will explain how to integrate Razorpay into a React frontend and Node.js backend, from setting up your Razorpay account to testing the complete payment flow.

Razorpay Payment Integration Flow

The overall payment flow looks like this:

Create Razorpay Account
↓
Complete KYC
↓
Enable Test Mode
↓
Generate API Keys
↓
Create Backend Payment API
↓
Create Razorpay Order
↓
Send Order ID to React
↓
Open Razorpay Checkout
↓
Customer Makes Payment
↓
Backend Verifies Payment
↓
Update Order Status
↓
Configure Webhook

Step 1: Create a Razorpay Account

First, create a Razorpay account for your business or application.

After creating the account, complete the required business and KYC process. Razorpay provides separate environments for development and production:

  • Test Mode – Used during development and testing
  • Live Mode – Used for accepting real payments

Test Mode can be used to test the payment flow without processing real money, while Live Mode requires the required verification and KYC process.

Step 2: Enable Test Mode

During development, always use Test Mode.

Test Mode allows developers to test the complete payment flow without transferring real money.

Razorpay provides separate API credentials for Test Mode and Live Mode.

Test keys generally begin with:

rzp_test_
Enter fullscreen mode Exit fullscreen mode

Live keys generally begin with:

rzp_live_
Enter fullscreen mode Exit fullscreen mode

Important: Never use your Live API credentials during development.

Step 3: Generate Razorpay API Keys

From the Razorpay Dashboard, navigate to:

Account & Settings → API Keys → Generate Key

You will receive:

  • Key ID
  • Key Secret

For example:

RAZORPAY_KEY_ID=rzp_test_xxxxxxxxxx
RAZORPAY_KEY_SECRET=xxxxxxxxxxxxxxxx
Enter fullscreen mode Exit fullscreen mode

The Key Secret must always remain on your backend. It should never be exposed in React or frontend JavaScript.

Keep your Test and Live credentials separate for better security and easier deployment management.

Step 4: Install Razorpay in Node.js

For a Node.js backend, install the Razorpay package using npm:

npm install razorpay
Enter fullscreen mode Exit fullscreen mode

Then configure Razorpay using your environment variables:

const Razorpay = require("razorpay");

const razorpay = new Razorpay({
    key_id: process.env.RAZORPAY_KEY_ID,
    key_secret: process.env.RAZORPAY_KEY_SECRET
});
Enter fullscreen mode Exit fullscreen mode

Using environment variables helps prevent sensitive credentials from being exposed in your source code.

Step 5: Create a Razorpay Order

Before opening Razorpay Checkout, your backend should create a Razorpay Order.

The generated order_id is then sent to the React frontend and used when opening Checkout.

Example:

const options = {
    amount: 50000,
    currency: "INR",
    receipt: "receipt_001"
};

const order = await razorpay.orders.create(options);

console.log(order);
Enter fullscreen mode Exit fullscreen mode

Understanding the Amount

Razorpay amounts are provided in the currency's smallest unit.

For example:

₹500
Enter fullscreen mode Exit fullscreen mode

is represented as:

50000
Enter fullscreen mode Exit fullscreen mode

for INR.

Step 6: Create a Backend Payment API

Create an API endpoint such as:

POST /api/payment/create-order
Enter fullscreen mode Exit fullscreen mode

The React application can send the payment amount to this API.

Example request:

{
    "amount": 500
}
Enter fullscreen mode Exit fullscreen mode

The Node.js backend can then create the Razorpay order:

const Razorpay = require("razorpay");

const razorpay = new Razorpay({
    key_id: process.env.RAZORPAY_KEY_ID,
    key_secret: process.env.RAZORPAY_KEY_SECRET
});

const createOrder = async (req, res) => {
    try {
        const { amount } = req.body;

        const order = await razorpay.orders.create({
            amount: amount * 100,
            currency: "INR",
            receipt: `receipt_${Date.now()}`
        });

        res.json({
            success: true,
            order
        });

    } catch (error) {
        res.status(500).json({
            success: false,
            message: "Unable to create payment order"
        });
    }
};
Enter fullscreen mode Exit fullscreen mode

Creating the order on the backend ensures that the Razorpay secret remains protected.

Step 7: Send the Razorpay Order ID to React

Once the backend creates the order, React can call the payment API:

const response = await axios.post(
    "/api/payment/create-order",
    {
        amount: 500
    }
);

const order = response.data.order;
Enter fullscreen mode Exit fullscreen mode

The response contains a Razorpay Order ID similar to:

order_XXXXXXXXXXXX
Enter fullscreen mode Exit fullscreen mode

This ID is required when opening Razorpay Checkout.

Step 8: Open Razorpay Checkout

Once the React application receives the order details, Razorpay Checkout can be opened.

Example:

const options = {
    key: "rzp_test_xxxxxxxxx",
    amount: order.amount,
    currency: "INR",
    name: "My Website",
    description: "Product Purchase",
    order_id: order.id,

    handler: function (response) {
        console.log(response);
    }
};

const razorpay = new window.Razorpay(options);

razorpay.open();
Enter fullscreen mode Exit fullscreen mode

The important part is that the Checkout uses the order_id created by your backend.

Step 9: Customer Completes the Payment

The customer will see the Razorpay Checkout interface and can select an available payment method.

Typical options include:

  • UPI
  • Credit/Debit Cards
  • Net Banking
  • Wallets

The customer selects a payment method and completes the transaction.

Step 10: Receive Razorpay Payment Details

After Checkout, Razorpay provides payment details such as:

{
    razorpay_payment_id,
    razorpay_order_id,
    razorpay_signature
}
Enter fullscreen mode Exit fullscreen mode

For example:

handler: function (response) {

    console.log(response.razorpay_payment_id);

    console.log(response.razorpay_order_id);

    console.log(response.razorpay_signature);

}
Enter fullscreen mode Exit fullscreen mode

These values should be sent to your backend for verification.

Step 11: Verify the Payment Signature

This is one of the most important security steps in a Razorpay integration.

Do not trust the frontend payment response alone.

Your backend should verify the Razorpay signature using your Razorpay Secret.

The basic verification process is:

order_id + "|" + payment_id
        ↓
    HMAC SHA256
        ↓
Generated Signature
        ↓
Compare with Razorpay Signature
Enter fullscreen mode Exit fullscreen mode

Example:

const crypto = require("crypto");

const generatedSignature = crypto
    .createHmac("sha256", process.env.RAZORPAY_KEY_SECRET)
    .update(
        `${razorpay_order_id}|${razorpay_payment_id}`
    )
    .digest("hex");

if (generatedSignature === razorpay_signature) {

    console.log("Payment verified");

} else {

    console.log("Payment verification failed");

}
Enter fullscreen mode Exit fullscreen mode

Only after successful server-side verification should your application treat the Checkout response as authentic.

Step 12: Update Your Database

After successfully verifying the payment, update your application's order and payment records.

A typical flow is:

Order ID → Payment ID → Payment Status → Order Status

For example:

{
    "order_id": "ORDER001",
    "razorpay_order_id": "order_xxxxx",
    "razorpay_payment_id": "pay_xxxxx",
    "amount": 500,
    "payment_status": "paid",
    "order_status": "confirmed"
}
Enter fullscreen mode Exit fullscreen mode

Your application can then display:

Payment Successful ✓

Order Confirmed ✓

Order ID: ORDER001
Enter fullscreen mode Exit fullscreen mode

This allows your own system to maintain a reliable record of the transaction.

Step 13: Configure Razorpay Webhooks

For production applications, Razorpay Webhooks can be configured to notify your backend about payment-related events asynchronously.

From the Razorpay Dashboard, navigate to:

Account & Settings → Webhooks → Add New Webhook

Your webhook URL can look like:

https://api.example.com/api/payment/webhook
Enter fullscreen mode Exit fullscreen mode

Use HTTPS for production webhook endpoints.

Step 14: Create a Webhook API

Your backend can expose a webhook endpoint such as:

POST /api/payment/webhook
Enter fullscreen mode Exit fullscreen mode

Example:

app.post(
    "/api/payment/webhook",
    express.raw({ type: "application/json" }),
    async (req, res) => {

        // Validate webhook signature

        // Process payment event

        res.status(200).json({
            success: true
        });
    }
);
Enter fullscreen mode Exit fullscreen mode

The webhook secret should remain private and should be used to validate incoming webhook requests.

Why Use Both Payment Verification and Webhooks?

Payment signature verification and webhooks serve different purposes.

Payment Signature Verification

This is used immediately after the customer completes Checkout:

Customer Payment
      ↓
Checkout Response
      ↓
Backend Verification
      ↓
Show Payment Result
Enter fullscreen mode Exit fullscreen mode

Webhook

Webhooks provide server-to-server notifications:

Razorpay
    ↓
Webhook
    ↓
Your Backend
    ↓
Update Database
Enter fullscreen mode Exit fullscreen mode

Using both mechanisms helps your application handle immediate payment confirmation as well as asynchronous payment events.

Step 15: Test the Complete Payment Flow

Before switching to production, test the entire payment process.

Create Order
     ↓
Open Checkout
     ↓
Make Test Payment
     ↓
Receive Payment ID
     ↓
Verify Signature
     ↓
Check Database
     ↓
Check Webhook
     ↓
Check Razorpay Dashboard
Enter fullscreen mode Exit fullscreen mode

During testing, verify both the application-side records and the transaction information available in the Razorpay Dashboard.

Step 16: Switch to Live Mode

Once your integration has been thoroughly tested:

Test Mode
    ↓
Complete KYC
    ↓
Switch to Live Mode
    ↓
Generate Live API Keys
    ↓
Update Backend Environment Variables
    ↓
Configure Live Webhook
    ↓
Start Accepting Real Payments
Enter fullscreen mode Exit fullscreen mode

Live API credentials must be used for real transactions. Test credentials are intended for simulated transactions.

Store Razorpay Credentials Securely

Production applications should store Razorpay credentials as environment variables:

RAZORPAY_KEY_ID=rzp_live_xxxxxxxxx
RAZORPAY_KEY_SECRET=xxxxxxxxxxxxxxxx
RAZORPAY_WEBHOOK_SECRET=xxxxxxxxxxxxxxxx
Enter fullscreen mode Exit fullscreen mode

Never expose the secret key in React code or commit sensitive credentials to GitHub or another public repository.

Razorpay React + Node.js Architecture

The complete architecture can be represented as:

                    CUSTOMER
                       │
                       ▼
                ┌─────────────┐
                │   React     │
                │  Frontend   │
                └──────┬──────┘
                       │
                  Create Order
                       │
                       ▼
                ┌─────────────┐
                │ Node.js API │
                │   Backend   │
                └──────┬──────┘
                       │
                Create Razorpay
                     Order
                       │
                       ▼
                ┌─────────────┐
                │  Razorpay   │
                │   Checkout  │
                └──────┬──────┘
                       │
                  Customer Pays
                       │
                       ▼
                 Payment Response
                       │
                       ▼
                ┌─────────────┐
                │   Backend   │
                │  Signature  │
                │ Verification│
                └──────┬──────┘
                       │
                       ▼
                 Update Database
                       │
                       ▼
                  Order Confirmed

                  Meanwhile

                    Razorpay
                       │
                       ▼
                    Webhook
                       │
                       ▼
                 Backend Database
Enter fullscreen mode Exit fullscreen mode

This architecture keeps sensitive payment operations on the server while allowing React to handle the customer-facing Checkout experience.

Important Razorpay Security Best Practices

When integrating Razorpay, keep these security practices in mind:

  • Keep the Razorpay Secret only on the backend.
  • Never create Razorpay orders directly from React.
  • Create a Razorpay Order for each payment.
  • Always verify the payment signature on the server.
  • Validate webhook signatures.
  • Use HTTPS in production.
  • Keep Test and Live credentials separate.
  • Do not mark an order as paid solely because the frontend reports success.
  • Confirm the appropriate payment status before fulfilling the order.

Razorpay Integration Checklist

Before launching your application, verify the following:

  • ☐ Create Razorpay Account
  • ☐ Complete KYC
  • ☐ Enable Test Mode
  • ☐ Generate Test API Keys
  • ☐ Install Razorpay SDK
  • ☐ Create Backend Order API
  • ☐ Create Razorpay Order
  • ☐ Integrate React Checkout
  • ☐ Receive Payment Response
  • ☐ Verify Payment Signature
  • ☐ Store Payment Details
  • ☐ Update Order Status
  • ☐ Configure Webhook
  • ☐ Verify Webhook Signature
  • ☐ Test Complete Payment Flow
  • ☐ Complete KYC
  • ☐ Switch to Live Mode
  • ☐ Generate Live API Keys
  • ☐ Configure Live Webhook
  • ☐ Start Accepting Real Payments

Conclusion

Integrating Razorpay into a React and Node.js application involves much more than simply adding a Pay Now button.

A secure implementation requires coordination between the React frontend, Node.js backend, Razorpay Checkout, your application database, and Razorpay Webhooks.

The recommended overall flow is:

Razorpay Account → KYC → Test Mode → API Keys → Backend Order → React Checkout → Payment → Signature Verification → Database Update → Webhook → Live Mode

Following this architecture helps create a structured payment integration while keeping sensitive credentials and payment verification on the backend.

Need Help With Payment Gateway Integration?

At Scode Software Solutions, we help businesses build and integrate web and mobile applications with secure payment workflows, backend APIs, and scalable application architectures.

If you're planning to build an e-commerce platform, service booking application, SaaS product, or custom business application, our development team can help you plan and implement the required technology stack.

Top comments (0)