集成@stripe/stripe-react-native Payment Sheet时保存卡片选项不显示求助

我正在集成关联Stripe客户ID的Payment Sheet，想要启用保存卡片选项（如图所示）。目前已成功将客户与支付关联，但Save this card for future powdur payments选项始终不显示，求开发者帮忙排查原因。

服务端代码 #

createCustomer #

exports.handler = async (event) => {
  console.log(JSON.stringify(event.arguments));
  const customer = await stripe.customers.create({
    name: event.arguments?.input?.name,
    email: event.arguments.input?.email,
    payment_method: 'pm_card_visa',
    invoice_settings: {
      default_payment_method: 'pm_card_visa',
    },
  });
  console.log('Customer Data', JSON.stringify(customer));
  return {
    id: customer.id ?? 'Default',
  };
};

createPaymentIntent #

exports.handler = async (event) => {
  console.log('Event', JSON.stringify(event.arguments.input));
  try {
    const paymentIntent = await stripe.paymentIntents.create({ ...event.arguments.input });
    console.log(paymentIntent.client_secret);
    return {
      clientSecret: paymentIntent.client_secret,
    };
  } catch (error) {
    console.log(JSON.stringify(error));
    return {
      error: error.message,
    };
  }
};

/** createIntent data
 * description: 'Software development services',
    customer: customerId,
    shipping: {
      name: 'Jenny Rosen',
      address: {
        line1: '510 Townsend St',
        postal_code: '98140',
        city: 'San Francisco',
        state: 'CA',
        country: 'US',
      },
    },
    amount: 1099,
    currency: 'usd',
    payment_method_types: ['card'],
 */

问题原因及修复方案 #

Payment Sheet显示"保存卡片"选项需要满足两个核心条件，你的代码恰好遗漏了关键配置：

1. Payment Intent 必须配置 setup_future_usage 参数
   这个参数是触发保存选项的开关，用于告知Stripe你需要将当前支付方式留存供未来使用，可选值为on_session（仅用户在场时复用）或off_session（支持自动扣款）。

2. 创建Customer时不要硬编码测试支付方式
   你当前直接绑定了pm_card_visa这个测试支付方式ID，实际场景中应该由前端收集用户卡片信息后生成支付方式再关联，硬编码会导致逻辑冲突，无法触发正常的保存流程。

修改后的代码示例 #

1. 修正 createCustomer 函数

移除硬编码的支付方式配置：

exports.handler = async (event) => {
  console.log(JSON.stringify(event.arguments));
  const customer = await stripe.customers.create({
    name: event.arguments?.input?.name,
    email: event.arguments.input?.email,
    // 移除硬编码的payment_method和default_payment_method
  });
  console.log('Customer Data', JSON.stringify(customer));
  return {
    id: customer.id ?? 'Default',
  };
};

2. 修正 createPaymentIntent 的传入参数

添加setup_future_usage配置：

/** 修改后的 createIntent data
 * description: 'Software development services',
    customer: customerId,
    shipping: {
      name: 'Jenny Rosen',
      address: {
        line1: '510 Townsend St',
        postal_code: '98140',
        city: 'San Francisco',
        state: 'CA',
        country: 'US',
      },
    },
    amount: 1099,
    currency: 'usd',
    payment_method_types: ['card'],
    setup_future_usage: 'on_session', // 新增配置，按需选on_session/off_session
 */

额外注意事项 #

• 前端初始化Payment Sheet时，需确保正确传入customerID和clientSecret，同时确认SDK配置中开启了支付方式复用权限（比如Web端的allowsPaymentMethodReuse、移动端的对应配置项）。
• 测试时使用Stripe官方提供的测试卡号，不要直接使用pm_card_visa这类预设支付方式ID，否则会干扰保存流程的触发。

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