harish2704/UPI-QR-code-from-bank-details
1
0
Fork 0
mirror of https://github.com/harish2704/UPI-QR-code-from-bank-details.git synced 2026-09-10 13:11:08 +00:00
Code Issues Projects Releases Wiki Activity

added some UI treaks and readme updates

Browse Source
This commit is contained in:
Syed Faizan
2021-02-28 18:58:00 +05:30
parent 4d3cbc3c03
commit db66e403ae
2 changed files with 32 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+3 -3
View File
@@ -3,12 +3,12 @@ Generate shareable QR code, link from bank details to use with UPI payment apps
## [Try it now](https://harish2704.github.io/UPI-qr-gen/) ## [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. This tool first generates a [UPI](https://www.npci.org.in/what-we-do/upi/product-overview) id from bank details provided and then generates following items for end users to reuse.
1. QR code image 1. QR code image
2. Sharable URL 2. Sharable URL
- Shareable URLs **do not send any banking data to any third party servers**. The data is stored in "hashbang" which is only accessible to web browsers and not sent to servers - Shareable URLs **This tool does not save/send any banking data to any third party servers**. The data is stored in "hashbang" which is only accessible to web browsers and not sent to servers
3. Mobile friendly link which will invoke the installed UPI application in any device 3. Mobile friendly link which will invoke the UPI application of your choice on any device
### Powered by ### Powered by
index.html
+29 -6
View File
@@ -6,6 +6,13 @@
<title>UPI QR code generator</title> <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/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<style>
.outputWrapper{
border: 1px solid #606c76;
border-radius: 4px;
padding: 2%;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -22,10 +29,13 @@
<input class="button-primary" type="submit" value="Generate QR code"> <input class="button-primary" type="submit" value="Generate QR code">
</fieldset> </fieldset>
</form> </form>
<a href="#" class="button button-outline" target="_blank" id="appLink"><strong>Open UPI App</strong></a> <div class="outputWrapper">
<label for="sharelink">Sharable link</label> <a href="#" class="button button-outline" target="_blank" id="appLink"><strong>Open UPI App</strong></a>
<input type="text" readonly id="sharelink"> <a onclick="copyToClipboard()" class="button button-outline" target="_blank" id="copyLink"><strong>Copy Link</strong></a>
<img src="//:0" alt="" id="outputImg"> <label for="sharelink">Sharable link</label>
<input type="text" readonly id="sharelink">
<img src="//:0" alt="" id="outputImg">
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -37,6 +47,20 @@
return document.getElementById(sel); return document.getElementById(sel);
} }
function copyToClipboard() {
// change btn text
var link = $('copyLink');
link.innerText = 'Copied!'
setTimeout(()=>{
// restore btn text
link.innerText = 'Copy Link'
}, 1000)
var input = $('sharelink');
input.focus();
input.select();
document.execCommand('copy');
}
function renderQR(accNo, ifscCode, accountHolder){ function renderQR(accNo, ifscCode, accountHolder){
var upiString = 'upi://pay?pa='+ accNo + '@'+ ifscCode + '.ifsc.npci&pn='+ accountHolder +'&am='; var upiString = 'upi://pay?pa='+ accNo + '@'+ ifscCode + '.ifsc.npci&pn='+ accountHolder +'&am=';
@@ -46,7 +70,7 @@
margin: 1, margin: 1,
scale:8, scale:8,
color: { color: {
dark:"#580000", dark:"#9b4dca",
light:"#fff" light:"#fff"
} }
} }
@@ -59,7 +83,6 @@
return; return;
} }
$('outputImg').src = dataUrl; $('outputImg').src = dataUrl;
console.log('success!');
}) })
} }