garima - react

[craggy minnow]

Hi there!

Can you clarify what exactly you are trying to validate in the card input?

[lament spear]

CardNumberElement.on('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});

[craggy minnow]

Thanks! And what is CardNumberElement here? The React component itself?

[lament spear]

i'm import from @stripe/react-stripe-js

[craggy minnow]

Thanks, I don't think that's how it works. Give me a few minutes to see how to do this.

[lament spear]

ok

[dawn flume]

👋 taking over for my colleague. Let me catch up.

the way to do the validation is to use the onChange property of the CardNumberElement <CardNumberElement onChange={validate} />
https://github.com/stripe/react-stripe-js/blob/master/src/types/index.ts#L91

where validate is a function that takes an event as parameter of type StripeCardNumberElementChangeEvent