JetCore/jetc/barant-site/src/checkout.page

<page loggedin="yes">
<title>SHOPPING CART - CHECKOUT</title>
<contents>
 <script src="https://web.squarecdn.com/v1/square.js"></script>
 <script>
   function processCardForm(token) {
     xhr = new XMLHttpRequest();
     xhr.open('POST', '/pp.cgi', true);
     xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     xhr.onload = function () {
       console.log(">" + this.responseText + "<");
       if(this.responseText == "OK\n") {
         document.forms[0].PAGE.value = 'thankyou';
         document.forms[0].requestSubmit();
       } else {
         var payBtn = document.getElementById('pay');
         payBtn.disabled = false;
         var processbanner = document.getElementById('process');
         processbanner.style.visibility = 'hidden';
         message.innerText = this.responseText;
       }
     };
     let data = 'id=$[_session_id]&token=' + token + '&tranonce=$[tranonce]';
     xhr.send(data);
   }
   var card;
   async function buildForm() {
     let payments = Square.payments('sq0idp-V4R4vEferpF9kr7d5x5abQ','LV0MRENX5ED3Z');
     const card = await payments.card({
       style: {
         input: {
           backgroundColor: '#1c1c24',
           color: '#e7e4dc',
           fontSize: '14px'
         },
         'input::placeholder': { color: '#8d8c92' },
         '.input-container': { borderColor: 'rgba(197, 164, 90, 0.28)' },
         '.input-container.is-focus': { borderColor: '#c5a45a' },
         '.input-container.is-error': { borderColor: '#a13a3a' },
         '.message-text': { color: '#8d8c92' },
         '.message-text.is-error': { color: '#a13a3a' }
       }
     });
     await card.attach('#card');
     let button = document.getElementById('pay');
     button.addEventListener('click', async () => {
       message.innerText = '';
       let result = await card.tokenize();
       if (result.status === 'OK') {
         button.disabled = true;
         let processbanner = document.getElementById('process');
         processbanner.style.visibility = 'visible';
         processCardForm(result.token);
       } else {
         let errorMessage = 'Please check your card details and try again.';
         if (result.errors && result.errors.length && result.errors[0].message)
           errorMessage = result.errors[0].message;
         message.innerText = errorMessage;
       }
     });
  }
  buildForm();
</script>

<sql>select sum(price * quantity) as total
       from product_list
       join cart_item on product_list.sku=cart_item.sku
 where cart_item.session_uuid='$[_session_id]'</sql>
$[sqlerror]
<ifrow>
<set name="checkout_total" value="$[.total]">
</ifrow>

<sectionframe title="Order Summary">
<sql>select product_list.sku as SKU,
            description as Description,
            quantity as Qty,
            price as Price
       from product_list
       join cart_item on product_list.sku=cart_item.sku
 where cart_item.session_uuid='$[_session_id]'
 order by description</sql>
$[sqlerror]
<div class="cart-wrap">
 <div class="checkout-header">
  <div class="cart-col-desc">Item</div>
  <div class="cart-col-price">Price</div>
  <div class="checkout-col-qty">Qty</div>
  <div class="cart-col-total">Total</div>
 </div>
 <div class="cart-items">
  <whilerow>
  <set name="linetotal" expr="$[.Price] * $[.Qty]">
  <div class="checkout-row">
   <div class="cart-col-desc">$[.Description]</div>
   <div class="cart-col-price">$$[.Price]</div>
   <div class="checkout-col-qty">$[.Qty]</div>
   <div class="cart-col-total">$$[linetotal]</div>
  </div>
  </whilerow>
 </div>
 <div class="cart-summary">
  <div class="cart-summary-row">
   <span>Total Due</span>
   <span class="cart-summary-total">$$[checkout_total]</span>
  </div>
 </div>
</div>
</sectionframe>

<sectionframe title="Payment">
<div class="checkout-pay-wrap">
 <div class="checkout-pay-label">Card Details</div>
 <div id="card" class="checkout-card-input"></div>
 <button id="pay" type="button" class="button checkout-pay-btn">Pay $$[checkout_total]</button>
 <div id="process" class="checkout-processing">Processing Payment &mdash; Please wait&hellip;</div>
 <div id="message" class="checkout-error"></div>
</div>
</sectionframe>
</contents>
</page>