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

Presentation from GDG DevFest Ukraine 2017 - the biggest community-driven Google tech conference in the CEE.

Learn more at: https://devfest.gdg.org.ua

Transcript

1. Web Payment Request API Buy my mixtape: the Payment Request API in action Jose Aguinaga Senior Front End Engineer @ Flynt.io
2. Payment Request API What is, and why do we need it?
3. Credits: Photo by Anete Lüsina on Unspash
4. Credits: Google Progressive Web Apps Training Unit 21
5. Credits: MS Edge Summit Day 1 - Pay the Web Forward
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. Credits: MS Edge Summit Day 1 - Pay the Web Forward
8. #dfua Web Payment Request API A standard shopping UI experience within your browser for all users.
9. #dfua Web Payment Request API
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. #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. #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. #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. Use Case: Selling Music Online Showcasing the Web Payment Request API
15. Credits: Simone Acquaroli on Unsplash
16. Credits: NeONBRAND on Unsplash
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. #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. #dfua Mobile Payment Workflow Scan “tape” with musician song Preview song and start payment request flow Process payment in the backend and deliver
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. #dfua Mobile Payment Workflow Scan “tape” with musician song Preview song and start payment request flow Process payment in the backend and deliver
22. #dfua Demo https://web-payments.now.sh/ https://mixtape-web-payment.now.sh/
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. 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. Thank you! Questions? Jose Aguinaga Senior Front End Engineer @ Flynt.io