如何在自定义输入字段无效时阻止Stripe confirmPayment跳转？

核心问题是你的代码在自定义字段验证失败后，没有阻止后续的stripe.confirmPayment执行，导致即使表单不合法，Stripe仍会完成支付确认流程并跳转至return_url。

修改方案 #

在调用Stripe的支付确认方法前，先确认所有自定义字段验证通过，只有验证通过才执行后续逻辑：

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

    // 初始化验证状态为通过
    let isValid = true;
    const paymentInputs = document.querySelectorAll(".payment-input");
    
    Array.prototype.slice.call(paymentInputs).forEach(function (paymentInput) {
        paymentInput.classList.remove("is-invalid");
        if (!paymentInput.checkValidity()) {
            paymentInput.classList.add("is-invalid");
            isValid = false; // 标记验证失败
            setLoading(false);
        }
    });

    // 如果自定义字段验证失败，直接终止函数，不执行Stripe支付确认
    if (!isValid) {
        return;
    }

    // 只有验证通过才调用Stripe的支付确认
    const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
            return_url: process.env.MIX_APP_URL + "/success",
        },
    });

    // 后续的错误处理逻辑...
    ...
}

改动说明 #

1. 新增验证状态标记：用isValid变量跟踪自定义字段的整体验证结果，初始设为true，只要有一个字段验证失败就设为false。
2. 验证失败终止流程：在调用stripe.confirmPayment前判断isValid，如果为false就用return终止函数，直接停止后续的支付确认逻辑。
3. 保持原有样式逻辑：保留你之前的Bootstrap表单样式处理，确保错误提示正常显示。

这样修改后，只有当自定义字段全部验证通过时，才会触发Stripe的支付确认流程，彻底避免验证失败后跳转的问题。

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