How to Customize the List of Displayed Payment Methods in Adyen Salesforce Commerce Cloud

You can customize the list of displayed payment methods in Adyen Salesforce Commerce Cloud by restricting the API request with allowedPaymentMethods, filtering server-side in the controller, or modifying the front-end rendering logic to hide, reorder, or restyle individual methods.

The Adyen Salesforce Commerce Cloud integration retrieves available payment methods from the Adyen platform and renders them during checkout. To customize which options shoppers see, you can intervene at three distinct layers: the API request, server-side processing, or client-side rendering. This guide covers the specific files and functions in the adyen/adyen-salesforce-commerce-cloud repository that control payment method visibility.

Restrict Payment Methods at the API Level

To limit which methods Adyen returns before they reach your Commerce Cloud site, supply an allowedPaymentMethods array when calling the checkout payment methods service. This approach is ideal for enforcing merchant-level rules or market-specific restrictions.

In src/cartridges/int_adyen_SFRA/cartridge/adyen/scripts/payments/adyenGetPaymentMethods.js, the getMethods function checks for this array and includes it in the request payload:

if (allowedPaymentMethods) {
  paymentMethodsRequest.allowedPaymentMethods = allowedPaymentMethods;
}

To implement this restriction, modify src/cartridges/int_adyen_SFRA/cartridge/adyen/scripts/payments/getCheckoutPaymentMethods.js to pass a whitelist of method identifiers when calling getMethods:

const allowedPaymentMethods = ['scheme', 'ideal', 'paypal'];
const paymentMethods = getPaymentMethods.getMethods(
    paymentAmount,
    AdyenHelper.getCustomer(req.currentCustomer),
    countryCode,
    shopperEmail,
    allowedPaymentMethods
);

Payment method identifiers are defined in src/cartridges/int_adyen_SFRA/cartridge/adyen/config/constants.js under the PAYMENTMETHODS object.

Filter and Order Methods Server-Side

For conditional logic—such as hiding methods based on basket total, shopper locale, or authentication state—use server-side filtering in getCheckoutPaymentMethods.js. This file handles sorting and builds the JSON payload sent to the front-end.

The default implementation prioritizes Fastlane by sorting the array:

const sortedPaymentMethods = paymentMethods.paymentMethods.sort((a, b) => {
  if (a.type === constants.PAYMENTMETHODS.FASTLANE) return -1;
  if (b.type === constants.PAYMENTMETHODS.FASTLANE) return 1;
  return 0;
});

To enforce a custom display order, extend the sort callback with a priority map:

const order = {
  fastlane: 0,
  ideal: 1,
  scheme: 2,
  paypal: 3
};
const sortedPaymentMethods = paymentMethods.paymentMethods.sort((a, b) => {
  return (order[a.type] ?? 99) - (order[b.type] ?? 99);
});

To conditionally hide methods based on basket data, add filtering logic before the response is returned:

if (currentBasket && currentBasket.totalGrossPrice.value < 5000) {
  paymentMethods.paymentMethods = paymentMethods.paymentMethods.filter(
    pm => pm.type !== 'sepadirectdebit'
  );
}

Customize Front-End Rendering

When you need to change visual presentation, labels, or hide methods only in the UI while keeping them in the API response, modify the client-side code in the app_adyen_SFRA cartridge.

Remove Specific Methods from the UI

In src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyen/checkout/renderPaymentMethod.js, the renderCheckout function builds a filteredPaymentMethods array. Add exclusions to this filter to remove methods from the display:

const filteredPaymentMethods = paymentMethods.filter(pm => {
  // Existing logic for gift cards and Fastlane...
  if (pm.type === constants.PAYMENTMETHODS.PAYPAL) {
    return false; // Hide PayPal from UI
  }
  return true;
});

Modify Labels and Descriptions

Override the getLabel function (lines 88-94) to customize display text or add prefixes:

function getLabel(isStored, paymentMethod, paymentMethodTitle) {
  const title = paymentMethodTitle || paymentMethod.name;
  const label = isStored ? ` ${store.MASKED_CC_PREFIX}${paymentMethod.lastFour}` : '';
  const prefix = paymentMethod.type === 'ideal' ? 'iDEAL – ' : '';
  return `${prefix}${title}${label}`;
}

Swap Payment Method Icons

Icon paths are constructed by getImagePath (lines 33-37). Provide custom mappings to override default images:

function getImagePath({ isStored, paymentMethod, path, isSchemeNotStored }) {
  const customMap = {
    paypal: 'custom-paypal',
    ideal: 'custom-ideal'
  };
  const imageKey = customMap[paymentMethod.type] ?? getImage(isStored, paymentMethod);
  return `${path}${imageKey}.png`;
}

Component-Level Configuration

To modify component behavior—such as hiding address fields for specific methods—edit the configuration files under src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyen/checkout/paymentMethodsConfiguration/. For example, to disable the billing address for card payments:

// paymentMethodsConfiguration/scheme/config.js
module.exports = {
  visibility: {
    billingAddress: 'hidden',
    personalDetails: 'editable'
  }
};

These configurations merge into the store.paymentMethodsConfiguration object at runtime.

Block Methods Globally via Configuration

For a quick, configuration-driven approach to permanently exclude methods, add their identifiers to blockedPaymentMethods.json. The integration automatically includes this list in the API request payload.

In src/cartridges/int_adyen_SFRA/cartridge/adyen/config/blockedPaymentMethods.json:

{
  "blockedPaymentMethods": [
    "wechatpayMiniProgram",
    "wechatpayQR",
    "wechatpaySDK",
    "bcmc"
  ]
}

Because Adyen receives this list in the request, these methods are omitted entirely from the response.

Summary

• API restriction: Pass allowedPaymentMethods in getCheckoutPaymentMethods.js to limit what Adyen returns, using identifiers from constants.js.
• Server-side filtering: Modify getCheckoutPaymentMethods.js to sort arrays or filter based on basket/shopper conditions before sending JSON to the front-end.
• Front-end customization: Edit renderPaymentMethod.js to filter the UI list, override getLabel for text changes, or adjust getImagePath for custom icons.
• Component configuration: Update files in paymentMethodsConfiguration/ to change field visibility and component behavior.
• Global blocking: Add method IDs to blockedPaymentMethods.json to prevent them from being requested entirely.

Frequently Asked Questions

How do I completely hide a payment method from the checkout?

To completely hide a method, add its identifier to src/cartridges/int_adyen_SFRA/cartridge/adyen/config/blockedPaymentMethods.json. This prevents Adyen from returning it in the API response. Alternatively, filter it out server-side in getCheckoutPaymentMethods.js or client-side in renderPaymentMethod.js if you need conditional logic.

Can I change the order of payment methods without modifying the front-end code?

Yes. Implement custom sorting logic in src/cartridges/int_adyen_SFRA/cartridge/adyen/scripts/payments/getCheckoutPaymentMethods.js before the payment methods array is serialized to JSON. The sort callback can reference a priority map to arrange methods by type.

Where are the payment method identifiers defined in the codebase?

Payment method type identifiers are defined as constants in src/cartridges/int_adyen_SFRA/cartridge/adyen/config/constants.js under the PAYMENTMETHODS export. These string values (e.g., 'scheme', 'paypal', 'ideal') correspond to the type property in Adyen's API responses.

How do I disable the billing address field for specific payment methods?

Create or edit the configuration file for the specific method in src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyen/checkout/paymentMethodsConfiguration/. Set the visibility.billingAddress property to 'hidden' in the exported configuration object to remove the address fields from that payment method's component.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}