Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Payments

E03bc205caffbeaa21e1b1535c94890f?s=47 jeffcarp
September 22, 2016

Web Payments

Turbocharging mobile commerce through native browser APIs

E03bc205caffbeaa21e1b1535c94890f?s=128

jeffcarp

September 22, 2016
Tweet

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...

  4. None
  5. None
  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

  25. None
  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

  38. None
  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