Adyen能否根据区域设置本地化支付方式名称

可以实现，Adyen Checkout 原生支持根据区域设置自动适配 adyen-checkout__payment-method__header 下的支付方式名称，不需要你手动修改DOM内容。

基础配置方式 #

你只需要在初始化 Adyen Web SDK 时传入正确的 locale 参数即可，示例代码如下：

import AdyenCheckout from '@adyen/adyen-web';
import '@adyen/adyen-web/dist/adyen.css';

const initCheckout = async () => {
  const checkout = await AdyenCheckout({
    environment: 'test', // 生产环境替换为 'live'
    clientKey: '你的Adyen客户端密钥',
    locale: 'fr-FR', // 法语法国区域，按需替换为对应区域编码
    paymentMethodsResponse: paymentMethodsResponse, // 从你后端接口获取的支付方式列表
    onSubmit: (state, component) => {
      // 后续提交支付逻辑
    }
  });
  checkout.mount('#checkout-container');
};

initCheckout();

按上述配置后，当区域设置为fr-FR时，信用卡支付方式的头部名称会自动展示为 carte bancaire，不会显示英文的 "credit card"。

自定义文本的特殊场景 #

如果你需要覆盖Adyen内置的默认翻译，也可以通过translations配置项自定义对应语言的展示文本：

const checkout = await AdyenCheckout({
  // 其他基础配置保持不变
  locale: 'fr-FR',
  translations: {
    'fr-FR': {
      'creditCard': 'Carte bancaire' // 可替换为你需要的任意自定义文本
    }
  }
});

注意事项 #

• Adyen的locale参数要求使用横杠分隔的格式（比如fr-FR、zh-CN），如果你传了下划线分隔的格式（比如fr_FR）会触发语言 fallback，默认显示英文内容
• 所有Adyen官方支持的支付方式都已内置对应语言的翻译，常规场景不需要额外配置自定义翻译，只需要正确传入locale参数即可

内容的提问来源于stack exchange，提问作者ALP