Web Payments

Turbocharging mobile commerce through native browser APIs

Transcript

1. Web Payments Turbocharging mobile commerce through native browser APIs Jeff Carpenter – @jcarp
2. Who is this And why are they up here Jeff Carpenter Software Engineer Google Chrome (Please note: I am not speaking on behalf of Google) Formerly at Braintree Payments
3. Let’s go on a journey… a mobile commerce journey...
6. Let's fix it
7. <form> <input name=”number” /> <input name=”expiration” /> <input type=”submit” /> </form>
8. <form> <input name=”number” /> <input name=”expiration” /> <input type=”submit” /> </form> <script src=”gateway.js”></script> But what about PCI compliance?
9. <form> <input name=”number” /> <input name=”expiration” /> <input type=”submit” /> </form> <script src=”gateway.js”></script> <script src=”cc-validator.js”></script> How about client-side validation?
10. <form> <input name=”number” /> <input name=”expiration” /> <input type=”submit” /> </form> <script src=”gateway.js”></script> <script src=”cc-validator.js”></script> <script src=”paypal.js”></script> <script src=”dogecoin.js”></script> What about supporting different payment methods?
11. Everyone does this
12. Everyone does this in a different way
13. Everyone does this in a different way on mobile
14. More users are buying on mobile...
15. ...but mobile conversion is much lower
16. Checkout on mobile web has a UX problem
17. Most frustrating aspects of mobile checkout • Small screen size • Entering card information ◦ Need to enter for each merchant • Heterogeneity
18. Most frustrating aspects of mobile checkout • Small screen size • Entering card information ◦ Need to enter for each merchant • Heterogeneity
19. Browsers can already store your credit card
20. Solution: native payment APIs for web
21. I’m excited about web payments because I don’t like entering my credit card 1000 times
22. I'm even more excited about web payments because I'm lazy
23. 2016 has seen two native APIs emerge PaymentRequest Google I/O May 2016 Safari Apple Pay WWDC June 2016
24. PaymentRequest
26. var instruments = [ { supportedMethods: [ 'amex', 'mastercard', 'Visa' ] } ]
27. var details = { total: { label: 'Donation', amount: {currency: 'USD', value: '55.00'} }, displayItems: [{ label: 'CatDog', amount: { currency: 'USD', value: '65.00' } }] }
28. new PaymentRequest(instruments, details).show() .then(instrumentResponse => { console.log(instrumentResponse.details) // Spinner is shown to customer // as you complete transaction // with your back-end instrumentResponse.complete() } )
29. { methodName: 'visa', details: { cardHolderName: 'Jane Smith', cardNumber: '4111111111111111', expiryMonth: '01', expiryYear: '2021', cardSecurityCode: '123' } }
30. Try it yourself! Chrome 53, Android only • Demo pages ◦ https://googlechrome.github.io/samples/paymentrequest/ • Integration guide • https://developers.google.com/web/fundamentals/primers/payment- request/?hl=en
31. When will PaymentRequest be available? • Available for credit cards now in Chrome 53! • Android Pay late 2016 • 3rd party apps 2017
32. When will PaymentRequest be in all browsers?
33. Mozilla Firefox PaymentRequest in development
34. Microsoft Edge PaymentRequest in development
35. Safari Apple Pay in macOS Sierra and iOS 10 Intent to implement PaymentRequest
36. Apple Pay in Safari
37. Apple Pay Payment Processing Certificate Apple Pay Merchant Identity Certificate
39. if (window.ApplePaySession) { var merchantId = 'com.dogs’ ApplePaySession .canMakePaymentsWithActiveCard(merchantId) .then(function (canMakePayments) { if (canMakePayments) { // show Apple Pay buttons } }) }
40. var options = { currencyCode: 'USD', countryCode: 'US', total: { label: 'Canine Clothing', amount: '19.99' }, supportedNetworks: ['amex', 'masterCard'] };
41. var session $('.apple-pay-button').on('click', function () { session = new ApplePaySession(1, options) })
42. Confirmation pops up on your phone
43. session.onvalidatemerchant = (event) => { // Send event.validationURL to your server // Start merchant session by // calling Apple’s servers // with two-way TLS (using merchant // validation certificate) }
44. PCI Compliance
45. PCI Compliance estimates Raw PaymentRequest: SAQ A-EP Via a payment gateway (if supported): SAQ A-EP Android Pay & Apple Pay: SAQ A
46. SAQ A • SAQ A for raw PANs may not be possible even with gateway support • W3C spec in development • Feature Policy • <iframe enable=”payment”>
47. Realistic timeline • Realistically given PCI compliance and browser development timelines, my wildly speculative estimate is mid to late 2017
48. Web payments is a win-win for (almost) everyone in the value chain
49. Merchants Upside: potentially more card volume Downside: might require engineering resources to implement (based on how they accept payments)
50. Payment Gateways Upside: potentially more card volume Downside: engineering resources to implement
51. Acquiring banks & Card Networks Upside: potentially more card volume Upside: no change to existing payment rails
52. JavaScript library authors Downside: card formatting and validation no longer handled by JavaScript
53. PayPal Has always been a simpler and safer alternative to entering credit cards. Are web payments a threat to one of PayPal’s value props?
54. W3C Specs • Payment Request API ◦ Payment Method Identifiers (e.g. the string ‘visa’) ◦ Basic Card Payment (credit card schema) • Start here: ◦ https://github.com/w3c/webpayments/wiki/PaymentRequestFAQ
55. Learning more • Good explanation of W3C rationale: ◦ https://www.w3.org/Payments/ • Bringing seamless checkouts to the mobile web - Google I/O 2016 ◦ https://www.youtube.com/watch?v=yelPlCVZLEE • Apple Pay WWDC talk ◦ https://developer.apple.com/videos/play/wwdc2016/703/
56. Thank You Comments - Questions - Tomatoes - @jcarp Special thanks to: • Elliot Lee, Braintree • Zach Koch, Google Chrome
57. Resources https://github.com/alrra/browser-logos/ The collective pug owners of the internet