Web Payments

and the future of online checkouts

💳

Peter O'Shaughnessy

Very long form 1 Very long form 2 Very long form 3 Very long form 4 Very long form 5

“I just want to buy some socks” 😱

66% fewer conversions on mobile than desktop

Source: Google Chrome

Cart abandoment reasons

baymard.com/lists/cart-abandonment-rate

What if your browser could help?

For users: simple & secure experience
For web devs: ready-to-use UI!

By Marc Falardeau

1. Our first sock sale

“Getting our foot in the door”

By Gus Greeper

Sock sale

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

var methodData = var methodData = [{
  // NB. To support older format, include networks here 
  supportedMethods: ['basic-card'],
  data: {
    // Examples. Others are available too!
    supportedNetworks: ['visa', 'mastercard', 'amex']
  }
}];

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

// Show the payment UI and handle the result

new PaymentRequest(methodData, details)
  .show()
  .then(function(uiResult) {
    myPaymentProcessor(uiResult);
  })
  .catch(function(error) {
    myErrorHandler(error);
  });

samsunginter.net/examples/socks-megastore/after-simple/ · youtu.be/ruuJr30FCTw

2. Adding customisations

“Thinking outside the socks”

By Nikol Lohr

var details = {
  displayItems: [
    {
      label: "Socks",
      amount: { currency: "GBP", value : "12.00" },
    },
    {
      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)
  ...