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. 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
  2. 4.
  3. 5.
  4. 8.

    <form> <input name=”number” /> <input name=”expiration” /> <input type=”submit” />

    </form> <script src=”gateway.js”></script> But what about PCI compliance?
  5. 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?
  6. 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?
  7. 17.

    Most frustrating aspects of mobile checkout • Small screen size

    • Entering card information ◦ Need to enter for each merchant • Heterogeneity
  8. 18.

    Most frustrating aspects of mobile checkout • Small screen size

    • Entering card information ◦ Need to enter for each merchant • Heterogeneity
  9. 23.

    2016 has seen two native APIs emerge PaymentRequest Google I/O

    May 2016 Safari Apple Pay WWDC June 2016
  10. 25.
  11. 27.

    var details = { total: { label: 'Donation', amount: {currency:

    'USD', value: '55.00'} }, displayItems: [{ label: 'CatDog', amount: { currency: 'USD', value: '65.00' } }] }
  12. 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() } )
  13. 29.

    { methodName: 'visa', details: { cardHolderName: 'Jane Smith', cardNumber: '4111111111111111',

    expiryMonth: '01', expiryYear: '2021', cardSecurityCode: '123' } }
  14. 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
  15. 31.

    When will PaymentRequest be available? • Available for credit cards

    now in Chrome 53! • Android Pay late 2016 • 3rd party apps 2017
  16. 35.
  17. 38.
  18. 40.

    var options = { currencyCode: 'USD', countryCode: 'US', total: {

    label: 'Canine Clothing', amount: '19.99' }, supportedNetworks: ['amex', 'masterCard'] };
  19. 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) }
  20. 45.

    PCI Compliance estimates Raw PaymentRequest: SAQ A-EP Via a payment

    gateway (if supported): SAQ A-EP Android Pay & Apple Pay: SAQ A
  21. 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”>
  22. 47.

    Realistic timeline • Realistically given PCI compliance and browser development

    timelines, my wildly speculative estimate is mid to late 2017
  23. 49.

    Merchants Upside: potentially more card volume Downside: might require engineering

    resources to implement (based on how they accept payments)
  24. 51.

    Acquiring banks & Card Networks Upside: potentially more card volume

    Upside: no change to existing payment rails
  25. 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?
  26. 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
  27. 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/
  28. 56.

    Thank You Comments - Questions - Tomatoes - @jcarp Special

    thanks to: • Elliot Lee, Braintree • Zach Koch, Google Chrome