Artigo no estilo: Curso

Por que eu devo ler este artigo:Este artigo é útil por apresentar conceitos de comunicação do nosso aplicativo com uma segunda API de pagamentos muito famosa no mercado: o MercadoPago. Essa solução é mais flexível que a primeira (PayPal) no que se refere ao parcelamento dos pagamentos, bem como solicitação de outras ações básicas, como recibos, fluxos de estorno, etc. Por ser uma empresa latina, o MercadoPago se aplica melhor às regras locais do nosso país, além de oferecer uma vasta documentação sobre como implementar seus recursos. Neste artigo, o leitor aprenderá a conectar nosso app com tal API, vendo dicas de como analisar melhor seus dados de retorno.

Na última parte do artigo vimos como efetuar a implementação do checkout via carrinho de compras em integração com a API do PayPal para Cordova que a empresa disponibilizou como forma de facilitar a comunicação no universo JavaScript com as engines SDKs dos sistemas operacionais mobile iOS e Android. Com base nisso, já conseguimos efetuar todo o fluxo de compra simplificado, inclusive a coleta de dados do usuário, já que o próprio PayPal se encarrega de tal tarefa, dado que é preciso estar logado para finalizar o pagamento. Também vimos como finalizar o fluxo limpando todos os dados do carrinho do usuário e o redirecionando para uma tela de sucesso.

Todavia, ainda precisamos disponibilizar ao usuário uma forma de parcelar suas compras caso o mesmo deseje, com a respectiva atualização dos valores de juros e provisionamentos. Infelizmente, o PayPal tem algumas limitações em relação à nova API, inclusive para os SDKs mobile no que se refere a parcelamento. O leitor terá a opção de implementar tal fluxo quando estiver inserido no modelo de Express Checkout, isto é, quando seu site gera um botão que redireciona o usuário para o site do PayPal com os dados da compra e parcelamentos inclusos. Vejamos na Figura 1 o fluxo básico definido pelo PayPal para esse tipo de implementação. Observe que o usuário tem, de igual forma, as opções de efetuar o pagamento com suas credenciais do PayPal (nesse caso, para pagamentos com cartão de crédito os valores serão considerados caso o usuário não tenha saldo na conta do PayPal) ou informando manualmente dos dados pessoais e do cartão de crédito.

Figura 1. Fluxo de parcelamento junto ao PayPal.

De toda forma, o fluxo inicia do seu website, é processado no ambiente do PayPal e, no final, pode ser finalizado redirecionando para o seu website novamente. Porém, essa é de longe a melhor forma de implementarmos já que estamos usando componentes embutidos no aplicativo mobile na forma de plugins. Você até pode seguir com o mesmo fluxo através da sua página HTML no projeto PhoneGap, mas isso definitivamente não é indicado. Na seção Links você pode encontrar a URL da documentação do PayPal que ensina todos os passos para proceder dessa forma.

No nosso caso, como precisamos de um ambiente seguro e que nos disponibilize mais opções para o mercado brasileiro (lembre-se que as opções do PayPal para o mercado nacional são limitadas, por exemplo: pagamentos com cartão de crédito só são permitidos em moeda americana), analisaremos uma segunda API de pagamentos muito famosa do mercado: o MercadoPago.

Integrando a API do MercadoPago

O MercadoPago é o sistema de pagamentos seguros online mais famoso da América. Seu módulo para desenvolvedores (vide URL na seção Links) atinge vários mercados e plataformas, contemplando desde SDKs clientes para tecnologias como Android, iOS e JavaScript (que é o nosso caso), até para servidores atendendo linguagens de programação diversas: PHP, Java, .Net, Node.js, ASP.NET, Ruby e Phyton. É possível ainda efetuar testes facilmente com o ambiente de Sandbox, muito semelhante ao que trabalhamos com o do PayPal.

A solução conta ainda com módulos e plugins facilmente integráveis a diversas plataformas de e-commerce online, como Magento, OpenCart, WordPress, etc. Ou, se você preferir, pode também criar os famosos botões de redirecionamento que levam o usuário à finalização da compra no próprio site do MercadoPago, uma opção mais simples e que se abstém da necessidade de conhecimentos técnicos mais avançados. Finalmente, a empresa ainda conta com opções para pagamentos físicos para os casos em que o usuário deseje portar uma maquininha de cartões (solução parecida com a da Cielo ou PagSeguro, por exemplo) através do MercadoPago Point.

Para a nossa solução, faremos uso de dois SDKs da plataforma: o SDK JavaScript nos será útil para coletar as informações pessoais e do cartão de crédito do usuário para gerar um token de autenticação que, por sua vez, será enviado ao segundo SDK, baseado em Java e que estará hospedado no nosso servidor (via Web Service), pois será nesse momento em que o pagamento de fato será gerado e enviado aos servidores do MercadoPago.

A primeira coisa que temos de ter em mente quando implementamos a coleta de dados sensíveis do usuário, cuja confidencialidade deve ser mantida acima de tudo, é que não podemos hospedá-los em nossas aplicações ou enviá-los ao nosso serviço via HTTP, visto que nosso ambiente não foi homologado nem atende aos critérios estabelecidos pelas normas de segurança da indústria. Essas mesmas normas são definidas pela PCI DSS (Payment Card Industry Data Security Standard), um padrão de segurança internacional que especifica exigências mínimas a serem atendidas pelas empresas que façam uso do consumo financeiro gerado por bandeiras famosas, como Visa, MasterCard, American Express, Discover, etc. Marcas privadas e específicas de certos países não estão inclusas no padrão. Os serviços que consumiremos do MercadoPago já implementam as mesmas via SDKs, nos facilitando todo esse trabalho.

Na Listagem 1, o leitor encontra um exemplo de formulário que o MercadoPago disponibiliza em sua documentação como sugestão de dados sensíveis que precisarão ser coletados no momento da criação de um pagamento. Veja que se trata de um formulário convencional sem nenhum estilo associado, apenas a estrutura baseada em campos de input, seus tipos e valores de placeholder (esse, inclusive, pode ser usado para dar dicas ao usuário de que dados ele pode inserir). Cada campo recebe um id de mesmo valor que o atributo data-checkout, que, por sua vez, será usado pela API JavaScript do MercadoPago para validar as informações fornecidas pelo usuário. Em resumo, os campos que precisamos solicitar são: e-mail, dados do cartão de crédito (como número, cvv, data de expiração e titular do cartão de crédito), tipo do documento e número do documento do mesmo. Algumas dessas informações variam de acordo com o país onde se deseja efetuar a venda, logo leia bem a documentação caso deseje liberar pagamentos internacionais no seu app.

Listagem 1. Código HTML sugerido pelo MercadoPago para coletar dados do usuário.

  01 <form action="" method="post" id="pay" name="pay" >
  02     <fieldset>
  03         <ul>
  04             <li>
  05                 <label for="email">Email</label>
  06                 <input id="email" name="em ... 

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo