Customized payment UPI QR code generation

jeevankishore

Jeevan Kishore

Posted on July 30, 2022

Customized payment UPI QR code generation

Use case

Recently i had been to a party, paid the bill amount and had to split the cheque with several people.

Communicating on how much.. where to transfer, which app to use and what not.. was a pain!

-- Instead --

Show a QR which works on all apps, scan -> get paid -> done

Generator

live demo

Live demo: https://upi-qr.vercel.app/
Source code: https://github.com/Jeevan-Kishore/upi-qr-generator

Architecture

  • Call the API on click of generateQR with the above mentioned format
  • Serverless function creates a QR using the details set via a GET call /api/getqr/[name]/[upi]/[amount]
  • A deelinking URL is constructed, out of which a QR is generated
  • API responds back with a .png - dataURI
  • Canvas of 300x300 is constructed to which received dataURI is set as src

QR generation has a variety of usecase(s), this is just one of them we thought to share.

Cheers ๐Ÿบ

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
jeevankishore
Jeevan Kishore

Posted on July 30, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About