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
14. ! Forms 14
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
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
39. ! Seguridad 39
40. !" Usuarios 40
41. !" E/M Commerce Gateways 41
42. ! Developers 42
43. ❓ Can I Use? 43
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