Integração de pagamentos com React Native, Node JS e SmartCheckout do Mercado Pago

Opaaa, meu nome é Alisson Allebrandt e sou desenvolvedor FullStack. Este é um dos meus primeiros artigos aqui e espero poder auxiliar alguém, que assim como eu, estava procurando uma maneira mais simples de integrar pagamentos em um aplicativo mobile feito em React Native de forma simples e rápida.

Bem vamos lá….

Gosto de separar as etapas, então lá vai o que vamos fazer e utilizar.

• Criação de conta no MercadoPago
• Criação do back end em Node JS para gerar as ordens de compra com a API do MercadoPago
• Criação do aplicativo mobile em React Native que irá se comunicar com a API em Node JS.
• Conclusão

Criação de conta no MercadoPago

Antes de iniciarmos com a etapa de desenvolvimento em si, será preciso criar uma conta no Mercado Pago para termos acesso a um token de autenticação que dá acesso a API de pagamentos. Para isso acesse o site do MercadoPago e clique no botão “Crie a sua conta”. Serão solicitadas algumas informações básicas para criação de conta como Nome, Sobrenome, CPF e E-mail.

Após criar a sua conta, clique aqui para acessar a página com as credenciais de acesso a API. Caso for solicitado um login, informe o e-mail e senha da conta recém criada. Ao acessar a página e fazer login você verá algo como a tela abaixo.

O que nos interessa aqui é o Access token da aba Checkout transparente do modo Sandbox(ambiente de testes do MercadoPago). Este token será utilizado já na próxima etapa.

Criação do back end em Node JS

Com o Access token em mãos daremos início a criação da API em Node JS que será responsável por criar a ordem de compra e gerar um link “init_point” para realização do checkout. Para esta etapa é preciso ter o Node JS e NPM ou YARN instalado na máquina e algum editor de texto ou IDE de sua preferência. Irei utilizar o VS Code. Após isso basta seguir os seguintes passos:

Iniciar um novo projeto npm com o comando

npm init -y

Instalar as dependências necessárias

npm install --save express body-parser cors yargs dotenv consolidate ejs mercadopago

Basicamente o express, body-parser e cors serão utilizados para se criar o servidor HTTP para receber requisições Rest que posteriormente serão enviadas pelo aplicativo em React Native, o body-parser é utilizado para definir o tipo de dado que será trafegado, neste caso usaremos o formato de arquivos JSON, e o cors é utilizado para permitir acesso a API de diferentes origens de front end.

As bibliotecas yargs e dotenv foram utilizadas para controle de ambiente, facilitando a criação de configurações distintas para ambiente de testes e produção por exemplo. Neste cenário, com o yargs é possível estabelecer parâmetros que podem ser informados na inicialização do servidor em Node JS e recuperar os mesmo de forma muito prática. Com os parâmetros recuperados, utilizou-se o dotenv para carregar um arquivo de configuração global da pasta .env conforme o ambiente que for solicitado, dev, testes, homologação, entre outros.

Por fim, a biblioteca consolidate possui vários modelos de formatos de renderização, neste caso, foi utilizado o formato ejs para o carregamento das views, sendo necessário instalar a biblioteca ejs também. A última biblioteca instalada é a SDK disponibilizada pelo Mercado Pago, ela possui vários métodos já consolidados, que vão desde consulta de pagamentos, clientes, cartões de crédito cadastrados, até mesmo, a possibilidade de criação de um checkout transparente, por meio de um “init_point”, que nada mais é do que a url gerada para se finalizar o checkout de um determinado produto selecionado. Este método será utilizado para nosso checkout.

Com as bibliotecas instaladas, criou-se a estrutura de pastas e arquivos abaixo.

Basicamente temos a pasta config que conterá scripts relacionados a configurações gerais da API, neste caso temos um script getEnv.js que é responsável por identificar o ambiente que a API foi iniciada e então carregar o arquivo de configuração padrão da pasta .env .

Também foram criadas as pastas controllers, routes e views que veremos mais informações na sequência, e o arquivo index.js que irá iniciar o servidor em Node JS e configurar a rota de pagamentos e a renderização dos arquivos da pasta views. O arquivo index.js ficou como o abaixo.

Na linha 11 carregamos o arquivo global de configuração com base no ambiente que foi passado por parâmetro na hora de levantar o servidor. Neste caso, criou-se um arquivo testing dentro da pasta .env e foi levantado o servidor em node com o seguinte comando.

node index.js --env testing

O arquivo de configuração testing dentro da pasta .env tem a seguinte estrutura

MP_ACCESS_TOKEN=<TOKEN DE ACESSO DO MERCADO PAGO>
SANDBOX=true
API_PORT=3333

O restante do arquivo index.js possui as configurações do body-parser, cors e a definição da rota /payments que será utilizada para realização do checkout. Essa rota possui 4 abstrações do método GET que são.

GET payments/checkout/:id/:email/:description/:amount
GET payments/success
GET payments/pending
GET payments/failure

A principal rota é a payments/checkout , como podemos ver ela recebe alguns parâmetros que serão utilizados para a geração do checkout. A forma de criação e os parâmetros a serem passados varia de acordo com a necessidade de informações que você deseja informar em sua compra. Neste caso, para demonstrar o funcionamento estou passando um id, um e-mail, uma descrição da compra e o valor total. É importante destacar de que o método HTTP exclusivamente deve ser do tipo GET, para que a solução proposta funcione corretamente com a integração com o React Native.

As demais rotas de /success, /pending, e /failure serão utilizadas somente para serem chamadas no retorno do checkout, no momento em que o pagamento tiver sido realizado com sucesso, ficar pendente ou houver alguma falha. Não se preocupe, entenderemos melhor o por que disso na etapa do aplicativo em React Native.

A rota de checkout irá chamar o controller paymentsController.js abaixo.

Neste controller inicialmente é realizada a inicialização do SDK do MercadoPago passando o Access_token e o ambiente SANDBOX carregados globalmente com base no environment definido na inicialização do servidor em Node JS, neste caso, será lido o arquivo testing, dentro da pasta .env.

Após isso, criamos um objeto purchaseOrder passando informações do produto/item que está sendo vendido dentro do grupo “items”, do pagador, passando um endereço de e-mail válido no grupo “payer” e também o grupo “back_urls” onde é configurado as rotas criadas anteriormente para o caso em que o pagamento for processado com sucesso, ocorrer falhas, ou ficar pendente. Todo o retorno sobre o status do pagamento bem como as informações do id da operação no Mercado Pago será retornada nas rotas /success, /pending, e /failure acessando req.query.

Maiores informações sobre a estrutura a ser informada bem como as customizações possível para o SmartCheckout podem ser consultadas aqui. Observem que é chamado um método getFullUrl() que retorna a url completa do servidor em Node JS, para que seja possível montar a rota correta da aplicação.

Por fim chamamos o método MercadoPago.preferences.create(purchaseOrder) que irá enviar a requisição da compra para o MercadoPago e teremos como retorno um JSON com um atributo “init_point” que contém uma URL de acesso ao checkout transparente já configurada com o valor do item que havíamos solicitado. Com essa url, chamamos o método redirect() passando essa url por parâmetro que retornará a tela de checkout.

Para testar o funcionamento da API vou utilizar o cliente rest, insomnia. Para isto basta informar a url com os parâmetros e o método da requisição GET, e então realizar a requisição. O resultado disso, pode ser visto abaixo.

Como podemos ver, já estamos conseguindo criar um checkout personalizado com pagamentos para cartão de crédito e boleto bancário. Agora vamos implementar isso em um aplicativo mobile com o React Native. Bora lá.

Criação de protótipo de aplicativo móvel em React Native e integração com a API em Node JS

Para criação do aplicativo em React Native, caso você não possua o React Native e suas dependências instaladas, recomendo dar uma olhada nessa documentação criada pela RocketSeat, na mesma é possível ver um passo a passo de configuração do ambiente para Windows, Mac e Linux.

Com o ambiente configurado executamos o comando abaixo que irá criar os arquivos e pastas iniciais para se desenvolver em React Native (pode demorar um pouco, dependendo da conexão com a internet), você também pode utilizar o expo-cli caso desejar, mais informações sobre a criação de um projeto podem ser vistas em Getting Started.

npx react-native init PrototipoPagamentos

Para demonstração do funcionamento do app criei a tela Checkout com alguns inputs para preenchimento dos parâmetros que serão passados para a rota criada na API em node anteriormente. Também instalei a biblioteca styled-components para criar um visual básico para a tela. Caso alguém também quiser instalar, segue o comando.

npm install --save styled-components

Na tela de Checkout utilizaremos a biblioteca react-native-webview para acessar a url de init_point que será gerada pela nossa API em Node, dessa forma instale a mesma.

npm install --save react-native-webview

Abaixo está o código da tela de Checkout, vamos entender um pouco o mesmo..

O principal detalhe está no componente WebView, onde na propriedade “source” estamos passando a url da nossa API em Node Js com as informações que estão no estado dos inputs, que desejamos gerar o checkout. Com isso, será gerado um checkout para os valores informados em tela.

Bem mas então é só isso? Agora já posso gerar checkouts para diferentes valores? Quase meu amigo, antes disso você precisará hospedar a sua API em Node em algum lugar ou então utilizar algum proxy para que o endereço de sua api seja diferente de <enderecoIP|localhost>:3333, caso contrário o Mercado Pago irá retornar o erro abaixo.

MercadoPagoError: back_urls invalid. Wrong format

Como comentamos anteriormente, o grupo back_urls informado na geração da compra no Mercado Livre diz respeito a rota que será chamada no momento em que o pagamento for efetivado, ficar pendente ou retornar com erro. E este erro será retornado por que essa propriedade está sendo informada com o endereço IP, fazendo com que a url de retorno seja inválida para o Mercado Pago.

back_urls:
   { success: 'http:///<meu_endereco_ip>:3333/payments/success',
     pending: 'http://<meu_endereco_ip>:3333/payments/pending',
     failure: 'http://<meu_endereco_ip>:3333/payments/failure' 
   } 
}

Para resolver este problema, no lugar do endereço IP deve haver algum domínio específico como https://apipagamentos.com/payments. Como em uma aplicação em produção é sempre recomendado se ter um domínio próprio para a API não é preciso nos preocuparmos com esse erro, mas para testar efetivamente o aplicativo podemos fazer deploy da API no GitPod de forma gratuita, e então teremos um host específico onde a API estará rodando.

Para levantar a API no GitPod basta realizar commit do código em um repositório público do github e então executar o comando abaixo, substituindo o conteúdo depois de # pelo seu repositório no github.

gitpod.io/#https://github.com/AlissonAp/MercadoPagoNodeReactNativeExample.git

Com o ambiente levantado no GitPod, bastar iniciar a API com o comando abaixo, onde testing é o nome do seu environment com as informações do token do mercado pago e porta da API conforme explicado anteriormente.

node index.js -e testing

Se tudo ocorreu bem você verá algo como isso. Como podemos ver que a API foi iniciada na porta 3333, que é a porta configurada no arquivo de testing dentro da pasta .env/.

No canto inferior direito podemos ver que já temos a sugestão de abrir a url da nossa API no browser, essa url que deverá ser configurada no source da WebView do aplicativo em React Native. Também pode acontecer de ao invés de pedir para abrir no browser apareça uma opção de expose, se a porta ainda não foi exposta para a internet, ai é só clicar nessa opção que ele vai deixar a url pública também.

Com a url configurada no source do WebView já será possível simular pagamentos, lembrando que todos os testes foram realizados no ambiente de SANDBOX então não precisa se preocupar com a questão de cobrança dos pagamentos que foram aprovados hehe.

Para testar o aplicativo você pode rodar o comando npm start e react-native run-android que a aplicação será iniciada em seu emulador, ou caso deseje emular em seu telefone celular, basta ativar a depuração USB e ligar o mesmo na porta USB da sua máquina.

Conclusão

Para finalizar, queria agradecer a leitura, e espero ter conseguido demonstrar, de uma forma geral, pagamentos com um baixo custo. O resultado final da implementação pode ser visto no vídeo abaixo. Apenas para fins de demonstração.

OBS: Para testar pagamentos no modo SANDBOX deverão ser usados cartões de crédito específicos disponibilizados na documentação do Mercado Pago, aqui. Neste link tem uma seção, Cartões de teste.

Repositórios e referências:

https://github.com/AlissonAp/MercadoPagoSmartCheckoutNodeExample.git

https://github.com/AlissonAp/ReactNativePrototipoPagamento.git

https://www.mercadopago.com.br/developers/pt/guides/payments/web-payment-checkout/introduction/

https://www.npmjs.com/package/mercadopago

Vlw, e até o futuro ;)