DEV Community

Cover image for Razorpay Integration with MERN Stack (Complete Developer Guide)
Vijay Kumar
Vijay Kumar

Posted on

Razorpay Integration with MERN Stack (Complete Developer Guide)

#webdev #razorpay #ai #programming

Online payments are a core part of modern web applications. If you are building an e-commerce store, SaaS product, or marketplace in India, integrating Razorpay is one of the most common solutions.

In this guide, we’ll walk through a complete Razorpay integration using the MERN stack (MongoDB, Express, React, Node.js). By the end, you will understand how to create orders, open the checkout, verify payments, and secure your payment flow.

Why Use Razorpay?

Razorpay is a popular payment gateway used by thousands of startups and businesses in India. It supports multiple payment methods such as:

  • UPI
  • Credit / Debit Cards
  • Netbanking
  • Wallets
  • International cards

For developers, Razorpay provides a simple API and SDK that works well with Node.js applications.

MERN Stack Payment Flow

When integrating payments in a MERN application, the flow usually looks like this:

  1. User clicks Pay Now on the frontend (React).
  2. Your backend (Node.js + Express) creates an order using the Razorpay API.
  3. The frontend opens Razorpay Checkout.
  4. The user completes the payment.
  5. Razorpay returns a payment ID and signature.
  6. Your backend verifies the payment signature.
  7. If valid, you update the order in MongoDB.

This verification step is critical for preventing fraud.

Step 1: Install Razorpay in Node.js

First install the Razorpay SDK.

npm install razorpay
Enter fullscreen mode Exit fullscreen mode

Now create a Razorpay instance in your backend.

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

You can get these API keys from the Razorpay Dashboard.

Step 2: Create an Order (Backend)

Before opening checkout, your backend must create a Razorpay order.

app.post("/create-order", async (req, res) => {
  const options = {
    amount: 50000,
    currency: "INR",
    receipt: "order_rcptid_11"
  };

  const order = await razorpay.orders.create(options);
  res.json(order);
});
Enter fullscreen mode Exit fullscreen mode

Important fields:

  • amount → in the smallest currency unit (₹500 = 50000 paise)
  • currency → usually INR
  • receipt → your internal order reference

Step 3: Open Razorpay Checkout (React)

After receiving the order from the backend, open the Razorpay checkout.

const options = {
  key: "RAZORPAY_KEY_ID",
  amount: order.amount,
  currency: order.currency,
  order_id: order.id,
  handler: function (response) {
    console.log(response);
  }
};

const rzp = new window.Razorpay(options);
rzp.open();
Enter fullscreen mode Exit fullscreen mode

The checkout popup allows the user to complete the payment using any available method.

Step 4: Verify Payment (Backend)

Never trust the frontend payment response directly.

You must verify the signature on your server.

const crypto = require("crypto");

const generatedSignature = crypto
  .createHmac("sha256", process.env.RAZORPAY_KEY_SECRET)
  .update(order_id + "|" + payment_id)
  .digest("hex");

if (generatedSignature === razorpay_signature) {
  console.log("Payment verified");
}
Enter fullscreen mode Exit fullscreen mode

If the signature matches, the payment is legitimate.

Step 5: Save Payment in MongoDB

After verification, store the payment in your database.

Example fields:

  • orderId
  • paymentId
  • amount
  • status
  • userId

This helps with refunds, reporting, and order tracking.

Best Practices for Razorpay Integration

Here are some important tips when integrating Razorpay in production:

  • Always verify payment signatures on the backend
  • Store order and payment details in your database
  • Use environment variables for API keys
  • Implement Razorpay webhooks for payment updates
  • Handle failed payments properly

Common Razorpay Issues Developers Face

Many developers run into these problems:

  • Currency mismatch errors
  • Payment verification failure
  • Webhook signature errors
  • Checkout not opening in React apps

Most of these issues happen because of incorrect order creation or signature verification.

Final Thoughts

Integrating Razorpay with the MERN stack is straightforward once you understand the correct payment flow. The key steps are:

  1. Create the order on the backend
  2. Open checkout on the frontend
  3. Verify the payment signature
  4. Save the transaction in the database

Once implemented correctly, Razorpay becomes a reliable payment solution for Indian startups and global businesses.

If you’re facing Razorpay integration issues with MERN, Node.js, or Shopify, feel free to reach out.Fiverr | upworkI regularly help businesses debug and fix payment gateway problems in production systems.

Top comments (0)