Mercado Pago en el Campus Party 2016
-
Upload
mercado-pago -
Category
Technology
-
view
12 -
download
0
Transcript of Mercado Pago en el Campus Party 2016
![Page 2: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/2.jpg)
Programa de Desarrolladores Mercado Pago
- Integración de soluciones de pago para tu negocio
- Herramientas listas para usar
- API de Mercado Pago
- Módulos para plataformas de e-commerce
![Page 3: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/3.jpg)
Modelos de monetización
Tu App
Ads in-app
App Stores
- Price per download- Add ons- Freemium
- Price for prints- Price for click- Revenue sharing Mobile payments
systems
- Digital wallets- mPOS- Checkout systems- Payment provider APIs
![Page 4: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/4.jpg)
¿Por qué usar un proveedor de pagos?
- Conexión con múltiples medios de pago (tarjetas y medios offline)
- Seguridad y certificaciones
- Apalancarse en experiencia de optimización de conversión
- Deals bancarios (promos sin interes)
- Dificultad de negociar con bancos sin tener mucho volumen
![Page 5: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/5.jpg)
Online 2 Offline
![Page 6: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/6.jpg)
Digital wallet: app Mercado Pago
- Guarda tarjetas del usuario- Manejo de dinero en cuenta MP- Envíos y solicitudes de dinero- Compras por código QR
![Page 7: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/7.jpg)
Digital wallet: app Mercado Pago
Recargas de celular Pago de servicios
Creación de la costumbre de pagos móviles
![Page 8: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/8.jpg)
mPOS: Mercado Pago Point
- Reemplaza los POSnets tradicionales y permite cobrar con tarjetas físicas (HW especial)- Para crear aplicaciones para vendedores o para quién RECIBE pagos- Ejemplos: app para pedidos en un restaurante, app para vendedores en un local.- Revenue sharing model
![Page 9: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/9.jpg)
OBJETIVO
OBJETIVO
![Page 10: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/10.jpg)
OBJETIVO
MULTI PLATFORM
OPEN PRODUCT
![Page 11: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/11.jpg)
OBJETIVO
BACKEND FRONTEND
![Page 12: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/12.jpg)
POR QUÉ?
¿POR QUÉ?
![Page 13: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/13.jpg)
POR QUE?
The new payment experience and the best open platform integration
![Page 14: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/14.jpg)
POR QUE?
![Page 15: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/15.jpg)
POR QUE?
![Page 16: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/16.jpg)
COMO?
¿CÓMO?
![Page 17: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/17.jpg)
COMO?
UX ComunicaciónBackend abierto
ProductoAndroid
iOS Híbrido
IntegracionesComercial
![Page 18: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/18.jpg)
COMO?
IT
Produto
UX
![Page 19: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/19.jpg)
QUÉ?
¿QUÉ?
![Page 20: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/20.jpg)
QUÉ?
![Page 21: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/21.jpg)
QUÉ?
Checkout
UI
Servicios
API
![Page 22: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/22.jpg)
CAPA API
API
![Page 23: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/23.jpg)
CAPA SERVICIOS
Servicios
API
![Page 24: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/24.jpg)
CAPA SERVICIOS
Servicios
API
![Page 25: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/25.jpg)
CAPA UI
UI
Servicios
API
![Page 26: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/26.jpg)
CAPA UI
UI
Servicios
API
Flujos!
![Page 27: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/27.jpg)
CAPA UI
UI
Serviços
API
Fluxos!
![Page 28: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/28.jpg)
CAPA UI
Gracias Lollapalooza!
![Page 29: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/29.jpg)
CAPA UI
UI
Servicios
API
![Page 30: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/30.jpg)
CAPA UI
UI
Servicios
API
![Page 31: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/31.jpg)
CAPA UI
UI
Servicios
API
![Page 32: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/32.jpg)
NUESTRO CHECKOUT
Checkout
UI
Servicios
API
Medio de pago
BancoCuotas
Datos de tarjeta
Resultado del pago
![Page 33: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/33.jpg)
INTEGRACIÓN
INTEGRACIÓN
![Page 34: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/34.jpg)
INTEGRACIÓN
1. Agregar una dependencia:
• Androiddependencies {
compile('com.mercadopago:sdk:1.0.0-rc2@aar') { transitive = true
}}
• iOSpod ‘MercadoPagoSDK’, ‘~> 0.9.15’
• Hibridocordova plugin add mercadopago-plugin
![Page 35: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/35.jpg)
INTEGRACIÓN
2. Cuando el usuario hace click en algún botón, llamá a nuestro componente.
new MercadoPago.StartActivityBuilder() .setActivity(this) .setPublicKey("APP_USR-d0081c85-5dfe-419c-b84a-
f5fb787bf393") .setAmount(new BigDecimal(100.0)) .setSite(Sites.ARGENTINA) .setInstallmentsEnabled(true) .startCardVaultActivity();
![Page 36: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/36.jpg)
3. Esperar por los resultados que el usuario ingresó en el flujo: PaymentMethod, Issuer (ARG & MEX), PayerCost e Token. Callback en iOS, onActivityResult en Android.
PaymentMethod paymentMethod = JsonUtil.getInstance().fromJson(data.getStringExtra("paymentMethod"), PaymentMethod.class);
Issuer issuer = JsonUtil.getInstance().fromJson(data.getStringExtra("issuer"), Issuer.class);
Token token = JsonUtil.getInstance().fromJson(data.getStringExtra("token"), Token.class);
PayerCost payerCost = JsonUtil.getInstance().fromJson(data.getStringExtra("payerCost"), PayerCost.class);
INTEGRACIÓN
![Page 37: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/37.jpg)
INTEGRACIÓN
4. Ejecutá el proyecto y probá tu integración!
![Page 38: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/38.jpg)
5. Decinos cual es el color principal de tu app. Dependiendo del color, podes usar letras oscuras.
DecorationPreference decorationPreference = new DecorationPreference();decorationPreference.setBaseColor("#FFCC3E");decorationPreference.enableDarkFont();
6. Agregá el set de DecorationPreference en la llamada
new MercadoPago.StartActivityBuilder() .setActivity(this) .setPublicKey("APP_USR-d0081c85-5dfe-419c-b84a-f5fb787bf393") .setAmount(new BigDecimal(100.00)) .setSite(Sites.ARGENTINA) .setInstallmentsEnabled(true) .setDecorationPreference(decorationPreference) .startCardVaultActivity();
INTEGRACIÓN
![Page 39: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/39.jpg)
INTEGRACIÓN
7. Probá ahora con tus colores personalizados.
![Page 40: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/40.jpg)
RESUMEN Y VENTAJAS
RESUMEN Y VENTAJAS
![Page 41: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/41.jpg)
RESUMEN Y VENTAJAS
❖ Mejor utilización de recursos.
❖ No hacemos las cosas más de una vez en diferentes momentos.
❖ Cada funcionalidad nueva está disponible para el negocio, pero también para la comunidad de desarrolladores.
❖ Integración personalizada (ninja).
❖ Entender los componentes, flujos y controles para que el integrador pueda construir la experiência que desee (rompecabezas).
❖ Integración cerrada, pero customizable (checkout).
![Page 42: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/42.jpg)
RESUMEN DE LA INTEGRACIÓN
RESUMEN DE LA INTEGRACIÓN
![Page 43: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/43.jpg)
RESUMEN DE LA INTEGRACIÓN
1. Agregar una dependencia.
2. Agregar un disparador Click en un botón, QR, tecnologías nearby, etc.
3. Llamar al componente de MercadoPago cuando el evento esperado ocurra.
4. Esperá los resultados del componente.
5. Tests.
6. Personalizá tu color.
7. Desarrollá tu backend con nuestras SDK para alcanzar una integración correcta..
![Page 44: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/44.jpg)
DESAFÍO
DESAFÍO
![Page 45: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/45.jpg)
DESAFÍO
1. Usar las tecnologías de pago de Mercado Pago.
2. Apalancarse en tecnologías del mundo físico como código de barra, código QR, tecnologías nearby/beacon, georef, etc.
3. Crear una aplicación con una experiencia innovadora.
![Page 46: Mercado Pago en el Campus Party 2016](https://reader035.fdocuments.in/reader035/viewer/2022070516/58740d811a28ab6f1d8b7d2d/html5/thumbnails/46.jpg)
GRACIAS!
GRACIAS!