-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
109 lines (106 loc) · 4.12 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
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Bitcoin QR</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- <script type="module" src="https://unpkg.com/[email protected]/dist/bitcoin-qr/bitcoin-qr.esm.js"></script> -->
<!-- For local dev -->
<script type="module" src="./build/bitcoin-qr.esm.js"></script>
<script>
let pollCount = 0;
let paid = false;
let interval;
async function callbackExample() {
pollCount += 1;
document.getElementById('poll-count').innerText = `Poll count: ${pollCount}`;
if (pollCount >= 5) {
isPolling = false;
paid = true;
alert('Paid!');
const qr = document.getElementById('qr');
qr.setAttribute('is-polling', false);
document.getElementById('paid').innerText = `Paid: ${paid}`;
}
}
async function reset() {
pollCount = 0;
paid = false;
isPolling = true;
document.getElementById('toggle').innerText = 'Stop';
document.getElementById('poll-count').innerText = `Poll count: ${pollCount}`;
document.getElementById('paid').innerText = `Paid: ${paid}`;
}
async function toggle() {
const qr = document.getElementById('qr');
const isPolling = qr.getAttribute('is-polling') === 'true';
qr.setAttribute('is-polling', !isPolling);
const toggle = document.getElementById('toggle');
toggle.innerText === 'Stop' ? (toggle.innerText = 'Start') : (toggle.innerText = 'Stop');
clearTimeout(interval);
}
</script>
</head>
<body class="flex justify-center gap-12">
<div class="flex flex-col items-center">
<!-- Voltage example -->
<bitcoin-qr
id="qr"
width="300"
height="300"
lightning="LNBC10U1P3PJ257PP5YZTKWJCZ5FTL5LAXKAV23ZMZEKAW37ZK6KMV80PK4XAEV5QHTZ7QDPDWD3XGER9WD5KWM36YPRX7U3QD36KUCMGYP282ETNV3SHJCQZPGXQYZ5VQSP5USYC4LK9CHSFP53KVCNVQ456GANH60D89REYKDNGSMTJ6YW3NHVQ9QYYSSQJCEWM5CJWZ4A6RFJX77C490YCED6PEMK0UPKXHY89CMM7SCT66K8GNEANWYKZGDRWRFJE69H9U5U0W57RRCSYSAS7GADWMZXC8C6T0SPJAZUP6"
parameters="amount=0.00001&label=sbddesign%3A%20For%20lunch%20Tuesday&message=For%20lunch%20Tuesday"
image="./assets/bitcoin.svg"
is-polling="true"
poll-interval="1000"
type="svg"
corners-square-type="extra-rounded"
dots-type="classy-rounded"
debug="true"
/>
<!-- Bitcoin example -->
<!-- <bitcoin-qr
id="qr"
width="300"
height="300"
bitcoin="BC1QYLH3U67J673H6Y6ALV70M0PL2YZ53TZHVXGG7U"
parameters="?amount=0.00001&label=sbddesign%3A%20For%20lunch%20Tuesday&message=For%20lunch%20Tuesday"
image="./assets/bitcoin.svg"
type="svg"
corners-dot-color="#d67b0c"
corners-dot-type="rounded"
corners-square-color="#dd7b02"
corners-square-type="extra-rounded"
dots-type="dots"
dots-color="#F7931A"
/> -->
<!-- Payjoin example -->
<!-- <bitcoin-qr
id="qr"
width="300"
height="300"
bitcoin="BCRT1QCJ4X75DUNY4X5NAWLM3CR8MALM9YAUYWWEWKWL"
parameters="?amount=0.00010&pj=https://localhost:3010"
image="./assets/payjoin.svg"
type="svg"
corners-dot-color="#ed2877"
corners-dot-type="dot"
corners-square-color="#ef5693"
corners-square-type="rounded"
dots-type="rounded"
dots-color="#ed71a3"
/> -->
</div>
<div class="flex flex-col gap-2">
<span>Payment will succeed when poll count reaches 5</span>
<span id="poll-count">Poll count: 0</span>
<span id="paid">Paid: false</span>
<button id="toggle" class="bg-[#ff5000] p-2 text-white rounded-lg" onclick="toggle()">Stop</button>
<button id="reset" class="bg-[#ff5000] p-2 text-white rounded-lg" onclick="reset()">Reset</button>
</div>
</body>
<script>
document.getElementById('qr').callback = callbackExample;
</script>
</html>