Payment Request API – Wie Sie Ihre PWA monetarisieren

Auf Wiedersehen, App Store! Progressive Web Apps (PWA) stellen ein Anwendungsmodell dar, das Webanwendungen um native Features wie Offlinefähigkeit oder Pushbenachrichtigungen erweitert. Google, Apple, Mozilla und Microsoft sind schon an Bord. PWAs werden direkt aus dem Web heraus installiert, ohne auf einen App Store zurückgreifen zu müssen. Aber wie können App-Entwickler und Plattformanbieter auch in einer Zeit nach dem App Store Geld verdienen? Die Payment Request API möchte auf diese Frage eine Antwort liefern. Die Schnittstelle bietet eine konsistente Benutzeroberfläche für sämtliche Bezahlvorgänge im Web, sei es bei Online-Shops, beliebigen anderen Websites oder PWA. Der Plattformanbieter steuert die Daten bei, die ihm ohnehin schon über den Benutzer vorliegen. Christian Liebel von Thinktecture zeigt Ihnen, was mit der Payment Request API alles möglich wird.

Transcript

1. Payment Request API Wie Sie Ihre PWA monetarisieren Christian Liebel Consultant @christianliebel
2. Hello, it’s me. Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform, Cloud & Enterprise Blockchain Payment Request API Wie Sie Ihre PWA monetarisieren
3. Payment Request API Wie Sie Ihre PWA monetarisieren 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 Payment Request API Wie Sie Ihre PWA monetarisieren Apps in the future…
5. Progressive Web Apps Payment Request API Wie Sie Ihre PWA monetarisieren Apps in the future…
6. On the road to… Payment Request API Wie Sie Ihre PWA monetarisieren
7. marketing devices payment Payment Request API Wie Sie Ihre PWA monetarisieren features
8. Payment Request API Wie Sie Ihre PWA monetarisieren No app store, no money?
9. Payment Request API Wie Sie Ihre PWA monetarisieren Let’s use a checkout form!
10. Traditional checkout forms are… Payment Request API Wie Sie Ihre PWA monetarisieren Online Payment repetitive tedious (sometimes) not touch-friendly
11. Internet Access Mobile Desktop Payment Request API Wie Sie Ihre PWA monetarisieren Online Payments Conversions Mobile Desktop
12. Payment Request API Wie Sie Ihre PWA monetarisieren 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) Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
14. Browser Support Payment Request API Wie Sie Ihre PWA monetarisieren 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'; } Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
16. API const request = new PaymentRequest(methodData, details, options); Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
17. API const methodData = [{ supportedMethods: 'basic-card', data: { supportedNetworks: ['visa'], supportedTypes: ['credit'] } }]; Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API Payment methods are not part of the spec!
18. API const details = { displayItems, total, shippingOptions }; Payment Request API Wie Sie Ihre PWA monetarisieren 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'} } Payment Request API Wie Sie Ihre PWA monetarisieren 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'} }] Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
21. API const options = { requestPayerEmail: false, requestPayerName: false, requestPayerPhone: false, requestShipping: true }; Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
22. Flow https://blogs.windows.com/msedgedev/2016/12/15/payment-request-api-edge/ Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
23. API request.addEventListener('shippingoptionchange', evt => { // TODO: update payment request evt.updateWith(/* TODO */); }); Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
24. API request.addEventListener('shippingaddresschange', evt => { // TODO: update payment request changeEvent.updateWith(/* TODO */); }); Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
25. API const request = new PaymentRequest(methodData, details, options); request.canMakePayment(); Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
26. API const request = new PaymentRequest(methodData, details, options); request.show() .then(res => finishPurchase(res)) .then(res => res.complete('success')); Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
27. UI Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
28. Apple Pay Safari & macOS excusively support Payment Request API payments via Apple Pay Thus, it’s currently not an option in Germany or Austria 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 Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
29. Apple Pay Payment Request API Wie Sie Ihre PWA monetarisieren 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) Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
31. Apple Pay Payment Request API Wie Sie Ihre PWA monetarisieren 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. Demo https://pwa.liebel.io Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
33. 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 Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
34. Fallback Payment Request API Wie Sie Ihre PWA monetarisieren 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
35. Fallback Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API Don’t do online payments at all. HTTPS enabled? No
36. 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) (behind flag) OS (Desktop) Windows 10 Windows 7+, macOS 10.10+, Linux macOS 10.12+ 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 Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
37. Summary Payment Request API is a cool technology that simplifies online (and especially mobile) payments a lot However, only ~50% of the devices in Germany currently support it (Apple devices included, which don’t have Apple Pay support in Germany) In the future: Payment Handlers (= PWAs that can handle payments, i.e. for banks or payment providers) Hence: Fallback solutions (i.e. server-rendered checkout forms) will still be required for quite a long time Payment Request API Wie Sie Ihre PWA monetarisieren Payment Request API
38. Thanks for your attention! Christian Liebel @christianliebel Thinktecture AG