{"section":"tutorials","requestedLocale":"es","requestedSlug":"configurar-descuento-de-precio-al-contado","locale":"es","slug":"configurar-descuento-de-precio-al-contado","path":"docs/es/tutorials/integraciones/precio/configurar-descuento-de-precio-al-contado.md","branch":"main","content":"Una de las estrategias para atraer clientes más usadas en ecommerce es aplicar un descuento en el **precio al contado** de medios de pago específicos. Este precio promocional normalmente se muestra al cliente solo en la etapa de pago del checkout después de seleccionar el medio de pago.\n\nLa principal ventaja de esta estrategia es que el precio al contado se calcula automáticamente, evitando inconsistencias en canales de venta (como Google Shopping) que comparan el precio enviado por la integración con el precio mostrado en la página de producto.\n\nEste tutorial explica cómo configurar un descuento de precio al contado en VTEX, desde la definición del descuento y del medio de pago hasta la configuración del frontend de la tienda para mostrar el valor correctamente en la página del producto.\n\n## Antes de comenzar\n\nAntes de configurar la visualización del precio al contado, crea o valida la promoción del descuento en el Admin VTEX. En la promoción defines:\n- El medio de pago que recibirá el descuento.\n- El porcentaje o valor del beneficio.\n- Los canales de venta.\n- El alcance de los productos elegibles, como SKUs, colecciones u otros criterios de la promoción.\n\nConsulta más información en [Crear promociones](https://help.vtex.com/es/docs/tutorials/crear-promociones).\n\n## Instrucciones\n\n### 1 - Define el medio de pago utilizado en el cálculo del precio al contado\n\nUtiliza el endpoint de configuración del `orderForm` para llenar la propiedad `paymentSystemToCheckFirstInstallment` con el ID del medio de pago deseado.\n\nPuedes obtener el ID en el Admin VTEX, en **Configuración de la tienda > Pagos > Configuración > Condiciones de pago**.\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\nDespués de actualizar la configuración, [simula un carrito](https://developers.vtex.com/docs/guides/simulate-a-shopping-cart) para verificar si el descuento se aplicó a la opción de pago al contado en `paymentData.installmentOptions`.\n\nConsulta más información en [Set a discount using the Checkout API](https://developers.vtex.com/docs/guides/set-a-discount-using-the-checkout-api).\n\n>ℹ️ Checkout API no crea reglas de descuento permanentes. Esas reglas deben definirse mediante promociones. Consulta más información en [Antes de comenzar](#antes-de-comenzar). Tampoco muestra el precio al contado en la página del producto. Eso se hace en el [siguiente paso](#2-configura-la-visualizacion-del-precio-al-contado-en-la-pagina-del-producto). Su función es solo indicar el medio de pago que debe considerarse y validar el resultado mediante simulaciones.\n\n### 2 - Configura la visualización del precio al contado en la página del producto\n\nDespués de definir el medio de pago en el checkout, configura la tienda para mostrar el valor calculado del precio al contado en la página del producto.\n\n#### Store Framework\n\nEn tiendas desarrolladas con Store Framework, esta funcionalidad está disponible de forma nativa a través del componente `vtex.product-price` en el bloque `product-spot-price`.\n\nPara más información, consulta la documentación del componente [Product Price](https://developers.vtex.com/docs/apps/vtex.product-price).\n\n#### Portal CMS (Legado)\n\nEn las tiendas CMS Portal (Legado) es necesario indicar en la plantilla de la página de producto el medio de pago que debe considerarse al momento de mostrar el precio al contado. Sigue los pasos a continuación:\n\n1. En el Admin VTEX, accede a **Storefront > Layout**, o escribe **Layout** en la barra de búsqueda en la parte superior de la página.\n2. Haz clic en la carpeta **CMS** y luego en **HTML Templates**.\n3. Haz clic en la plantilla de tu página de producto en la lista de plantillas.\n4. En la propiedad `skuPrice`, agrega la variable `paymentSystemId` con el ID del medio de pago deseado.\n\n   ![Screenshot 2020-12-18 Criar preço à vista](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/integraciones/precio/configurar-descuento-de-precio-al-contado_1.png)\n\n5. Haz clic en **Save Template** en el campo superior para guardar.\n\nCon esta configuración la página del producto mostrará el valor al contado calculado para el medio de pago seleccionado."}