Payment request API demo

As per the latest spec

by Hemanth HM

HTML

<button id="checkout">
  Checkout
</button>

JavaScript

// From the spec
const methodData = [{
  supportedMethods: "basic-card",
  data: {
    supportedNetworks: ["visa", "mastercard"],
    supportedTypes: ["debit", "credit"],
  },
}]

const details = {
  id: "super-store-order-123-12312",
  displayItems: [{
    label: "Sub-total",
    amount: {
      currency: "USD",
      value: "55.00"
    },
  }, {
    label: "Sales Tax",
    amount: {
      currency: "USD",
      value: "5.00"
    },
  }, ],
  total: {
    label: "Total due",
    // The total is USD$65.00 here because we need to
    // add shipping (below). The selected shipping
    // costs USD$5.00.  
    amount: {
      currency: "USD",
      value: "65.00"
    },
  },
};

const options = {
  requestPayerEmail: true,
  requestPayerName: true,
  requestPayerPhone: true,
  requestShipping: true,
}


const shippingAddressChanged = r => {
  return new Promise(function(resolve, reject) {
    setTimeout(function() { // use setTimeOut to emulate delayed results
      resolve({
        shippingOptions: [{
            id: "express",
            label: "Express 2-day shipping",
            amount: {
              currencyCode: "USD",
              value: "25.00"
            }
          },
          {
            id: "ground",
            label: "Ground 5-7 day shipping",
            amount: {
              currencyCode: "USD",
              value: "8.00"
            }
          }
        ]
      });
    }, 2);
  })
}

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    // See below for a detailed example of handling these events
    request.onshippingaddresschange = async ev => {
       let details = await (shippingAddressChanged());
       ev.updateWith(details);
    };
    request.onshippingoptionchange = ev => {}


    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}
async function...