如何通过Stripe Elements实现Setup Intent并支持移动钱包？

可以直接使用 Stripe Elements（尤其是 Payment Element）配合 Setup Intent 实现 Apple Pay、Google Pay 等移动钱包的支付方式保存，无需仅依赖 Checkout。以下是官方标准实现步骤：

后端：创建 Setup Intent #

在后端生成 Setup Intent 时，需明确指定支持的支付方式类型（包含移动钱包），并将生成的客户端密钥返回给前端：

// Node.js 示例
const stripe = require('stripe')('sk_test_你的密钥');

const setupIntent = await stripe.setupIntents.create({
  customer: 'cus_目标客户ID', // 可选，若需将支付方式关联到特定客户
  payment_method_types: ['card', 'apple_pay', 'google_pay'], // 包含钱包类型
});

// 将客户端密钥返回给前端
res.json({ clientSecret: setupIntent.client_secret });

前端：使用 Payment Element 完成设置 #

通过 Stripe.js 初始化 Elements，配置为「setup」模式，即可自动渲染支持的移动钱包选项：

<!-- 加载 Stripe.js -->
<script src="https://js.stripe.com/v3/"></script>

<form id="setup-form">
  <div id="payment-element"></div>
  <button id="submit-btn">保存支付方式</button>
  <div id="error-message" style="color: red;"></div>
</form>

<script>
// 初始化 Stripe 实例
const stripe = Stripe('pk_test_你的公钥');
const elements = stripe.elements({
  clientSecret: '从后端获取的client_secret',
});

// 创建并挂载 Payment Element，指定 setup 模式
const paymentElement = elements.create('payment', {
  mode: 'setup',
  // 可选：指定仅显示特定支付方式，比如只保留钱包
  // paymentMethodTypes: ['apple_pay', 'google_pay']
});
paymentElement.mount('#payment-element');

// 处理表单提交
document.getElementById('setup-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const { error } = await stripe.confirmSetup({
    elements,
    confirmParams: {
      return_url: 'https://你的域名/setup-success', // 可选，成功后的跳转地址
    },
  });

  if (error) {
    document.getElementById('error-message').textContent = error.message;
  } else {
    // 处理成功逻辑，比如跳转或更新页面状态
    window.location.href = '/setup-success';
  }
});
</script>

关键注意事项 #

• 需在 Stripe 后台的「支付方式」设置中，开启 Apple Pay 和 Google Pay 选项。
• Payment Element 会自动根据用户设备/浏览器环境，显示对应的钱包按钮（如苹果设备显示 Apple Pay，Chrome/安卓显示 Google Pay）。
• 若需自定义钱包按钮的样式或位置，也可单独使用 Apple Pay Element/Google Pay Element，配合 Setup Intent 完成确认流程（官方推荐优先使用 Payment Element 以简化集成）。

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