How to integrate Razorpay into your website (Next.js, 2026)

RAZORPAY_KEY_ID=rzp_test_xxxxxxxxxx
RAZORPAY_KEY_SECRET=xxxxxxxxxxxxxxxxx
RAZORPAY_WEBHOOK_SECRET=a-long-random-string

# Only the KEY_ID needs to be exposed to the browser
NEXT_PUBLIC_RAZORPAY_KEY_ID=rzp_test_xxxxxxxxxx

pnpm add razorpay
# or: npm i razorpay

import { NextResponse } from "next/server";
import Razorpay from "razorpay";
import { z } from "zod";

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

const Body = z.object({
  amount: z.number().int().positive(), // in PAISE (₹1 = 100)
  receipt: z.string().max(40),         // your internal order id
});

export async function POST(req: Request) {
  const parsed = Body.safeParse(await req.json());
  if (!parsed.success) {
    return NextResponse.json({ error: "Invalid body" }, { status: 400 });
  }
  const { amount, receipt } = parsed.data;

  // ALWAYS compute the amount on the server. Never trust the client.
  const order = await razorpay.orders.create({
    amount,
    currency: "INR",
    receipt,
    notes: { source: "web-checkout" },
  });

  return NextResponse.json({
    orderId: order.id,
    amount: order.amount,
    currency: order.currency,
  });
}

"use client";
import Script from "next/script";
import { useState } from "react";

declare global {
  interface Window {
    Razorpay: new (options: RazorpayOptions) => { open: () => void };
  }
}

type RazorpayOptions = {
  key: string;
  amount: number;
  currency: string;
  name: string;
  order_id: string;
  handler: (resp: {
    razorpay_payment_id: string;
    razorpay_order_id: string;
    razorpay_signature: string;
  }) => void;
  prefill?: { name?: string; email?: string; contact?: string };
  theme?: { color?: string };
};

export default function PayButton({
  amountPaise,
  receipt,
}: {
  amountPaise: number;
  receipt: string;
}) {
  const [loading, setLoading] = useState(false);

  async function handlePay() {
    setLoading(true);
    try {
      const r = await fetch("/api/payments/create-order", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ amount: amountPaise, receipt }),
      });
      const { orderId, amount, currency } = await r.json();

      const rzp = new window.Razorpay({
        key: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID!,
        amount,
        currency,
        name: "CruxBit",
        order_id: orderId,
        theme: { color: "#A855F7" },
        handler: async (resp) => {
          const verify = await fetch("/api/payments/verify", {
            method: "POST",
            headers: { "content-type": "application/json" },
            body: JSON.stringify(resp),
          });
          if (verify.ok) window.location.href = "/thank-you";
          else window.location.href = "/payment-failed";
        },
      });
      rzp.open();
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      <Script src="https://checkout.razorpay.com/v1/checkout.js"
              strategy="afterInteractive" />
      <button onClick={handlePay} disabled={loading}>
        {loading ? "Loading…" : "Pay now"}
      </button>
    </>
  );
}

import { NextResponse } from "next/server";
import crypto from "node:crypto";

export async function POST(req: Request) {
  const {
    razorpay_order_id,
    razorpay_payment_id,
    razorpay_signature,
  } = await req.json();

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

  const ok = crypto.timingSafeEqual(
    Buffer.from(expected, "hex"),
    Buffer.from(razorpay_signature, "hex")
  );

  if (!ok) {
    return NextResponse.json({ ok: false }, { status: 400 });
  }

  // Mark the order as "verified" in your DB.
  // Do NOT fulfil here yet — wait for the webhook.
  return NextResponse.json({ ok: true });
}

import { NextResponse } from "next/server";
import crypto from "node:crypto";

// IMPORTANT: read the raw body for signature verification.
// Don't use req.json() before verifying — re-serialised JSON
// can differ from what Razorpay signed.
export async function POST(req: Request) {
  const raw = await req.text();
  const signature = req.headers.get("x-razorpay-signature") ?? "";

  const expected = crypto
    .createHmac("sha256", process.env.RAZORPAY_WEBHOOK_SECRET!)
    .update(raw)
    .digest("hex");

  const ok = crypto.timingSafeEqual(
    Buffer.from(expected, "hex"),
    Buffer.from(signature, "hex")
  );
  if (!ok) return NextResponse.json({ ok: false }, { status: 400 });

  const event = JSON.parse(raw);

  // Idempotency: store event.id and skip if seen before.
  // (Razorpay retries up to 24 hours.)
  if (await alreadyProcessed(event.id)) {
    return NextResponse.json({ ok: true });
  }

  switch (event.event) {
    case "payment.captured": {
      const payment = event.payload.payment.entity;
      await fulfilOrder({
        orderId: payment.order_id,
        paymentId: payment.id,
        amount: payment.amount,
      });
      break;
    }
    case "payment.failed":
      await markFailed(event.payload.payment.entity.order_id);
      break;
    case "refund.processed":
      await markRefunded(event.payload.refund.entity);
      break;
  }

  await recordProcessed(event.id);
  return NextResponse.json({ ok: true });
}

// Stubs — wire to your DB
async function alreadyProcessed(_id: string) { return false; }
async function recordProcessed(_id: string) { /* … */ }
async function fulfilOrder(_p: { orderId: string; paymentId: string;
                                  amount: number }) { /* … */ }
async function markFailed(_orderId: string) { /* … */ }
async function markRefunded(_r: unknown) { /* … */ }

// Server-only utility
import Razorpay from "razorpay";

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

export async function refundPayment(paymentId: string, amountPaise: number) {
  return razorpay.payments.refund(paymentId, {
    amount: amountPaise,           // omit for full refund
    speed: "optimum",              // or "normal"
    notes: { reason: "customer-request" },
  });
}

# Cloudflare tunnel (free, no signup)
npx cloudflared tunnel --url http://localhost:3000

# or ngrok if you prefer
ngrok http 3000

# Take the HTTPS URL and set it as your webhook URL in the dashboard
# while you're testing.