On the Road to PWA: Monetising Your App with Payment Request API

Goodbye, app store! Progressive Web Apps (PWA) is an application model that empowers web applications to use “native” features such as offline capability or push notifications. PWAs can be installed on the device by simply adding them to the home screen. With Google, Apple and Microsoft on board, PWA are here to stay. But how do app developers and vendors make money in a post-app store age? Fortunately, there’s an answer to that: The Payment Request API. This feature allows online shops, websites and apps to display a convenient, consistent user interface for online payments. Thinktecture’s Christian Liebel (@christianliebel) shows what you can do with Payment Request API.

Transcript

1. On the Road to Progressive Web Apps Monetising Your App with Payment Request API 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 On the Road to PWA Monetising Your App with Payment Request API
3. On the Road to PWA Monetising Your App with 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 On the Road to PWA Monetising Your App with Payment Request API Apps in the future…
5. Progressive Web Apps On the Road to PWA Monetising Your App with Payment Request API Apps in the future…
6. On the road to… On the Road to PWA Monetising Your App with Payment Request API
7. marketing devices payment On the Road to PWA Monetising Your App with Payment Request API features
8. On the Road to PWA Monetising Your App with Payment Request API No app store, no money?
9. On the Road to PWA Monetising Your App with Payment Request API Let’s use a checkout form!
10. Traditional checkout forms are… On the Road to PWA Monetising Your App with Payment Request API Online Payment repetitive tedious (sometimes) not touch-friendly
11. Internet Access Mobile Desktop On the Road to PWA Monetising Your App with Payment Request API Online Payments Conversions Mobile Desktop
12. On the Road to PWA Monetising Your App with 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) On the Road to PWA Monetising Your App with Payment Request API Payment Request API
14. Browser Support On the Road to PWA Monetising Your App with 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'; } On the Road to PWA Monetising Your App with Payment Request API Payment Request API
16. API const request = new PaymentRequest(methodData, details, options); On the Road to PWA Monetising Your App with Payment Request API Payment Request API
17. API const methodData = [{ supportedMethods: 'basic-card', data: { supportedNetworks: ['visa'], supportedTypes: ['credit'] } }]; On the Road to PWA Monetising Your App with Payment Request API Payment Request API Payment methods are not part of the spec!
18. API const details = { displayItems, total, shippingOptions }; On the Road to PWA Monetising Your App with 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'} } On the Road to PWA Monetising Your App with 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'} }] On the Road to PWA Monetising Your App with Payment Request API Payment Request API
21. API const options = { requestPayerEmail: false, requestPayerName: false, requestPayerPhone: false, requestShipping: true }; On the Road to PWA Monetising Your App with Payment Request API Payment Request API
22. Flow https://blogs.windows.com/msedgedev/2016/12/15/payment-request-api-edge/ On the Road to PWA Monetising Your App with Payment Request API Payment Request API
23. API request.addEventListener('shippingoptionchange', evt => { // TODO: update payment request evt.updateWith(/* TODO */); }); On the Road to PWA Monetising Your App with Payment Request API Payment Request API
24. API request.addEventListener('shippingaddresschange', evt => { // TODO: update payment request changeEvent.updateWith(/* TODO */); }); On the Road to PWA Monetising Your App with Payment Request API Payment Request API
25. API const request = new PaymentRequest(methodData, details, options); request.canMakePayment(); On the Road to PWA Monetising Your App with 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')); On the Road to PWA Monetising Your App with Payment Request API Payment Request API
27. UI On the Road to PWA Monetising Your App with Payment Request API 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 On the Road to PWA Monetising Your App with Payment Request API Payment Request API
29. Apple Pay On the Road to PWA Monetising Your App with Payment Request API Payment Request API
30. Apple Pay On the Road to PWA Monetising Your App with Payment Request API Payment Request API { supportedMethods: 'https://apple.com/apple-pay', data: { version: 2, countryCode: 'DE', supportedNetworks: ['amex', 'jcb', 'visa'], merchantIdentifier: 'merchant.com.thinktecture', merchantCapabilities: ['supportsDebit'] } }
31. Demo https://pwa.liebel.io On the Road to PWA Monetising Your App with Payment Request API Payment Request API
32. Fallback On the Road to PWA Monetising Your App with Payment Request API Payment Request API Fallback (i.e. server-rendered checkout form) JavaScript enabled? Payment Request API supported? Can make payments via PRA? No No No
33. Fallback On the Road to PWA Monetising Your App with Payment Request API Payment Request API Don’t do online payments at all. HTTPS enabled? No
34. 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 On the Road to PWA Monetising Your App with Payment Request API Payment Request API
35. 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 On the Road to PWA Monetising Your App with Payment Request API Payment Request API
36. Thanks for your attention! Christian Liebel @christianliebel Thinktecture AG