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

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

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. Killing the checkout or: How I learned to stop worrying

    and love Payment Request
  2. 2 About Me Payments Tech Lead Web Payments Working Group

    Member @Krystosterone Krystian Czesak
  3. 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.
  4. 4 Brief History • No native solution to initiate transfer

    money on the web • Some solutions were attempted: • W3C’s Electronic Commerce Interest Group
  5. 5 W3C’s solution in 2000 Source: https://www.w3.org/TR/Micropayment-Markup/

  6. 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
  7. 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
  8. Web Payments

  9. 9 PaymentRequest

  10. 10 PaymentRequest

  11. 11 PaymentRequest

  12. 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
  13. 13 Code Overview

  14. 14 Code Overview

  15. 15 Code Overview

  16. 16 Code Overview

  17. 17 Initializing

  18. 18 Initializing

  19. 19 Initializing

  20. 20 Details

  21. 21 Details

  22. 22 Don’t. 1.1 + 1.3 2.4000000000000004

  23. 23

  24. 24 Initializing

  25. 25 Initializing

  26. 26 Options

  27. 27 Options

  28. 28 Initializing

  29. 29 Initializing

  30. 30 What is method data?

  31. 31 What is method data?

  32. 32 What is method data?

  33. 33 What is method data?

  34. 34 Initializing

  35. 35 Code Overview

  36. 36 Code Overview

  37. 37 Code Overview

  38. 38 Showing the Sheet

  39. 39 Showing the Sheet

  40. 40 Showing the Sheet

  41. 41 Showing the Sheet

  42. 42 Showing the Sheet

  43. 43 Showing the Sheet

  44. 44 Code Overview

  45. 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
  46. 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
  47. 47

  48. Payment Handler API

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

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

    Boleto Bancario, ServiPag, DineroMail • Cash on Delivery • Wallets (AliPay, Paypal, Amazon Pay…)
  51. 51 Payment Handler demo

  52. 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
  53. 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
  54. 54 Payment method entry point payment-manifest.json Identifier URL GET /pay

  55. 55 Registering the app Install page GET /

  56. 56 Registering the app Install page GET /

  57. 57 Registering the app Install page GET /

  58. 58 Payment Request Method Data

  59. 59 Payment Request Method Data

  60. 60 Payment Method App manifest.json

  61. service-worker.js 61 Payment Method App

  62. 62 Payment Method App service-worker.js

  63. 63 Payment Method App service-worker.js

  64. 64 Payment Method App service-worker.js

  65. 65 Payment Method App service-worker.js

  66. 66 Payment Method App service-worker.js

  67. 67 Payment Method App service-worker.js

  68. 68 Two-Way Communication service-worker.js Checkout GET /checkout postMessage

  69. Checkout GET /checkout 69 Payment Method App

  70. Checkout GET /checkout 70 Payment Method App

  71. service-worker.js 71 Payment Method App Checkout GET /checkout

  72. service-worker.js 72 Payment Method App Checkout GET /checkout

  73. service-worker.js 73 Payment Method App Checkout GET /checkout

  74. service-worker.js 74 Payment Method App Checkout GET /checkout

  75. service-worker.js 75 Payment Method App Checkout GET /checkout

  76. service-worker.js 76 Payment Method App Checkout GET /checkout

  77. 77 Payment Method App Checkout GET /checkout

  78. 78 Payment Method App Checkout GET /checkout

  79. 79 Payment Method App Checkout GET /checkout

  80. 80 Payment Method App Checkout GET /checkout

  81. 81 Payment Method App Checkout GET /checkout service-worker.js

  82. 82 Payment Method App Checkout GET /checkout service-worker.js

  83. 83 Payment Method App Checkout GET /checkout service-worker.js

  84. 84 Payment Method App Checkout GET /checkout service-worker.js

  85. 85 Payment Method App service-worker.js

  86. 86 Resolving payment method

  87. 87 Resolving payment method

  88. 88 Resolving payment method

  89. 89

  90. 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
  91. Let’s summarize

  92. 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
  93. 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
  94. 94 Paradigm shift

  95. 95 Paradigm shift

  96. 96 Paradigm shift

  97. 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!
  98. Thanks