{"section":"tutorials","requestedLocale":"pt","requestedSlug":"configurar-desconto-de-preco-a-vista","locale":"pt","slug":"configurar-desconto-de-preco-a-vista","path":"docs/pt/tutorials/integrações/preço/configurar-desconto-de-preco-a-vista.md","branch":"main","content":"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 normalmente é exibido ao cliente apenas na etapa de pagamento do checkout, após a seleção da forma de pagamento.\n\nA principal vantagem dessa estratégia é que o preço à vista é calculado automaticamente, evitando inconsistências em canais de venda – como o Google Shopping – que comparam o preço enviado pela integração ao preço exibido na página de produto.\n\nEste tutorial explica como configurar um desconto de preço à vista na VTEX, desde a definição do desconto e do meio de pagamento até a configuração do frontend da loja para exibir corretamente esse valor na página do produto.\n\n## Antes de começar\n\nAntes de configurar a exibição do preço à vista, crie ou valide a promoção responsável pelo desconto no Admin VTEX. É nessa promoção que você define:\n- O meio de pagamento que receberá o desconto.\n- O percentual ou valor do benefício.\n- Os canais de venda.\n- O escopo dos produtos elegíveis, como SKUs, coleções ou outros critérios da promoção.\n\nSaiba mais em [Criar promoções](https://help.vtex.com/pt/docs/tutorials/criar-promocoes).\n\n## Instruções\n\n### 1 - Defina o meio de pagamento usado no cálculo do preço à vista\n\nUse o endpoint de configuração do `orderForm` para preencher a propriedade `paymentSystemToCheckFirstInstallment` com o ID do meio de pagamento desejado.\n\nVocê pode obter esse ID no Admin VTEX, em **Configurações da loja > Pagamentos > Configurações > Condições de pagamento**.\n\n![id-pagamentos](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/integrações/preço/id-pagamentos.png)\n\nDepois de atualizar a configuração, [simule um carrinho](https://developers.vtex.com/docs/guides/simulate-a-shopping-cart) para verificar se o desconto foi aplicado à opção de pagamento à vista em `paymentData.installmentOptions`.\n\nSaiba mais em [Set a discount using the Checkout API](https://developers.vtex.com/docs/guides/set-a-discount-using-the-checkout-api).\n\n>ℹ️ A Checkout API não cria regras de desconto permanentes; essas regras devem ser definidas por meio de promoções. Saiba mais em [Antes de começar](#antes-de-começar). Ela também não é responsável por exibir o preço à vista na página de produto; isso é feito na [próxima etapa](#2-configure-a-exibicao-do-preco-a-vista-na-pagina-do-produto). Sua função é apenas indicar qual meio de pagamento deve ser considerado e validar o resultado por meio de simulações.\n\n### 2 - Configure a exibição do preço à vista na página do produto\n\nDepois de definir o meio de pagamento no checkout, configure a loja para exibir o valor calculado para o preço à vista na página do produto.\n\n#### Store Framework\n\nEm lojas desenvolvidas com Store Framework, essa funcionalidade está disponível nativamente por meio do componente `vtex.product-price`, no bloco `product-spot-price`.\n\nPara mais informações, consulte a documentação do componente [Product Price](https://developers.vtex.com/docs/apps/vtex.product-price).\n\n#### CMS Portal (Legado)\n\nEm lojas CMS Portal (Legado), é necessário informar no template da página de produto qual o meio de pagamento que deve ser considerado na renderização do preço à vista. Siga os passos abaixo:\n\n1. No Admin VTEX, acesse **Storefront > Layout** ou digite **Layout** na barra de busca no topo da página.\n2. Clique na pasta **CMS** e, depois, em **HTML Templates**.\n3. Clique no template da sua página de produto na lista de templates.\n4. Na propriedade `skuPrice`, adicione a variável `paymentSystemId` com o ID do meio de pagamento desejado.\n\n    ![Screenshot 2020-12-18 Criar preço à vista](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/integrações/preço/configurar-desconto-de-preco-a-vista_1.png)\n\n5. Clique em **Save Template** no campo superior para salvar.\n\nCom essa configuração, a página do produto exibirá o valor à vista calculado para o meio de pagamento selecionado."}