Stripe Payment Element 集成中自定义字段验证与重定向控制

<div class="stripe-container">
    <form id="payment-form" novalidate>
        {{csrf_field()}}
        <div id="payment-element">
            <!-- Stripe.js 注入 Payment Element -->
        </div>
        <!-- 自定义输入字段 -->
        <input type="text" form="payment-form" id="name" class="payment-input" placeholder="姓名" required>
        <input type="email" form="payment-form" id="email" class="payment-input" placeholder="邮箱" required>

        <div class="loading-spinner"></div>
        <button id="submit">
            <div class="spinner hidden" id="spinner"></div>
            <span id="button-text">立即支付</span>
        </button>
        <div id="payment-message" class="hidden"></div>
    </form>
</div>

async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true); // 显示加载状态

    let isInvalid = false; // 引入一个标志来跟踪自定义字段的验证状态
    const paymentInputs = document.querySelectorAll(".payment-input");

    // 遍历所有自定义输入字段进行验证
    Array.prototype.slice.call(paymentInputs).forEach(function (paymentInput) {
        paymentInput.classList.remove("is-invalid"); // 清除之前的无效状态
        if (!paymentInput.checkValidity()) { // 使用HTML5的checkValidity()方法
            paymentInput.classList.add("is-invalid"); // 添加无效样式
            isInvalid = true; // 设置标志为true
        }
    });

    // 如果任何自定义字段无效，则停止执行并隐藏加载状态
    if (isInvalid) {
        setLoading(false); // 隐藏加载状态
        return; // 阻止后续的stripe.confirmPayment调用
    }

    // 只有当所有自定义字段都有效时，才执行Stripe支付确认
    const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
            return_url: process.env.MIX_APP_URL + "/success",
        },
    });

    // 处理Stripe确认支付后的错误或成功逻辑
    if (error) {
        if (error.type === "card_error" || error.type === "validation_error") {
            showMessage(error.message);
        } else {
            showMessage("An unexpected error occurred.");
        }
    } else {
        // 支付成功，通常会重定向到return_url，此处的代码可能不会执行
    }

    setLoading(false); // 隐藏加载状态
}

// 辅助函数 (根据实际项目调整)
function setLoading(isLoading) {
    // ... 控制加载 spinner 和按钮文本的显示/隐藏
}

function showMessage(messageText) {
    // ... 显示支付消息
}