Payments Revolution

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