122 lines
4.8 KiB
Plaintext
122 lines
4.8 KiB
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: Checkout
|
|
---
|
|
|
|
<style>
|
|
#qr_wrapper {
|
|
max-width: 80vh;
|
|
width: 80vw;
|
|
height: 80vh;
|
|
max-height: 80vw;
|
|
padding: calc(1.5vh + 1.5vw);
|
|
background-color: #FFFFFF;
|
|
margin: auto;
|
|
}
|
|
#qr_wrapper div {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/assets/shop.css">
|
|
<h1><img src="/assets/img/monero.svg" style="width:1em;height:1em"> Monero Checkout</h1>
|
|
<table class="tal" style="width:100%"><thead>
|
|
<th>Item</th>
|
|
<th class="tar">Price</th>
|
|
<th class="tar">Qty</th>
|
|
<th class="tar">Sub</th>
|
|
</thead><tbody data-bind="foreach:items"><tr>
|
|
<td data-bind="text:name"></td>
|
|
<td class="tar" data-bind="text:price"></td>
|
|
<td class="tar" data-bind="text:qty" style="width:2rem"></td>
|
|
<td class="tar" data-bind="text:subtotal"></td>
|
|
</tr></tbody></table>
|
|
<hr>
|
|
<div class="flex" style="align-items:flex-start">
|
|
<p id="shipping-container">
|
|
<b>📦 <span class="ul">Shipping</span></b><br>
|
|
<span data-bind="text:shipname"></span>
|
|
<br><span data-bind="text:addr1"></span>
|
|
<br><span data-bind="text:addr2"></span>
|
|
<br><span data-bind="text:city"></span>,
|
|
<span data-bind="text:state"></span>
|
|
<span data-bind="text:zip"></span>
|
|
</p>
|
|
<p id="contact-container">
|
|
<b>📇 <span class="ul">Contact</ul></b><br>
|
|
<span data-bind="text:contactname"></span>
|
|
<br><span data-bind="text:phone"></span>
|
|
<br><span data-bind="text:email"></span>
|
|
</p>
|
|
<div id="totals-container"><table><tbody>
|
|
<tr>
|
|
<td><b>Subtotal:</b></td>
|
|
<td class="tar"><b data-bind="text:subtotal"></b></td>
|
|
</tr><tr>
|
|
<td>Tax:</td>
|
|
<td class="tar" data-bind="text:tax"></td>
|
|
</tr><tr>
|
|
<td>Shipping:</td>
|
|
<td class="tar" data-bind="text:shipping"></td>
|
|
</tr><tr style="border-top:.1vh solid">
|
|
<td>Total:</td>
|
|
<td class="tar" data-bind="text:total"></td>
|
|
</tr><tr>
|
|
<td><b>Monero:</b></td>
|
|
<td class="tar"><b data-bind="text:totalxmr_pretty"></b>
|
|
</td></tr>
|
|
</tbody></table></div>
|
|
</div>
|
|
<p data-bind="hidden:isPaid">To change order details, <a href="#" onclick="cancel()">cancel it and return to your cart</a>.</p>
|
|
<hr>
|
|
<h2>Payment status</h2>
|
|
<p>Your order is for <code data-bind="text:totalxmr_pretty"></code>.
|
|
<br><code data-bind="text:submitted_pretty"></code> have been submitted to the blockchain.
|
|
<br><code data-bind="text:unlocked_pretty"></code> have been unlocked.
|
|
</p>
|
|
<p data-bind="hidden:isPaid">Your order will ship when <span data-bind="text:totalxmr_pretty"></span> have been unlocked. (Transactions unlock after receiving 10 confirmations.)</p>
|
|
<p data-bind="visible:isPaid">Your payment has been confirmed. We will ship your order as soon as possible and send an email with the tracking info.</p>
|
|
<h3 data-bind="visible:transactions">Transactions</h3>
|
|
<table data-bind="visible:transactions">
|
|
<thead>
|
|
<th class="tal">Date</th>
|
|
<th class="tal">Time</th>
|
|
<th class="tal">Amt</th>
|
|
<th class="tal">Fee</th>
|
|
<th class="tal">Confs</th>
|
|
<th class="tal">Block</th>
|
|
<th class="tal">Stat</th>
|
|
</thead>
|
|
<tbody data-bind="foreach:transactions"><tr>
|
|
<td class="tal" data-bind="text:date"></td>
|
|
<td class="tal" data-bind="text:time"></td>
|
|
<td class="tal" data-bind="text:amount"></td>
|
|
<td class="tal" data-bind="text:fee"></td>
|
|
<td class="tal" data-bind="text:confirmations"></td>
|
|
<td class="tal" data-bind="text:height"></td>
|
|
<td class="tal" style="cursor:default">
|
|
<span data-bind="visible:locked" title="LOCKED: Wait for 10 confirmations for this transaction to unlock">⏲️</span>
|
|
<span data-bind="visible:double_spend_seen" title="DOUBLE SPENT! Double-spend has been detected! This transaction is invalid. Contact {{metadata.sales.email}} to resolve.">⛔</span>
|
|
<span data-bind="hidden:(locked||double_spend_seen)" title="CONFIRMED! This transaction is valid and has been confirmed by the blockchain.">✅</span>
|
|
</td>
|
|
</tr></tbody>
|
|
</table>
|
|
<p><i data-bind="text:checkingStatus"></i></p>
|
|
<hr>
|
|
<div data-bind="hidden:isPaid">
|
|
<h2>Monero payment</h2>
|
|
<p>Please send <code data-bind="text:unsubmitted"></code> XMR to this address: </p>
|
|
<pre><code data-bind="text:xmr_address"></code></pre>
|
|
<p>You can also click, tap, or scan this qr code:</p>
|
|
<a data-bind="attr:{href:xmr_uri}"><div id="qr_wrapper"><div id="xmr_qr"></div></div></a>
|
|
</div>
|
|
|
|
<script>
|
|
const API_DOMAIN = '{{env.API_DOMAIN}}'
|
|
const MONERO_CHECKOUT_POLL_SECS = '{{env.MONERO_CHECKOUT_POLL_SECS}}'
|
|
</script>
|
|
<script src="/assets/scripts/lib/qrcode.min.js" integrity="sha256-CxytvzTC2wdC92a5wqFc1DTkbS+uuQ8N2NgxGcuqoDc="></script>
|
|
<script src="/assets/scripts/lib/knockout-3.5.1.min.js" integrity="sha256-6JV7sYKlBHsHvqCkn9IrEWFLGrmsW4KG/LIln0hljnM="></script>
|
|
<script src="/assets/scripts/lib/socket-io_4-5-4.min.js" integrity="sha256-GKNqkn2sVGULGLkD+Ph3ghngLhOUblgdmz4eSZX3Q1s="></script>
|
|
<script src="/assets/scripts/checkout/monero.js" defer></script>
|