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 = '999999999@paytm';
var pn = 'tmirror.co';
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 the QRCode constructor. - We have also passed the upiData string to the QRCode constructor.
- We have then called the make() method on the qrcode object.
- 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.
You can now scan the QR code with any UPI-enabled app to make a payment.