Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Payments Revolution
Ignacio Anaya
September 21, 2018
Programming
0
240
Payments Revolution
Ignacio Anaya
September 21, 2018
Tweet
Share
More Decks by Ignacio Anaya
See All by Ignacio Anaya
ianaya89
0
61
ianaya89
1
230
ianaya89
0
36
ianaya89
0
200
ianaya89
0
77
ianaya89
0
69
ianaya89
0
66
ianaya89
0
44
ianaya89
0
240
Other Decks in Programming
See All in Programming
azdaroth
0
160
yshrsmz
1
450
canon1ky
3
350
horie1024
1
360
akkeylab
0
340
ken3ypa
0
160
saki4869
0
190
yumcyawiz
4
630
momofff
0
160
yamotuki
0
130
thatjeffsmith
0
420
akatsukinewgrad
0
180
Featured
See All Featured
jcasabona
7
520
shlominoach
176
7.4k
jmmastey
9
530
denniskardys
220
120k
lara
590
61k
yeseniaperezcruz
302
31k
philnash
8
490
afnizarnur
176
14k
cromwellryan
101
5.9k
pauljervisheath
196
15k
tenderlove
52
3.4k
swwweet
206
6.8k
Transcript
Payments Revolu/on !✊ 1
Nacho Anaya @ianaya89 • Full Stack Developer @BloqInc • Ambassador
@Auth0 • Ambassador @Na>veScript • Organizador @Vuenos_Aires 2
! 3
! 4
95% ! Carros abandonados 5
! Más personas comprando en mobile 6
66% ! Compras mobile son en la web 7
66% ! Menos Conversiones 8
Anda a chequearlo... 9
! Sistema Homogéneo Heterogéneo 10
! Todos hacen lo mismo 11
❌" Todos hacen lo mismo de una manera diferente 12
13
! Forms 14
15
! Autofill 16
! 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
25% ! Más Conversiones 18
! Autofill 19
! Imaginemos un mundo sin forms... 20
21
22
! Payment Request API 23
! Eliminar Checkout Forms 24
! Estandarizar Colecciones de Pagos 25
❌ Payment Request API • Gateway de Pago • Mover
dinero • Desarrollar mas facil 26
! Payment Request API 27
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
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
paymentMethods • Standard (basic-card) • URL's (h1ps:/ /google.com/pay) 30
paymentOptions const options = { requestShipping: true, requestPayerEmail: true, requestPayerPhone:
true, requestPayerName: true, shippingType: 'delivery' } const paymentRequest = new PaymentRequest(supportedInstruments, details, paymentOptions) 31
.show() const paymentRequest = new PaymentRequest(supportedInstruments, details) paymentRequest.show() .then(paymentResponse =>
{ console.log(paymentResponse) }) .catch(paymentError => { console.log(paymentError) }) 32
.canMakePayment() const paymentRequest = new PaymentRequest(supportedInstruments, details) paymentRequest.canMakePayment() .then(success =>
{ console.log(success) }) .then(err => { console.log(err) }) 33
.complete() paymentRequest.show() .then(paymentResponse => { // Interaccion servitor o app
de pago... paymentResponse.complete('success') }) .catch(paymentResponse => { paymentResponse.complete('fail') }) 34
! Acciones y Eventos • Payment Method • Shipping Address
• Shipping Op5on 35
! Confirmar y Pagar 36
! Demo 37
38
! Seguridad 39
!" Usuarios 40
!" E/M Commerce Gateways 41
! Developers 42
❓ Can I Use? 43
44
45
Gracias! @ianaya89 46
! Links • bit.ly/payment-rev • bit.ly/payment-ref-demo • h5ps:/ /developers.google.com/web/fundamentals/payments •
h5ps:/ /paymentrequest.show/demo 47