React-stripe-elements: how to listen for error messages

[max-favilli]

When using stripe.js we can do something like this:

    this.card.addEventListener('change', (event) => {
      var errorMessage = null;
      if (event.error) {
        errorMessage = event.error.message;
      }
      //and do something with the error message
    });

But with react-stripe-element, how can you subscribe to changes and check if there's any error?

[asolove-stripe]

Hi @max-favilli! All of our Element Components accept an onChange prop, where you can listen for the same change events as in your example.

[max-favilli]

Thanks.

Additionally, I was trying some of these cards https://stripe.com/docs/testing#cards-responses to test error responses, but I am always getting a token, never an error.

    this.props.stripe.createToken({ name: this.props.payment.name }).then(({ token }) => {
      console.log('Received Stripe token:', token);
      //this is always a valid token
    });

while previusly with stripe.js the result of a createToken could have had a token.error object

Did I miss something?

[asolove-stripe]

@max-favilli hmm, all the card errors on that page seem to be charge-time errors rather than tokenization-time errors. Can you try entering an obviously invalid number (like just "2") and then creating a token?

You'll want to change your callback function to receive the error, too:

this.props.stripe.createToken({ name: this.props.payment.name }).then(({ token, error }) => {
  if (error) {
    console.warn('Received error', error);
  } else {
    console.log('Received Stripe token:', token);
  }
});

[max-favilli]

Thanks a lot @asolove-stripe

[HardikDG]

@asolove-stripe I am already using the onChange method for the error display/detection.
How can we display the error without typing anything in the input?

For example: I have Stripe element in the form. Now user try to submit the form directly without entering the in the element input. I want to display the same kind of error at that time also.
How can I get same behavior like onChange in this case