{"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 de atracción de clientes más utilizadas en el comercio electrónico es aplicar a medios de pago específicos un descuento en el __precio al contado__. Este precio promocional generalmente es visible para el usuario solo en la etapa de pago del checkout, después de la selección de la forma de pago. \n\nLa mayor ventaja de esta estrategia es que el precio al contado se calcula automáticamente, evitando inconsistencias en los canales de venta - como Google Shopping - que comparan el precio enviado por la integración con el precio que se muestra en la página de producto\n\nPara utilizar esta estrategia en la plataforma VTEX, además de indicar el descuento de precio al contado, se debe seleccionar el medio de pago en el que se aplicará el descuento. Por lo tanto, es necesario:\n\n1. Utilizar Checkout API para determinar el descuento de precio al contado y vincularlo a un medio de pago (vea el tutorial [Set a discount using the Checkout API](https://developers.vtex.com/vtex-rest-api/docs/set-a-discount-using-the-checkout-api)).\n2. Configurar el layout tanto para tiendas en CMS como en IO para que el descuento sea visible en el medio de pago seleccionado en la página de producto. (vea a continuación).  \n\n## CMS\n\nDespués de determinar el descuento en Checkout, se debe vincular el SKU al medio de pago para que el descuento de precio al contado sea visible en la página de producto. Realice los siguientes pasos. \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. Haga clic en la carpeta __CMS__ y, luego, en la carpeta __HTML Templates__.\n3. Haga clic en el template de su página de producto en la lista de templates.\n4. En la propiedad `skuPrice`, añada la variable `paymentSystemId` con el ID del medio de pago deseado. \n\n![Screenshot 2020-12-18 Crear precio al contado](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\n6. Luego, haga clic en __Save Template__ en el campo superior, para guardar la alteración.\n\nDespués de realizar esa configuración, el descuento de precio al contado estará activo. \n\n## VTEX IO Store Framework\nPara las tiendas desarrolladas con VTEX IO, esa funcionalidad está disponible de forma nativa mediante el componente `vtex.product-price` en el bloque `product-spot-price`. Para configurarla, acceda a nuestra [documentación de producto](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-price#configuration). \n\n## Artículos relacionados\n\n[Configurar descuento de precio al contado para Google Shopping](/es/tutorial/configurar-descuento-de-precio-al-contado-para-google-shopping--40K3R5d4NogMvCzIWdWt3e#)"}