Laravel集成Stripe Paynow无法显示二维码的解决求助

问题分析 #

你的代码存在几个关键问题导致二维码无法正常弹出：

• 前端误用了Stripe的Secret Key，前端必须使用Publishable Key（以pk_开头）
• clientSecret变量未定义，无法传递给stripe.confirmPayNowPayment方法
• 创建PaymentIntent时多余添加了payment_method_data参数，Paynow无需提前指定支付方式
• 缺少错误处理逻辑，无法排查调用失败的具体原因

修正后的控制器代码 #

public function payment_paynow()
{
    $stripe = new \Stripe\StripeClient('你的Stripe Secret Key');

    $response = $stripe->paymentIntents->create([
        'payment_method_types' => ['paynow'],
        'amount' => 1099,
        'currency' => 'sgd',
        // 可选：添加支付完成后的跳转地址
        'return_url' => route('payment.success'),
    ]);
    
    return view('stripe-paynow', [
        'client_secret' => $response->client_secret
    ]);
}

修正后的视图代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Accept a payment</title>
    <script src="https://js.stripe.com/v3/"></script>
</head>
<body> 
    <form id="payment-form">
        <input id="payment-name" type="text" placeholder="请输入姓名">
        <button type="submit">提交支付</button>
    </form> 

    <script>
        // 替换为你的Stripe Publishable Key
        var stripe = Stripe('pk_test_xxxxxxxxx');
        var form = document.getElementById('payment-form');
        // 直接从视图变量获取client_secret
        var clientSecret = '{{ $client_secret }}';

        form.addEventListener('submit', function(event) {
            event.preventDefault();

            stripe.confirmPayNowPayment(clientSecret, {
                payment_method: {
                    billing_details: {
                        name: document.getElementById('payment-name').value
                    }
                }
            }).then((result) => {
                if (result.error) {
                    // 处理错误，比如显示错误提示
                    alert(result.error.message);
                } else {
                    if(result.paymentIntent.status === 'succeeded') {
                        // 支付成功后的逻辑，比如跳转成功页面
                        window.location.href = '{{ route('payment.success') }}';
                    } else {
                        // 用户取消支付的处理
                        alert('支付已取消');
                    }
                }
            });
        });
    </script>
</body>
</html>

关键修正点说明 #

• 密钥区分：前端仅能使用Publishable Key，Secret Key必须仅在后端代码中使用，避免泄露
• clientSecret传递：直接在脚本中输出视图变量，确保变量正确定义并传递
• 移除冗余参数：创建PaymentIntent时删除payment_method_data，Paynow会在确认流程中自动处理支付方式
• 补充账单信息：Paynow要求提供用户姓名作为账单信息，确保支付流程合规
• 错误处理：添加错误捕获逻辑，方便快速定位问题

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