【JAVASCRIPT】 change order payment request api

index.html

<div class="container">
  
  
  <div class="products"></div>
  
  <div class="shopping-cart">
    <div class="shopping-cart-head">
      <span class="product-quantity">0</span>
    </div>
    <ul class="shopping-cart-list">
    </ul>
    <div class="cart-buttons">
      <a class="button cart-checkout">Total: $<span class="total-price">0<a href="#0" class="button empty-cart-btn">x</a></span></a>
    </div>
    <div class="pay-button">Checkout securely</div>    
    
  </div>
  <div id="message"></div> 
</div>

javascript-change-order-payment-request-api.markdown

【JAVASCRIPT】 change order payment request api

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

window.onload = function(e) {
  const paymentMethods = [{
    supportedMethods: 'basic-card',
    data: {
      supportedNetworks: ['visa', 'mastercard', 'amex']
    }
  }];
  
  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 displayMessage(mesg) {
    document.getElementById("message").classList.add("info");
    document.getElementById("message").innerHTML = "<span>&#128712;</span>" + mesg;  
  }
  
  // configure payment request API
  document.querySelector(".pay-button").addEventListener("click", function(e) {
    document.getElementById("message").className = '';
    
    if (window.PaymentRequest) {
      let shipping = 2.99;
      let discount = 2.00;
      let subtotal = Number(document.querySelector(".total-price").innerText - discount);
      let tax = (subtotal + shipping) * 0.175;
      let total = Number(subtotal) + Number(tax) + Number(shipping);
      
      const paymentDetails = {
        total: {
          label: 'Total due',
          amount: { currency: 'USD', value:  total.toFixed(2) }
        },
        displayItems: [{
          label: 'Coffee capsules',
          amount: { currency: 'USD', value: subtotal.toFixed(2) }
        },{
          label: 'Shipping',
          amount: { currency: 'USD', value: 2.99 }
        }, {
          label: 'Discount',
          amount: { currency: 'USD', value: -2.00 }
        },{        
        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) {
            request.show().then(function(result) {
              result.complete('success').then(function() {
                console.log(JSON.stringify(result));
                displaySuccess();
              });      
            }).catch(function(err) {      
            if (err.message == "Request cancelled") {
              displayMessage("Request has been cancelled");
            } 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);
        });
      }
    }
  });
}

var ShoppingCart = (function($) {
  "use strict";
  
  var productsEl = document.querySelector(".products"),
      cartEl =     document.querySelector(".shopping-cart-list"),
      productQuantityEl = document.querySelector(".product-quantity"),
      emptyCartEl = document.querySelector(".empty-cart-btn"),
      cartCheckoutEl = document.querySelector(".cart-checkout"),
      totalPriceEl = document.querySelector(".total-price"),
      paymentEl = document.querySelector(".pay-button");
  
  var products = [
    {
      id: 0,
      name: "Ristretto",
      description: "100% expresso for a full-on flavor",
      imageUrl: "https://dummyimage.com/100x100/000/fff&text=black.png",
      price: 0.23
    },
    {
      id: 1,
      name: "Fortissimo",
      description: "A combination of coffees for a round taste with character.",
      imageUrl: "https://dummyimage.com/100x100/000/fff&text=red.png",
      price: 0.34
    },
    {
      id: 2,
      name: "Decaffeinato",
      description: "LoveCoffee's house coffee, sans caffeine",
      imageUrl: "https://dummyimage.com/100x100/000/fff&text=purple.png",
      price: 0.33
    },
    {
      id: 3,
      name: "Corrugilo",
      description: "Coffee roasted with whiskey, for that full-on Spanish taste",
      imageUrl: "https://dummyimage.com/100x100/000/fff&text=yellow.png",
      price: 0.33
    },
    {
      id: 4,
      name: "Africano",
      description: "Caramel-roasted coffee, for a delicate and sweet flavor",
      imageUrl: "https://dummyimage.com/100x100/000/fff&text=brown.png",
      price: 0.37
    }
    ],
      productsInCart = [];
  
  var generateProductList = function() {
    products.forEach(function(item) {
      var productEl = document.createElement("div");
      productEl.className = "product";
      productEl.innerHTML = `<div class="product-image"><img src="${item.imageUrl}" alt="${item.name}"></div>
      <div class="product-name"><span>Product:</span> ${item.name}</div>
      <div class="product-description"><span>Description:</span> ${item.description}</div>
      <div class="product-price"><span>Price:</span> $${item.price}</div>
      <div class="product-add-to-cart">
      <a class="button see-more">More Details</a>
      <a class="button add-to-cart" data-id=${item.id}>Add to Cart</a>
      </div>
      </div>`;    
      productsEl.appendChild(productEl);
    });
  }
  
  
  var generateCartList = function() {
    cartEl.innerHTML = "";
    
    productsInCart.forEach(function(item) {
      var li = document.createElement("li");
      var subtotal = (item.quantity * item.product.price).toFixed(2);
      li.innerHTML = `<span class="itemlist">${item.quantity} x ${item.product.name}</span>$<span class="subtotal">` + subtotal + `</span>`;
      cartEl.appendChild(li);
    });
    
    productQuantityEl.innerHTML = productsInCart.length;  
    generateCartButtons()
  }
  
  // Function that generates Empty Cart and Checkout buttons based on condition that checks if productsInCart array is empty
  var generateCartButtons = function() {
    if(productsInCart.length > 0) {
      emptyCartEl.style.display = "block";
      cartCheckoutEl.style.display = "block";
      paymentEl.style.display = "block";
      totalPriceEl.innerHTML = calculateTotalPrice();
    } else {
      emptyCartEl.style.display = "none";
      cartCheckoutEl.style.display = "none";
      paymentEl.style.display = "none";
      
    }
  }
  
  // Setting up listeners for click event on all products and Empty Cart button as well
  var setupListeners = function() {
    productsEl.addEventListener("click", function(event) {
      var el = event.target;
      if(el.classList.contains("add-to-cart")) {
        var elId = el.dataset.id;
        addToCart(elId);
      }
    });
    
    emptyCartEl.addEventListener("click", function(event) {
      if(confirm("Are you sure?")) {
        productsInCart = [];
      }
      generateCartList();
    });
  }
  
  // Adds new items or updates existing one in productsInCart array
  var addToCart = function(id) {
    var obj = products[id];
    if(productsInCart.length === 0 || productFound(obj.id) === undefined) {
      productsInCart.push({product: obj, quantity: 1});
    } else {
      productsInCart.forEach(function(item) {
        if(item.product.id === obj.id) {
          item.quantity++;
        }
      });
    }
    generateCartList();
  }
  
  var productFound = function(productId) {
    return productsInCart.find(function(item) {
      return item.product.id === productId;
    });
  }
  
  var calculateTotalPrice = function() {
    return productsInCart.reduce(function(total, item) {
      return total + (item.product.price *  item.quantity);
    }, 0).toFixed(2);
  }
  
  var init = function() {
    generateProductList();
    setupListeners();
  }
  
  return {
    init: init
  };
  
})();

ShoppingCart.init();

style.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  background: #fff;
  color: #333;
}

a {
  text-decoration: none;
}

.button {
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  background: steelblue;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.container {
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
}

.header {
  overflow: hidden;
  height: 320px;
  width: 550px;
  background-color: red;
  background-image: url(../images/background.png);
}

.header a {
  color: inherit;
}

.header a:hover {
  font-weight: bold;
}

.header-logo {
  float: left;
  font-size: 30px;
  color: #fff;
  border-bottom: 4px solid #fff;
  display: block;
  width: 100%;
  margin: 20px;
  background-color: rgba(0,0,0, 0.4)
}

.header-nav {
  float: right;
  margin-right: -40px;
}

.header-nav ul li {
  display: inline-block;
  margin: 0 20px;
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 260px;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background: #fff;
}

.product span {
  font-weight: bold;
}

.product-image img {
  display: block;
  max-width: 100px;
  width: 100%;
  margin: 0 auto;
}

.row .product:last-child {
  margin-right: 0;
}

.product-add-to-cart {
  overflow: hidden;
  clear: both;
  margin-top: 10px;
}

.see-more {
  float: left;
  background: indianred;
}

.add-to-cart {
  float: right;
  cursor: pointer;
}

.shopping-cart {
  width: 250px;
  margin-top: -300px;
  padding: 20px;
  background: wheat;
  float: right;
  display: inline-block;
  padding-bottom: 5px;
}

.shopping-cart-head {
  color: white;
  padding: 5px;
  float: right;
  margin-top: -10px;
}

.shopping-cart,
.shopping-cart-head {
  border-radius: 5px;
}

.shopping-cart-list {
  clear: both;
}

div.shopping-cart > ul > li {
  list-style: none;
  margin-left: -35px;
}

.itemlist {
  width: 150px;
  display: inline-block;
}

.subtotal {
  display: inline-block;
}

.empty-cart-btn,
.cart-checkout {
  display: none;
}

.empty-cart-btn {
  margin-bottom: 5px;
  width: 40px;
  float: right;
  margin-top: -39px;
  height: 40px;
  padding: 5px;
  background-color: indianred;
}

.cart-checkout {
  background: rgb(194, 192, 198);
  width: 73%;
  color: #000000;
  font-size: 16px;
}

.product-quantity {
  background-color: red;
  border-radius: 44px;
  padding: 5px;
  float: left;
  width: 28px;
  text-align: center;
  position: absolute;
  margin-top: -10px;
  margin-left: 46px;
}

.total-price {
  width: 55%;
  display: inline-block;
  text-align: right;
}

/* Menu and Account*/
#menu, #account {
  border: 1px solid #ffffff;
  background-color: white;
  display: inline-block;
  padding: 5px 10px 5px 15px;
  background-image: url('../images/hamburger.png');
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 30px;
  font-weight: bold;
}

#menu {
  width: 100px;
  margin-right: 20px
}

#account {
  margin-right: 70px;
  width: 130x;
}

.itemlist {
  width: 150px;
}

/* Search */
#search {
  border-bottom: 1px solid #f4f4f4;
  padding: 5px;
  display: block;
  background-color: rgb(194, 192, 198);
}

.search {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 45px;
  white-space: nowrap;
  box-sizing: border-box;
  font-size: 14px;
}

.search-wrapper {
  width: 100%;
  height: 100%;
}

.search-input {
  display: inline-block;
  transition: box-shadow .4s ease, background .4s ease;
  border: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #CCCCCC;
  background: #FFFFFF;
  padding: 0;
  padding-right: 72px;
  padding-left: 22px;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  white-space: normal;
  font-size: inherit;
}

.search-submit {
  position: absolute;
  top: 0;
  right: 0;
  left: inherit;
  margin: 0;
  border: 0;
  border-radius: 0 25px 25px 0;
  background-color: rgba(255, 255, 255, 0);
  padding: 0;
  width: 45px;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  font-size: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.search-submit::before {
  display: inline-block;
  margin-right: -4px;
  height: 100%;
  vertical-align: middle;
  content: '';
}

.search-submit:hover, .search-submit:active {
  cursor: pointer;
}

.search-submit:focus {
  outline: 0;
}

.search-submit svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  fill: #FF2E83;
}

.search-reset {
  display: none;
  position: absolute;
  top: 9px;
  right: 45px;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  fill: rgba(0, 0, 0, 0.5);
}

.search-reset:focus {
  outline: 0;
}

.search-reset svg {
  display: block;
  margin: 4px;
  width: 19px;
  height: 19px;
}

.pay-button {
  width: 210px;
  font-size: 14px;
  text-align: center;
  margin: 10px 0px;
  background-color: steelblue;
  display: none;
  letter-spacing: 1px;
  font-weight: bold;
  height: 30px;
  color: #ffffff;
  border-radius: 4px;
  line-height: 30px;
}

.pay-button:hover {
  cursor: pointer;
}

#message {
  float: right;
  margin-top: -60px;
  width: 250px;
  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;
  line-height: 35px;
}

#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;
  line-height: 35px;
}

#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: 35px;
}