cómo integrar un método de pago en nuestros desarrollos
TRANSCRIPT
Cómo integrar un método de pago en nuestros desarrollos
Alberto López Braintree_Dev.
<Advocate/>
@HTML5MeetSpain
@Braintree_Dev
@AlbertusLM
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
@PayPalDev @AlbertusLM
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Mi oficina https://flic.kr/p/hJwjP6
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
v.zeroA modern foundation for accepting Payments
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
v.zeroA modern foundation for accepting Payments
Comencemos desde Zero: un nuevo concepto de SDK
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
NO es un decálogo de buenas prácticas
https://flic.kr/p/4Z39YK
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
SI es una receta de consejos
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
>diseño adaptable_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
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
mobile website
native app
web responsive
vs
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
vs
>detectar el tipo de tarjeta_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
*Está en Wikipedia
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción
>cvv, cvc, cid_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción
>validar la tarjeta_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
http://goo.gl/YR7pRa
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Algoritmo de Luhn
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción
>fecha de expiración_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
@AlbertusLM- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
@AlbertusLM@Braintree_Dev- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción
>mostrar información de campos_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción
>limitar el número de dígitos_
<usuario/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Card Number of Digits
AMEX 15
Visa 13 or 16
MasterCard 16
Discover 16
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción
>¿creatividad? en formularios_
<desarrollador/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción
<desarrollador/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
>experiencia nativa_
<desarrollador/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
<client side/>
v.zero
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
<server side/>
v.zero
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
>integración sencilla_
<desarrollador/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
<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
<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
<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
<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
<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
<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
<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
<client side/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Se muestra el formulario v.zero de Braintree
<server side/>
[…]
def create_purchase(): nonce = request.form[“payment_method_nonce"]
[…]
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Recibir el payment nonce desde el Drop UI
<server side/>
[…]
def create_purchase(): nonce = request.POST.get[“payment_method_nonce”]
[…]
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Recibir el payment nonce desde el Drop UI
<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”
<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”
@AlbertusLM- - - - - - - - - - - - - - - - - - - - - - - -
@AlbertusLM@Braintree_Dev@HTML5MeetSpain
<vendedor/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
>pasarela de pago segura_
<vendedor/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
client_token
payment_nonce
v.zero
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
>variedad de métodos de pago_
<vendedor/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Cuenta Braintree
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
v.zero
>variedad de soluciones_
<vendedor/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Pagos únicos Suscripciones Marketplaces Partners
v.zero
Pago único normal Pago con tarjeta almacenada
v.zero
<amante de la innovación/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
>pasos mínimos para pagar_
<amante de la innovación/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
++
One click payment
=
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
v.zero
Merchant app
PayPal app
Merchant app
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Merchant app
PayPal app
Merchant app
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Merchant app
PayPal app
Merchant app
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
Merchant app
PayPal app
Merchant app
One Touch™
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
http://gph.is/1eJNpL0
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
>métodos de pago del futuro_
<amante de la innovación/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
+ v.zero
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
¿ ?
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
+ v.zero
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
<conclusiones/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
photo source
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
UX Fricción
I <3 v.zero
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
U <3 v.zero?
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
<enlaces/>
- - - - - - - - - - - - - - - - - - - - - - - - @AlbertusLM@Braintree_Dev@HTML5MeetSpain
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
¿Preguntas?
Source photo
