Duas formas de pagamentos

Visão Geral

No Storefront 2.0, existe a funcionalidade de duas formas de pagamento, permitindo combinações como:

• Carteira de Créditos + Cartão
• Carteira de Créditos + Pix
• Cartão + Pix

Essa doc objetiva explicar e instruir alguns cenários existentes de lojas e como proceder em cada um deles para que os componentes de duas formas sejam corretamente renderizado no front e a loja possa usufruir desse novo recurso.

Lojas sem customizações

Se a loja não sobrescreveu os componentes fechados do wake-components/checkout a atualização já refletirá automaticamente, assim que feitas as configurações de duas formas de pagamento no Admin.

A agência precisa apenas customizar os estilos CSS para adequar o layout do checkout da loja.

Lojas com customizações

Para lojas que sobrescreveram componentes e scripts fechados, é necessário validar as customizações feitas e atualizá-las para contemplar a lógica de dois pagamentos e conta corrente conforme a wake-components.

Nesse caso, trata-se de um trabalho individual da agência: entender o que foi customizado e realizar a atualização.

Atualização do template da loja

📘

É bom saber

As instruções abaixo destinam-se a lojas instanciadas no Storefront 2.0 antesde 2/09/25, data da publicação dessa feature. Nesses casos, será necessário atualizar o template conforme instruções.

Caso tenha migrado para o Storefront 2.0 depois dessa data, avalie caso a caso a necessidade dessas alterações.

Arquivo Pages/checkout/confirmation.html

Para que os dois pagamentos sejam exibidos corretamente na página de confirmação do pedido, a agência precisa atualizar o template da loja para permitir a exibição de múltiplos pagamentos.
Como referência, pode-se utilizar o template padrão: confirmation.html

Query Queries/checkout/confirmation.graphql

Na query, houve a alteração do campo payment para payments. Além disso, foram incluídos alguns campos em cada pagamento, como type e value, para serem exibidos ao usuário.

Referência: confirmation.graphql

Query Queries/account/orders.graphql

Uma das alterações nos componentes fechados que exibem dados de pagamento na página de listagem de pedidos no Minha Conta e nos detalhes de pedidos passou a utilizar o campo total do array de pagamentos dentro do objeto de pedido do usuário.

A agência deve, portanto, adicionar o campo total dentro de cada pagamento na query orders.graphql, seguindo o exemplo do template padrão orders.graphql

Estilizações

Para referência, no lançamento de dois pagamentos no Storefront 2.0, foram alterados os estilos CSS do template padrão.

A agência precisa aplicar as mesmas alterações, adaptando-as ao layout da loja.

O commit abaixo mostra as diferenças realizadas no template padrão para o lançamento de dois pagamentos e conta corrente.
Nele é possível ver alterações nos seguintes arquivos:

Assets/CSS/input_account.css
Assets/CSS/input_checkout.css
Assets/CSS/output_account.css
Assets/CSS/output_base.css
Assets/CSS/output_checkout.css
Pages/checkout/confirmation.html
Queries/account/orders.graphql
Queries/checkout/confirmation.graphql

Commit de referência

Este commit não representa a versão mais atual da implementação.

No entanto, pelo histórico da branch na awake, é possível acompanhar se houver mais alterações nos arquivos listados.
Ele serve como referência para que a agência entenda quais arquivos modificar.