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

Killing the checkout or: How I learned to stop ...

Krystosterone
September 07, 2018

Killing the checkout or: How I learned to stop worrying and love Payment Request

What if payments were natively supported in the browser? This is the goal of W3C’s Web Payments Working Group first deliverable: the Payment Request API.

Now implemented in most major browsers and with the Payment Handler API on its way, you’ll never think of payments on the web the same way. We want that by the end of this presentation, you not only know how to accept payments on the web through the Payment Request API, but would be able to code your very own payment method through the Payment Handler API.

Let’s spread the knowledge around Payment Request and Payment Handlers, killing the checkout as we know it, forever.

Krystosterone

September 07, 2018
Tweet

Other Decks in Technology

Transcript

  1. 2 About Me Payments Tech Lead Web Payments Working Group

    Member @Krystosterone Krystian Czesak
  2. 3 Brief History 402 Payment Required This response code is

    reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.
  3. 4 Brief History • No native solution to initiate transfer

    money on the web • Some solutions were attempted: • W3C’s Electronic Commerce Interest Group
  4. 6 Brief History • No native solution to initiate transfer

    money on the web • Some solutions were attempted: • W3C’s Electronic Commerce Interest Group • Electronic Commerce Modeling Language • Closest solution we have to date: • 3rd party payment libraries
  5. 69% Cart abandonement 7 State of the checkout today •

    Not changed for a while • Same tedious process on different websites • Same problems solved over and over • Few redeeming features help reduce friction 27% Abandonment because of complicated process 14 Number of fields on average
  6. 12 What is PaymentRequest? • A checkout experience, leveraged by

    a JS API • Directly in the browser: No SDK required • It can show multiple payment methods • It is NOT a payment processor • Unbranded experience
  7. 23

  8. 45 What is PaymentRequest? • A checkout experience, leveraged by

    a JS API • Directly in the browser: No SDK required • It can show multiple payment methods • It is NOT a payment processor • Unbranded experience
  9. 46 What is PaymentRequest? • A checkout experience, leveraged by

    a JS API • Directly in the browser: No SDK required • It can show multiple payment methods • It is NOT a payment processor • Unbranded experience
  10. 47

  11. 49 Browser’s Payment Methods • basic-card • Google Pay •

    Interledger • basic-card • basic-card • Samsung Pay • basic-card • Apple Pay
  12. 50 International Payment Methods • Bank Transfers / ACH •

    Boleto Bancario, ServiPag, DineroMail • Cash on Delivery • Wallets (AliPay, Paypal, Amazon Pay…)
  13. 52 Implementing a Payment Web App 1. Setup a payment

    web app 2. Register app to the browser 3. Surface payment method in PaymentRequest 4. Allow for payment through payment method
  14. 53 Implementing a Payment Web App manifest.json payment-manifest.json service-worker.js Install

    page GET / Identifier URL GET /pay Checkout GET /checkout Krystostecoin Website
  15. 89

  16. 90 What is Payment Handler API? • Allows us to

    surface our own payment method • Standardizes payment method communication • Allows for registration of 3rd party payment methods
  17. 92 Summary • The “Checkout” has not changed for the

    longest time • PaymentRequest brings the checkout to some of the major browsers, in an unbranded fashion • Payment Handler API allows for custom payment methods
  18. 93 Caveats Payment Affecting Checkout Affecting • Discount Codes •

    Tender transactions • Few payment methods • Payment Handler API adoption • Accept T&Cs • KYC Information • Delivery dates • Gift / Giftwrapping / Message • Subscribe to newsletter
  19. 97 Join the discussion • W3C’s Wiki Page • Web

    Payments Slack: bit.ly/lets-talk-web-payments • Shopify use cases: • Experimentation: bit.ly/shopify-web-payments • Demos: bit.ly/shopify-web-payments-demos • Let’s talk!