Making the Web Pay

Making the Web Pay

Adrian BatemanMicrosoft Edge

@adrianba

SmashingConf Los Angeles

SmashingConf Whistler

SmashingConf Oxford

Fish & Chips

Although actually I want to talk about shopping in general.

And in particular online shopping.

e-Commerce is booming!

In 2014, U.S. retail digital commercegrew to $268.5 billion.

In 2015, U.K. e-commerce revenue was $99 billion, the strongest in Europe and the third strongest in the world.

Amazon now has this site: https://www.amazon.com/gp/b2b/reports

My 2015 Amazon spending

"As friction gets removed from the mobile purchase process, gains in sales can be expected to accelerate."

https://www.w3.org/Payments/WG/

http://go4a.de/paymentrequest-api

Show me the money code!

Simple payment request code sample

	var request = new PaymentRequest(
	  ['visa','mc','amex'],
	  {
	    items: [
	      {
	        id: "total", label: "Fish and Chips",
	        amount: { currencyCode: "GBP", value: "12.50" }, // £12.50
	      }
	    ]
	  }
	);
	var promise = request.show();
					

User experience is implementation dependent

Approximately 75% of online sales are paid forby debit and credit cards.

Online wallets such as PayPal are also popular andaccount for just over 20% of purchases.

Supported payment methods

['visa','mc','amex']

['visa','mc','amex','paypal.com', ...]

Processing the response

	request.show()
	  .then(function(response) {
	    // process transaction response here
	    // response.methodName == selected payment method
	    // response.details == payment details e.g. card number
	    return response.complete(true);
	  })
	  .then(function() {
	    // redirect to confirmation page
	  })
	  .catch(function(e) {
	    //uh oh! something went wrong
	  });					
  				  

Please mail me my fish and chips

var request = new PaymentRequest(
  ['visa','mc','amex'],
  {
    items: [
      {
        id: "shipping", label: "FREE shipping",
        amount: { currencyCode: "GBP", value: "0.00"}
      },
      {
        id: "total", label: "Fish and Chips - TOTAL",
        amount: { currencyCode: "GBP", value: "12.50" }, // £12.50
      }
    ],
    shippingOptions: [
    { id: "free", label: "FREE shipping", amount: { currencyCode: "GBP", value: "0.00" } }
    ]
  },
  { requestShipping: true }
);
var promise = request.show();
					

We desperately need your feedback!

In the meantime, I need some fish & chips.

Thank you!

@MSEdgeDev or @adrianba

Slides: http://aka.ms/webpay-jam