Fluxo de Pagamentos pelo Facebook Messenger

Filipi Neves
Bots Brasil
Published in
4 min readFeb 20, 2017

O fluxo de Pagamentos nativo do Facebook Messenger ainda não está disponível no Brasil, mas tivemos acesso no ChatClub a Payments API (Beta) para fazer um teste com a página americana do aplicativo PlayKids e vou mostrar para vocês como foi.

Não sou técnico (sou da área de produtos), tenho algumas noções técnicas, mas não é esse o meu objetivo aqui, então esse texto será um apanhado geral sobre a integração com a Payments API (Beta).

Começando…

O fluxo é bem simples, com a API em mãos, conseguimos configurar tudo e deixar o fluxo funcional em cerca de 4 dias nessa primeira integração.
Agora que aprendemos, integrar com outras páginas vai ser bem mais rápido 😁.

O Facebook pede que o fluxo de pagamento tenha um "termos e condições" para a página, só após inserir uma URL válida com os termos é que o Facebook libera a parte de "Payments" da página.

Área de pagamentos da página no Facebook (Créditos da imagem: Documentação do Facebook).

Existem 3 formas de pagamento que a API de Payments do Facebook aceita, são elas: PayPal, Stripe e o seu próprio método de pagamento.

Nesse exemplo, utilizamos o Stripe, que é o meio de pagamento utilizado pelo PlayKids.

Integração finalizada com o Stripe. Apenas um click para fazer o login e pronto.

O que a Payments API fornece?

A documentação é muito clara com relação a integração desses meios de pagamento, é praticamente um "plug'n play", basta conectar através da própria página e seguir os passos para a integração na documentação.

O Facebook disponibiliza 4 dados que você pode solicitar ao usuário, são eles:
- Nome do usuário;
- Telefone do usuário;
- Email do usuário;
- Endereço de entrega.

Dependendo do tipo de produto/serviço que está sendo vendido você pode ou não solicitar todas as informações. Nesse caso, não solicitamos o endereço de entrega pois estamos vendendo um GiftCard que será entregue por email.

Fluxo de compra

Como citei acima, esse fluxo foi construído para a venda de um GiftCard de 3 meses do PlayKids pelo valor de 2 meses.

O fluxo ficou da seguinte forma:
Colocamos um CARD dentro do menu do PlayKids oferecendo o GiftCard.

Card de Pagamento no fluxo do bot.

Ao clicar em "Buy" o usuário visualiza todas as informações que a página deseja que ele forneça para concretizar a compra.

Suas informações para a compra.

Nessa tela, você pode adicionar, caso ainda não tenha cadastrado, os dados para a compra, ou editar as informações que já foram inseridas em algum momento. Por exemplo, se você ainda não tem um cartão de crédito cadastrado ao clicar em "Payment Method" será solicitada as informações sobre o cartão.

Tela para adicionar as informações do cartão de crédito.

Testamos uma compra com um cartão brasileiro internacional e a compra não foi concluída, então fizemos um novo teste com um cartão americano e funcionou normalmente. Por algum motivo que não conseguimos identificar, consegui realizar uma compra com o cartão de crédito NuBank, mas não sei dizer o porque com ele funciona e com cartões de outros bancos do Brasil não funcionou.

Após clicar em “Pay” o Facebook envia para a conversa o recibo do pagamento, além de exibir a tela abaixo onde você pode visualizar o recibo e adicionar um PIN Code / Touch ID para as próximas compras. Além do recibo enviado, também adicionamos uma mensagem explicando para o usuário que ele irá receber o GiftCard por email.

Tela informando que a transação foi concluída.
Recibo e mensagem adicional enviados dentro da thread.

Como comentei no início, a integração foi bastante simples com um meio de pagamento integrado de acordo com o que o Facebook já disponibiliza. Para fazer uma integração com um meio de pagamento próprio, as coisas podem ficar um pouco mais complexas, mas nenhum bicho de 7 cabeças.

O que pode melhorar?

O Facebook ainda não nos fornece a contagem de clicks no botão "buy", somente temos eventos de compras finalizadas, dessa forma, não conseguimos contabilizar as intenções de compra do nosso produto.

A visualização do recibo no celular direciona para uma tela não responsiva (o designer fica louco da vida 😳), mostrando uma versão desktop do site do Facebook, o que dificulta muito a visualização no celular, mesmo os com tela maior.

É ou não é horrível de ler no celular? 😞

Essa foi a nossa primeira experiência com a Payments API espero ter compartilhado de uma forma clara e simples 😊.

E se você gostou, não deixe de dar o seu amor para o post ❤️.

--

--