diff options
| -rw-r--r-- | src/routes/(app)/[username]/shopify.js/+server.js | 33 |
1 files changed, 28 insertions, 5 deletions
diff --git a/src/routes/(app)/[username]/shopify.js/+server.js b/src/routes/(app)/[username]/shopify.js/+server.js index f5bb8d50..78d27d8d 100644 --- a/src/routes/(app)/[username]/shopify.js/+server.js +++ b/src/routes/(app)/[username]/shopify.js/+server.js @@ -70,7 +70,6 @@ window.addEventListener('load', async () => { 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://${url.host}/api/invoice', { method: 'POST', @@ -148,16 +147,37 @@ window.addEventListener('load', async () => { bg.style.background = 'linear-gradient(to right, #F2F6FC, #E1E3FF)'; bg.style.zIndex = '0'; +let d = { amount: 5000, rate: 18000, currency: "CAD" }; + main.innerHTML = + \`<div style="display: flex"><img id="check" src="https://${url.host}/icons/check.svg" alt="Check" style="margin: auto; max-width: 300px" /></div> + + <h1 style="margin: 30px auto; text-align: center; width: 100%">Payment received!</h1> + + <div style="width: 100%; text-align: center; "> + <div style="font-size: 24px; font-weight: bold; margin-bottom: 12px;">\${f( + (d.amount * d.rate) / 100000000, + d.currency + )}</div> + <div style="color: #666; font-size: 18px;">\${sat(d.amount)}</div> + </div> + <a style="color: black;" href="https://\${window.location.host}"> + <div style="margin: 50px auto; border-radius: 9999px; text-align: center; font-weight: bold; padding: 1rem 2rem; background: black; color: white; font-size: 18px; width: 220px">Continue shopping</div> + </a>\`; + + var image = document.getElementById('check'); + image.addEventListener('load', function () { + image.style.transform = 'scale(1)'; + }); + let ws = new WebSocket('wss://${url.host}/ws'); ws.onmessage = ({ data }) => { try { let { type, data: d } = JSON.parse(data); if (type === 'payment') { main.innerHTML = - '<img id="check" src="https://${url.host}/icons/check.svg" alt="Check" />' + - \` + \`<div style="display: flex"><img id="check" src="https://${url.host}/icons/check.svg" alt="Check" style="margin: auto; max-width: 300px" /></div> - <h1>Payment received!</h1> + <h1 style="margin: 30px auto; text-align: center; width: 100%">Payment received!</h1> <div style="width: 100%; text-align: center; "> <div style="font-size: 24px; font-weight: bold; margin-bottom: 12px;">\${f( @@ -165,7 +185,10 @@ window.addEventListener('load', async () => { d.currency )}</div> <div style="color: #666; font-size: 18px;">\${sat(d.amount)}</div> - </div>\`; + </div> + <a style="color: black;" href="https://\${window.location.host}"> + <div style="margin: 50px auto; border-radius: 9999px; text-align: center; font-weight: bold; padding: 1rem 2rem; background: black; color: white; font-size: 18px; width: 220px">Continue shopping</div> + </a>\`; var image = document.getElementById('check'); image.addEventListener('load', function () { |