How to Integrate UPI Payment Gateway in Website

Introduction

Visitors often abandon carts at checkout when they can’t pay quickly. With UPI payments soaring across India, you risk losing customers if you don’t offer this option. In this guide, you’ll learn how to integrate UPI payment gateway in website step by step, so you never miss a sale.

Why Offer UPI Payments on Your Website?

Benefits of UPI integration on websites

1. Market adoption & user trust
   • UPI boasts over 300 million active users.
   • It offers real-time settlement with zero chargebacks.
   • Users trust NPCI-backed rails for security.
2. Cost advantages vs. cards & net-banking
   • Merchants pay as low as 0.25% per txn.
   • Compare fees in this table:
   Payment MethodTransaction Fee (%)Credit/Debit1.5 – 2.0Net-Banking0.5 – 1.0UPI0.25
3. Mobile-first checkout experience
   • One-tap payments via deep links.Fewer form fields boost conversions.Visual: Example code block for invoking UPI intent:
   const options = { upi: { payeeVPA: "merchant@upi", amount: "499.00", } }; UpiSDK.init(options).then(handleSuccess).catch(handleError);

See our guide on Payment Gateway Charges
NPCI UPI overview: https://www.npci.org.in/

---

Prerequisites & Account Setup

how to integrate UPI payment gateway in website
Before coding, you need:

1. Selecting a UPI gateway provider
   • Compare Razorpay, Paytm, Cashfree.
   • Visual: Feature-matrix table: FeatureRazorpayPaytmCashfreeMDR Rate0.30%0.40%0.25%Settlement TimeT+1T+1T+0Sandbox Available✔️✔️✔️
2. Registering with NPCI / your provider
   • Gather KYC: company PAN, bank proof, director IDs.
   • Send email per this template: Subject: UPI Merchant RegistrationHi [Provider],I’m [Name], registering my website [yourdomain.com].
     Please find attached PAN card and bank statement.Regards,
     [Your Name]
3. Generating API credentials
   • Note down client ID & secret.
   • Set your webhook (e.g., https://yourdomain.com/webhook).
   • Visual: Screenshot placeholder of dashboard showing credentials.
4. Razorpay UPI docs: https://razorpay.com/docs/upi/

---

Step-by-Step Integration Guide

Integrate UPI payment gateway in website: Code walkthrough

Front-end setup

• Include the JavaScript SDK: <script src="https://cdn.upisdk.com/sdk.js"></script>
• Initialize the payment modal: payment = new UpiSDK({ key: "YOUR_CLIENT_KEY", amount: 250.00, merchantName: "Your Shop" }); payment.open();

Back-end endpoint creation

• Create /create-order route (Node.js example): app.post("/create-order", (req, res) => { const order = { amount: req.body.amount, currency: "INR" }; gateway.orders.create(order).then(data => { res.json(data); }); });
• Verify signatures: const crypto = require("crypto"); function verifySignature(body, signature, secret) { const expected = crypto.createHmac("sha256", secret).update(body).digest("hex"); return expected === signature; }

Handling payment callbacks

• Route /webhook for notifications: app.post("/webhook", (req, res) => { if (verifySignature(req.rawBody, req.headers["x-signature"], SECRET)) { // update order status res.status(200).send("OK"); } else { res.status(400).send("Invalid signature"); } });

---

Testing & Go-Live Checklist

UPI gateway website integration testing

1. Sandbox vs. production modes
   • Switch endpoints:
     • Sandbox: https://sandbox.upi.provider/api
     • Production: https://api.upi.provider
   • Visual: Table of test vs. live creds: ModeClient KeySecretSandboxtest_key_123test_secret_abcLivelive_key_456live_secret_xyz
2. End-to-end test cases
   • Successful payment
   • Failed payment (insufficient funds)
   • Pending (network delay)
   • Visual: Link to sample test plan spreadsheet.
3. Monitoring & compliance
   • Download NPCI settlement reports daily.
   • Log all webhooks with timestamps.
   • Use idempotency keys to avoid duplicates.

UPI Payment Gateway Integration FAQs

Why is my UPI payment pending?
A mismatch in the VPA or network issues can cause delays. Check the transaction status API.

How to handle duplicate callbacks?
Use an idempotency key:

const idempotencyKey = crypto.randomUUID();

Store and reject repeats.

Can I support multiple UPI apps?
Yes. Use deep-link URIs:

App	URI Scheme
Google Pay	upi://pay?pa=...
PhonePe	phonepe://processTransaction?

---

Conclusion

You’ve seen why UPI boosts conversions, how to set up accounts, implement code, and test thoroughly. Now, you’re ready to deploy.

Ready to boost conversions? Start your UPI integration today!