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 examples

  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(...);

supportedMethods: ['https://spay.samsung.com'],
data: {
  'version': '1',
  'productId': '[Obtain from Partner Portal]',
  'allowedCardNetworks': ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA'],
  'orderNumber': '1234567',
  'merchantName': 'Elsevier Demo',
  'Debug': {
    'APIKey': '[Obtain from Partner Portal]'
  }
};