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

Payments Revolution

6c3e7ef20801b4b967dc1643f63d6233?s=47 Ignacio Anaya
September 21, 2018

Payments Revolution

6c3e7ef20801b4b967dc1643f63d6233?s=128

Ignacio Anaya

September 21, 2018
Tweet

Transcript

  1. Payments Revolu/on !✊ 1

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

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

  4. ! 4

  5. 95% ! Carros abandonados 5

  6. ! Más personas comprando en mobile 6

  7. 66% ! Compras mobile son en la web 7

  8. 66% ! Menos Conversiones 8

  9. Anda a chequearlo... 9

  10. ! Sistema Homogéneo Heterogéneo 10

  11. ! Todos hacen lo mismo 11

  12. ❌" Todos hacen lo mismo de una manera diferente 12

  13. 13

  14. ! Forms 14

  15. 15

  16. ! Autofill 16

  17. ! 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
  18. 25% ! Más Conversiones 18

  19. ! Autofill 19

  20. ! Imaginemos un mundo sin forms... 20

  21. 21

  22. 22

  23. ! Payment Request API 23

  24. ! Eliminar Checkout Forms 24

  25. ! Estandarizar Colecciones de Pagos 25

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

    dinero • Desarrollar mas facil 26
  27. ! Payment Request API 27

  28. 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
  29. 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
  30. paymentMethods • Standard (basic-card) • URL's (h1ps:/ /google.com/pay) 30

  31. paymentOptions const options = { requestShipping: true, requestPayerEmail: true, requestPayerPhone:

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

    { console.log(paymentResponse) }) .catch(paymentError => { console.log(paymentError) }) 32
  33. .canMakePayment() const paymentRequest = new PaymentRequest(supportedInstruments, details) paymentRequest.canMakePayment() .then(success =>

    { console.log(success) }) .then(err => { console.log(err) }) 33
  34. .complete() paymentRequest.show() .then(paymentResponse => { // Interaccion servitor o app

    de pago... paymentResponse.complete('success') }) .catch(paymentResponse => { paymentResponse.complete('fail') }) 34
  35. ! Acciones y Eventos • Payment Method • Shipping Address

    • Shipping Op5on 35
  36. ! Confirmar y Pagar 36

  37. ! Demo 37

  38. 38

  39. ! Seguridad 39

  40. !" Usuarios 40

  41. !" E/M Commerce Gateways 41

  42. ! Developers 42

  43. ❓ Can I Use? 43

  44. 44

  45. 45

  46. Gracias! @ianaya89 46

  47. ! Links • bit.ly/payment-rev • bit.ly/payment-ref-demo • h5ps:/ /developers.google.com/web/fundamentals/payments •

    h5ps:/ /paymentrequest.show/demo 47