Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

June 26, 2019
Tweet

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