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?

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:

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 (

<head>

</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>

);

}

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.

How to Integrate Razorpay in Next js 15 for UPI Payments

Why Use Razorpay with Next.js 15?

Prerequisites

Step 1: Set Up Razorpay Keys

Step 2: Install Razorpay SDK

Step 3: Create Razorpay Order API (App Router)

Step 4: Include Razorpay Script

Step 5: Create a Payment Button Component

Step 6: Use It in a Page

Summary and Key Takeaways

Recent Blogs

How to Integrate Razorpay in Next js 15 for UPI Payments

How to Survive as a Developer in the AI Era of V0, Lovable & Replit

How to Fix Hydration Mismatch Error in Next js?

Top 10 UI Component Libraries for React in 2025