58

Mercado Livre Experience - Matias Gualino

Embed Size (px)

Citation preview

Page 1: Mercado Livre Experience - Matias Gualino
Page 2: Mercado Livre Experience - Matias Gualino

AGENDA

AGENDA

Page 3: Mercado Livre Experience - Matias Gualino

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

Page 4: Mercado Livre Experience - Matias Gualino

QUEM SOU?

QUEM SOU?

Page 5: Mercado Livre Experience - Matias Gualino

QUEM SOU?

Matías Gualino 24 anos

Lider Experiencia pagamento mobile

2015 Mercado Pago Point

SDK Mobile

2014 Segurança do site

Page 6: Mercado Livre Experience - Matias Gualino

OBJETIVO

OBJETIVO

Page 7: Mercado Livre Experience - Matias Gualino

OBJETIVO

MP OP

Page 8: Mercado Livre Experience - Matias Gualino

OBJETIVO

MP OP

Page 9: Mercado Livre Experience - Matias Gualino

OBJETIVO

MP OP

Page 10: Mercado Livre Experience - Matias Gualino

OBJETIVO

MP OP

Page 11: Mercado Livre Experience - Matias Gualino

OBJETIVO

MULTI PLATFORM!!!!

OPEN PRODUCT!

Page 12: Mercado Livre Experience - Matias Gualino

OBJETIVO

Page 13: Mercado Livre Experience - Matias Gualino

POR QUÊ?

POR QUÊ?

Page 14: Mercado Livre Experience - Matias Gualino

POR QUE?

The new payment experience and the best open platform integration

Page 15: Mercado Livre Experience - Matias Gualino

POR QUE?

Page 16: Mercado Livre Experience - Matias Gualino

POR QUE?

Page 17: Mercado Livre Experience - Matias Gualino

COMO?

COMO?

Page 18: Mercado Livre Experience - Matias Gualino

COMO?

Page 19: Mercado Livre Experience - Matias Gualino

COMO?

Page 20: Mercado Livre Experience - Matias Gualino

COMO?

Page 21: Mercado Livre Experience - Matias Gualino

COMO?

Page 22: Mercado Livre Experience - Matias Gualino

COMO?

Page 23: Mercado Livre Experience - Matias Gualino

COMO?

Page 24: Mercado Livre Experience - Matias Gualino

COMO?

Page 25: Mercado Livre Experience - Matias Gualino

COMO?

Page 26: Mercado Livre Experience - Matias Gualino

COMO?

Page 27: Mercado Livre Experience - Matias Gualino

COMO?

Page 28: Mercado Livre Experience - Matias Gualino

COMO?

IT

Produto

UX

Page 29: Mercado Livre Experience - Matias Gualino

O QUE?

O QUE?

Page 30: Mercado Livre Experience - Matias Gualino

O QUE?

Page 31: Mercado Livre Experience - Matias Gualino

O QUE?

Page 32: Mercado Livre Experience - Matias Gualino

O QUE?

Page 33: Mercado Livre Experience - Matias Gualino

O QUE?

Checkout!

UI!

Serviços!

API!

Page 34: Mercado Livre Experience - Matias Gualino

CAMADA API

API

Page 35: Mercado Livre Experience - Matias Gualino

CAMADA SERVIÇOS

Serviços!

API!

Page 36: Mercado Livre Experience - Matias Gualino

CAMADA SERVIÇOS

Serviços!

API!

Page 37: Mercado Livre Experience - Matias Gualino

CAMADA UI

UI!

Serviços!

API!

Page 38: Mercado Livre Experience - Matias Gualino

CAMADA UI

UI!

Serviços!

API!

Page 39: Mercado Livre Experience - Matias Gualino

CAMADA UI

UI!

Serviços!

API!

Page 40: Mercado Livre Experience - Matias Gualino

CAMADA UI

Page 41: Mercado Livre Experience - Matias Gualino

CAMADA UI

UI!

Serviços!

API!

Page 42: Mercado Livre Experience - Matias Gualino

CAMADA UI

UI!

Serviços!

API!

Page 43: Mercado Livre Experience - Matias Gualino

CAMADA UI

UI!

Serviços!

API!

Page 44: Mercado Livre Experience - Matias Gualino

NOSSO CHECKOUT

Checkout!

UI!

Serviços!

API!

Meio de pagamento

Banco

Parcelas

Dados do cartão

Resultado do pagamento

Page 45: Mercado Livre Experience - Matias Gualino

INTEGRAÇÃO

INTEGRAÇÃO

Page 46: Mercado Livre Experience - Matias Gualino

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!cordovapluginaddmercadopago-plugin

Page 47: Mercado Livre Experience - Matias Gualino

INTEGRAÇÃO

2.  Quando o usuario clique no botão, tem que fazer a chamada do nosso componente.

newMercadoPago.StartActivityBuilder().setActivity(this).setPublicKey("APP_USR-d0081c85-5dfe-419c-b84a-f5fb787bf393").setAmount(newBigDecimal(31.84)).setSite(Sites.BRASIL).setInstallmentsEnabled(true).startCardVaultActivity();

Page 48: Mercado Livre Experience - Matias Gualino

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.

" PaymentMethodpaymentMethod=JsonUtil.getInstance().fromJson(data.getStringExtra("paymentMethod"),PaymentMethod.class);

Issuerissuer=

JsonUtil.getInstance().fromJson(data.getStringExtra("issuer"),Issuer.class);

Tokentoken=

JsonUtil.getInstance().fromJson(data.getStringExtra("token"),Token.class);

PayerCostpayerCost=JsonUtil.getInstance().fromJson(data.getStringExtra("payerCost"),

PayerCost.class);

Page 49: Mercado Livre Experience - Matias Gualino

INTEGRAÇÃO

4.  Execute o projeto e faça os testes!

Page 50: Mercado Livre Experience - Matias Gualino

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();

Page 51: Mercado Livre Experience - Matias Gualino

INTEGRAÇÃO

7.  Teste outra vez! Mas agora tem a sua cor!

Page 52: Mercado Livre Experience - Matias Gualino

RESUMO E BENEFICIOS

RESUMO E BENEFICIOS

Page 53: Mercado Livre Experience - Matias Gualino

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).

Page 54: Mercado Livre Experience - Matias Gualino

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!

Page 55: Mercado Livre Experience - Matias Gualino

RESUMO DA INTEGRAÇÃO

RESUMO DA INTEGRAÇÃO

Page 56: Mercado Livre Experience - Matias Gualino

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.

Page 57: Mercado Livre Experience - Matias Gualino

PERGUNTAS

Page 58: Mercado Livre Experience - Matias Gualino

OBRIGADO!

OBRIGADO!