如何在支付页面为Stripe请求加自定义数据避免重复创建Payment Intent

方法一：将Payment Intent创建逻辑移到提交阶段 #

既然页面初始化时用户还没填写自定义字段，直接把创建Payment Intent的请求放到handleSubmit函数里，就能在用户提交时获取到最新的字段值，一次性完成创建和参数传递，不会生成多余的Payment Intent。

修改后的代码示例：

async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);

    // 1. 获取自定义字段值，创建Payment Intent
    const createIntentResponse = await fetch("/payment/stripe", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value,
        },
        body: JSON.stringify({
            name: document.querySelector("#name").value,
            email: document.querySelector("#email").value,
            // 补充创建Payment Intent所需的核心参数，比如金额、货币
            amount: 1000, // 示例：10美元，单位为最小货币单位（分）
            currency: "usd"
        }),
    });

    const { clientSecret } = await createIntentResponse.json();

    // 2. 使用返回的clientSecret完成支付确认
    const { error } = await stripe.confirmPayment({
        elements,
        clientSecret: clientSecret,
        confirmParams: {
            return_url: process.env.MIX_APP_URL + "/success",
        },
    });

    // 错误处理
    if (error) {
        setLoading(false);
        console.error(error.message);
        // 可在此处给用户显示错误提示
    }
}

核心思路是把Payment Intent的创建时机从页面初始化推迟到用户提交表单时，此时自定义字段已有用户输入值，能一次性传递所有必要参数，避免重复请求。

方法二：更新已存在的Payment Intent（适合必须提前创建的场景） #

如果业务需求要求必须在页面初始化时创建Payment Intent，可在handleSubmit中调用Stripe的更新API，把自定义字段值传给服务器更新已有的Intent，而非创建新的。

前端代码： #

async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);

    // 假设页面初始化时已获取到paymentIntentId并存在全局变量中
    const paymentIntentId = window.paymentIntentId;

    // 更新Payment Intent，传入自定义字段
    await fetch("/payment/stripe/update", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value,
        },
        body: JSON.stringify({
            payment_intent_id: paymentIntentId,
            name: document.querySelector("#name").value,
            email: document.querySelector("#email").value,
        }),
    });

    // 继续完成支付确认流程
    const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
            return_url: process.env.MIX_APP_URL + "/success",
        },
    });

    // 错误处理...
}

后端逻辑（以PHP/Laravel为例）： #

// 对应路由 /payment/stripe/update
public function updatePaymentIntent(Request $request) {
    $stripe = new \Stripe\StripeClient(env('STRIPE_SECRET_KEY'));
    
    $stripe->paymentIntents->update(
        $request->payment_intent_id,
        [
            'metadata' => [
                'name' => $request->name,
                'email' => $request->email
            ]
            // 也可根据需求更新其他字段，比如receipt_email直接关联用户邮箱
        ]
    );

    return response()->json(['success' => true]);
}

这种方式不会生成新的Payment Intent，仅更新已存在的实例，适配提前创建Intent的业务场景。

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