-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
147 lines (130 loc) · 8.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!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">
<style>
.outputWrapper{
border: 1px solid #606c76;
border-radius: 4px;
padding: 2%;
}
.button-blue{
background-color: #007bff;
border-color: #007bff;
}
.button-green{
background-color: #28a745;
border-color: #28a745;
}
.row {
flex-direction: row;
margin-left: -1.0rem;
width: calc(100% + 2.0rem);
}
.row .column {
margin-bottom: inherit;
padding: 0 1.0rem;
}
</style>
</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>
<div class="outputWrapper">
<a href="#" class="button button-green" target="_blank" id="appLink"><strong>Pay using UPI App</strong></a>
<a onclick="copyToClipboard()" class="button button-blue" 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 class="row" style="max-width: 375px;">
<div class="column column-33">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85.5 65.6" ><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 216h432V0H0z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.35278 0 0 -.35278 -33.5 71)"><path d="M113.6 179.5c0 1.5-1.1 2.6-3 2.6h-7.9v-5.2h7.9c1.9 0 3 1 3 2.6m-.6 11.8c0 1.4-1.1 2.4-2.7 2.4h-7.6v-4.8h7.6c1.6 0 2.7.9 2.7 2.4M94.9 170v30.4H112c6 0 8.9-4 8.9-7.8 0-3.7-2.3-6.3-5.2-7 3.2-.4 5.8-3.5 5.8-7.4 0-4.4-3-8.2-9-8.2zM146.3 170v12.3h-12.6v-12.2h-7.9v30.4h7.9v-11.4h12.6v11.4h7.9v-30.4zM172.8 192.7l-3.9-11.4h7.7zm7.5-22.6l-1.5 4.4h-12l-1.5-4.4h-9l11.5 30.4h10l11.4-30.4zM209.2 190.4c0 2.1-1.7 3.3-3.8 3.3h-6.2V187h6.2c2.1 0 3.8 1.2 3.8 3.3m-.9-20.3l-5 10.2h-4v-10.2h-8v30.4h15.3c6.8 0 10.6-4.5 10.6-10.1 0-5.3-3.2-8.1-6-9.1l6.1-11.2zM234.7 192.7l-3.9-11.4h7.7zm7.5-22.6l-1.5 4.4h-12l-1.5-4.4h-9l11.5 30.4h10l11.4-30.4zM257.2 170v23.7h-8.5v6.8h24.9v-6.8H265V170z" fill="#f36817"/><path d="M292.8 176.7L290 180l5.4 4.4 3-3.5c.5 1.3.9 2.8.9 4.4 0 5-3.3 8.8-8.3 8.8-5 0-8.3-3.9-8.3-8.8 0-5 3.3-8.8 8.3-8.8.6 0 1.2 0 1.8.2m-18 8.6c0 9.2 7 15.7 16.2 15.7 9.3 0 16.2-6.5 16.2-15.7 0-4.2-1.4-7.9-3.8-10.6l2-2.3-5.5-4.4-2.3 2.8c-2-.8-4.2-1.3-6.6-1.3-9.3 0-16.3 6.5-16.3 15.8M329 190.4c0 2.1-1.7 3.3-3.7 3.3H319V187h6.3c2 0 3.7 1.2 3.7 3.3m-.8-20.3l-5.1 10.2h-4v-10.2h-7.9v30.4h15.2c6.8 0 10.6-4.5 10.6-10.1 0-5.3-3.2-8.1-6-9.1L337 170z" fill="#2faa49"/><path d="M111 43.2v90.3h90.3V57l-10.1 11.5h-19.6l22.2-25.3zM238 15l-21 23.9v110.4H95.3V27.4h112.4L218.4 15z" fill="#273470"/><path d="M133.5 122.2h-11.2v-11.4h11.2zM189.8 122.2h-11.2v-11.4h11.2zM144.8 99.5h-22.5V77h11.2v11.3h11.3z" fill="#273470"/><path d="M178.6 88.2h11.2v11.3h-22.5V122.2h-22.5v-11.3H156v-34h-11.2V54.3H156v11.3h11.3v22.6zM122.3 54.3h11.2v11.3h-11.2zM242.6 149.9v-15H273c13.2 0 23-6.7 26-17.8h-56.4v-14.9H299a25.2 25.2 0 00-23.8-18.8h-32.6V68.6h22.1L301.4 15H321l-38.7 55a36.7 36.7 0 0134.5 32.1h19.5v15h-19.9c-1.4 7-4.7 13.2-9.7 17.9h29.6v14.9z" fill="#273470"/></g></svg>
</div>
<div class="column">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.5 46.1"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 216h432V0H0z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.35278 0 0 -.35278 -11 61)"><path d="M34 61h3l-3-11v-3l3-1 4 1 2 3 2 11h3l-2-11-4-5c-1-2-3-2-5-2-3 0-4 0-5 2l-1 5zM48 43l4 19 9-11a19 19 0 001-2l3 12h2l-4-18-9 11a10 10 0 00-1 2l-3-13zM67 43l4 18h3l-4-18zM74 43l4 18h10l-1-2h-6l-2-5h7v-2h-7l-2-9zM87 43l4 18h3l-4-18zM94 43l4 18h9v-2h-7l-1-5h7l-1-2h-7l-1-6h7l-1-3zM110 46h5l2 1 2 2a10 10 0 012 6l-1 2-2 1h-5zm-4-3l5 18h9l2-2 1-3v-4l-2-4-3-3-2-1-5-1h-1zM137 54h4l1 2v2l-3 1h-1zm-1-3l-2-8h-2l4 18h7l1-1 1-2v-2l-1-2-2-2h-1l-3-1h-1zM148 50h5l-1 4a16 16 0 000 2 20 20 0 00-1-2zm7-7l-1 5h-7l-3-5h-3l13 19 3-19zM162 43l1 8-3 10h3l2-6a15 15 0 000-1 14 14 0 002 1l5 6h2l-8-10-2-8zM188 52v1l1 2a11 11 0 00-2-3l-7-9-2 9a11 11 0 000 3 13 13 0 00-1-3l-4-9h-3l9 19 2-11a21 21 0 001-3 26 26 0 001 3l8 11V43h-3zM193 43l4 18h10l-1-2h-7l-1-5h7v-2h-7l-2-6h7v-3zM206 43l4 19 9-11a19 19 0 001-2l3 12h2l-4-18-8 11a10 10 0 00-2 2l-3-13zM234 59l-3-16h-3l4 16h-5l1 2h12l-1-2zM237 47l3 1 1-2h4l1 2c0 1 0 2-2 3l-4 3v3l2 3 4 1h3l2-2-3-2-1 2h-1l-2-1-1-1 2-3h1l3-3v-3a7 7 0 00-7-5l-4 1-1 3M258 43l4 18h3l-4-18zM265 43l4 19 9-11a19 19 0 001-2l3 12h3l-5-18-8 11a10 10 0 00-2 2l-3-13zM294 59l-4-16h-3l4 16h-5l1 2h12l-1-2zM297 43l4 18h9v-2h-7l-1-5h7l-1-2h-7l-1-6h7l-1-3zM315 54h3l1 2v2l-3 1zm-1-3l-2-8h-3l5 18h6l2-1v-2-2l-1-3-4-2 4-8h-3l-4 8zM323 43l4 18h10l-1-2h-7l-1-5h7v-2h-7l-2-9zM340 50h5l-1 4a16 16 0 000 2 22 22 0 00-1-2zm6-7l-1 5h-7l-3-5h-3l13 19 4-19zM367 57a6 6 0 01-4 2l-5-2c-2-1-3-3-3-5v-5l4-1h3l3 2-1-3a11 11 0 00-5-2l-4 1-2 2-2 3 1 3a12 12 0 004 7l3 2h7l2-1zM368 43l4 18h9v-2h-7l-1-5h7l-1-2h-7l-1-6h7l-1-3z" fill="#696a6a"/><path d="M316 76h-19l27 97h19zM306 170c-1 2-3 3-6 3H194l-5-19h96l-5-20h-97l-16-58h20l10 39h87c3 0 5 1 8 3l5 6 10 39c1 3 1 5-1 7M156 83c-1-4-4-7-8-7H48c-3 0-5 1-6 3s-2 4-1 7l24 87h20L63 95h77l22 78h19z" fill="#66686c"/><path d="M377 173l24-48-51-49z" fill="#27803b"/><path d="M359 173l25-48-51-49z" fill="#e9661c"/></g></svg>
</div>
</div>
</div>
</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 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=';
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;
})
}
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.search.length){
location.search = '';
}
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>