以下是一个标准的 Stripe 支付流程示意图，涵盖了从用户点击支付到最终完成的完整数据流向：

Stripe 支付核心流程图

┌─────────────┐         ┌──────────────┐         ┌─────────────┐
│   用户端     │         │   你的服务器   │         │   Stripe    │
│  (浏览器/App)│         │  (后端API)    │         │   (支付网关) │
└──────┬──────┘         └──────┬───────┘         └──────┬──────┘
       │                        │                        │
       │  1. 请求创建支付        │                        │
       │ ──────────────────────>│                        │
       │                        │                        │
       │                        │  2. 创建 PaymentIntent │
       │                        │ ──────────────────────>│
       │                        │                        │
       │                        │  3. 返回 client_secret │
       │                        │ <──────────────────────│
       │                        │                        │
       │  4. 返回 client_secret  │                        │
       │ <──────────────────────│                        │
       │                        │                        │
       │  5. 用户填写支付信息     │                        │
       │    (Card Element)      │                        │
       │ ───────────────────────────────────────────────>│
       │                        │                        │
       │  6. Stripe.js 处理支付  │                        │
       │ <───────────────────────────────────────────────│
       │    (显示成功/失败)       │                        │
       │                        │                        │
       │                        │  7. Webhook 通知       │
       │                        │ <──────────────────────│
       │                        │   (payment_intent.succeeded)
       │                        │                        │
       │  8. 查询支付状态         │                        │
       │ ──────────────────────>│                        │
       │                        │  9. 返回订单确认        │
       │ <──────────────────────│                        │
       │                        │                        │

详细流程说明

阶段1：初始化支付 (步骤1-4)

1. 前端请求：用户点击"立即支付"，前端向后端API发送请求，包含金额、货币类型等信息
2. 创建PaymentIntent：后端使用Secret Key调用Stripe API创建支付意图
3. 返回client_secret：Stripe生成并返回一个临时的client_secret给后端
4. 传递到前端：后端将client_secret返回给前端，前端将其保存在内存中

阶段2：用户支付 (步骤5-6)

1. 收集支付信息：前端渲染Stripe Elements组件（Card Element或Payment Element），用户输入卡号、有效期、CVC等信息
2. 确认支付：前端调用stripe.confirmCardPayment(client_secret, payment_method)，将加密的支付信息直接发送到Stripe（注意：卡信息不经过你的服务器，直接发送给Stripe，这大大降低了你的PCI合规负担）

阶段3：异步通知 (步骤7)

1. Webhook回调：支付完成后，Stripe会向你在仪表盘配置的Webhook URL发送异步通知（如payment_intent.succeeded）
   • 关键点：这是最可靠的支付成功确认方式，应在此更新订单状态
   • 需要考虑网络延迟和重试机制

阶段4：结果反馈 (步骤8-9)

1. 前端轮询/查询：支付成功后，前端可以主动查询订单状态
2. 返回确认：后端验证Webhook已处理后，向前端返回最终订单确认信息

不同支付模式的流程对比

方案A：Stripe Checkout（托管页面）

用户 ──> 点击支付 ──> 后端创建Checkout Session ──> 302重定向到Stripe页面 ──> 
用户输入卡信息 ──> 支付完成 ──> 重定向回你的网站(success_url/cancel_url) ──>
Stripe发送Webhook ──> 后端更新订单

优点：实现最快，PCI合规完全由Stripe负责
缺点：用户会离开你的网站

方案B：Payment Element（嵌入式）

用户 ──> 在你网站填写表单 ──> 前端渲染Stripe组件 ──> 
用户直接在当前页面支付 ──> 支付结果实时返回 ──> 
Webhook异步确认

优点：用户体验最好，用户不离开你的网站
缺点：需要更多前端开发工作

方案C：订阅支付流程

用户订阅 ──> 创建订阅(含试用期) ──> 生成发票 ──> 
首次支付 ──> 后续周期自动扣款 ──> 
Webhook处理：invoice.paid(成功) / invoice.payment_failed(失败)

状态流转图

PaymentIntent状态机：
           
           ┌─────────────┐
           │ requires_   │
           │ payment_    │
           │ method      │
           └──────┬──────┘
                  │ 用户提交支付信息
                  ↓
           ┌─────────────┐
           │ requires_   │
           │ action      │ ◄──── 3D Secure验证
           │ (3DS)       │
           └──────┬──────┘
                  │ 验证通过
                  ↓
           ┌─────────────┐
           │ processing  │ ────► 异步处理中
           └──────┬──────┘
                  │ 成功    │ 失败
                  ↓         ↓
           ┌─────────────┐ ┌─────────────┐
           │ succeeded   │ │ requires_   │
           │             │ │ payment_    │
           │             │ │ method      │
           └─────────────┘ └─────────────┘

关键设计要点

1. 幂等性：创建PaymentIntent时使用idempotency_key，防止重复扣款
2. Webhook重试：Stripe会尝试发送Webhook最多3天，你的端点需要是幂等的
3. 3D Secure：自动处理，返回requires_action状态时前端需调用handleCardAction
4. 错误处理：支付失败、卡被拒、网络超时等情况都需要有优雅的降级方案

代码伪代码流程

// 前端
async function handlePayment() {
  // 1. 获取clientSecret
  const { clientSecret } = await fetch('/api/create-payment', {
    method: 'POST',
    body: JSON.stringify({ amount: 1000 })
  }).then(r => r.json());
  
  // 2. 确认支付
  const { error, paymentIntent } = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: { return_url: 'https://your-site.com/success' }
  });
  
  // 3. 处理结果
  if (error) showError(error.message);
}

// 后端 - 创建PaymentIntent
app.post('/api/create-payment', async (req, res) => {
  const paymentIntent = await stripe.paymentIntents.create({
    amount: req.body.amount,
    currency: 'usd',
    automatic_payment_methods: { enabled: true }
  });
  res.json({ clientSecret: paymentIntent.client_secret });
});

// 后端 - Webhook处理器
app.post('/webhook', bodyParser.raw({type: 'application/json'}), (req, res) => {
  const sig = req.headers['stripe-signature'];
  const event = stripe.webhooks.constructEvent(req.body, sig, webhookSecret);
  
  switch(event.type) {
    case 'payment_intent.succeeded':
      // 更新订单状态为已支付
      break;
  }
});

这个流程确保了支付的安全性和可靠性，同时将敏感信息处理交由Stripe负责，最大限度地减轻了你的PCI合规负担。