🚀 Easy Way to Integrate Razorpay Payment Gateway (Step-by-Step Guide)

You can easily go through the Razorpay official payment documentation for detailed insights, but here’s a simplified step-by-step guide to help you integrate it quickly.

Accepting payments online is essential for modern web applications, and Razorpay makes it super easy. In this guide, I'll walk you through the simplest way to integrate Razorpay into your website step by step.

By the end of this tutorial, you'll have a working Razorpay payment gateway in your application! 🎉

---

🔹 Step 1: Create a Razorpay Account

First, sign up on Razorpay and log in to your dashboard.

• Go to the API Keys section under Settings.

• Generate Live and Test Mode keys.

• Save the KEY_ID and KEY_SECRET—you'll need them later.

---

🔹 Step 2: Install Razorpay SDK

For Node.js (Backend), install the Razorpay package:

shCopyEditnpm install razorpay

For Frontend (React/Vanilla JS), load the Razorpay checkout script:

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

---

🔹 Step 3: Create a Razorpay Order (Backend)

In your Node.js backend, set up a /create-order API route:

jsCopyEditconst Razorpay = require("razorpay");
const express = require("express");
const app = express();
app.use(express.json());

const razorpay = new Razorpay({
  key_id: "YOUR_KEY_ID",
  key_secret: "YOUR_KEY_SECRET",
});

app.post("/create-order", async (req, res) => {
  const options = {
    amount: req.body.amount * 100, // Amount in paise
    currency: "INR",
    receipt: "order_rcptid_11",
  };

  try {
    const order = await razorpay.orders.create(options);
    res.json({ orderId: order.id });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(5000, () => console.log("Server running on port 5000"));

✅ This API will generate an order for Razorpay to process the payment.

---

🔹 Step 4: Integrate Razorpay in Frontend

In React, call the API and open Razorpay's checkout window:

jsCopyEditconst handlePayment = async () => {
  const response = await fetch("http://localhost:5000/create-order", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ amount: 500 }), // Amount in INR
  });

  const { orderId } = await response.json();

  const options = {
    key: "YOUR_KEY_ID", 
    amount: 50000, // Amount in paise
    currency: "INR",
    name: "Your Business Name",
    description: "Test Transaction",
    order_id: orderId,
    handler: function (response) {
      alert("Payment Successful! Payment ID: " + response.razorpay_payment_id);
    },
    theme: { color: "#3399cc" },
  };

  const rzp = new window.Razorpay(options);
  rzp.open();
};

return <button onClick={handlePayment}>Pay Now</button>;

✅ Clicking "Pay Now" will open Razorpay's checkout page.

---

🔹 Step 5: Payment Status - Understanding Capture, Pending & Successful Payments

Once the payment is done, Razorpay returns a payment status. Here's how it works:

✅ Capturing Payment (Backend)

If your Razorpay account is set to manual capture, you must capture the payment using an API:

jsCopyEditapp.post("/capture-payment", async (req, res) => {
  const paymentId = req.body.paymentId;

  try {
    const captureResponse = await razorpay.payments.capture(paymentId, 50000, "INR");
    res.json({ success: true, response: captureResponse });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

✅ If your Razorpay settings use "Auto Capture," this step is not needed.

---

🔹 Step 6: Verify Payment on Server

Once the payment is done, Razorpay sends back a payment ID. Verify it on your backend:

jsCopyEditconst crypto = require("crypto");

app.post("/verify-payment", (req, res) => {
  const { razorpay_order_id, razorpay_payment_id, razorpay_signature } = req.body;

  const generated_signature = crypto
    .createHmac("sha256", "YOUR_KEY_SECRET")
    .update(razorpay_order_id + "|" + razorpay_payment_id)
    .digest("hex");

  if (generated_signature === razorpay_signature) {
    res.json({ success: true, message: "Payment verified successfully" });
  } else {
    res.status(400).json({ success: false, message: "Payment verification failed" });
  }
});

---

🔹 Step 7: Understanding Razorpay Payment Flow with an Image

To make it easier, here’s a payment flow diagram explaining the process:

1. User clicks "Pay Now" → Razorpay Checkout opens

2. User completes payment → Razorpay sends order_id

3. Razorpay verifies payment → Sends response

4. Backend verifies payment using signature

5. Payment is marked as Captured/Pending/Failed

---

🎉 Done!

You now have a working Razorpay payment gateway integrated into your website! 🚀

🔥 What’s Next?

• Save the payment details in your database.

• Handle webhooks for automated responses.

• Switch to Live Mode before launching.

Got questions? Let me know in the comments! 💬