How to Integrate UPI Payments in Next.js

Prerequisites

• A MyMobPay account — sign up free
• API keys from your dashboard (Settings → API Keys)
• Basic familiarity with Next.js App Router and API routes

Step 1: Install the SDK

MyMobPay provides official SDKs for multiple languages. For Next.js projects, we recommend the Node.js SDK:

# Using npm
npm install @mymobpay/node

# Or yarn
yarn add @mymobpay/node

Step 2: Initialize the Client

Create a singleton client instance in a dedicated module file:

// lib/mymobpay.js
import { MyMobPay } from '@mymobpay/node';

export const mymobpay = new MyMobPay({
  apiKey: process.env.MYMOBPAY_SECRET_KEY,
  webhookSecret: process.env.MYMOBPAY_WEBHOOK_SECRET,
});

Step 3: Create a Payment Order

In your Next.js API route, create a payment order when the user checks out:

// app/api/create-order/route.ts

import { NextResponse } from 'next/server';
import { mymobpay } from '@/lib/mymobpay';

export async function POST(req: Request) {
  const { amount, orderId, customerEmail } = await req.json();

  const order = await mymobpay.orders.create({
    amount,       // in paise (e.g., 149900 = ₹1,499)
    orderId,
    customerEmail,
    description: 'Premium Plan Subscription',
  });

  return NextResponse.json({ qrString: order.qrString, intentUrl: order.intentUrl });
}

Step 4: Display the Payment QR / Link

The response includes a qrString and intentUrl. Display the QR code using any QR library, or redirect the customer to the intent URL for an in-app UPI payment experience.

// Example: render QR in React
import QRCode from 'react-qr-code';

export default function PaymentQR({ qrString }) {
  return (
    <QRCode
      value={qrString}
      size={256}
      bgColor="#FFFFFF"
      fgColor="#0B192C"
    />
  );
}

Step 5: Handle Webhooks for Auto-Verification

Set up a webhook endpoint to receive automatic payment notifications. MyMobPay sends HMAC-SHA256 signed events that you should verify before processing.

// app/api/webhook/route.ts

import { NextResponse } from 'next/server';
import { mymobpay } from '@/lib/mymobpay';

export async function POST(req: Request) {
  const signature = req.headers.get('x-mymobpay-signature');
  const body = await req.text();

  const event = mymobpay.webhooks.constructEvent(body, signature);

  switch (event.type) {
    case 'payment.settled':
      console.log(`Payment ${event.data.orderId} settled: ₹${event.data.amount}`);
      break;
  }

  return NextResponse.json({ ok: true });
}

Environment Variables

Add these to your .env.local file:

MYMOBPAY_SECRET_KEY=sec_live_your_api_key_here
MYMOBPAY_WEBHOOK_SECRET=whsec_your_webhook_secret_here

cURL Alternative

If you prefer not to use the SDK, you can call the REST API directly:

curl -X POST https://api.mymobpay.tech/v1/orders \
  -H "Authorization: Bearer sec_live_..." \
  -H "Content-Type: application/json" \
  -d '{"amount": 149900, "orderId": "ORD_2026_001", "customerEmail": "user@example.com"}'

That's It

You now have a fully functional UPI payment integration in your Next.js app. The customer pays via any UPI app, the money arrives in your bank account instantly, and your system receives an automatic webhook notification. No middleware, no escrow, no per-transaction fees.

Full API documentation and additional language SDKs (Python, PHP, Flutter, React Native) are available in your MyMobPay dashboard.