Arctic

[past moth]

Hi! Let me help you with this.

Could you please share a link to reproduce?

Actually, the Submit/Pay button is not provided by Stripe, so you have the control over it.
Normally, if you try to confirm the PaymentIntent if the form is incomplete, the Payment Element will highlight the errors in the fields and do nothing else.

[keen solstice]

let me try to play around with the buttons style

[keen solstice]

okay i found it, it was a problem from my side, i created a isLoading state that was changed to true even if the form is incomplete!

sry for the trouble and thanks for the inspiration

[past moth]

Nice catch. Let me know if you have any other questions.

[keen solstice]

okay i have another question, where in this codesnipper would i set isLoading to true?

const handleSubmit = async (e) => {
e.preventDefault()

    if (!stripe || !elements) {
        // Stripe.js has not yet loaded.
        // Make sure to disable form submission until Stripe.js has loaded.
        console.log("submit triggered")
        return
    }
    setIsLoading(true)

    const { error } = await stripe.confirmPayment({
        elements: elements,
        confirmParams: {
            return_url:
                process.env.NODE_ENV === "production"
                    ? "https://afm-gamma.vercel.app/shop/checkout/bestaetigung"
                    : "http://localhost:3000/shop/checkout/bestaetigung",
        },
    })
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Otherwise, your customer will be redirected to
    // your `return_url`. For some payment methods like iDEAL, your customer will
    // be redirected to an intermediate site first to authorize the payment, then
    // redirected to the `return_url`.
    if (error.type === "card_error" || error.type === "validation_error") {
        setMessage(error.message)
    } else {
        setMessage("An unexpected error occurred.")
    }

    setIsLoading(false)
}

idk why half of it is hidden in discord, sry for that 😅

[fast rampart]

you seem to have it (your call to setIsLoading(true) in the sensible location already.