How to Generate a UPI QR Code in HTML and JavaScript
Unified Payments Interface (UPI) is a popular digital payment system in India. It allows users to make instant payments to each other using their bank accounts. One way to accept UPI payments is to generate a UPI QR code.
In this blog post, we will show you how to generate a UPI QR code in HTML and JavaScript. We will use the QRCode.js library to generate the QR code.
The first step is to create a new HTML file. In the HTML file, we will add the following code:
<!DOCTYPE html> <html> <head> <title>UPI QR Code Generator</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div id="qrcode"></div> <script> function generateUPICode() { var vpa = '9801740685@paytm'; var pn = 'CodyLab'; var amt = 1; var tid = 1234567890; var tr = 'remark'; var tn = 'Note' ; var upiData = "upi://pay?pa="+vpa+"&pn="+pn+"&tid="+tid+"&tr="+tr+"&tn="+tn+"&cu=INR"; var qrcode = new QRCode(document.getElementById("qrcode"), { text: upiData, width: 128, height: 128, }); qrcode.make(); } generateUPICode(); </script> </body> </html>
In the above code, we have added the following code:
- We have added the QRCode.js library to the HTML file.
- We have created a function called
generateUPICode(). This function will generate the UPI QR code. - In the
generateUPICode()function, we have defined the following variables:vpa: This is the UPI VPA of the recipient.pn: This is the payment note.amt: This is the amount to be paid.tid: This is the transaction ID.tr: This is the transaction remark.tn: This is the transaction note.
- We have then created a string called
upiData. This string contains the UPI data that will be used to generate the QR code. - We have then created a new instance of the
QRCodeclass. - We have passed the
document.getElementById("qrcode")element to theQRCodeconstructor. - We have also passed the
upiDatastring to theQRCodeconstructor. - We have then called the
make()method on theqrcodeobject. - This will generate the UPI QR code.
Once you have saved the HTML file, you can open it in a web browser. You should see the UPI QR code displayed on the screen.