Presentación para HTML5Spain acerca de cómo integrar una pasarela de pagos online, hablando del nuevo SDK de Braintree v.zero, hablando de tarjetas de crédito, PayPal y Venmo, además de pagos futuros.

1. Cómo integrar un método de pago
en nuestros desarrollos
Alberto López
Braintree_Dev.
<Advocate/>

2. @HTML5MeetSpain
@Braintree_Dev
@AlbertusLM

3. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

4. @PayPalDev @AlbertusLM
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

5. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

6. Mi oficina
https://flic.kr/p/hJwjP6
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

7. v.zero
A modern foundation for accepting Payments
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

8. v.zero
A modern foundation for accepting Payments
Comencemos desde Zero: un nuevo concepto de SDK
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

9. NO
es un decálogo de buenas prácticas
https://flic.kr/p/4Z39YK
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

10. SI
es una receta de consejos

11. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción

12. <usuario/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

13. >diseño adaptable_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

14. http://responsivedesign.ca/sites/default/files/styles/content-full-width/public/assets/blog/responsive-web-design-what-is-it-and-why-should-i-care/pinch-zoom-is-bad_2.jpg
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

15. mobile website
native app
web responsive
vs
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
vs

16. >detectar el tipo de tarjeta_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

17. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

18. *Está en Wikipedia
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

19. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

20. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

21. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

22. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción

23. >cvv, cvc, cid_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

24. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

25. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

26. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

27. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

28. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

29. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción

30. >validar la tarjeta_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

31. http://goo.gl/YR7pRa
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

32. Algoritmo de Luhn
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

33. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

34. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

35. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

36. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción

37. >fecha de expiración_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

38. @AlbertusLM
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

39. @AlbertusLM@Braintree_Dev
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

40. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción

41. >mostrar información de campos_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

42. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

43. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

44. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción

45. >limitar el número de dígitos_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

46. Card Number of Digits
AMEX 15
Visa 13 or 16
MasterCard 16
Discover 16
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

47. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

48. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

49. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción

50. >¿creatividad? en formularios_
<desarrollador/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

51. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

52. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

53. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

54. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción

55. <desarrollador/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

56. >experiencia nativa_
<desarrollador/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

57. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

58. <client side/>
v.zero
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

59. <server side/>
v.zero
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

60. >integración sencilla_
<desarrollador/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

61. <client side/>
<script src=“https://js.braintreegateway.com/v2/braintree.js"></script>
[…]
<form id="checkout" method="post" action="/checkout">
<div id="dropin"></div>
<input type="submit" value="Pay $10">
</form>
[…]
<script>
braintree.setup({{token_from_BT}}, 'dropin', {container: 'dropin'});
</script>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Pedir el token al servidor y presentar el formulario
Drop-UI

62. <client side/>
<script src=“https://js.braintreegateway.com/v2/braintree.js"></script>
[…]
<form id="checkout" method="post" action="/checkout">
<div id="dropin"></div>
<input type="submit" value="Pay $10">
</form>
[…]
<script>
braintree.setup({{token_from_BT}}, 'dropin', {container: 'dropin'});
</script>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Pedir el token al servidor y presentar el formulario
Drop-UI

63. <client side/>
<script src=“https://js.braintreegateway.com/v2/braintree.js"></script>
[…]
<form id="checkout" method="post" action="/checkout">
<div id="dropin"></div>
<input type="submit" value="Pay $10">
</form>
[…]
<script>
braintree.setup({{token_from_BT}}, 'dropin', {container: 'dropin'});
</script>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Pedir el token al servidor y presentar el formulario
Drop-UI

64. <client side/>
<script src=“https://js.braintreegateway.com/v2/braintree.js"></script>
[…]
<form id="checkout" method="post" action="/checkout">
<div id="dropin"></div>
<input type="submit" value="Pay $10">
</form>
[…]
<script>
braintree.setup({{token_from_BT}}, 'dropin', {container: 'dropin'});
</script>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Pedir el token al servidor y presentar el formulario
Drop-UI

65. <server side/>
import braintree
[…]
braintree.Configuration.configure(braintree.Environment.Sandbox,
merchant_id="use_your_merchant_id",
public_key="use_your_public_key",
private_key=“use_your_private_key")
[…]
client_token = braintree.ClientToken.generate({})
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Pedir el token al servidor de Braintree y enviárselo a
la parte cliente

66. <server side/>
import braintree
[…]
braintree.Configuration.configure(braintree.Environment.Real,
merchant_id="use_your_merchant_id",
public_key="use_your_public_key",
private_key=“use_your_private_key")
[…]
client_token = braintree.ClientToken.generate({})
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Pedir el token al servidor de Braintree y enviárselo a
la parte cliente

67. <server side/>
import braintree
[…]
braintree.Configuration.configure(braintree.Environment.Real,
merchant_id="use_your_merchant_id",
public_key="use_your_public_key",
private_key=“use_your_private_key")
[…]
client_token = braintree.ClientToken.generate({})
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Pedir el token al servidor de Braintree y enviárselo a
la parte cliente

68. <client side/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Se muestra el formulario v.zero de Braintree

69. <server side/>
[…]
def create_purchase():
nonce = request.form[“payment_method_nonce"]
[…]
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Recibir el payment nonce desde el Drop UI

70. <server side/>
[…]
def create_purchase():
nonce = request.POST.get[“payment_method_nonce”]
[…]
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Recibir el payment nonce desde el Drop UI

71. <server side/>
[…]
result = braintree.Transaction.sale({
"amount": "10.00",
"payment_method_nonce": nonce
})
[…]
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Finalizar la transacción usando el “payment nonce”

72. <server side/>
[…]
result = braintree.Transaction.sale({
"amount": "10.00",
"payment_method_nonce": nonce
})
[…]
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
Finalizar la transacción usando el “payment nonce”

73. @AlbertusLM
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

74. <vendedor/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

75. >pasarela de pago segura_
<vendedor/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

76. client_token
payment_nonce
v.zero
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

77. >variedad de métodos de pago_
<vendedor/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

79. Cuenta Braintree
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
v.zero

80. >variedad de soluciones_
<vendedor/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

81. Pagos únicos Suscripciones Marketplaces Partners
v.zero

82. Pago único normal Pago con tarjeta almacenada
v.zero

83. <amante de la
innovación/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

84. >pasos mínimos para pagar_
<amante de la innovación/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

85. ++
One click
payment
=
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
v.zero

86. Merchant app
PayPal app
Merchant app
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

87. Merchant app
PayPal app
Merchant app
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

88. Merchant app
PayPal app
Merchant app
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

89. Merchant app
PayPal app
Merchant app
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

90. http://gph.is/1eJNpL0
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

91. >métodos de pago del futuro_
<amante de la innovación/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

92. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

93. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

94. + v.zero
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

95. ¿ ?
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

96. + v.zero
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

97. <conclusiones/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

98. photo
source
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

99. - - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción

100. I <3 v.zero
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

101. U <3 v.zero?
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

102. <enlaces/>
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

103. Braintree:
braintreepayments.com
Get Started with Braintree
developers.braintreepayments.com
Braintree v.zero:
braintreepayments.com/v.zero
Sandbox environment:
sandbox.braintreegateway.com
- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain

104. ¿Preguntas?
Source
photo

105. Alberto López
alberto.lopez@getbraintree.com
@AlbertusLM / @Braintree_Dev