Mercado Livre Experience - Matias Gualino

AGENDA

AGENDA

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

QUEM SOU?

QUEM SOU?

QUEM SOU?

Matías Gualino 24 anos

Lider Experiencia pagamento mobile

2015 Mercado Pago Point

SDK Mobile

2014 Segurança do site

OBJETIVO

OBJETIVO

OBJETIVO

MP OP

OBJETIVO

MP OP

OBJETIVO

MP OP

OBJETIVO

MP OP

OBJETIVO

MULTI PLATFORM!!!!

OPEN PRODUCT!

OBJETIVO

POR QUÊ?

POR QUÊ?

POR QUE?

The new payment experience and the best open platform integration

POR QUE?

POR QUE?

COMO?

COMO?

COMO?

COMO?

COMO?

COMO?

COMO?

COMO?

COMO?

COMO?

COMO?

COMO?

COMO?

IT

Produto

UX

O QUE?

O QUE?

O QUE?

O QUE?

O QUE?

O QUE?

Checkout!

UI!

Serviços!

API!

CAMADA API

API

CAMADA SERVIÇOS

Serviços!

API!

CAMADA SERVIÇOS

Serviços!

API!

CAMADA UI

UI!

Serviços!

API!

CAMADA UI

UI!

Serviços!

API!

CAMADA UI

UI!

Serviços!

API!

CAMADA UI

CAMADA UI

UI!

Serviços!

API!

CAMADA UI

UI!

Serviços!

API!

CAMADA UI

UI!

Serviços!

API!

NOSSO CHECKOUT

Checkout!

UI!

Serviços!

API!

Meio de pagamento

Banco

Parcelas

Dados do cartão

Resultado do pagamento

INTEGRAÇÃO

INTEGRAÇÃO

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

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

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

INTEGRAÇÃO

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

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

INTEGRAÇÃO

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

RESUMO E BENEFICIOS

RESUMO E BENEFICIOS

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

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!

RESUMO DA INTEGRAÇÃO

RESUMO DA INTEGRAÇÃO

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.

PERGUNTAS

OBRIGADO!

OBRIGADO!