【JAVASCRIPT】Handling Discount checking out with the payment request API

index.html

<div>
  <h1>Cart</h1>
  <div id="discount">Buy 10, get 20% off!</div>
  <img src="https://dummyimage.com/600x400/000000/ff0015&text=chillis"/>
  
  <h3 class="product">Product:<span>Bag of red chillis</span></h3>
  <h3 class="price">Price:<span>$4.99</span></h3>
  <label for="amount">Quantity</label>
  <input id="amount" type="number" value="0" min="0">
  <div id="getmore">Add 2 more to get discount....</div>
  <h3 class="price">SubTotal:</h3>
  <h3><div class="currency">$</div><div id="subTotalText">0.00</div></h3>
  <button class="pay-button">Buy Chillis</button>
  <div id="message"></div>
</div>

javascript-handling-discount-checking-out-with-the-payment-request-api.markdown

【JAVASCRIPT】Handling Discount checking out with the payment request API

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

const paymentMethods = [{
  supportedMethods: 'basic-card',
  data: {
    supportedNetworks: ['visa', 'mastercard', 'amex']
  }
}];

let amount = document.getElementById("amount");
let subTotalText = document.getElementById("subTotalText");
let qty = parseFloat(document.getElementById("amount").value);
let discountamt;

amount.addEventListener("click", function() {
  let subtotal = Number(document.getElementById("amount").value * 4.99).toFixed(2);
  subTotalText.innerText = subtotal;
  
  // apply discount if over 10, or prompt if over 8
  var disc = document.getElementById("amount").value;
  if ((disc > 7)  && (disc < 10)) {
    document.getElementById("getmore").style.display="block";
  } else if (disc == "10") {
    discountamt = Number(0.2 * subtotal);
    
    document.getElementById("getmore").innerText = "A 20% discount will be applied at checkout"
    document.getElementById("getmore").style.display="block";
  } else {
    document.getElementById("getmore").style.display="none";
  }
});

function displaySuccess() {
  document.getElementById("message").classList.add("success");
  document.getElementById("message").innerHTML = "<span>\u2714</span> Payment received - thanks for your order!";   
}

function displayError() {
  document.getElementById("message").classList.add("failure");
  document.getElementById("message").innerHTML = "<span>\u2716</span> There was a problem with payment"; 
}

function displayCancel() {
  document.getElementById("message").classList.add("info");
  document.getElementById("message").innerHTML = "<span>&#128712;</span>Request has been cancelled";   
}

function displayMessage(mesg) {
  document.getElementById("message").classList.add("info");
  document.getElementById("message").innerHTML = "<span>&#128712;</span>" + mesg;  
}

document.querySelector('.pay-button').onclick = function (e) {
  document.getElementById("message").className = '';
  if (window.PaymentRequest) {
    let qty = document.getElementById("amount").value;
    
    if (discountamt == undefined) { discountamt = 0.00; }     
    
    let subtotal = Number(qty * 4.99); 
    let totaldisc = Number(subtotal - discountamt);
    
    let shipping = 2.99;
    let tax = (subtotal + shipping) * 0.175;
    let total = Number(totaldisc) + Number(tax) + Number(shipping);
    
    const paymentDetails = {
      total: {
        label: 'Total due',
        amount: { currency: 'USD', value: total.toFixed(2) }
      },
      displayItems: [{
        label: 'Goods',
        amount: { currency: 'USD', value: subtotal.toFixed(2) }
      }, {
        label: 'Discount',
        amount: { currency: 'USD', value: discountamt }
      }, {
        label: 'Sub Total (after discount)',
        amount: { currency: 'USD', value: totaldisc.toFixed(2) }
      },{
        label: 'Shipping',
        amount: { currency: 'USD', value: 2.99 }
      }, {        
      label: 'Sales Tax',
      amount: { currency: 'USD', value: tax.toFixed(2) }
      }]
    };  
    
    const paymentOptions = { requestPayerEmail: true};
    let request = new PaymentRequest(paymentMethods, paymentDetails, paymentOptions);
    
    if (request.canMakePayment) {
      request.canMakePayment().then(function(result) {
        if (result) {
          //console.log(request);
          request.show().then(function(result) {
            result.complete('success').then(function() {
              console.log(JSON.stringify(result));
              displaySuccess();
              const additionalDetailsContainer = document.getElementById('instructions');
              additionalDetailsContainer.style.display = 'block';
              additionalDetailsContainer.focus();
            });      
          }).catch(function(err) {      
          if (err.message == "Request cancelled") {
            displayCancel();
          } else {
            console.error(err.message);
            displayError();
          }
          });          
        } else {
          console.log('Cannot make payment');
          displayMessage("Sorry - no valid payment methods available");
        }
      }).catch(function(err) {
        console.log(request, err);
      });
    }
    
    /* time out requests after 20 mins of inactivity */
    var paymentTimeout = window.setTimeout(function() {
      window.clearTimeout(paymentTimeout);
      request.abort().then(function() {
        document.getElementById("message").classList.add("info");
        document.getElementById("message").innerHTML = "<span>&#128712;</span> Request has been timed out due to inactivity"; 
        console.log('Payment timed out after 20 mins.');
      }).catch(function() {
        console.log('Unable to abort, because the user is currently in the process of paying.');
      });
    }, 20000 * 60);
  }
};

style.css

body, html {
  background-color: #fff;
  height: 100%;
  width: 335px;
  font-family: 'Montserrat', sans-serif;
  margin: 20px auto;
}

img, div {
  margin: 0 auto;
  display: block;
}

div {
  margin-bottom: 20px;
}

h1 {
  display: block;
  border-bottom: 1px solid #c21807;
}

h3, label {
  font-weight: 700;
  font-size: 23px;
}

img {
  width: 261px;  
}

input {
  width: 50px; 
  float: right;
}

span {
  float: right;
  color: #c21807;
}

.pay-button {
  background-color: white;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-size: 16px;
  padding: 16px 32px;
  width: 170px;
  background-color: #c21807;
  color: #ffffff;
  letter-spacing: 2px;
  font-weight: 700;
  margin: 20px 0 0 170px;
  display: block;
}

.pay-button:hover {
  background-color: #f31e09;
}

.pay-button:focus {
  outline: 0;
}

.currency {
  margin-top: -50px;
  margin-left: 240px;
  position: absolute;
  color: #c21807;
}

#subTotalText {
  margin-top: -50px;
  float: right;
  color: #c21807;
}

#message {
  float: left;
  margin-top: 10px;
  width: 320px;
  display: none;
  padding: 10px;
  font-weight: bold;
  border-radius: 5px;
}

#message.success {
  background-color: #ace1af;
  color: #008000;
  display: block;
}

#message.success > span {
  float: left;
  font-size: 30px;
  color: #008000;
  padding: 0px 10px;
  line-height: 40px;
}

#message.failure {
  background-color: #FFD1DC;
  color: #ff0000;
  display: block;
}

#message.failure > span {
  float: left;
  font-size: 30px;
  color: red;
  padding: 0px 10px;
  line-height: 40px;
}

#message.info {
  background-color: #FCF75E;
  display: block;
  color: #000000;
  line-height: 20px;
}

#message.info > span {
  float: left;
  font-size: 30px;
  color: #000000;
  padding: 0px 10px;    
  line-height: 20px;
}

#discount {
  width: 100px;
  border: 1px solid #ff0000;
  color: #ffffff;
  background-color: #ff0000;
  padding: 20px;
  position: absolute;
  margin-top: -70px;
  margin-left: 200px;
  transform: rotate(10deg);
  text-align: center;
  font-size: 18px;
}

#getmore {
  float: right;
  font-style: italic;
  display: none;
  font-size: 13px
}