Laravel+React+Inertia集成Stripe支付网关示例需求

需求概述 #

点击定价卡片的「选择方案」按钮时：

• 若用户已登录，创建Stripe结账会话并跳转至Stripe支付页面
• 若用户未登录，自动跳转至登录页面

前端代码修改（PricingCard组件） #

替换原有handleSubmit逻辑，使用Inertia的表单工具处理请求与跳转：

"use client";

import { Card } from "flowbite-react";
import { useForm } from "@inertiajs/react";

let PricingCard = ({ id, name, price, description, duration }) => {
    // 初始化表单，绑定会员计划ID
    const { data, post } = useForm({
        membership_plan_id: id,
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        // 提交请求到后端支付接口
        post("/member/buy-subscription", {
            onSuccess: (response) => {
                // 跳转至Stripe支付页面
                if (response.url) {
                    window.location.href = response.url;
                }
            },
        });
    };

    return (
        <Card>
            <h5 className="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
                {name}
            </h5>
            <div className="flex items-baseline text-gray-900 dark:text-white">
                <span className="text-3xl font-semibold">$</span>
                <span className="text-5xl font-extrabold tracking-tight">
                    {price}
                </span>
                <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
                    /{duration} month
                </span>
            </div>
            <div className="my-7 space-y-5">
                <div className="w-[300px]">{description}</div>
            </div>

            <form onSubmit={handleSubmit}>
                <input type="hidden" name="membership_plan_id" value={id} />
                <button
                    className="inline-flex w-full justify-center rounded-lg bg-theme-orange px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-theme-orange focus:outline-none focus:ring-4 focus:ring-cyan-200 dark:focus:ring-cyan-900"
                    type="submit"
                >
                    选择方案
                </button>
            </form>
        </Card>
    );
};
export default PricingCard;

后端代码修改（控制器方法） #

先安装Stripe SDK：composer require stripe/stripe-php，再完善支付逻辑：

use Stripe\Stripe;
use Stripe\Checkout\Session;
use Illuminate\Support\Facades\Auth;

public function buySubScription(Request $request)
{
    // 未登录用户跳转至登录页
    if (!Auth::check()) {
        return to_route('login');
    }

    // 验证请求参数
    $request->validate([
        'membership_plan_id' => 'required|exists:membership_plans,id',
    ]);

    // 获取会员计划数据（假设模型为MembershipPlan）
    $plan = \App\Models\MembershipPlan::findOrFail($request->membership_plan_id);

    // 初始化Stripe
    Stripe::setApiKey(config('services.stripe.secret'));

    // 创建Stripe结账会话
    $session = Session::create([
        'payment_method_types' => ['card'],
        'line_items' => [
            [
                'price_data' => [
                    'currency' => 'usd',
                    'product_data' => [
                        'name' => $plan->name,
                    ],
                    'unit_amount' => $plan->price * 100, // Stripe以分为单位，需转换
                ],
                'quantity' => 1,
            ],
        ],
        'mode' => 'subscription', // 订阅模式用subscription，单次支付用payment
        'success_url' => route('payment.success') . '?session_id={CHECKOUT_SESSION_ID}',
        'cancel_url' => route('payment.cancel'),
        'customer_email' => Auth::user()->email, // 预填用户邮箱
    ]);

    // 返回Stripe支付链接给前端
    return response()->json(['url' => $session->url]);
}

补充配置 #

1. 在.env中添加Stripe密钥：

STRIPE_KEY=你的Stripe公钥
STRIPE_SECRET=你的Stripe私钥

2. 在config/services.php中配置Stripe：

'stripe' => [
    'key' => env('STRIPE_KEY'),
    'secret' => env('STRIPE_SECRET'),
],

3. 配置支付结果路由：

Route::get('/payment/success', [PaymentController::class, 'success'])->name('payment.success');
Route::get('/payment/cancel', [PaymentController::class, 'cancel'])->name('payment.cancel');

流程说明 #

1. 用户点击「选择方案」，前端通过Inertia提交会员计划ID到后端
2. 后端检查登录状态：未登录则跳转登录页；已登录则生成Stripe结账会话
3. 后端返回支付链接，前端自动跳转至Stripe支付页面
4. 用户完成/取消支付后，Stripe跳转至配置的结果页面

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