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

[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

3a6de6bc902de7f75c0e753b3202ed52?s=128

Google Developers Group Lviv

October 13, 2017
Tweet

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. 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">
  3. 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" }, }] })
  4. 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" }, }] })
  5. 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" }, }] })
  6. 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" }, }] })
  7. 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
  8. 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
  9. 19.

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

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

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

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

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

    song and start payment request flow Process payment in the backend and deliver
  12. 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/
  13. 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