Stripe PaymentElement支付方式显示不一致问题及解决咨询

我有两类支付流程：

• 使用基于PaymentIntent创建的PaymentElement向客户收款。
• 使用基于SetupIntent创建的PaymentElement仅收集客户支付方式。

第一类流程（收款） #

1. 通过customerId和金额创建PaymentIntent

const paymentIntent = await stripeKey.paymentIntents.create({
            customer: customerId,
            setup_future_usage: 'off_session',
            amount: amount,
            currency: 'usd',
            metadata : {
                tenantId :  tenantId,
                customerId : customerId,
                transaction_from : transaction_from,
            },
             automatic_payment_methods: {
                enabled: true,
                allow_redirects: 'always'
             }
        });

2. 使用PaymentIntent的client_secret渲染PaymentElement

const appearance = {
        theme: 'stripe',
          };

      const options = {
        clientSecret: paymentIntent.client_secret,
        appearance,
      };

      elements = stripe.elements(options);
      paymentElement = elements.create("payment");
      paymentElement.mount("#payment");  

3. 渲染后的PaymentElement界面为基于PaymentIntent创建的版本。

第二类流程（仅收集支付方式） #

1. 创建SetupIntent

const setupIntent = await stripe.setupIntents.create({

      customer: customerId,
      metadata: {clientid : tenantId},

        automatic_payment_methods: {
            enabled: true,
            allow_redirects: 'always'
        }
    });

2. 使用SetupIntent的client_secret渲染PaymentElement

const appearance = {
          theme: 'stripe',
        };
    
        const options = {
          clientSecret: setupIntent.client_secret,
          appearance,
        };
        
    
        elements = stripe.elements(options);
    
        const paymentElement = elements.create("payment");
    
        paymentElement.mount("#paymentMethod"); 

3. 渲染后的PaymentElement界面为基于SetupIntent创建的版本。

目前两个流程的PaymentElement显示的支付方法不一致，导致体验不统一，需要添加哪些步骤来让两者显示相同的支付方法？

解决方案 #

1. 对齐SetupIntent与PaymentIntent的核心配置

Stripe会根据Intent的currency和setup_future_usage参数筛选可用支付方式，需确保两个Intent的这些参数完全一致。修改SetupIntent创建代码，补充缺失的配置项：

const setupIntent = await stripe.setupIntents.create({
  customer: customerId,
  setup_future_usage: 'off_session', // 与PaymentIntent保持一致
  currency: 'usd', // 与PaymentIntent保持一致
  metadata: {clientid : tenantId},
  automatic_payment_methods: {
    enabled: true,
    allow_redirects: 'always'
  }
});

2. 显式指定允许的支付方法（可选）

若对齐核心配置后仍有差异，可在automatic_payment_methods中显式定义allowed_payment_methods，强制两个Intent使用相同的支付方法列表。例如：

修改PaymentIntent的自动支付方法配置：

automatic_payment_methods: {
  enabled: true,
  allow_redirects: 'always',
  allowed_payment_methods: ['card', 'us_bank_account', 'paypal'] // 根据业务需求指定
}

同步修改SetupIntent的对应配置：

automatic_payment_methods: {
  enabled: true,
  allow_redirects: 'always',
  allowed_payment_methods: ['card', 'us_bank_account', 'paypal'] // 与PaymentIntent完全一致
}

3. 确保PaymentElement初始化参数完全一致

检查两个流程中创建elements和PaymentElement的代码，确保除clientSecret外，其他参数（如appearance、locale等）完全相同。当前代码中appearance已一致，若有其他自定义参数需同步对齐。

原理说明 #

PaymentElement显示的支付方式由以下因素决定：

• Intent的货币类型（currency）
• 未来支付场景（setup_future_usage）
• 自动支付方法的白名单配置（allowed_payment_methods）
• Stripe账户已启用的支付方式
• 客户所在地区

通过对齐上述核心配置，即可让两个流程的PaymentElement展示完全一致的支付方法列表。

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