After creating a payment condition as described in the VTEX Sales App - Payments guide, we need to create the filters that will define which payment methods will appear at inStore’s checkout.

You must do this by inserting a JavaScript object in the checkout-instore-custom.js file. Check out the How to customize VTEX Sales App guide for further information on how to access this file.

There are two options for defining which payment methods will be displayed on VTEX Sales App. You can set global payment methods, that is, payment methods that any VTEX Sales App user will be able to see, or payment methods per vendor, which means only specific users will be able to see them.

1. The object that contains the payment filters is called window.PAYMENTS_FILTER_GLOBAL. If this object does not already exist in the code, you should insert it, as described below.

The window.PAYMENTS_FILTER_GLOBAL object should contain the following properties:

You must identify each payment condition by their payment condition ID. Check Where to find the payment condition ID for more details.

The code should look similar to the example below.

In this example, we are excluding the conditions “Boleto bancário” (ID = 6) and "Direct debit" (ID = 45); and we are including “Credit card” (IDs = 2 and 4), “Cash” (ID = 202) and "Pix" (ID = 125). The first two will not be displayed at checkout, while the last two will be displayed.

1. Still in the checkout-instore-custom.js file, you need to add a reference to the object created within the window.INSTORE_CONFIG object.

To do this, include the following line of code inside the window.INSTORE_CONFIG object:

The window.INSTORE_CONFIG object should then look like the example below:

Do not remove any of the other properties present in the window.INSTORE_CONFIG object to avoid breaking other functionalities.

3. After making changes in the code, make sure you press the Save button.

After you define the global payment methods that will be displayed in your store, you can override this information with the specific payment methods you want to remove for specific sales associates.

1. You must declare a constant object in the checkout-instore-custom.js file. Inside it, you can use removeFilters and filters properties described in the Define global payment methods section to define the payment methods that will be displayed for this user.

   The example below determines that the user whose email is john@email.com will not see the Cash payment method option on VTEX Sales App.

2. Add the following functions to your checkout-instore-custom.js file. They will observe if the sales associate has a specific configuration associated with them, then set the specific payment methods filter associated with them, and repeat this validation every time a different user logs in.

3. After making changes in the code, make sure you press the Save button.

As explained above, the implementation of payment filters requires listing the payment condition IDs in the window.PAYMENTS_FILTER_GLOBAL object.

You can find the ID of each condition in the Payments module. In the main menu of the VTEX Admin, click on Payments and then on Settings.

In the Payment conditions tab, you will find the ID next to each of the conditions. In the example below, we see that the payment condition ID for Cash is 202.

If we wanted to include Cash as a payment condition to be displayed at the inStore checkout, this would be the value we would add to the filters array, inside the window.PAYMENTS_FILTER_GLOBAL object of the checkout-instore-custom.js file.