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

Merge pull request #1 from syedfaizan/main

Browse Source 
added some UI treaks and readme updates
This commit is contained in:
harish2704
2021-03-01 16:35:19 +05:30
committed by GitHub
parent 4d3cbc3c03 db66e403ae
commit 796aa0c44d
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/)
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
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
3. Mobile friendly link which will invoke the installed UPI application in any device
- 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 UPI application of your choice on any device
### Powered by
index.html
+25 -2
View File
@@ -6,6 +6,13 @@
<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">
<style>
.outputWrapper{
border: 1px solid #606c76;
border-radius: 4px;
padding: 2%;
}
</style>
</head>
<body>
<div class="container">
@@ -22,13 +29,16 @@
<input class="button-primary" type="submit" value="Generate QR code">
</fieldset>
</form>
<div class="outputWrapper">
<a href="#" class="button button-outline" target="_blank" id="appLink"><strong>Open UPI App</strong></a>
<a onclick="copyToClipboard()" class="button button-outline" target="_blank" id="copyLink"><strong>Copy Link</strong></a>
<label for="sharelink">Sharable link</label>
<input type="text" readonly id="sharelink">
<img src="//:0" alt="" id="outputImg">
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/qrcode@1.4.4/build/qrcode.js" charset="utf-8"></script>
<script charset="utf-8">
@@ -37,6 +47,20 @@
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){
var upiString = 'upi://pay?pa='+ accNo + '@'+ ifscCode + '.ifsc.npci&pn='+ accountHolder +'&am=';
@@ -46,7 +70,7 @@
margin: 1,
scale:8,
color: {
dark:"#580000",
dark:"#9b4dca",
light:"#fff"
}
}
@@ -59,7 +83,6 @@
return;
}
$('outputImg').src = dataUrl;
console.log('success!');
})
}