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?
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
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
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:
- Take the screenshot of the QR code
- Open the UPI App
- Select the screenshot (with the QR code) from the gallery
- 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.
