Pagamento com um clique (One-click Buy)

[cedran]

O que mudou

• Introduzida a funcionalidade de One-click Buy para compras com Vindi Recorrência, permitindo ao cliente realizar recompra com apenas um clique.
• Utilização dos endpoints de payment_profiles da API de recorrência da Vindi para cadastro, consulta, inativação, edição e exclusão de perfis de pagamento.
• Adicionada opção de “Compra com um clique” na página de produto e dropdown para seleção de cartões salvos.
• Implementado fluxo de pagamento automático: se o cliente já tiver perfil salvo, ao clicar em “Comprar com um clique” ele é redirecionado diretamente ao checkout usando o último cartão utilizado.
• Inclusão de notificações ao cliente em caso de sucesso ou falha na transação.
• Limitação inicial: disponível apenas para produtos virtuais.
• Garantia de segurança dos dados seguindo as diretrizes da documentação da Vindi.

---

Motivação

Acelerar o processo de recompra e aumentar a conversão, proporcionando ao cliente uma experiência de compra rápida e fluida. Ao eliminar etapas manuais (reentrada de dados de cartão) e reutilizar perfis de pagamento previamente autorizados, reduzimos o atrito no checkout e fortalecemos o relacionamento recorrente com o cliente.

---

Solução proposta

1. Verificação de perfil existente

   • Ao carregar a página de produto, consultar via API se o cliente já possui um payment_profile.

2. Cadastro de novo perfil

   • Se for um cliente novo (sem perfil), solicitar autorização e cadastrar via endpoint POST /payment_profiles.

3. Gestão de perfis

   • Implementar endpoints no módulo para:
     • Inativar perfil (PATCH /payment_profiles/{id} com status “inactive”).
     • Editar perfil (PUT /payment_profiles/{id}).
     • Excluir perfil (DELETE /payment_profiles/{id}).

4. UI de One-click Buy

   • Botão “Comprar com um clique” na página do produto virtual.
   • Dropdown “Meus Cartões Salvos” para seleção de outro cartão.
   • Link “Alterar método de pagamento com um clique” direcionando para a listagem de cartões salvos.

5. Fluxo de pagamento

   • Ao clicar, reutilizar o último cartão salvo ou o selecionado no dropdown.
   • Chamar POST /charges usando payment_profile_id para gerar a transação.
   • Redirecionar automaticamente para o checkout de confirmação ou exibir mensagem de erro.

6. Notificações

   • Disparar e-mail ou toast in-app informando sucesso ou falha da transação.

7. Segurança

   • Armazenar apenas payment_profile_id no backend; não persistir dados sensíveis de cartão.
   • Seguir as recomendações de aplicação seguras descritas em https://vindi.github.io/api-docs/dist/#/

---

Detalhes técnicos

• API Vindi Recorrência: uso de endpoints em v1/payment_profiles e v1/charges.
• Magento 2: extensão baseada em Plugins e Observers para interceptar o clique e integrar com a API.
• Frontend: templates PHTML e Knockout.js para renderizar botão e dropdown na página de produto.
• Backend:
  • Models para PaymentProfile e OneClickCharge.
  • Controllers REST para gerenciar perfis via AJAX.
• MóduloConfig: novas rotas, ACLs e configurações de chave de API Vindi em Stores → Configuration.
• Logs: registrar requisições e respostas da Vindi em nível DEBUG para facilitar troubleshooting.
• Testes: cobertura unitária para serviços de API e testes manuais de fluxo de UI.

---

Como testar

1. Configure as credenciais da Vindi (sandbox) em Stores → Configuration → Vindi Recorrência.
2. Publique um produto virtual e abra sua página no storefront.
3. Sem perfil: clique em “Comprar com um clique” e autorize o cadastro de cartão. Verifique cadastro via API e receba confirmação de compra.
4. Com perfil existente: faça logout/login como mesmo cliente e clique novamente; confirme que a cobrança usa o mesmo cartão sem solicitar dados.
5. Dropdown de cartões: cadastre dois perfis diferentes e alterne pelo dropdown antes de clicar; confirme cobrança com o cartão selecionado.
6. Acesse Meus Cartões Salvos, inative, edite e exclua perfis; verifique efeitos na lista de opções do produto.
7. Simule falha (por exemplo, cartão expirado) e valide o fluxo de erro e a notificação ao cliente.

---

Loja de teste

https://demo-vindi.loja.biz/painel