如何在调用stripe.confirmPayment前验证Stripe Elements表单？

我在使用Stripe Elements和React实现支付功能时，当前业务流程是先在数据库创建待处理订单，再调用stripe.confirmPayment完成支付。但如果用户填写的银行卡信息不符合验证规则，支付接口会返回错误，却已经生成了不必要的待处理订单。需要优化流程，在调用stripe.confirmPayment前先完成银行卡表单的验证。

原简化代码：

// --> Validate first Stripe embedded form

const order = await createOrder(values);

const { error } = await stripe.confirmPayment({
    elements,
    confirmParams: {
        return_url: `URL`,
    },
});

if (error) {
    // Show error
    setIsLoading(false);
    return;
}

解决方案 #

通过调用elements.submit()提前触发Stripe表单的验证和钱包信息收集，只有验证通过后再执行创建订单和支付确认的逻辑，避免生成无效订单：

// 触发表单验证和钱包信息收集
const {error: submitError} = await elements.submit();
if (submitError) {
    toast({
        title: "支付失败",
        description: submitError?.message,
        variant: "destructive",
    });
    setIsLoading(false);
    return;
}

// 验证通过后再创建订单并调用支付确认
const order = await createOrder(values);

const { error } = await stripe.confirmPayment({
    elements,
    confirmParams: {
        return_url: `URL`,
    },
});

if (error) {
    // 处理支付接口返回的错误
    setIsLoading(false);
    return;
}

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