[Jose Aguinaga] Buy my mixtape: the Payment Request API in action

Transcript

1. 1.

   Web Payment Request API Buy my mixtape: the Payment Request

   API in action Jose Aguinaga Senior Front End Engineer @ Flynt.io
2. 2.

   Payment Request API What is, and why do we need

   it?
3. 3.

   Credits: Photo by Anete Lüsina on Unspash

4. 4.

   Credits: Google Progressive Web Apps Training Unit 21

5. 5.

   Credits: MS Edge Summit Day 1 - Pay the Web

   Forward
6. 6.

   #dfua Autofill <label for="frmNameCC">Name on card</label> <input name="ccname" autocomplete="cc-name"> <label

   for="frmCCNum">Card Number</label> <input name="cardnumber" autocomplete="cc-number"> <label for="frmCCCVC">CVC</label> <input name="cvc" autocomplete="cc-csc"> <label for="frmCCExp">Expiry</label> <input name="cc-exp" autocomplete="cc-exp">
7. 7.

   Credits: MS Edge Summit Day 1 - Pay the Web

   Forward
8. 8.

   #dfua Web Payment Request API A standard shopping UI experience

   within your browser for all users.
9. 9.

   #dfua Web Payment Request API

10. 10.

    #dfua new PaymentRequest({ supportedMethods: ["visa", "mastercard"] }, { displayItems: [

    { label: "Sub-total", amount: { currencyCode: "USD", value: "55.00" } } ], total: [{ label: "Total excluding shipping", amount: { currencyCode: "USD", value: "55.00" }, }] })
11. 11.

    #dfua new PaymentRequest({ supportedMethods: ["visa", "mastercard"] }, { displayItems: [

    { label: "Sub-total", amount: { currencyCode: "USD", value: "55.00" } } ], total: [{ label: "Total excluding shipping", amount: { currencyCode: "USD", value: "55.00" }, }] })
12. 12.

    #dfua new PaymentRequest({ supportedMethods: ["visa", "mastercard"] }, { displayItems: [

    { label: "Sub-total", amount: { currencyCode: "USD", value: "55.00" } } ], total: [{ label: "Total excluding shipping", amount: { currencyCode: "USD", value: "55.00" }, }] })
13. 13.

    #dfua new PaymentRequest({ supportedMethods: ["visa", "mastercard"] }, { displayItems: [

    { label: "Sub-total", amount: { currencyCode: "USD", value: "55.00" } } ], total: [{ label: "Total excluding shipping", amount: { currencyCode: "USD", value: "55.00" }, }] })
14. 14.

    Use Case: Selling Music Online Showcasing the Web Payment Request

    API
15. 15.

    Credits: Simone Acquaroli on Unsplash

16. 16.

    Credits: NeONBRAND on Unsplash

17. 17.

    #dfua The mixtape buying experience in the 70’s Record mixtape

    in multiple cassettes Let people try cassette with a Walkman Sell it them for ca$h
18. 18.

    #dfua The mixtape buying experience in 2017 Host song/songs in

    website Let them try it using the Web Audio API Allow purchase with mobile payments
19. 19.

    #dfua Mobile Payment Workflow Scan “tape” with musician song Preview

    song and start payment request flow Process payment in the backend and deliver
20. 20.

    #dfua Mobile Payment Workflow Scan “tape” with musician song Preview

    song and start payment request flow Process payment in the backend and deliver
21. 21.

    #dfua Mobile Payment Workflow Scan “tape” with musician song Preview

    song and start payment request flow Process payment in the backend and deliver
22. 22.

    #dfua Demo https://web-payments.now.sh/ https://mixtape-web-payment.now.sh/

23. 23.

    Further research Payment Method ID - https://w3c.github.io/payment-method-id/ Payment Handler API

    - https://w3c.github.io/payment-method-id/ Payment Request API - https://www.w3.org/TR/payment-request/
24. 24.

    Resources Google Progressive Web App Training - https://goo.gl/hzbjhP MS Pay

    the Web Forward - https://goo.gl/ZGzFBL Google Chrome Samples - https://goo.gl/xwxi3w
25. 25.

    Thank you! Questions? Jose Aguinaga Senior Front End Engineer @

    Flynt.io