SDK Mobile: Como atingir uma incrível experiência para o usuário com uma integração de 10 minutos Matias Gualino – Team Leader de pagamento Mobile, Mercado Pago

2. AGENDA
AGENDA

3. AGENDA
v Quem sou?
v Objetivo
v Por quê?
v Como?
v O que?
v Integração ao vivo
v Resumo e benefícios
v Perguntas

4. QUEM SOU?
QUEM SOU?

5. QUEM SOU?
Matías Gualino
24 anos
Lider Experiencia pagamento mobile
2015
Mercado Pago Point
SDK Mobile
2014
Segurança do site

6. OBJETIVO
OBJETIVO

7. OBJETIVO
MP OP

8. OBJETIVO
MP OP

9. OBJETIVO
MP OP

10. OBJETIVO
MP OP

11. OBJETIVO
MULTI PLATFORM!
!
!
!
OPEN PRODUCT!

12. OBJETIVO

13. POR QUÊ?
POR QUÊ?

14. POR QUE?
The new payment experience and
the best open platform integration

15. POR QUE?

16. POR QUE?

17. COMO?
COMO?

18. COMO?

19. COMO?

20. COMO?

21. COMO?

22. COMO?

23. COMO?

24. COMO?

25. COMO?

26. COMO?

27. COMO?

28. COMO?
IT
Produto
UX

29. O QUE?
O QUE?

30. O QUE?

31. O QUE?

32. O QUE?

33. O QUE?
Checkout!
UI!
Serviços!
API!

34. CAMADA API
API

35. CAMADA SERVIÇOS
Serviços!
API!

36. CAMADA SERVIÇOS
Serviços!
API!

37. CAMADA UI
UI!
Serviços!
API!

38. CAMADA UI
UI!
Serviços!
API!

39. CAMADA UI
UI!
Serviços!
API!

40. CAMADA UI

41. CAMADA UI
UI!
Serviços!
API!

42. CAMADA UI
UI!
Serviços!
API!

43. CAMADA UI
UI!
Serviços!
API!

44. NOSSO CHECKOUT
Checkout!
UI!
Serviços!
API!
Meio de pagamento
Banco
Parcelas
Dados do cartão
Resultado do pagamento

45. INTEGRAÇÃO
INTEGRAÇÃO

46. INTEGRAÇÃO
1. Adicionar a dependencia:
• Android!
dependencies {
compile('com.mercadopago:sdk:1.0.0-rc2@aar') {
transitive = true
}
}
• iOS!
pod ‘MercadoPagoSDK’, ‘~> 0.9.15’
• Hibrido!
cordova plugin add mercadopago-plugin

47. INTEGRAÇÃO
2. Quando o usuario clique no botão, tem que fazer a chamada do nosso componente.
new MercadoPago.StartActivityBuilder()
.setActivity(this)
.setPublicKey("APP_USR-d0081c85-5dfe-419c-b84a-f5fb787bf393")
.setAmount(new BigDecimal(31.84))
.setSite(Sites.BRASIL)
.setInstallmentsEnabled(true)
.startCardVaultActivity();

48. INTEGRAÇÃO
3. Aguardar os resultados que o usuário inseriu no fluxo: PaymentMethod, Issuer (ARG &
MEX), PayerCost e Token. Callback em iOS, onActivityResult pelo 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);

49. INTEGRAÇÃO
4. Execute o projeto e faça os testes!

50. INTEGRAÇÃO
5. Defina a sua cor. Você pode usar letras escuras!
DecorationPreference decorationPreference = new DecorationPreference();!
decorationPreference.setBaseColor("#FFCC3E");!
decorationPreference.enableDarkFont();!
6. Faça setDecorationPreference em sua chamada!
new MercadoPago.StartActivityBuilder()!
.setActivity(this)!
.setPublicKey("APP_USR-d0081c85-5dfe-419c-b84a-f5fb787bf393")!
.setAmount(new BigDecimal(31.84))!
.setSite(Sites.BRASIL)!
.setInstallmentsEnabled(true)!
.setDecorationPreference(decorationPreference)!
.startCardVaultActivity();

51. INTEGRAÇÃO
7. Teste outra vez! Mas agora tem a sua cor!

52. RESUMO E BENEFICIOS
RESUMO E BENEFICIOS

53. RESUMO E BENEFICIOS!
v Melhor utilização dos recursos.
v Não fazer as coisas mais de uma vez e em momentos diferentes.
v Cada nova funcionalidade está disponível para o negócio, mas também para a
comunidade de desenvolvedores.
v Integração personalizada (ninja).
v Entender os componentes, fluxos e controles para que o integrador possa construir a
experiência que deseja (quebra-cabeça).
v Integração fechada, mas customizável (checkout).

54. RESUMO E BENEFICIOS!
v Melhor utilização dos recursos.
v Não fazer as coisas mais de uma vez e em momentos diferentes.
v Cada nova funcionalidade está disponível para negócio, mas também para a
comunidade de desenvolvedores.
v Integração personalizada (ninja).
v Entender os componentes, fluxos e controles para que o integrador pode construir a
experiência que deseja (quebra-cabeça).
v Integração fechada, mas customizável (checkout).
Flexibility!
Development Effort!
Flexibility!
Development Effort!

55. RESUMO DA INTEGRAÇÃO
RESUMO DA
INTEGRAÇÃO

56. RESUMO DA INTEGRAÇÃO
1. Adicionar uma dependência
2. Adicionar um gatilho. Clique em um botão, QR, Tecnologia nas proximidades, etc..
3. Invocar o componente quando o evento de disparo ocorre.
4. Aguarde os resultados do componente.
5. Teste.
6. Personalize sua cor.
7. Fazer a integração do back-end para alcançar uma integração bem sucedida.

57. PERGUNTAS

58. OBRIGADO!
OBRIGADO!