Razorpay

💳 Razorpay Integration

This snippet demonstrates how to integrate Razorpay payments into your Next.js application using both frontend and backend API routes.

🧠 Client-side Code

import Head from "next/head";
import styles from "../styles/Home.module.css";

export default function Home() {
  const loadRazorpay = () => {
    return new Promise((resolve) => {
      const script = document.createElement("script");
      script.src = "https://checkout.razorpay.com/v1/checkout.js";
      script.onload = () => resolve(true);
      script.onerror = () => resolve(false);
      document.body.appendChild(script);
    });
  };

  async function displayRazorpay() {
    const res = await loadRazorpay();
    if (!res) {
      alert("Razorpay SDK failed to load");
      return;
    }

    const data = await fetch("/api/razorpay", { method: "POST" }).then((r) =>
      r.json()
    );

    const options = {
      key: process.env.RAZORPAY_KEY,
      name: "Eldora UI",
      currency: data.currency,
      amount: data.amount,
      order_id: data.id,
      description: "Thank you for your test donation",
      image: "https://karthikmudunuri.io/logo.png",
      handler: function (response) {
        alert(response.razorpay_payment_id);
        alert(response.razorpay_order_id);
        alert(response.razorpay_signature);
      },
      prefill: {
        name: "karthikmudunuri",
        email: "karthikmudunuri999@gmail.com",
        contact: "9179661999",
      },
    };

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

  return (
    <div className={styles.container}>
      <Head>
        <title>Razorpay Integration</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to{" "}
          <a href="https://github.com/karthikmudunuri">
            Razorpay Payments with Next.js
          </a>
        </h1>

        <div className={styles.makePayment}>
          <a onClick={displayRazorpay}>
            <h3>Make Payment &rarr;</h3>
          </a>
        </div>
      </main>
    </div>
  );
}

/api/razorpay.ts

const Razorpay = require("razorpay");
const shortid = require("shortid");

export default async function handler(req, res) {
  if (req.method === "POST") {
    const razorpay = new Razorpay({
      key_id: process.env.RAZORPAY_KEY,
      key_secret: process.env.RAZORPAY_SECRET,
    });

    const payment_capture = 1;
    const amount = 9999;
    const currency = "INR";

    const options = {
      amount: (amount * 100).toString(),
      currency,
      receipt: shortid.generate(),
      payment_capture,
    };

    try {
      const response = await razorpay.orders.create(options);
      res.status(200).json({
        id: response.id,
        currency: response.currency,
        amount: response.amount,
      });
    } catch (err) {
      console.log(err);
      res.status(400).json(err);
    }
  }
}

Usage

Create an Account on Razorpay

Go to Razorpay and sign up for a free account.
2
Generate API Keys
Head over to Razorpay Dashboard to get your test mode API keys.
3
Set Up Environment Variables

Create a .env.local file:

RAZORPAY_KEY=your_test_key_id
RAZORPAY_SECRET=your_test_key_secret

The frontend loads Razorpay SDK dynamically and calls your backend /api/razorpay to fetch the order_id.
When you’re ready, switch your API keys from test to live in the dashboard.

💳 Razorpay Integration

🧠 Client-side Code

Usage

Create an Account on Razorpay

Generate API Keys

Set Up Environment Variables