#pingpong2_code
1 messages ยท Page 1 of 1 (latest)
๐ Welcome to your new thread!
โฒ๏ธ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
โฑ๏ธ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
๐ This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1284160955470844008
๐ Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- pingpong_ach-skip, 3 days ago, 13 messages
- pingpong2_code, 3 days ago, 6 messages
Hi there ๐ I'm not sure I'm following. Can you share screenshots of what you're seeing that you'd like to avoid, and relevant object IDs (like the ID of the Payment Methods you're creating) from your testing?
Gotcha, have you tried destroying the Element? I believe unmounting it only removes it from the DOM but doesn't impact the state of the element. If you want a fresh instance I'm pretty sure you'll need to destroy and recreate the Payment Element instance:
https://docs.stripe.com/js/element/other_methods/destroy
i have not tried it. i can give it a try!
hmm
i'm still seeing it linked..
I've tried adding this call on close
const handleDestroyPaymentElement = () => {
const paymentElement = elements?.getElement(PaymentElement);
if (paymentElement) {
paymentElement.destroy();
}
};
and then call this
const handleResetPaymentElement = () => {
setElementKey((prevKey) => prevKey + 1); // Change key to force re-mount
};
which resets
<PaymentElement
key={elementKey} // Use dynamic key to force reset
basically destroy + reset on close
Gotcha, doing some testing on my side. I see it getting reset for me, but I think that's because I recreate the entire Elements instance (not just the Payment Element instance).
Ah, yeah, I see what you're saying. Just destroying and recreating the Payment Element doesn't seem sufficient to clear out the state. It looks like you'll need to reinitialize the Elements instance itself to accomplish what you're describing.
Let me try one more thing first though that may be cleaner.
ok thank you so much for trying!
Doesn't look like clear() removes that association either, so it seems the only way to do this is to reinitialize Elements.
did you still have to use destroy?
No. I created a new Elements instance, and overwrote my old one in the process:
https://docs.stripe.com/js/elements_object/create
So instead of destroying the old Payment Element instance I:
- Created a new Elements instance
- Created a new Payment Element instance
- Mounted the new Payment Element where the old one was