How to validate Stripe Elements form before calling stripe.confirmPayment

I am using Stripe Elements for payment processing and React and have a specific workflow where I first create a pending order in the database before triggering stripe.confirmPayment. Here's a simplified version of my code:

// --> 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;
}

The issue I want to address is validating the card details in the Stripe Elements form before calling stripe.confirmPayment. This is important to avoid creating unnecessary pending orders in the database when the card validation fails.

Solution:

// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
    toast({
        title: "Payment failed",
        description: submitError?.message,
        variant: "destructive",
    });
    setIsLoading(false);
    return;
}

You can actually leverage https://docs.stripe.com/payments/accept-a-payment-deferred to start by collecting/validating the PaymentMethod (using elements.submit) and then create the order and the PaymentIntent at the same time and finally confirming the PI on the client side