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

--

--

Aditya Tyagi

Full Stack Engineer | JS, TS | NextJS, ReactJS | TailwindCSS | GraphQL