A very common ecommerce strategy for attracting customers is to apply a discount to specific payment methods when orders are prepaid in full. This promotional price is usually displayed to users only after they select the payment method at the checkout.

The greatest advantage of this strategy is that the price is automatically calculated, avoiding inconsistencies in sales channels that compare the price sent by the integration with the price displayed on the product page, such as Google Shopping.

To use this strategy in the VTEX platform, besides indicating the discount for orders prepaid in full, you also have to select the payment method to which the discount will apply. Thus, you will need to:

1. Use the Checkout API to determine the discount and link it to a payment method (see our tutorial Set a discount using the Checkout API).

2. Configure the layout for both CMS and IO stores, ensuring that the discount is displayed in the selected payment method on the product page (see details in the following section).

After you determine the discount at Checkout, you need to link the SKU to the payment method so that the discount appears on the product page. To do so, please follow the steps below:

1. In the VTEX Admin, go to Storefront > Layout, or type Layout in the search bar at the top of the page.
2. Click on the CMS folder and then on HTML Templates.
3. Select the template of your product page.
4. In the skuPrice property, add the paymentSystemId variable with the ID of the chosen payment method.

6. Click on Save Template in the upper right corner.

Your discount for orders prepaid in full is now active!

For stores developed on VTEX IO, this is a native feature available through the vtex.product-price component in the product-spot-price block. To configure it, please check our product documentation.

Configuring discounts for orders paid in full on Google Shopping