-
Notifications
You must be signed in to change notification settings - Fork 7
Expand file tree
/
Copy pathpay.html
More file actions
276 lines (259 loc) · 12.8 KB
/
pay.html
File metadata and controls
276 lines (259 loc) · 12.8 KB
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Request Bitcoin Payment - bitcoin data.science</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Requests payments in Bitcoin">
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Requests payments in Bitcoin, Request Bitcoin Payment, Bitcoin payment tool" />
<link rel="shortcut icon" href="img/favicon.svg">
<link rel="canonical" href="https://bitcoindata.science/pay.html">
<link rel="alternate" hreflang="x-default" href="https://bitcoindata.science" />
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="manifest.json" />
<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#111316">
<meta name="apple-mobile-web-app-title" content="bitcoin data.science">
<meta name="application-name" content="bitcoin data.science">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#111316">
<meta property="og:title" content="Request Bitcoin Payment - bitcoin data.science" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://bitcoindata.science/" />
<meta property="og:image" content="https://bitcoindata.science/img/logo.png" />
<meta property="og:description" content="Requests payments in Bitcoin" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="bitcoin data.science" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Requests payments in Bitcoin",
"description": "Requests payments in Bitcoin",
"alternateName": [
"bitcoindata.science",
"Bitcoin Data Science",
"bitcoin datascience"
],
"url": "https://bitcoindata.science",
"logo": "https://bitcoindata.science/img/logo.svg",
"sameAs": [
"https://bitcoindata.science"
]
}
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<link href="css/style.css" rel="stylesheet">
<script src="components/navbar.js" type="text/javascript" defer></script>
<script src="components/footer.js" type="text/javascript" defer></script>
<script src="components/ad.js" type="text/javascript" defer></script>
<script src="modules/bitcoinjs-lib.js"></script>
</head>
<body>
<!-- Navbar -->
<header>
<navbar-component></navbar-component>
</header>
<!-- Page Content -->
<main class="container-fluid col-lg-10 col-xl-8">
<div class="mt-5">
<ad-component></ad-component>
<h1 class="h1 fw-semibold mb-0">Request Bitcoin Payment</h1>
<span class="header-line bg-primary rounded my-3 d-inline-block w-25"> </span>
<form class="bg-body-tertiary rounded p-5 border shadow-sm" onsubmit="handleClick(event)">
<div class="row">
<div class="col pe-0">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="bitcoinaddress" onfocus="validateAddress()"
oninput="validateAddress()" onchange="validateAddress()" />
<label for="bitcoinaddress">Pay to address</label>
<span id="elMessage"> </span>
</div>
</div>
<div class="col-auto mt-2 pe-1 me-2 ps-0 ms-1">
<a type="button" id="paste" class="link-secondary d-inline-block" onclick="paste('bitcoinaddress')"
title="paste from clipboard">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
class="bi bi-clipboard2" viewBox="0 0 16 16">
<path
d="M3.5 2a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5H12a.5.5 0 0 1 0-1h.5A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-12A1.5 1.5 0 0 1 3.5 1H4a.5.5 0 0 1 0 1z" />
<path
d="M10 .5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5.5.5 0 0 1-.5.5.5.5 0 0 0-.5.5V2a.5.5 0 0 0 .5.5h5A.5.5 0 0 0 11 2v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 1-.5-.5" />
</svg>
</a>
</div>
</div>
<div class="row g-2 mb-3">
<div class="col-md">
<div class="form-floating">
<input type="number" class="form-control" id="amount" value="0.01" step="0.00000001"
onchange="calculateValue()" oninput="calculateValue()" />
<label for="amount">Amount (BTC)</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<input type="number" class="form-control" id="value" step="0.01" onchange="calculateAmount()"
oninput="calculateAmount()">
<label for="value">Value (USD)</label>
</div>
</div>
</div>
<div class="row gap-2">
<div class="col-auto">
<button type="submit" id="btnValidate" class="btn btn-primary shadow-sm">Generate
QRCode</button>
</div>
<div class="col-auto">
<button type="button" id="share" class="btn btn-secondary shadow-sm"
onclick="save_share()">Share</button>
</div>
<div class="col">
<div class="d-flex flex-nowrap">
<label for="share_url" class="visually-hidden">Share URL</label>
<input type="url" class="form-control d-inline-block" id="share_url" readonly="" disabled
onclick="copyurl('share_url')" data-toggle="tooltip" data-placement="top" title=""
data-original-title="Click to copy to clipboard">
<a type="button" id="copy" class="link-secondary d-inline-block" onclick="copyurl('share_url')"
title="Copy to clipboard">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentcolor" viewBox="-8 -8 60 60" height="37"
alt="Copy" width="37">
<path
d="M15 37.95q-1.25 0-2.125-.875T12 34.95v-28q0-1.25.875-2.125T15 3.95h22q1.25 0 2.125.875T40 6.95v28q0 1.25-.875 2.125T37 37.95Zm0-3h22v-28H15v28Zm-6 9q-1.25 0-2.125-.875T6 40.95V12.3q0-.65.425-1.075Q6.85 10.8 7.5 10.8q.65 0 1.075.425Q9 11.65 9 12.3v28.65h22.2q.65 0 1.075.425.425.425.425 1.075 0 .65-.425 1.075-.425.425-1.075.425Zm6-37v28-28Z" />
</svg>
</a>
</div>
</div>
</div>
<div class="card mt-4 mb-sm-0">
<div class="row g-0">
<div class="col-md-4 text-center text-md-start">
<canvas id="bitcoin-qr" class="img-fluid rounded-start h-100 p-1" title="QRCode"
alt="img-fluid rounded-start"></canvas>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title" id="paymentTitle"></h5>
<p class="card-text" id="paymentDescription"></p>
</div>
</div>
</div>
</div>
</form>
<p class="small text-warning text-end">This is a free service. We are not responsible for lost funds. Use at
your own risk.</p>
</div>
</main>
<footer-component></footer-component>
<script>
const inputValue = document.getElementById("value");
const inputAmount = document.getElementById("amount");
const inputAddress = document.getElementById("bitcoinaddress");
const canvas = document.getElementById("bitcoin-qr");
const btnValidate = document.getElementById("btnValidate");
const share = document.getElementById("share");
const paymentDescription = document.getElementById('paymentDescription')
const paymentTitle = document.getElementById('paymentTitle')
function validateAddress() {
try {
const outputScript = bitcoinjs.address.toOutputScript(inputAddress.value)
inputAddress.classList.remove("is-invalid")
inputAddress.classList.add("is-valid")
paymentDescription.innerText = 'Click the share button to share this QRCode with your customer.'
paymentTitle.innerText = 'Share your payment request'
generateQRCode(inputAddress.value, amount.value)
return outputScript;
}
catch (error) {
inputAddress.classList.remove("is-valid")
inputAddress.classList.add("is-invalid")
return undefined
}
}
function handleClick(event) {
if (event) { event.preventDefault() }
// Clear the canvas
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
// validate address
if (validateAddress() !== undefined) {
generateQRCode(inputAddress.value, amount.value)
}
}
// Fetch Price
async function fetchPrice(url) {
try {
let response = await fetch(url);
let data = await response.json();
price = data.price;
calculateValue();
} catch (error) {
console.error(error);
}
};
let price;
fetchPrice('https://bitcoindata.science/api/priceusd.json');
function calculateValue() {
inputValue.value = (price * inputAmount.value).toFixed(2);
}
function calculateAmount() {
inputAmount.value = (inputValue.value / price).toFixed(8);
}
// QRCode
function generateQRCode(address, amount) {
const bitcoinUri = "bitcoin:" + address + "?amount=" + amount + "&label=receiver";
canvas.classList.add('bg-white')
const qr = new QRious({
element: canvas,
value: bitcoinUri,
size: 200,
});
}
//Share
function copyurl(target) {
navigator.clipboard.writeText(document.getElementById(target).value)
}
function paste(target) {
if (!target.disabled) {
navigator.clipboard
.readText()
.then(
(clipText) => (document.getElementById(target).value = clipText),
);
}
}
function save_share() {
if (validateAddress) {
let sharedata = inputAddress.value + '&' + amount.value;
document.getElementById("share_url").value = 'https://bitcoindata.science/pay?' + sharedata;
}
}
//load saved data from shareable URL
if (window.location.search) {
let saved_data = window.location.search.substring(1);
let saved_data_array = saved_data.split("&");
inputAddress.value = saved_data_array[0]
inputAmount.value = saved_data_array[1]
// set all input fields and buttons to disabled
const inputs = [inputValue, inputAddress, inputAmount, btnValidate, share];
inputs.forEach(function (el) {
el.disabled = true;
});
validateAddress();
paymentDescription.innerText = 'Complete the payment by scanning the QR code below. Double-check if the address on the screen matches the one in the wallet.'
paymentTitle.innerText = 'Complete your payment'
if (validateAddress() === undefined) {
paymentDescription.innerText ='do not make the payment'
paymentTitle.innerHTML = '<span class="text-danger">Invalid bitcoin address</span>'
}
}
</script>
</body>
</html>