Uma das estratégias de atração de clientes mais usadas no ecommerce é aplicar a meios de pagamento específicos um desconto no preço à vista. Esse preço promocional geralmente fica visível para o usuário apenas na etapa de pagamento do checkout após a seleção da forma de pagamento.

A maior vantagem dessa estratégia é o fato de o preço à vista ser calculado automaticamente, evitando inconsistências em canais de venda – como o Google Shopping – que comparam o preço enviado pela integração com o preço exibido na página de produto.

Para fazer uso dessa estratégia na plataforma VTEX, além de indicar o desconto de preço à vista, é preciso selecionar o meio de pagamento em que o desconto será aplicado. Portanto, é necessário:

1. Utilizar a Checkout API para determinar o desconto de preço à vista e vinculá-lo a um meio de pagamento (veja o tutorial Set a discount using the Checkout API).
2. Configure o layout tanto para lojas em CMS quanto para lojas em IO, garantindo que o desconto seja exibido no método de pagamento selecionado na página do produto (veja abaixo).

Depois de determinar o desconto no Checkout, é preciso atrelar o SKU ao meio de pagamento para que o desconto do preço à vista esteja visível na página de produto. Veja os passos abaixo.

1. No Admin VTEX, acesse Storefront > Layout, ou digite Layout na barra de busca no topo da página.
2. Clique na pasta CMS e, depois, em HTML Templates.
3. Clique no template da sua página de produto na lista de templates.
4. Na propriedade skuPrice, adicione a variável paymentSystemId com o ID do meio de pagamento desejado.

6. Após a alteração, clique em Save Template no campo superior para salvar.

Com essa configuração, o desconto de preço à vista estará ativo.

Para as lojas desenvolvidas com o VTEX IO, essa funcionalidade está disponível de forma nativa pelo componente vtex.product-price no bloco product-spot-price. Para configurá-la, acesse nossa documentação do produto.

Configurar desconto de preço à vista para Google Shopping