I was recently building a project that required payment processing, but when I tried to integrate Razorpay, I realized most available tutorials were outdated and still focused on the legacy Pages router. I spent some time adapting the implementation to work correctly with Server Components and the modern App Router architecture, and here is the configuration that finally worked for me. ## 0. Prerequisites - [Next.js 13](https://nextjs.org/) - [Razorpay NPM Package](https://www.npmjs.com/package/razorpay) Install the Razorpay NPM package: ```bash npm install razorpay ``` ## 1. Create API Route Create an API route in `app/api/order/create/route.ts`: ```ts import { NextResponse } from "next/server" import Razorpay from "razorpay" import { v4 as uuid } from "uuid" const instance = new Razorpay({ key_id: process.env.RAZORPAY_KEY_ID, key_secret: process.env.RAZORPAY_KEY_SECRET, }) export async function GET(request: Request) { const { searchParams } = new URL(request.url) const totalAmount = Number(searchParams.get("amount")) // in paisa const amount = totalAmount * 100 const options = { amount: amount.toString(), currency: "INR", receipt: uuid(), } const order = await instance.orders.create(options) return NextResponse.json({ message: "success", order }) } ``` Create one more route in `app/api/order/verify/route.ts`: ```ts import { NextResponse } from "next/server" import Razorpay from "razorpay" import crypto from "crypto" import Order from "@/models/OrderModel" import { v4 as uuid } from "uuid" import { connectDB } from "@/lib/mongodb" const instance = new Razorpay({ key_id: process.env.RAZORPAY_KEY_ID, key_secret: process.env.RAZORPAY_KEY_SECRET, }) export async function POST(req, res) { const { razorpayOrderId, razorpaySignature, razorpayPaymentId, email } = await req.json() const body = razorpayOrderId + "|" + razorpayPaymentId const expectedSignature = crypto .createHmac("sha256", process.env.RAZORPAY_KEY_SECRET) .update(body.toString()) .digest("hex") const isAuthentic = expectedSignature === razorpaySignature if (!isAuthentic) { return NextResponse.json( { message: "invalid payment signature", error: true }, { status: 400 } ) } // connect db and update data await connectDB() await Order.findOneAndUpdate({ email: email }, { hasPaid: true }) return NextResponse.json( { message: "payment success", error: false }, { status: 200 } ) } ``` ## 2. Add Razorpay Script to Root Layout Add the Razorpay script to the root layout in `app/layout.tsx`: ```tsx import Script from "next/script" import "./globals.css" export default function RootLayout({ children }) { return ( <> {children}