2 changed files with 110 additions and 0 deletions
@ -1,2 +1,17 @@ |
|||||
# UPI-QR-code-from-bank-details |
# UPI-QR-code-from-bank-details |
||||
Generate shareable QR code, link from bank details to use with UPI payment apps |
Generate shareable QR code, link from bank details to use with UPI payment apps |
||||
|
|
||||
|
## [Try it now](https://harish2704.github.io/UPI-qr-gen/) |
||||
|
|
||||
|
It first generate a [UPI](https://www.npci.org.in/what-we-do/upi/product-overview) id from bank details and then generates following items for end users. |
||||
|
|
||||
|
1. QR code image |
||||
|
2. Sharable URL |
||||
|
3. Mobile friendly link which will invoke the installed UPI application in any device |
||||
|
|
||||
|
### Powered by |
||||
|
|
||||
|
1. https://github.com/soldair/node-qrcode |
||||
|
2. https://milligram.io/ |
||||
|
3. https://unpkg.com/ |
||||
|
4. Github pages |
||||
|
|||||
@ -0,0 +1,95 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="width=device-width"> |
||||
|
<title>UPI QR code generator</title> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="column"> |
||||
|
<form onsubmit="return genQR(this)"> |
||||
|
<fieldset> |
||||
|
<label for="accNo">Account No:</label> |
||||
|
<input type="number" placeholder="Account No:" id="accNo"> |
||||
|
<label for="ifscCode">IFSC Code</label> |
||||
|
<input type="text" placeholder="IFSC Code" id="ifscCode"> |
||||
|
<label for="accountHolder">Name of person</label> |
||||
|
<input type="text" placeholder="Name of the person" id="accountHolder"> |
||||
|
<input class="button-primary" type="submit" value="Generate QR code"> |
||||
|
</fieldset> |
||||
|
</form> |
||||
|
<a href="#" class="button button-outline" target="_blank" id="appLink"><strong>Open UPI App</strong></a> |
||||
|
<label for="sharelink">Sharable link</label> |
||||
|
<input type="text" readonly id="sharelink"> |
||||
|
<img src="//:0" alt="" id="outputImg"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script src="https://unpkg.com/qrcode@1.4.4/build/qrcode.js" charset="utf-8"></script> |
||||
|
<script charset="utf-8"> |
||||
|
|
||||
|
function $(sel){ |
||||
|
return document.getElementById(sel); |
||||
|
} |
||||
|
|
||||
|
function renderQR(accNo, ifscCode, accountHolder){ |
||||
|
|
||||
|
var upiString = 'upi://pay?pa='+ accNo + '@'+ ifscCode + '.ifsc.npci&pn='+ accountHolder +'&am='; |
||||
|
|
||||
|
var opts = { |
||||
|
errorCorrectionLevel: 'H', |
||||
|
margin: 1, |
||||
|
scale:8, |
||||
|
color: { |
||||
|
dark:"#580000", |
||||
|
light:"#fff" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$('appLink').href = upiString; |
||||
|
|
||||
|
QRCode.toDataURL(upiString, opts, function (err, dataUrl) { |
||||
|
if(err){ |
||||
|
alert('Sorry, Something went wrong while generating QR code'); |
||||
|
return; |
||||
|
} |
||||
|
$('outputImg').src = dataUrl; |
||||
|
console.log('success!'); |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
function genQR(){ |
||||
|
var accNo = $('accNo').value; |
||||
|
var ifscCode = $('ifscCode').value; |
||||
|
var accountHolder = $('accountHolder').value; |
||||
|
|
||||
|
location.hash = [accNo,ifscCode,accountHolder].join('||'); |
||||
|
$('sharelink').value = location |
||||
|
|
||||
|
renderQR( accNo, ifscCode, accountHolder ); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
(function(){ |
||||
|
if(location.hash.length > 20 ){ |
||||
|
var data = decodeURIComponent( location.hash.slice(1) ).split('||'); |
||||
|
|
||||
|
$('accNo').value = data[0]; |
||||
|
$('ifscCode').value = data[1]; |
||||
|
$('accountHolder').value = data[2]; |
||||
|
genQR(); |
||||
|
} |
||||
|
})(); |
||||
|
</script> |
||||
|
|
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" /> |
||||
|
|
||||
|
<a class="github-fork-ribbon" href="https://github.com/harish2704/UPI-QR-code-from-bank-details" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue