Conceber e implementar um sistema de (micro)pagamentos

Resumo

Os pagamentos online são hoje mais importantes do que nunca, com as empresas abaladas pelo vírus COVID-19. Isso leva os meus clientes a procurar novas formas de ganhar dinheiro online. Concebi e implementei um sistema de (micro)pagamentos. Este artigo fala de como alcançar a simplicidade resolvendo desafios complexos.

Texto completo

Compreender a nova tecnologia

Quando desenvolvo tecnologia nova e apps, tento sempre imaginar como funcionaria melhor. A forma mais fácil de descobrir é conceber o produto para ti próprio. Tal como Steve Jobs mandou a Apple desenvolver a sua app de apresentações, o Keynote, para si mesmo. É uma das suas famosas piadas sobre ele ser um beta tester mal pago

Se conceberes o produto para ti, pensa no que quererias mesmo, mesmo. Para mim, isso significa o modelo de interação mais simples possível: quero que o meu software seja simples e fácil.

Caso de uso: paga-me um café

Para desenvolver a tecnologia de pagamento, imaginei o caso de uso de acrescentar um botão “paga-me um café” ao meu site. Se funcionar bem, as pessoas podem usá-lo para mostrar que gostam deste blogue, pagando-me um café. Penso que este caso de uso é o desafio perfeito para conceber (e construir) um sistema de (micro)pagamentos.

Esboçar ideias

Antes de programar uma única linha de código, costumo conceber o software esboçando ideias à mão. Acho o processo criativo do desenho útil para explorar ideias, esquemas e processos. É uma das razões por que gosto tanto de trabalhar num tablet: esboçar ideias digitalmente permite-me explorar rapidamente várias hipóteses, copiando e colando em várias iterações.

Prototipagem

Depois de explorares ideias para a tua interface, é altura de desenvolver um protótipo. Com um protótipo podes testar a interface em diferentes dispositivos e ver o aspeto e a sensação que dá.

Durante a prototipagem olho muitas vezes para o esboço do design enquanto programo a primeira versão. No iPad podes fazê-lo com o ecrã dividido: coloco o esboço mesmo ao lado do meu código, em VIM dentro de tmux sobre Mosh, com a brilhante app Blink app para iPadOS. Desenhei a chávena de café com a Picta Graphic for iPad, uma bela app de desenho que exporta para imagens vetoriais (SVG).

Desenvolvimento do frontend

O passo seguinte é desenvolver uma interface totalmente funcional, pondo os botões a funcionar. Durante o desenvolvimento é frequente teres de perceber o que se passa, caçar erros e afinar mecanismos. Uso o Inspect Browser para iPadOS, que me dá uma interface de ecrã tátil em miniatura mesmo ao lado do código. Permite-me testar e aperfeiçoar a interface rapidamente.

Desenvolvimento do backend

Outro passo crucial é desenvolver a tecnologia de backend que prepara e acompanha os pagamentos online. É a tecnologia do lado do servidor, que trata da comunicação entre a interface do frontend (o site) e o prestador de pagamentos (bancos, cartões de crédito, Apple Pay, etc).

Conceber o servidor de backend é normalmente um pouco mais abstrato do que conceber uma interface de frontend (visível). Acho muito útil esboçar diagramas de sequência UML para perceber que chamadas de API devem acontecer e por que ordem. Os Diagramas de sequência visualizam as interações de um programa ao longo do tempo.

No diagrama de sequência do processo de pagamento vês três colunas: frontend, backend e prestador de pagamentos. Cada coluna representa um computador diferente que comunica com os outros. O frontend corre no dispositivo do utilizador, o servidor de backend corre num VPS gerido por mim e o prestador de pagamentos é um servidor externo. O utilizador interage com o site clicando no botão “paga-me um café”, o que desencadeia uma cadeia de chamadas de API que fluem da direita para a esquerda.

O “servidor de backend” é responsável por calcular o montante que o utilizador tem de pagar. O cálculo é feito no servidor e não no cliente, para impedir que utilizadores mal-intencionados manipulem o preço (a tecnologia de frontend pode ser manipulada através do navegador).

Uma sessão de pagamento é preparada informando o prestador de pagamentos de que o utilizador vai fazer um pagamento de determinado montante. Este processo usa uma chave de API secreta, que permite ao prestador saber para que conta bancária devem ir os pagamentos. O prestador devolve um URL de pagamento, usado para redirecionar o utilizador para a verdadeira página de pagamento.

O prestador de pagamentos que uso é a Mollie, uma empresa sediada em Amesterdão com uma plataforma de pagamentos fantástica. As suas APIs estão bem documentadas e oferecem pacotes para implementares facilmente o sistema de pagamento no teu servidor de backend.

Em sintonia com os meus outros servidores de backend, escolhi implementá-lo em NodeJS. Corre praticamente em tudo (de um minúsculo Raspberry PI até grandes nuvens de computação). Em alternativa, podes usar PHP, Ruby, Python ou qualquer um dos outros pacotes disponíveis. A referência da API da Mollie dá informação detalhada sobre os valores que podes esperar.

Atualizações assíncronas do estado do pagamento

Poucas pessoas se apercebem de que obter o estado de um pagamento é um processo assíncrono, com vários estados possíveis. Num mundo perfeito sabes logo se um pagamento teve sucesso ou falhou. Mas, devido à natureza distribuída dos pagamentos online, em que os backends comunicam com servidores diferentes (bancos, cartões de crédito, etc.), nunca sabes ao certo quando um pagamento ficará concluído.

Pensa em situações em que o utilizador fecha a página de pagamento, deixa o dispositivo sem vigilância, ou em que um banco tem uma falha no seu sistema de banca online. Acontece, e cabe a ti conceber o servidor de backend para tratar as atualizações do estado do pagamento separadamente do processo principal de interação com o utilizador.

O prestador de pagamentos chama um webhook no nosso servidor de backend. Entrega uma mensagem do tipo “Olha, mudou alguma coisa no pagamento XYZ”. Esta mensagem diz apenas que algo mudou, não diz qual é o novo estado. É por razões de segurança: caso contrário, utilizadores mal-intencionados poderiam imitar a chamada ao nosso webhook. Em vez disso, o nosso servidor de backend pede o estado real do pagamento através de um canal seguro, usando a nossa chave de API secreta. O prestador devolve o estado do pagamento, que o nosso backend então trata. Consoante o estado, tomam-se as medidas adequadas, como enviar notificações por e-mail ou iniciar a entrega dos produtos.

Fullstack: combinar frontend e backend

O último passo é ligar o frontend à tecnologia de backend, pondo todo o processo a funcionar. É o que chamam “desenvolvimento fullstack”, porque trabalhas no sistema inteiro. O desenvolvimento fullstack é uma arte diferente que poucos programadores dominam a sério: exige trabalhar (depurar e desenvolver) em várias pontas em simultâneo, muitas vezes em linguagens de programação diferentes ao mesmo tempo!

Na prática, isto significa que vais acompanhar diferentes partes do programa para ver se funcionam bem em conjunto. Ver os registos do servidor enquanto tentas fazer um pagamento com a tecnologia de frontend acabada de criar. É difícil, mas também muito gratificante, porque o resultado é um produto que funciona!

O botão “paga-me um café” resultante é, para o utilizador, um processo de 3 passos enganadoramente simples:

• passo 1: clicar num simples botão “paga-me um café”, sem formulários de encomenda complicados, sem códigos captcha irritantes: apenas um botão
• passo 2: a interface expande-se no próprio lugar, preservando o contexto e oferecendo a opção de deixar uma mensagem ou de me pagar várias chávenas de café. Além disso, outros elementos da interface, como os botões das redes sociais, ficam automaticamente escondidos para reforçar o foco na interface do café
• passo 3: o ecrã do prestador de pagamentos permite ao utilizador pagar com qualquer método disponível, como o Apple Pay. Quando o pagamento tem sucesso, é hora de beber café!

Conclusão

Conceber e implementar um sistema de pagamentos não é assim tão difícil quando sabes o que tens de fazer. No entanto, são precisos muitos passos para chegar a essa compreensão. Embora o meu botão “paga-me um café” pareça simples, exigiu resolver muitos desafios diferentes de design e de programação.

É difícil exagerar a importância da simplicidade, mas é muitas vezes muito difícil de alcançar, porque exige compreender todos os aspetos do desafio. Citando Einstein: “A definição de génio é pegar no complexo e torná-lo simples.” Agora, experimenta o botão à vontade: está mesmo aqui ⬇️