Como Implementar Pagamentos Por M-Pesa no Shopify

Herquiloide Hele — Sun, 25 Oct 2020 14:24:36 +0000

Hello pessoal, neste artigo irei partilhar um pouco da minha experiência no processo de implementação do método de pagamento M-Pesa numa loja Shopify.

Para quem não sabe, Shopify é uma das maiores plataformas de e-commerce actualmente existentes, e suporta milhares de lojas online ao redor do mundo incluindo Moçambique.

Há 4 meses precisámos migrar de uma loja WooCommerce para Shopify porque, depois de algumas análises, percebemos que seria a melhor plataforma de acordo com as necessidades do negócio na altura.

Após a migração deparámo-nos com uma limitação para o sucesso da loja: a impossibilidade de adicionar provedores de pagamentos tercerizados não listados.

Em outras palavras, não se pode adicionar provedores de pagamentos customizados para além dos que já estão predefinidos (cerca de 54 provedores), sendo que actualmente nenhum destes encontra-se disponível para Moçambique.

Provedores tercerizados permitidos

Sendo o M-Pesa um provedor de pagamento tercerizado que não encontra-se disponível por default no Shopify até ao momento, tivemos o desafio de encontrar uma forma alternativa para permitir pagamentos usando este provedor, uma vez que muitos dos nossos clientes já estavam habituados com este método na nossa loja antiga.

E é esse processo que pretendo explicar neste artigo.

Definição da estratégia (Front-end)

Antes de mais, temos que ter em conta que o Shopify não permite uma customização da página do Checkout suficiente para implementar essa funcionalidade esta página, assim sendo, a estratégia consistirá em deixar que o utilizador faça encomenda pelo fluxo normal do Shopify.

E só depois redirecionar o utilizador para uma página de pagamento onde irá efectuar o pagamento. Mas como? Se não podemos customizar a página do checkout!

Bom, uma vez feita a encomenda, é apresentado para o utilizador a página do status da encomenda, e, é nesta página onde podemos adicionar um botão com uma accão para redirecionar o utilizador para uma página onde concretamente irá efectuar o pagamento.

Para fazer isso é muito simples, basta seguir os seguintes passos:

No admin do Shopify, clique em Configurações > Checkout.
Em Scripts adicionais, adicione o trecho de código abaixo.
Clique em Salvar.

Algo importante a ser destacado aqui é a URL de redirecionamento, onde passamos o ID da encomenda (checkout.order_id) que será usado para obter os dados da encomenda e do cliente na página de pagamento.

A partir deste momento podemos criar uma página customizada com os elementos necessários para efectuar um pagamento. Tomemos como exemplo a página abaixo.

Página customizada para efectuar pagamentos

Muito bem, já temos o básico referente a parte do front-end, resta-nos estruturar o back-end que irá interagir com API do M-Pesa.

Denifinição da estratégia (Back-end)

É sabido que a partir da dashboard da nossa loja só temos acesso a camada do front-end (edição dos ficheiros do tema do website — HTML, CSS e JavaScript).

Tendo em conta que para comunicarmo-nos com a API do M-Pesa precisaríamos de armazenar as chaves de acesso em algum lugar, certamente que não seria uma boa ideia usar esta camada para tal.

Assim sendo, precisamos de uma camada em que possamos fazer isso e muito mais com a devida segurança. De forma geral podemos definir a arquitectura abaixo como base.

Arquitectura Shopify — Mpesa

Okay, vamos lá entender a função e a interação entre os elementos que compõem a arquitectura acima:

Em primeira instância temos a nossa loja online, que a partir da página de pagamentos interage com um Back-end para obter informações da encomenda e iniciar uma acção de pagamento.

No nosso back-end temos um microsserviço desenvolvido em Node.Js especialmente para tratar da questão dos pagamentos. É nesta componente onde temos todos os dados de configuração e a lógica para realizar e validar os pagamentos.

Este Microsserviço comunica-se primeiramente com a API do Shopify para obter informações da encomenda dado um determinado ID, informações essas que são retornadas para nossa página de pagamentos na loja online.

Em seguida, o cliente inicia uma acção de pagamento introduzindo o seu número de telefone. O nosso microsserviço recebe esta informação e interage com a API do Mpesa para efectivar o pagamento.

A partir deste momento, resta-nos apenas marcar a encomenda como paga ou não dependendo da resposta que obtemos. Mas, infelizmente, não podemos fazer isso a partir da API do Shopify, uma vez que não é permitido alterar o estado do pagamento de uma encomenda que tenha sido iniciada pelo cliente.

Com isso, uma alternativa seria a de salvar os dados do pagamento em alguma base de dados, neste caso podemos usar o MongoDB Atlas — uma cloud Database. Onde podemos armazenar o histórico de pagamentos das encomendas.

Foi desta forma que tornou-se possível a implementação pagamentos por M-Pesa numa loja Shopify. Thank You.

Website: https://www.payments.co.mz/

DEV Community: Herquiloide Hele

Como Implementar Pagamentos Por M-Pesa no Shopify

Definição da estratégia (Front-end)

Denifinição da estratégia (Back-end)