PHP集成Stripe保存支付方式时无UI弹出问题求助

你的代码仅完成了后端创建Stripe Checkout Session的步骤，但缺失了关键的前后端交互环节，这就是Stripe UI无法弹出的核心原因。具体遗漏点如下：

1. 未返回Checkout Session的ID
   后端创建Session后，必须将生成的id（格式类似cs_test_xxx）传递给前端页面——前端需要用这个ID来启动Stripe Checkout界面。你的代码仅调用了创建方法，没有输出或返回这个Session ID。

   修改后端代码，添加返回逻辑，比如用JSON格式输出：

   $checkoutSession = $stripe->checkout->sessions->create([
      'mode' => 'setup',
      'payment_method_types' => ['card'],
      'success_url' => 'https://api.affordablecustomehr.com/stripe/success/?session_id={CHECKOUT_SESSION_ID}',
      'cancel_url' => 'https://api.affordablecustomehr.com/stripe/cancel',
      'customer' => $customer['id']
   ]);
   
   // 返回Session ID给前端
   echo json_encode(['sessionId' => $checkoutSession->id]);
   

2. 缺少前端Stripe.js集成
   前端页面需要引入Stripe.js，并在用户点击按钮时调用Stripe的方法触发UI弹窗。以下是基础示例（假设按钮ID为setup-button）：

   <!-- 引入Stripe.js -->
   <script src="https://js.stripe.com/v3/"></script>
   <button id="setup-button">设置支付方式</button>
   
   <script>
     // 用你的Stripe公钥初始化（公钥格式为pk_test_xxx，可在Stripe后台获取）
     const stripe = Stripe('pk_test_你的公钥');
     const setupButton = document.getElementById('setup-button');
   
     setupButton.addEventListener('click', async () => {
       // 调用后端接口获取Checkout Session ID
       const response = await fetch('/你的后端接口路径', { method: 'POST' });
       const data = await response.json();
   
       // 启动Stripe Checkout界面
       const { error } = await stripe.redirectToCheckout({
         sessionId: data.sessionId
       });
   
       // 处理可能的错误
       if (error) {
         console.error(error.message);
       }
     });
   </script>
   

3. 注意密钥区分
   后端使用秘密密钥（sk_test_xxx），前端必须使用公钥（pk_test_xxx），二者不可混用，公钥可在Stripe后台的API密钥页面查看。

另外建议：后端创建Session的逻辑应该在用户点击按钮时触发，而非页面加载时提前执行，避免Session过期或无法匹配用户操作。

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