How do I integrate UPI payments in Next.js?

You can integrate UPI in Next.js by calling a payment gateway API from your Server Actions or API routes, generating a dynamic QR code on the client, and listening for webhook confirmations.

Can I use UPI intent links in a React PWA?

Yes. If your user is on a mobile device, you can generate intent links (upi://pay) that directly open installed UPI apps like GPay, PhonePe, or Paytm from your React app.

How to Integrate UPI Payments in Next.js / React (2026 Developer Guide)

#nextjs payment gateway #react upi integration #upi payment gateway

Next.js has become the default framework for building modern web applications. But when it comes to collecting payments in India, developers often get stuck with slow KYC processes and heavy SDKs from traditional gateways.

In this guide, we'll build a lightweight, 0% fee UPI checkout in Next.js using VyaparGateway. We will cover server-side order creation, client-side QR generation, and secure webhook verification.

Why Traditional Gateways Fail in Modern Next.js Apps

Most payment gateways offer bulky React SDKs that don't play well with Next.js App Router and Server Components. On top of that, they charge 2% fees on UPI transactions, which should technically be free under Indian regulations.

Step 1: Creating the Order (Server-Side)

With Next.js Server Actions or Route Handlers, you can securely call the VyaparGateway API to create an order without exposing your API keys to the client.

Just make a POST request to the `/api/v1/orders` endpoint with the amount and a unique idempotency key. The API will respond with a payment intent URL and a dynamic QR code payload.

Step 2: Rendering the QR Code in React

Once you pass the order data back to your client component, you can use a library like `qrcode.react` to render the UPI intent string into a scannable QR code. For mobile users, you can directly wrap a button with an `href` pointing to the `upi://pay` intent link, which instantly opens apps like GPay or PhonePe.

Step 3: Webhook Verification

The most important part of any payment flow is securing the webhook. Create a route handler in Next.js (e.g., `app/api/webhooks/route.ts`) to listen for incoming POST requests from VyaparGateway. Always verify the HMAC-SHA256 signature provided in the headers using your webhook secret to ensure the payload is authentic before updating the database.

Conclusion

By moving the heavy lifting to the server and relying on standard UPI intents on the client, you can build a lightning-fast, zero-fee payment experience in Next.js.