#charlie-paymentelement-clear
velvet bolt
jagged marsh
charlie-paymentelement-clear
@stray harbor can you try https://stripe.com/docs/js/element/other_methods/clear and see if that works for you?
stray harbor
But how can i do that from the parent Screen?
I'm using React
So in the parent Screen i'm using <Elements> and a <CheckoutForm> inside
The <CheckoutForm> has the PaymentElement
But i want to clear de PaymentElement when the modal is closed
The modal is on the parent screen
How can i handle the <PaymentElement> from the parent screen where i just have the <Elements> component?
cyan elbow
👋
Hmm so when you "close" the modal you really are just hiding it?
Or you are going to re-mount Payment Element if the modal is opened again?
stray harbor
No, i'm just hiding it
cyan elbow
Okay so you should be able to still just call clear from that component, no?
Like you may need to use a prop/function from parent to child to let the child know and initiate the clear
stray harbor
OK, but then how can i do the clear on the <PaymentElement> since its not mounted as a var
It's just an <PaymentElement options={{fields:{billingDetails: {address: {country: 'never'}}}}}/>
cyan elbow
Let me double check — haven't used clear in with our React library before
stray harbor
No
So when i close the modal and reopen it, it's showing the error labels that were shown before it was closed
cyan elbow
Your goal is to reset it at this point? Those errors would only show if you attempt to submit
Actually that's incorrect, sorry.
We do show the validation errors if you remove focus from the field and it is incomplete
Let's get to that in a sec. Let me finish checking on calling element.clear
stray harbor
OK OK
cyan elbow
Yep so you should just be able to use your useElements hook to access the mounted Element: https://stripe.com/docs/stripe-js/react#useelements-hook
So should be able to just call elements.clear()
stray harbor
OK OK, thanks
cyan elbow
Try that and let me know if it doesn't work
stray harbor
OK
cyan elbow
Actually you need to use .getElement first to get your instance
So your function should look like: const clearElements = () => { let payElement = elements.getElement('payment') payElement.clear() }
cyan elbow
That should fix the losing focus validation issue as well