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.
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.
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.