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

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

June 14, 2018
Tweet

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 Mobil e Desktop On the Road to PWA

    Monetising Your App with Payment Request API Online Payments Conversions Mobil e 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.w indow s.com /m sedgedev/2016/12/15/paym ent-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. Mobify 2018 Q1 Mobile Commerce Insights Report 0 5 10

    15 20 25 30 35 40 45 50 Witho ut PRA With PRA Abandonment Rates 0 10 20 30 40 50 60 70 80 90 Witho ut PRA With PRA Time from Start of Checkout to Purchase On the Road to PWA Monetising Your App with Payment Request API Payment Request API
  33. 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? Payments via PRA can be made? No No No
  34. 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
  35. 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
  36. 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
  37. Thanks for your attention! Christian Liebel @christianliebel Thinktecture AG