Define payment methods displayed on inStore

After creating a payment condition as described in the inStore - 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 inStore guide for further information on how to access this file.

Edit the checkout-instore-custom.js file

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

Define global payment methods

  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:

Attribute

Type

Description

removeFilters

array

You should add payment conditions that will not be displayed on inStore in this array

filters

array

You should add payment conditions that will be displayed on inStore in this array

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.

window.PAYMENTS_FILTER_GLOBAL = {
  removeFilters: [
    '6', // Boleto Bancário
    '45', // Direct debit
  ],
  filters: [
    '2', '4', // Credit card
    '202' // Cash
  ]
};

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) and “Cash” (ID = 202). 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:

payments: window.PAYMENTS_FILTER_GLOBAL

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

window.INSTORE_CONFIG = {
    payments: window.PAYMENTS_FILTER_GLOBAL,
};

❗️

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

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

Define payment methods per sales associate

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 [email protected] will not see the Cash payment method option on inStore.

const vendorConfig = {
  '[email protected]': {
    payments: {
      removeFilters: [
        '202', // Cash
      ],
    },
  },
}
  1. 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.
function hasVendorConfig(vendor) {
  const email = vendor && vendor.username
  return (
    email &&
    vendorConfig[email] &&
    vendorConfig[email].payments &&
    (vendorConfig[email].payments.filters ||
      vendorConfig[email].payments.removeFilters)
  )
}

function setPaymentsFilter(vendor) {
  const email = vendor && vendor.username
  if (hasVendorConfig(vendor)) {
    const pFilters = vendorConfig[email].payments
    if (pFilters.filters) {
      window.INSTORE_CONFIG.payments = window.INSTORE_CONFIG.payments || {}
      window.INSTORE_CONFIG.payments.filters = pFilters.filters
    }
    if (pFilters.removeFilters) {
      window.INSTORE_CONFIG.payments = window.INSTORE_CONFIG.payments || {}
      window.INSTORE_CONFIG.payments.removeFilters = pFilters.removeFilters
    }
  } else {
    window.INSTORE_CONFIG.payments = window.PAYMENTS_FILTER_GLOBAL
  }
}

function onVendorChange(vendor) {
  setPaymentsFilter(vendor)
}

document.addEventListener(
  'vendorIdentified',
  function (event) {
    const data = event.data
    const vendor = data.vendor
    onVendorChange(vendor)
  },
  false
)

onVendorChange(getVendor())
  1. After making changes in the code, make sure you press the Save button.

Where to find the payment condition ID

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.


Did this page help you?