Logo
Jignesh
Back to blogs

How to Integrate Razorpay in Next js 15 for UPI Payments

April 20, 2025
5 min read
How to Integrate Razorpay in Next js 15 for UPI Payments

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?


  1. Razorpay offers quick UPI payments—a must-have for Indian customers.
  2. You can provide a seamless in-app payment experience.
  3. It supports secure transactions and real-time payment confirmations.
  4. With Next.js 15’s App Router and server actions, integrating APIs is even easier.


Prerequisites


Make sure you have the following ready:


  1. A Next.js 15 project set up (npx create-next-app@latest)
  2. Razorpay account and access to API keys
  3. Node.js and npm/yarn installed
  4. Basic knowledge of React and TypeScript (optional)


Step 1: Set Up Razorpay Keys


  1. Go to the Razorpay Dashboard.
  2. Navigate to Settings → API Keys and generate your key pair.
  3. 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:


npm install razorpay


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:


  1. Generated Razorpay API keys and stored them securely.
  2. Created a backend route for order generation.
  3. Added Razorpay Checkout script.
  4. 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.

next js 15 razorpay integrationrazorpay upi next jsrazorpay with next js app routerupi payment next jsrazorpay next js 2025how to integrate razorpay in next js

Recent Insights

Thoughts efficiently shared on web development and tech.

View All Posts
Cursor vs VS Code vs Antigravity – Which AI Code Editor Should You Choose?
February 14, 2026
6 min read

Cursor vs VS Code vs Antigravity – Which AI Code Editor Should You Choose?

Read Article
Which VPS Is Best for Hosting OpenClaw and n8n?
February 7, 2026
5 min read

Which VPS Is Best for Hosting OpenClaw and n8n?

Read Article
Which Framework You Should Choose in 2026?
February 3, 2026
8 min read

Which Framework You Should Choose in 2026?

Read Article
5 App Ideas That Feel Real and Could Actually Work
January 19, 2026
5 min read

5 App Ideas That Feel Real and Could Actually Work

Read Article