React-stripe-elements: Clear the element in the handler

[safinn]

Is there a way to clear the element in the handler?

I know in stripe.js the element object has a clear function but I'm not sure how it can be called in using this module,

[michelle]

There's no way to do it in a React-y way right now, but what you can do is get a reference to the Element instance and call clear on it. You can use elementRef to get that reference.

[michelle]

(Would love any thoughts on a cleaner interface for this!)

[safinn]

I'm not clear on how to use elementRef. Could you please provide an example?

[michelle]

Hi, sorry for the delay!

Something like this:

<CardElement elementRef={(element) => this._element = element} />

And then, when you want to clear it, call this._element.clear().

[michelle]

(I'm going to close this for now, but if you need more help, feel free to reopen!)

[nicoqh]

For those who stumble upon this issue:

The API was changed in v 1.6.0, and the onReady method should be used instead:

<CardElement onReady={(element) => this._element = element} />

[kasongoyo]

<CardElement onReady={(element) => this._element = element} /> doesn't work like expected. On render this._element loose the reference to the element and onReady doesn't seem to run on element rerender so at the end this._element will have no reference. Any work around?

[ZachMilne]

The proper way to do this is to use the "useElements" hook. You can see a code sample in my comment for issue 26.
https://github.com/stripe/react-stripe-elements/issues/26#issuecomment-628758331
or...

import {useStripe, useElements, CardElement} from '@stripe/react-stripe-js'

//in component
const elements = useElements()

//in handler
const cardElement = elements.getElement(CardElement)
cardElement.clear()