Web Payments

“A revolution in payments on the Web”

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

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

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

// Show payment UI and handle result

new PaymentRequest(methodData, details)
  .show()
  .then(function(paymentResponse) {
    // Process via gateway/processor, 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)
  ...

Better than autofill

• More accurate
• Form pre-built for you!
• Built-in validation
• Optimised for mobile
• 3rd party apps

UX

  const paymentDetails = {    
    // Or if we can't offer any shipping to this address
    shippingOptions: [],  
    ...
  };  
  event.updateWith(paymentDetails);

if (paymentRequest.canMakePayment) {
  paymentRequest.canMakePayment().then(result => {
    if (result) {
      // User has an active payment method
    } else {
      // No active payment method yet, but user can add
    }
  }).catch(function(error) {
    // Unable to determine
  });
}

Payment Response

Example PSP: WePay

WePay.wallet.beginTokenization(...);

request.show().then(function(result) {
    // POST the result to server
    return fetch('/pay', {
      method: 'POST',
      body: JSON.stringify(result.toJSON()),
      ...
    })
    // Then check response status & JSON &
    // call result.complete() with 'success' / 'fail'

let method = [{
  supportedMethods: ['https://apple.com/apple-pay'],
  data: {
    supportedNetworks: [
      'amex', 'discover', 'masterCard', 'visa'
    ],
    countryCode: 'US',
    validationEndpoint: '/applepay/validate/',
    merchantIdentifier: 'merchant.com.agektmr.payment'
  }
}];