Integrating a payment gateway like Razorpay into your Next.js 15 project is essential if you're building a real-world application that requires accepting money from users—whether it’s for subscriptions, e-commerce, donations, or services.
Razorpay supports various payment methods, including UPI, making it a go-to choice for developers in India.
In this tutorial, you'll learn how to integrate Razorpay's UPI payments into a Next.js 15 app using the App Router.
Why Use Razorpay with Next.js 15?
- Razorpay offers quick UPI payments—a must-have for Indian customers.
- You can provide a seamless in-app payment experience.
- It supports secure transactions and real-time payment confirmations.
- With Next.js 15’s App Router and server actions, integrating APIs is even easier.
Prerequisites
Make sure you have the following ready:
- A Next.js 15 project set up (
npx create-next-app@latest) - Razorpay account and access to API keys
- Node.js and npm/yarn installed
- Basic knowledge of React and TypeScript (optional)
Step 1: Set Up Razorpay Keys
- Go to the Razorpay Dashboard.
- Navigate to Settings → API Keys and generate your key pair.
- In your Next.js project, create a
.env.local file and add:
NEXT_PUBLIC_RAZORPAY_KEY_ID=your_public_key
RAZORPAY_KEY_SECRET=your_secret_key
Don't expose your secret key on the frontend.
Step 2: Install Razorpay SDK
Install Razorpay’s Node.js SDK for order creation:
Step 3: Create Razorpay Order API (App Router)
In Next.js 15 App Router, APIs live in the app/api/ folder. Create this file:
app/api/razorpay/route.ts
import { NextResponse } from 'next/server';
import Razorpay from 'razorpay';
export async function POST(request: Request) {
const body = await request.json();
const amount = body.amount;
const razorpay = new Razorpay({
key_id: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID!,
key_secret: process.env.RAZORPAY_KEY_SECRET!,
});
const options = {
amount: amount * 100, // amount in paise
currency: 'INR',
receipt: 'receipt_order_' + Date.now(),
};
try {
const order = await razorpay.orders.create(options);
return NextResponse.json(order);
} catch (err) {
return NextResponse.json({ error: 'Order creation failed' }, { status: 500 });
}
}
Step 4: Include Razorpay Script
In your layout file, add the Razorpay script tag:
app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<Script src="https://checkout.razorpay.com/v1/checkout.js" />
</head>
<body>{children}</body>
</html>
);
}
Step 5: Create a Payment Button Component
components/PaymentButton.tsx
'use client';
import { useState } from 'react';
const PaymentButton = () => {
const [loading, setLoading] = useState(false);
const handlePayment = async () => {
setLoading(true);
const res = await fetch('/api/razorpay', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ amount: 500 }), // Rs. 500
});
const order = await res.json();
const options = {
key: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID,
amount: order.amount,
currency: order.currency,
name: 'My App',
description: 'UPI Payment',
order_id: order.id,
handler: function (response: any) {
alert('Payment Successful: ' + response.razorpay_payment_id);
},
prefill: {
name: 'John Doe',
email: 'john@example.com',
contact: '9999999999',
},
theme: {
color: '#6366f1',
},
};
const razorpay = new (window as any).Razorpay(options);
razorpay.open();
setLoading(false);
};
return (
<button
onClick={handlePayment}
disabled={loading}
className="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700"
>
{loading ? 'Processing...' : 'Pay with UPI'}
</button>
);
};
export default PaymentButton;
Step 6: Use It in a Page
In any page (e.g., app/page.tsx), use the payment button:
import PaymentButton from '@/components/PaymentButton';
export default function HomePage() {
return (
<main className="flex items-center justify-center min-h-screen">
<PaymentButton />
</main>
);
}
Summary and Key Takeaways
You’ve now learned how to integrate Razorpay UPI payments in a modern Next.js 15 application using the App Router.
What you did:
- Generated Razorpay API keys and stored them securely.
- Created a backend route for order generation.
- Added Razorpay Checkout script.
- Built a reusable UPI payment button on the frontend.
This setup is flexible and can be extended to include features like success pages, webhooks, and payment verification.
