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.

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