从Stripe Elements获取选中支付方式及整体Stripe流程咨询

核心流程问题 #

你的现有流程顺序有误，paymentMethod的获取与关联必须在支付确认前完成。Stripe Elements在用户选择/输入支付方式后，前端可直接获取到paymentMethod相关凭证，无需单独手动创建单个支付方式。

正确流程（单次支付） #

前后端协作流程 #

1. 结账页加载时，前端请求后端创建PaymentIntent，后端仅返回clientSecret（无需返回PaymentIntent ID，前端通过clientSecret即可完成操作）
2. 前端用clientSecret初始化Stripe Elements，用户选择或填写支付方式
3. 表单提交时，前端通过Stripe JS调用confirmPayment，传入Elements实例和返回URL，Stripe会自动处理支付方式验证、完成PaymentIntent确认
4. 后端通过webhook监听payment_intent.succeeded事件，在回调中完成创建客户、关联客户到PaymentIntent、生成订单等业务逻辑

关键代码示例 #

前端JS（支付确认）

const stripe = Stripe('你的公钥');
const elements = stripe.elements({ clientSecret: '后端返回的clientSecret' });
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

// 表单提交处理
document.getElementById('checkout-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const { error } = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: '你的支付完成跳转URL',
    },
  });

  if (error) {
    // 处理支付错误，比如显示错误提示
    console.error(error.message);
  }
});

后端PHP（创建PaymentIntent）

require_once('vendor/autoload.php');
\Stripe\Stripe::setApiKey('你的私钥');

$paymentIntent = \Stripe\PaymentIntent::create([
  'amount' => 1000, // 单位：分，示例对应10美元
  'currency' => 'usd',
  'payment_method_types' => ['card', 'apple_pay', 'ideal'], // 配置支持的支付方式
]);

echo json_encode([
  'clientSecret' => $paymentIntent->client_secret
]);

后端PHP（webhook处理支付成功）

require_once('vendor/autoload.php');
\Stripe\Stripe::setApiKey('你的私钥');

$payload = @file_get_contents('php://input');
$event = null;

try {
  $event = \Stripe\Event::constructFrom(
    json_decode($payload, true)
  );
} catch(\UnexpectedValueException $e) {
  http_response_code(400);
  exit();
}

// 监听支付成功事件
if ($event->type === 'payment_intent.succeeded') {
  $paymentIntent = $event->data->object;
  // 创建客户
  $customer = \Stripe\Customer::create([
    'email' => $paymentIntent->receipt_email,
    // 补充其他客户信息
  ]);
  // 将客户关联到PaymentIntent
  \Stripe\PaymentIntent::update(
    $paymentIntent->id,
    ['customer' => $customer->id]
  );
  // 执行订单创建等业务逻辑
}

http_response_code(200);

订阅场景流程 #

订阅场景需结合Subscription与PaymentIntent操作，流程如下：

1. 结账页加载时，前端请求后端创建Customer并返回Customer ID；同时创建Subscription（指定对应价格ID），返回关联的clientSecret
2. 前端用clientSecret初始化Stripe Elements，用户选择支付方式
3. 前端调用confirmPayment完成支付方式绑定与订阅激活
4. 后端通过webhook监听subscription_succeeded事件，处理订阅激活后的业务逻辑

关键代码示例（后端PHP创建订阅） #

$customer = \Stripe\Customer::create([
  'email' => 'customer@example.com',
]);

$subscription = \Stripe\Subscription::create([
  'customer' => $customer->id,
  'items' => [['price' => '你的价格ID']],
  'payment_behavior' => 'default_incomplete',
  'payment_settings' => ['save_payment_method' => 'on_subscription'],
  'expand' => ['latest_invoice.payment_intent'],
]);

// 返回给前端的clientSecret来自订阅关联的PaymentIntent
echo json_encode([
  'clientSecret' => $subscription->latest_invoice->payment_intent->client_secret
]);

关键注意事项 #

• 禁止在前端传递PaymentIntent ID到后端，使用clientSecret操作更安全
• 所有核心业务逻辑（创建客户、订单、订阅）必须通过webhook触发，避免前端跳转导致的逻辑中断
• Stripe Elements会自动适配不同支付方式的验证流程（如iDEAL需跳转银行页面），confirmPayment会统一处理这些流程

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