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

Payments Revolution

Ignacio Anaya
September 21, 2018

Payments Revolution

Ignacio Anaya

September 21, 2018
Tweet

More Decks by Ignacio Anaya

Other Decks in Programming

Transcript

  1. Nacho Anaya @ianaya89 • Full Stack Developer @BloqInc • Ambassador

    @Auth0 • Ambassador @Na>veScript • Organizador @Vuenos_Aires 2
  2. ! 3

  3. ! 4

  4. 13

  5. 15

  6. ! Autofill <input name="ccname" autocomplete="cc-name" /> <input name="cardnumber" autocomplete="cc-number" />

    <input name="cvc" autocomplete="cc-csc" /> <input name="cc-exp" autocomplete="cc-exp" /> 17
  7. 21

  8. 22

  9. ❌ Payment Request API • Gateway de Pago • Mover

    dinero • Desarrollar mas facil 26
  10. new PaymentRequest() const supportedNetworks = ['amex', 'mastercard', 'visa'] const supportedTypes

    = ['debit', 'credit'] const supportedInstruments = [{ supportedMethods: 'basic-card', data: { supportedNetworks, supportedNetworks } }] const details = { total: { label: 'Total + IVA', amount: { currency: 'USD', value: '1210.00' } }, displayItems: [{ label: 'Camiseta del Más Grande', amount: {currency: 'USD', value: '1000.00'}, }] } const paymentRequest = new PaymentRequest(supportedInstruments, details) 28
  11. new PaymentRequest() const supportedNetworks = ['amex', 'mastercard', 'visa'] const supportedTypes

    = ['debit', 'credit'] const supportedInstruments = [{ supportedMethods: 'basic-card', data: { supportedNetworks, supportedNetworks } }] const details = { total: { label: 'Total + IVA', amount: { currency: 'USD', value: '1210.00' } }, displayItems: [{ label: 'Camiseta del Más Grande', amount: {currency: 'USD', value: '1000.00'}, }] } const paymentRequest = new PaymentRequest(supportedInstruments, details) 29
  12. paymentOptions const options = { requestShipping: true, requestPayerEmail: true, requestPayerPhone:

    true, requestPayerName: true, shippingType: 'delivery' } const paymentRequest = new PaymentRequest(supportedInstruments, details, paymentOptions) 31
  13. .show() const paymentRequest = new PaymentRequest(supportedInstruments, details) paymentRequest.show() .then(paymentResponse =>

    { console.log(paymentResponse) }) .catch(paymentError => { console.log(paymentError) }) 32
  14. .complete() paymentRequest.show() .then(paymentResponse => { // Interaccion servitor o app

    de pago... paymentResponse.complete('success') }) .catch(paymentResponse => { paymentResponse.complete('fail') }) 34
  15. 38

  16. 44

  17. 45