Mr.Medi

[half gulch]

This is my js code

form.addEventListener('submit', async (e) =>
    {
        e.preventDefault()
        const {error2} = await stripe.confirmPayment({
          elements,
          confirmParams: {
            return_url: "http://localhost:8000/success",
          }
        });
        
        if (error2) {
          const messageContainer = document.querySelector('#error-message');
          messageContainer.textContent = error2.message;
          alert(error2.message);
        } else {
          console.log('Payment successful');
        }
    })

The UI is acting right and not redirecting but when the card is declined is entering in the if saying the payment is fine

[bronze shadow]

can you show screenshots of what you're seeing for this issue?

[half gulch]

yea

this is the xhr req of the payment and the log of my code

is like error2 is undefined

[bronze shadow]

why are you using the variable name error2 there?

[half gulch]

I think is due to the await. Im doing it this way:

  const {error2} = await stripe.confirmPayment({
          elements,
          confirmParams: {
            return_url: "http://localhost:8000/success",
          }
        }).then(function(result) {
          console.log(result);
            if (result.error) {
              const messageContainer = document.querySelector('#error-message');
              messageContainer.textContent = result.error.message;
            }});

In this way I get the error message

[half gulch]

Is to catch the result of the stripe api

[bronze shadow]

for context, what you're doing is destructuring with ES6 i.e. {error2} which means it'll automatically try to find that corresponding object key name in the response

since there's no such object key called error2, it's not going to be defined

[half gulch]

Oh, thank you for your detailed response! I didnt fall in that

[bronze shadow]

follow the documentation and use error

[half gulch]

perfect, thank you. With the .then I saw in the documentation seems work fine too 🙂