Add UPI to any Web App by Aditya Tyagi

Add UPI To Any Web App

The easiest way to integrate UPI in your web apps

Earlier this week I had to add an instant payment receiving method on one of the side projects I have been pursuing.

In India, we have been using the most advanced form of payment transaction method called Unified Payments Interface or UPI.

What is UPI?

Official UPI Logo
Official UPI Logo

From the official docs:

Unified Payments Interface (UPI) is a system that powers multiple bank accounts into a single mobile application (of any participating bank), merging several banking features, seamless fund routing & merchant payments into one hood. It also caters to the “Peer to Peer” collect request which can be scheduled and paid as per requirement and convenience.
NPCI.org.in

QR Code

Photo by Toa Heftiba on Unsplash
Photo by Toa Heftiba on Unsplash

The easiest way to receive payments was to add the QR code which is linked to my UPI ID. A UPI ID is a virtual payment address for every UPI user. Your UPI ID is an address that identifies you on UPI (typically yourname@bankname).

Hence, I got my QR code and integrated in my web-app.

Issue with QR Code

Scan the QR code to pay
Example QR code on the web-app for desktop

The main issue with QR code was that, people accessing my web app from desktop can easily make use of the QR code, but the ones on their mobile devices — CANNOT! 

Users using the web app on their laptops can scan the QR code and make the payments. But for the ones on their mobile devices, they have to:

  1. Take the screenshot of the QR code
  2. Open the UPI App
  3. Select the screenshot (with the QR code) from the gallery
  4. Pay

From a user experience point of view, this is not only cumbersome but also adds quite a friction. This will cause and was causing a dent in the payments I was receiving.

Solution for Mobile Apps: Redirect to UPI App

The easiest solution for this was to show an additional button that redirects the user to open UPI apps.

<a href="upi://pay?pa=yourname@bankname&cu=INR">
<button type="button">Click to Pay</button>
</a>

Clicking on this button will open the option to pay via the UPI app installed on your phone.

Open UPI app
Pay with UPI apps

Here, as you can see, I have 4 apps that provide option to pay via UPI.


Thanks for reading ❤

Want to connect?
Follow me on Twitter and LinkedIn or reach out in the comments below!
My name is Aditya. I am a Senior Software Engineer - II (Frontend). I blog about web development, health and personal finance.

Leave a Reply

Your email address will not be published. Required fields are marked *