Introdução

O Storefront 2.0 possui suporte nativo à exibição de Cartões Sugeridos (cartões previamente salvos pelo cliente em compras anteriores), desde que o parceiro retorne os cartões sugeridos pelo endpoint /payment-details. Isso ocorre automaticamente pelo template padrão, sem a necessidade de implementação manual de scripts ou estilos adicionais.

A tokenização e o armazenamento seguro dos dados continuam sendo responsabilidade do parceiro de pagamento.

O checkout apenas consome as informações retornadas pelo conector, garantindo uma experiência fluida e segura.

Essa funcionalidade melhora a conversão de pedidos, já que o cliente não precisa digitar novamente os dados do cartão.

Pré-requisitos

Para que o recurso funcione corretamente, o conector de pagamento deve:

Retornar a lista de cartões sugeridos no endpoint /payment-details.
Implementar o endpoint DELETE /card (referência)para possibilitar a exclusão de cartões salvos.
Retornar o campo AceitarCartoesSugeridos como true no payload, quando desejar exibir a opção de “Salvar cartão para a próxima compra” no front.

Passo 1 — Exibição dos Cartões Sugeridos

O Storefront 2.0 já vem preparado para renderizar os cartões sugeridos automaticamente, caso o conector retorne os dados no endpoint /[payment-details](https://wakecommerce.readme.io/docs/payment-details).

O template da loja é responsável por renderizar a interface visual desses cartões, permitindo a seleção e exclusão diretamente pelo usuário no checkout.

Passo 2 — Exibição da opção “Salvar Cartão para a Próxima Compra”

No Storefront 2.0, o campo “Salvar cartão para a próxima compra” não precisa mais ser adicionado manualmente via HTML no Admin.

Em vez disso, o parceiro de pagamento deve retornar o campo AceitarCartoesSugeridos como true no endpoint /payment-details.
Quando este campo for true, o template do checkout exibirá automaticamente o checkboxresponsável por salvar os cartões.

O template do Storefront 2.0 é responsável por renderizar o checkbox e processar a escolha do cliente.

Passo 3 — Exclusão de Cartões Sugeridos

No Storefront 2.0, o template padrão já implementa a lógica de exclusão de cartões salvos.

Para que a exclusão funcione corretamente, o parceiro precisa implementar o endpoint DELETE /card conforme descrito na documentação:

https://wakecommerce.readme.io/docs/card

Passo 4 — Escolha do Cartão Salvo

No Storefront 2.0, o template padrão também gerencia o input chaveCartao, utilizado para identificar o cartão selecionado pelo cliente durante o pagamento.
O parceiro não precisa inserir manualmente esse campo no HTML (como acontecia no Storefront 1.0), ele é automaticamente configurado pelo template conforme a escolha do usuário.

Passo 5 — Checkout de Exemplo

Abaixo um exemplo visual de como os cartões sugeridos são exibidos no template padrão do Storefront 2.0: