aboutsummaryrefslogtreecommitdiffstats
path: root/static/shopify.html
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
committerAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
commit216a600224fde22ce76b367557a02094ec693886 (patch)
treed1189bbaa39db204633523132a7d4767b952717d /static/shopify.html
parent7d9bc1f54dfd04172e8d6d43ebc2efd6f407e833 (diff)
downloadcoinos-ui-216a600224fde22ce76b367557a02094ec693886.tar.gz
coinos-ui-216a600224fde22ce76b367557a02094ec693886.zip
prettier
Diffstat (limited to 'static/shopify.html')
-rw-r--r--static/shopify.html237
1 files changed, 119 insertions, 118 deletions
diff --git a/static/shopify.html b/static/shopify.html
index 886c3d34..ef338d35 100644
--- a/static/shopify.html
+++ b/static/shopify.html
@@ -1,87 +1,88 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
- window.addEventListener('load', async () => {
- let sat = (s) => {
- s = Math.abs(s);
- let p = Math.floor(Math.log(s) / Math.LN10 + 0.000000001);
- let d = Math.floor((p + 1) / 3);
+ window.addEventListener("load", async () => {
+ let sat = (s) => {
+ s = Math.abs(s);
+ let p = Math.floor(Math.log(s) / Math.LN10 + 0.000000001);
+ let d = Math.floor((p + 1) / 3);
- return (
- '⚡️' +
- (parseInt(s) > 0
- ? new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(
- s / Math.pow(1000, d)
- ) + ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z'][d]
- : 0
- ).toString()
- );
- };
+ return (
+ "⚡️" +
+ (parseInt(s) > 0
+ ? new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(
+ s / Math.pow(1000, d)
+ ) + ["", "K", "M", "G", "T", "P", "E", "Z"][d]
+ : 0
+ ).toString()
+ );
+ };
- let copy = (text) => {
- navigator.clipboard.writeText(text);
- };
+ let copy = (text) => {
+ navigator.clipboard.writeText(text);
+ };
- let f = (s, currency) =>
- new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency
- })
- .format(s)
- .replace('CA', '');
+ let f = (s, currency) =>
+ new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency,
+ })
+ .format(s)
+ .replace("CA", "");
- let s = (s) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(s);
+ let s = (s) =>
+ new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(s);
- let {
- default: { drawImg }
- } = await import('https://coinos.io/qr.js');
- let base64 = drawImg('test', { size: 300 });
+ let {
+ default: { drawImg },
+ } = await import("https://coinos.io/qr.js");
+ let base64 = drawImg("test", { size: 300 });
- let link = document.createElement('link');
- link.setAttribute('rel', 'stylesheet');
- link.setAttribute('type', 'text/css');
- link.setAttribute(
- 'href',
- 'https://fonts.googleapis.com/css?family=Public+Sans:400italic,400,300,700'
- );
+ let link = document.createElement("link");
+ link.setAttribute("rel", "stylesheet");
+ link.setAttribute("type", "text/css");
+ link.setAttribute(
+ "href",
+ "https://fonts.googleapis.com/css?family=Public+Sans:400italic,400,300,700"
+ );
- var style = document.createElement('style');
- style.innerHTML = `#check {
+ var style = document.createElement("style");
+ style.innerHTML = `#check {
transform: scale(0.5);
transition: transform 1s;
}
`;
- document.head.appendChild(style);
+ document.head.appendChild(style);
- document.head.appendChild(link);
- document.title = 'Pay With Bitcoin';
+ document.head.appendChild(link);
+ document.title = "Pay With Bitcoin";
- let fiat = Shopify.checkout.payment_due;
- let main = document.querySelector('main');
- main.style.fontFamily = 'Public Sans, sans-serif';
- main.innerHTML = 'Please Pay';
+ let fiat = Shopify.checkout.payment_due;
+ let main = document.querySelector("main");
+ main.style.fontFamily = "Public Sans, sans-serif";
+ main.innerHTML = "Please Pay";
- let data = await fetch('https://dev.coinos.io/api/invoice', {
- method: 'POST',
- mode: 'cors',
- headers: {
- 'Content-Type': 'application/json',
- accept: 'application/json'
- },
- body: JSON.stringify({
- invoice: {
- fiat,
- type: 'lightning',
- webhook: `https://dev.coinos.io/api/shopify/${Shopify.checkout.order_id}`
- },
- user: { username: 'horseradish' }
- })
- })
- .then(function (response) {
- return response.json();
- })
- .catch(console.log);
+ let data = await fetch("https://dev.coinos.io/api/invoice", {
+ method: "POST",
+ mode: "cors",
+ headers: {
+ "Content-Type": "application/json",
+ accept: "application/json",
+ },
+ body: JSON.stringify({
+ invoice: {
+ fiat,
+ type: "lightning",
+ webhook: `https://dev.coinos.io/api/shopify/${Shopify.checkout.order_id}`,
+ },
+ user: { username: "horseradish" },
+ }),
+ })
+ .then(function (response) {
+ return response.json();
+ })
+ .catch(console.log);
- main.innerHTML = `<a href="lightning:${data.hash}">
+ main.innerHTML = `<a href="lightning:${data.hash}">
<div style="display: flex; margin-top: 50px; margin-bottom: 80px; position: relative;">
<img id="qrcode" src="${base64}" />
<div id="bg"></div>
@@ -89,14 +90,14 @@
</a>
<div style="width: 100%; text-align: center; ">
<div style="font-size: 24px; font-weight: bold; margin-bottom: 12px;">${f(
- (data.amount * data.rate) / 100000000,
- data.currency
- )}</div>
+ (data.amount * data.rate) / 100000000,
+ data.currency
+ )}</div>
<div style="color: #666; font-size: 18px;">${sat(data.amount)}</div>
</div>
<div style="text-align: center; margin: 40px auto; max-width: 460px; word-break: break-all; line-height: 1.5rem">${
- data.hash
- }</div>
+ data.hash
+ }</div>
<div style="margin: 20px 0; display: flex; gap: 1rem; justify-content: center; align-items: center;">
<a href="lightning:${data.hash}" style="text-decoration: none">
<div style="color: #999; font-size: 18px; border-radius: 9999px; padding: 0.5rem 1rem; border: 1px solid #ccc; background: white;">Open</div>
@@ -107,43 +108,43 @@
</div>
`;
- let copyButton = document.getElementById('copy');
- copyButton.addEventListener('click', (e) => {
- e.preventDefault();
- copy(data.hash);
- let copied = document.createElement('div');
- copied.textContent = 'Copied!';
- main.appendChild(copied);
- setTimeout(() => copied.remove(), 3000);
- });
+ let copyButton = document.getElementById("copy");
+ copyButton.addEventListener("click", (e) => {
+ e.preventDefault();
+ copy(data.hash);
+ let copied = document.createElement("div");
+ copied.textContent = "Copied!";
+ main.appendChild(copied);
+ setTimeout(() => copied.remove(), 3000);
+ });
- let qr = document.getElementById('qrcode');
- qr.style.margin = 'auto';
- qr.style.marginTop = '40px';
- qr.style.border = '12px white solid';
- qr.style.zIndex = 10;
+ let qr = document.getElementById("qrcode");
+ qr.style.margin = "auto";
+ qr.style.marginTop = "40px";
+ qr.style.border = "12px white solid";
+ qr.style.zIndex = 10;
- new QRCode(qr, data.hash);
+ new QRCode(qr, data.hash);
- let bg = document.getElementById('bg');
- bg.style.position = 'absolute';
- bg.style.margin = 'auto';
- bg.style.left = '0';
- bg.style.right = '0';
- bg.style.width = '400px';
- bg.style.height = '400px';
- bg.style.borderRadius = '50%';
- bg.style.background = 'linear-gradient(to right, #F2F6FC, #E1E3FF)';
- bg.style.zIndex = '0';
+ let bg = document.getElementById("bg");
+ bg.style.position = "absolute";
+ bg.style.margin = "auto";
+ bg.style.left = "0";
+ bg.style.right = "0";
+ bg.style.width = "400px";
+ bg.style.height = "400px";
+ bg.style.borderRadius = "50%";
+ bg.style.background = "linear-gradient(to right, #F2F6FC, #E1E3FF)";
+ bg.style.zIndex = "0";
- let ws = new WebSocket('wss://dev.coinos.io/ws');
- ws.onmessage = ({ data }) => {
- try {
- let { type, data: d } = JSON.parse(data);
- if (type === 'payment') {
- main.innerHTML =
- '<img id="check" src="https://dev.coinos.io/icons/check.svg" alt="Check" />' +
- `<h1>Payment received!</h1>
+ let ws = new WebSocket("wss://dev.coinos.io/ws");
+ ws.onmessage = ({ data }) => {
+ try {
+ let { type, data: d } = JSON.parse(data);
+ if (type === "payment") {
+ main.innerHTML =
+ '<img id="check" src="https://dev.coinos.io/icons/check.svg" alt="Check" />' +
+ `<h1>Payment received!</h1>
<h2>
${((d.amount * d.rate) / 100000000).toFixed(2)} CAD
</h2>
@@ -151,17 +152,17 @@
⚡️${d.amount}
</h3>`;
- var image = document.getElementById('check');
- image.addEventListener('load', function () {
- image.style.transform = 'scale(1)';
- });
- }
- } catch (e) {
- console.log(e);
- }
- };
- ws.onopen = () => {
- ws.send(JSON.stringify({ type: 'subscribe', data }));
- };
- });
+ var image = document.getElementById("check");
+ image.addEventListener("load", function () {
+ image.style.transform = "scale(1)";
+ });
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ };
+ ws.onopen = () => {
+ ws.send(JSON.stringify({ type: "subscribe", data }));
+ };
+ });
</script>