reactjs - How to validate Stripe Elements form before calling stripe.confirmPayment - Stack Overflow

admin管理员组

文章数量:1122832

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

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

• reactjs
• next.js
• stripe-payments

Share Improve this question Follow edited Nov 22, 2024 at 16:16 hantoren asked Nov 22, 2024 at 13:29 hantorenhantoren 1,18544 gold badges2424 silver badges4545 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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

本文标签： reactjsHow to validate Stripe Elements form before calling stripeconfirmPaymentStack Overflow