Laravel 9集成Stripe支付网关时表单提交报错求助

问题核心原因 #

你使用了Stripe的Payment Element（通过elements.create('payment')创建），但却调用了仅适用于旧版Card Element的stripe.createToken()方法，二者不兼容——Payment Element是基于Payment Intent API的新组件，不支持createToken这种旧的Token生成逻辑。

修复步骤 #

1. 替换表单提交处理逻辑 #

删除原有的stripe.createToken调用，改用stripe.confirmPayment()完成支付确认，这是Payment Element的标准用法。

2. 修改后的提交事件代码 #

将表单提交的JS代码替换为以下内容：

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

    // 禁用表单防止重复提交
    form.querySelector('button[type="submit"]').disabled = true;

    stripe.confirmPayment({
        elements: elements,
        confirmParams: {
            return_url: completeUrl, // 支付完成后的跳转地址
        },
    }).then(function (result) {
        if (result.error) {
            // 显示错误信息
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
            // 重新启用提交按钮
            form.querySelector('button[type="submit"]').disabled = false;
        }
        // 支付成功后会自动跳转到return_url，无需额外处理
    });
});

3. 确保后端接口正确配置 #

你的/initiate-payment接口需要正确创建Stripe Payment Intent，Laravel示例代码参考：

use Stripe\Stripe;
use Stripe\PaymentIntent;

public function initiatePayment(Request $request)
{
    Stripe::setApiKey(config('services.stripe.secret'));

    $paymentIntent = PaymentIntent::create([
        'amount' => 1000, // 单位：分，示例为10美元
        'currency' => 'usd',
        'automatic_payment_methods' => [
            'enabled' => true, // 自动启用所有支持的支付方式
        ],
    ]);

    return response()->json([
        'client_secret' => $paymentIntent->client_secret,
    ]);
}

额外注意事项 #

• 确保已正确引入Stripe最新版JS脚本：

  <script src="https://js.stripe.com/v3/"></script>
  

• Payment Element会自动处理多种支付方式（信用卡、PayPal等），无需手动生成Token；支付成功后Stripe会自动跳转到你指定的return_url，可在该页面验证支付状态。

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