Adding UPI to Any Web App by Aditya Tyagi

Add UPI To Any Web App

Aditya Tyagi
3 min readDec 12, 2022


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.

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…



Aditya Tyagi

Full Stack Engineer | JavaScript | TypeScript | React | CSS