Slide 1
Slide 1 text
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Christian Liebel
Consultant
@christianliebel
Slide 2
Slide 2 text
Hello, it’s me.
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Christian Liebel
Follow me:
@christianliebel
Blog:
christianliebel.com
Email:
christian.liebel
@thinktecture.com
Cross-Platform &
Serverless
Slide 3
Slide 3 text
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Apps today…
Slide 4
Slide 4 text
Progressive Web Apps
• No app stores anymore!
• Web App = App App
(cross-platform!)
• Feature parity: Push
notifications, offline
availability and more
• Backwards compatibility:
PWAs can also be run on non-
PWA browsers, but with
reduced feature set
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Apps in the future…
Slide 5
Slide 5 text
Progressive Web Apps
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Apps in the future…
Slide 6
Slide 6 text
On the road to…
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Slide 7
Slide 7 text
marketing
devices
payment
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
features
Slide 8
Slide 8 text
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
No app store,
no money?
Slide 9
Slide 9 text
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Let’s use a
checkout form!
Slide 10
Slide 10 text
Traditional checkout forms are…
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Online Payment
repetitive tedious (sometimes) not
touch-friendly
Slide 11
Slide 11 text
Internet Access
Mobile Desktop
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Online Payments
Conversions
Mobile Desktop
Slide 12
Slide 12 text
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 13
Slide 13 text
Requests payments from the user
User agent provides a consistent UI across all websites, online shops,
Progressive Web Apps
User agent can provide name, address, payment information of the
user
Does not actually perform the request (i.e. not a payment service
provider)
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 14
Slide 14 text
Browser Support
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 15
Slide 15 text
Progressive Enhancement
if ('PaymentRequest' in window) {
// use it…
} else {
// navigate to classic checkout form
window.location.href = 'https://example.com/checkout';
}
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 16
Slide 16 text
API
const request =
new PaymentRequest(methodData, details, options);
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 17
Slide 17 text
API
const methodData = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa'],
supportedTypes: ['credit']
}
}];
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Payment methods are not part of the spec!
Slide 18
Slide 18 text
API
const details = {
displayItems,
total,
shippingOptions
};
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 19
Slide 19 text
API
displayItems: [{
label: '12-Monats-Abo',
amount: {currency: 'EUR', value: '142.43'}
}, {
label: '7% MwSt.',
amount: {currency: 'EUR', value: '9.97'}
}],
total: {
label: 'Summe',
amount: {currency: 'EUR', value: '152.40'}
}
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 20
Slide 20 text
API
shippingOptions: [{
id: 'normal',
label: 'Normal',
amount: {currency: 'EUR', value: '0.00'},
selected: true
}, {
id: 'express',
label: 'Express',
amount: {currency: 'EUR', value: '4.99'}
}]
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 21
Slide 21 text
API
const options = {
requestPayerEmail: false,
requestPayerName: false,
requestPayerPhone: false,
requestShipping: true
};
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 22
Slide 22 text
Flow
https://blogs.windows.com/msedgedev/2016/12/15/payment-request-api-edge/
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 23
Slide 23 text
API
request.addEventListener('shippingoptionchange', evt => {
// TODO: update payment request
evt.updateWith(/* TODO */);
});
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 24
Slide 24 text
API
request.addEventListener('shippingaddresschange', evt => {
// TODO: update payment request
changeEvent.updateWith(/* TODO */);
});
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 25
Slide 25 text
API
const request =
new PaymentRequest(methodData, details, options);
request.canMakePayment();
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 26
Slide 26 text
API
const request =
new PaymentRequest(methodData, details, options);
request.show()
.then(res => finishPurchase(res))
.then(res => res.complete('success'));
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 27
Slide 27 text
UI
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 28
Slide 28 text
Apple Pay
Safari & macOS excusively support Payment
Request API payments via Apple Pay
Not supported by every major bank in
Germany (yet)
Apple Pay support requires additional
configuration (e.g. server authentication,
website verification)
Payment Request API support is just a
projection of the Apple Pay JS API
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 29
Slide 29 text
Apple Pay
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 30
Slide 30 text
Chrome on iOS is based on the
Safari rendering engine (Apple only
allows the WebKit engine on its
platform)
However, Chrome on iOS intercepts
the Payment Request API and thus
allows other payment methods (e.g.
basic card)
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 31
Slide 31 text
Apple Pay
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
{
supportedMethods: 'https://apple.com/apple-pay',
data: {
version: 3,
countryCode: 'DE',
supportedNetworks: ['amex', 'jcb', 'visa'],
merchantIdentifier: 'merchant.com.thinktecture',
merchantCapabilities: ['supportsDebit']
}
}
Slide 32
Slide 32 text
Google Pay
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
{
supportedMethods: 'https://google.com/pay',
data: {
apiVersion: 1,
environment: 'TEST',
paymentMethodTokenizationParameters: {
tokenizationType: 'DIRECT',
parameters: {
publicKey: '…'
}
},
allowedPaymentMethods: ['CARD', 'TOKENIZED_CARD'],
cardRequirements: {
allowedCardNetworks: ['AMEX', 'MASTERCARD', 'VISA']
}
}
}
Slide 33
Slide 33 text
Demo
https://pwa.liebel.io
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 34
Slide 34 text
Mobify 2018 Q1 Mobile Commerce Insights Report
0
5
10
15
20
25
30
35
40
45
50
Without PRA With PRA
Abandonment Rates
0
10
20
30
40
50
60
70
80
90
Without PRA With PRA
Time from Start of Checkout to Purchase
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 35
Slide 35 text
Fallback
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Fallback (i.e. server-rendered checkout form)
JavaScript
enabled?
Payment
Request API
supported?
Payments via
PRA can be
made?
No No No
Slide 36
Slide 36 text
Fallback
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Don’t do online payments at all.
HTTPS
enabled?
No
Slide 37
Slide 37 text
Platform Support
Browser Microsoft Edge Google Chrome Apple Safari Mozilla Firefox
Payment Request API
From version 15 53
(Desktop: 61)
11.1
(Polyfill: 10.0)
66
OS (Desktop) Windows 10 Windows 7+,
macOS 10.10+,
Linux
macOS 10.12+ Windows 7+,
macOS 10.9+,
Linux
OS (Mobile) Android 4.1+ iOS 11.3+
(Polyfill: iOS
10+)
?
Supported Payment Methods
Basic Card X X X
Apple Pay X
Google Pay X
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 38
Slide 38 text
Summary
Payment Request API is a cool technology that simplifies online (and
especially mobile) payments a lot
Keep JavaScript, Payment Request API & Payment Method support and
user’s acceptance of payment methods in mind
Hence: Fallback solutions (i.e. server-rendered checkout forms) will still
be required for quite a long time
In the future: Payment Handlers (= PWAs that can handle payments, i.e.
for banks or payment providers) + possible SEPA support (Credit
Transfer Payment Method is in early specification)
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Payment Request API
Slide 39
Slide 39 text
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
- Das PWA-Anwendungsmodell
- Web App Manifest
- Service Worker und Cache API
- Workbox: Toolkit für PWAs
- Angular-Unterstützung für PWAs
- Natives Look & Feel
- Migrieren & veröffentlichen
- Payment Request API & Apple Pay
www.rheinwerk-verlag.de/4707
Slide 40
Slide 40 text
Questions?
Web-Payments neu gedacht
Abrechnen mit der Payment Request API
Slide 41
Slide 41 text
Thanks for your attention!
Christian Liebel
@christianliebel
Thinktecture AG