Vue3集成Adyen Web Dropin无法隐藏StoredPaymentMethod求助

核心排查点与解决方案 #

1. 修正配置参数拼写错误 #

Adyen Web Dropin的官方配置参数为**showStoredPaymentMethods**（复数形式），你当前代码中使用的单数showStoredPaymentMethod是参数不生效的最常见原因。

修改后的配置代码：

const configuration = {
  translations: {
    fr_FR: {
      paybutton: t('profile.myBankCards.buttons.register'),
    },
  },
  paymentMethodsResponse: paymentMethods.data,
  showStoredPaymentMethods: false, // 修正为复数形式
  removePaymentMethods: ['paypal'],
  clientKey: adyenConfig.test['client-key'],
  locale: 'fr_FR',
  environment: adyenConfig.test.environment,
  brands: ['visa'],
  onSubmit: async (state: any, dropin: any) => {
    dropin.setStatus('loading');
    // ... 你的业务逻辑
  }
}

const checkout = await AdyenCheckout(configuration);
checkout.create('dropin').mount('#dropInComponent').setComponentRef('dropInComponent');

2. 手动过滤返回的存储支付方式 #

如果修正参数后仍未生效，可以在传入paymentMethodsResponse前，手动清空返回的storedPaymentMethods数组：

// 预处理支付方式响应，移除存储的支付方式
const processedPaymentData = {
  ...paymentMethods.data,
  storedPaymentMethods: []
};

const configuration = {
  // ... 其他配置
  paymentMethodsResponse: processedPaymentData,
  showStoredPaymentMethods: false,
  // ... 其他配置
}

3. 检查Adyen Web SDK版本 #

确保你使用的是Adyen Web SDK的最新稳定版本，旧版本可能存在参数命名不一致或bug。可通过package.json查看依赖版本，建议升级到v5.x及以上版本。

4. 排查配置冲突 #

• 确认没有其他代码在Dropin初始化后，通过dropin.update()等API修改存储支付方式的显示状态；
• 检查brands配置是否意外触发存储支付方式的显示（当前['visa']设置无冲突，但需确保无额外品牌过滤逻辑）。

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