Web-Payments neu gedacht: Abrechnen mit der Payment Request API

Anbieter von Onlineshops, Abodiensten oder Progressive Web Apps kennen das Problem: Sobald Zahlungen vom Nutzer angefordert werden sollen, wird die Sache komplex. Anwender müssen die immerselben Daten in vor allem mobil schwer zu bedienende Formulare eintragen und eventuell wird der Bedienfluss durch eine Weiterleitung zu einem externen Zahlungsdienstleister unterbrochen. Wäre es nicht schön, wenn der Webbrowser die Anwenderdaten vorausfüllen und der Nutzer auf komfortable Methoden wie Apple Pay oder Google Pay zurückgreifen könnte? Die Payment Request API bringt genau diese Features in Web. Christian Liebel von Thinktecture zeigt Ihnen, wofür sich diese plattformübergreifend einsetzbare Webschnittstelle eignet und wo ihre Grenzen liegen.

Transcript

1. Web-Payments neu gedacht Abrechnen mit der Payment Request API Christian Liebel Consultant @christianliebel
2. 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
3. Web-Payments neu gedacht Abrechnen mit der Payment Request API Apps today…
4. 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…
5. Progressive Web Apps Web-Payments neu gedacht Abrechnen mit der Payment Request API Apps in the future…
6. On the road to… Web-Payments neu gedacht Abrechnen mit der Payment Request API
7. marketing devices payment Web-Payments neu gedacht Abrechnen mit der Payment Request API features
8. Web-Payments neu gedacht Abrechnen mit der Payment Request API No app store, no money?
9. Web-Payments neu gedacht Abrechnen mit der Payment Request API Let’s use a checkout form!
10. Traditional checkout forms are… Web-Payments neu gedacht Abrechnen mit der Payment Request API Online Payment repetitive tedious (sometimes) not touch-friendly
11. Internet Access Mobile Desktop Web-Payments neu gedacht Abrechnen mit der Payment Request API Online Payments Conversions Mobile Desktop
12. Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API
13. 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
14. Browser Support Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API
15. 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
16. API const request = new PaymentRequest(methodData, details, options); Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API
17. 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!
18. API const details = { displayItems, total, shippingOptions }; Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API
19. 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
20. 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
21. API const options = { requestPayerEmail: false, requestPayerName: false, requestPayerPhone: false, requestShipping: true }; Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API
22. 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
23. 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
24. 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
25. API const request = new PaymentRequest(methodData, details, options); request.canMakePayment(); Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API
26. 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
27. UI Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API
28. 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
29. Apple Pay Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API
30. 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
31. 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'] } }
32. 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'] } } }
33. Demo https://pwa.liebel.io Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API
34. 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
35. 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
36. Fallback Web-Payments neu gedacht Abrechnen mit der Payment Request API Payment Request API Don’t do online payments at all. HTTPS enabled? No
37. 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
38. 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
39. 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
40. Questions? Web-Payments neu gedacht Abrechnen mit der Payment Request API
41. Thanks for your attention! Christian Liebel @christianliebel Thinktecture AG