Simple Check out

index.html

<h1>Cart</h1>
<img src="https://craftypixels.com/placeholder-image/200x200/c21807/fff&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">
<h3 class="price">SubTotal:</h3>
<h3><div class="currency">$</div><div id="subTotalText">0.00</div></h3>
<button class="pay-button">Buy Chillis</button>

script.js

const methodData = [{
  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);

amount.addEventListener("click", function() {
  let subtotal = Number(document.getElementById("amount").value * 4.99).toFixed(2);
  subTotalText.innerText = subtotal;
});

document.querySelector('.pay-button').onclick = function (e) {
  if(window.PaymentRequest) {
    let qty = parseFloat(document.getElementById("amount").value);
    let subtotal = Number(qty * 4.99); 
    let tax = 1.99;
    let shipping = 2.99;
    
    const details = {
      total: {
        label: 'Total due',
        amount: { currency: 'USD', value: (subtotal + tax + shipping).toFixed(2) }
      },
      displayItems: [{
        label: 'Sub-total',
        amount: { currency: 'USD', value: subtotal.toFixed(2) }
      }, {
        label: 'Delivery',
        amount: { currency: 'USD', value: 3.99 }
      }, {        
      label: 'Sales Tax',
      amount: { currency: 'USD', value: tax.toFixed(2) }
      }]
    };  
    
    const options = { requestPayerEmail: true };
    const request = new PaymentRequest(methodData, details, options);
    
    //Show the Native UI
    request
    .show()
    .then(function(result) {
      result.complete('success')
      .then(console.log(JSON.stringify(result)));
    }).catch(function(err) {
      console.error(err.message);
    });
  } else {
    // Fallback to traditional checkout
  }
};

simple-check-out.markdown

Simple Check out

A Pen by Edward Lance Lorilla on CodePen.

License.

style.css

body, html {
  background-color: #fff;
  height: 100%;
  width: 335px;
  font-family: 'Montserrat', sans-serif;
  margin: 0 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: 0px;
  position: absolute;
  display: none;
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />