Killing the checkout or:
How I learned to stop worrying and love Payment Request
Slide 2
Slide 2 text
2
About Me
Payments Tech Lead
Web Payments Working
Group Member
@Krystosterone
Krystian Czesak
Slide 3
Slide 3 text
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.
Slide 4
Slide 4 text
4
Brief History
• No native solution to initiate transfer money on the web
• Some solutions were attempted:
• W3C’s Electronic Commerce Interest Group
Slide 5
Slide 5 text
5
W3C’s solution in 2000
Source: https://www.w3.org/TR/Micropayment-Markup/
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
Web Payments
Slide 9
Slide 9 text
9
PaymentRequest
Slide 10
Slide 10 text
10
PaymentRequest
Slide 11
Slide 11 text
11
PaymentRequest
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
13
Code Overview
Slide 14
Slide 14 text
14
Code Overview
Slide 15
Slide 15 text
15
Code Overview
Slide 16
Slide 16 text
16
Code Overview
Slide 17
Slide 17 text
17
Initializing
Slide 18
Slide 18 text
18
Initializing
Slide 19
Slide 19 text
19
Initializing
Slide 20
Slide 20 text
20
Details
Slide 21
Slide 21 text
21
Details
Slide 22
Slide 22 text
22
Don’t.
1.1 + 1.3
2.4000000000000004
Slide 23
Slide 23 text
23
Slide 24
Slide 24 text
24
Initializing
Slide 25
Slide 25 text
25
Initializing
Slide 26
Slide 26 text
26
Options
Slide 27
Slide 27 text
27
Options
Slide 28
Slide 28 text
28
Initializing
Slide 29
Slide 29 text
29
Initializing
Slide 30
Slide 30 text
30
What is method data?
Slide 31
Slide 31 text
31
What is method data?
Slide 32
Slide 32 text
32
What is method data?
Slide 33
Slide 33 text
33
What is method data?
Slide 34
Slide 34 text
34
Initializing
Slide 35
Slide 35 text
35
Code Overview
Slide 36
Slide 36 text
36
Code Overview
Slide 37
Slide 37 text
37
Code Overview
Slide 38
Slide 38 text
38
Showing the Sheet
Slide 39
Slide 39 text
39
Showing the Sheet
Slide 40
Slide 40 text
40
Showing the Sheet
Slide 41
Slide 41 text
41
Showing the Sheet
Slide 42
Slide 42 text
42
Showing the Sheet
Slide 43
Slide 43 text
43
Showing the Sheet
Slide 44
Slide 44 text
44
Code Overview
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
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
50
International Payment Methods
• Bank Transfers / ACH
• Boleto Bancario, ServiPag, DineroMail
• Cash on Delivery
• Wallets (AliPay, Paypal, Amazon Pay…)
Slide 51
Slide 51 text
51
Payment Handler demo
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
54
Payment method entry point
payment-manifest.json
Identifier URL
GET /pay
Slide 55
Slide 55 text
55
Registering the app
Install page
GET /
Slide 56
Slide 56 text
56
Registering the app
Install page
GET /
Slide 57
Slide 57 text
57
Registering the app
Install page
GET /
Slide 58
Slide 58 text
58
Payment Request Method Data
Slide 59
Slide 59 text
59
Payment Request Method Data
Slide 60
Slide 60 text
60
Payment Method App
manifest.json
Slide 61
Slide 61 text
service-worker.js
61
Payment Method App
Slide 62
Slide 62 text
62
Payment Method App
service-worker.js
Slide 63
Slide 63 text
63
Payment Method App
service-worker.js
Slide 64
Slide 64 text
64
Payment Method App
service-worker.js
Slide 65
Slide 65 text
65
Payment Method App
service-worker.js
Slide 66
Slide 66 text
66
Payment Method App
service-worker.js
Slide 67
Slide 67 text
67
Payment Method App
service-worker.js
Slide 68
Slide 68 text
68
Two-Way Communication
service-worker.js
Checkout
GET /checkout
postMessage
Slide 69
Slide 69 text
Checkout
GET /checkout
69
Payment Method App
Slide 70
Slide 70 text
Checkout
GET /checkout
70
Payment Method App
Slide 71
Slide 71 text
service-worker.js
71
Payment Method App
Checkout
GET /checkout
Slide 72
Slide 72 text
service-worker.js
72
Payment Method App
Checkout
GET /checkout
Slide 73
Slide 73 text
service-worker.js
73
Payment Method App
Checkout
GET /checkout
Slide 74
Slide 74 text
service-worker.js
74
Payment Method App
Checkout
GET /checkout
Slide 75
Slide 75 text
service-worker.js
75
Payment Method App
Checkout
GET /checkout
Slide 76
Slide 76 text
service-worker.js
76
Payment Method App
Checkout
GET /checkout
Slide 77
Slide 77 text
77
Payment Method App
Checkout
GET /checkout
Slide 78
Slide 78 text
78
Payment Method App
Checkout
GET /checkout
Slide 79
Slide 79 text
79
Payment Method App
Checkout
GET /checkout
Slide 80
Slide 80 text
80
Payment Method App
Checkout
GET /checkout
Slide 81
Slide 81 text
81
Payment Method App
Checkout
GET /checkout
service-worker.js
Slide 82
Slide 82 text
82
Payment Method App
Checkout
GET /checkout
service-worker.js
Slide 83
Slide 83 text
83
Payment Method App
Checkout
GET /checkout
service-worker.js
Slide 84
Slide 84 text
84
Payment Method App
Checkout
GET /checkout
service-worker.js
Slide 85
Slide 85 text
85
Payment Method App
service-worker.js
Slide 86
Slide 86 text
86
Resolving payment method
Slide 87
Slide 87 text
87
Resolving payment method
Slide 88
Slide 88 text
88
Resolving payment method
Slide 89
Slide 89 text
89
Slide 90
Slide 90 text
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
Slide 91
Slide 91 text
Let’s summarize
Slide 92
Slide 92 text
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
Slide 93
Slide 93 text
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
Slide 94
Slide 94 text
94
Paradigm shift
Slide 95
Slide 95 text
95
Paradigm shift
Slide 96
Slide 96 text
96
Paradigm shift
Slide 97
Slide 97 text
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!