if (window.PaymentRequest) {
  // We're good to go...
} else {
  // Alas! Use your legacy checkout form...
}

var methodData = [{
  supportedMethods: ['basic-card']
}];

var details = {
  total: {
    label: 'Lovely socks', 
    amount: {currency: 'GBP', value: '12.00'}
  }
};

// Show the payment UI and handle the result

new PaymentRequest(methodData, details)
  .show()
  .then(function(paymentResponse) {
    // Send paymentResponse to server or gateway, then...
    paymentResponse.complete('success');
  })
  .catch(function(error) {
    // Unable to complete, e.g. user cancelled
  });

var details = {
  displayItems: [
    ...
    {
      label: "Loyalty discount",
      amount: { currency: "GBP", value : "-1.00" },
    }
  ],
  total: {
    label: 'Total', 
    amount: {currency: 'GBP', value: '11.00'}
  },
  ...

  ...
  shippingOptions: [
    {
      id: 'standard',
      label: 'Standard shipping',
      amount: {currency: 'GBP', value: '1.50'},
      selected: true
    }
  ]
};

var options = {
  requestPayerName: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestShipping: true
};

new PaymentRequest(methodData, details, options)
  ...