#mikeyyyzhao-stripejs-electron
heavy tinsel
thank you!
lone falcon
It doesn't look like we have a way to not use them with Stripe.js, no. I think you'll need to wait until the Electron bug is fixed.
heavy tinsel
we're using stripe payment in a modal, is there anyway to only load the webworkers when the modal is open and then terminate them when the modal is closed instead of having the webworkers running all the time?
lone falcon
You're using Elements, right?
Have you tried calling destroy() on all of the Elements you're using in the modal? https://stripe.com/docs/js/element/other_methods/destroy
thorn summit
mikeyyyzhao-stripejs-electron
heavy tinsel
I tried putting but it says that CardElement.destroy is not a function? import { useStripe, useElements, CardElement } from "@stripe/react-stripe-js"; useEffect(() => { return () => { CardElement.destroy(); } }, []);
trying to destroy it on unmount
thorn summit
https://stripe.com/docs/js/element/other_methods/destroy that is a method, but it's an instance method, it's used on the instance of the card element you mount not on the class itself
heavy tinsel
how would I grab the instance of the card? I've tried doing const elements = useElements(); elements.getElement(CardElement) but it says elements is null
thorn summit
hum sorry I'm having some trouble following you now. I'm not really well versed in React overall myself so I don't fully grasp what you are asking and what isn't working
heavy tinsel
it's my fault, I'm probably not being clear on my end. My goal is to figure out a way to remove the web worker and it sounds like maybe by destroying the card element, I might be able to do that. However, I'm struggling to understand how I can grab an instance of the cardElement that I imported from @stripe/react-stripe-js
thorn summit
how do you interact with Elements today in your code in the first place today?
heavy tinsel
its basically set up the same as as the example here: https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark&file=/src/components/demos/CardForm.js
thorn summit
okay so const payload = await stripe.createPaymentMethod({ type: "card", card: elements.getElement(CardElement) }); works fine for you right?
it doesn't return null does it?
heavy tinsel
yea that part works fine but when I call it in side the unmount, elements.getElement(CardElement) fails because elements is null
thorn summit
hmmm sorry I have no clue right now. I don't really understand how that line of code works one in one case and not another.
Can you try mounting and then destroying the element as a simple example first?
For example I just tweaked your basic example and called elements.getElement(CardElement).destroy(); and it works fine
heavy tinsel
are you still seeing the webworkers after hitting destroy?
I tried calling elements.getElement(CardElement).destroy() and it actually completely refreshed the page
I don't think it destroys the web workers. Even on a refresh without ever opening or even rendering the modal where we have stripe card elements, the web workers still show up unfortunately so I don't know if destroy is the answer here
thorn summit
I don't understand what that could mean
Sorry we're talking about different parts of the issue right now
I don't know about the web workers yet, I think that was just a potential recommendation from @lone falcon earlier but then you didn't know how to call destroy on it
also you shouldn't be calling destroy().destroy it doesn't make sense
heavy tinsel
ah sorry that was a typo, I only called elements.getElement(CardElement).destroy()
but it looks like if you destroy the element, it actually triggers a refresh
thorn summit
it shouldn't trigger a refresh, it doesn't in my sample app at least. Can you repro simply on codesandbox?
heavy tinsel
sure thing, will do that now
I added elements.getElement(CardElement).destroy() to the pay button onClick
everything else is the same as the original example from stripe.com
broken vector
in your submit handler, you should probably event.preventDefault() to prevent the refresh?
thorn summit
ah nice catch @broken vector
heavy tinsel
ah I didn't realize that was what was causing the refresh
At least in the codesandbox, it looks like .destroy did destroy one instance of the webworker but there's still 3 left
it also looks like the stripe webworkers are created by app load even before they're ever rendered
btw I really appreciate all the help here
I know this is probably somewhat of an edge case
thorn summit
I think you will likely have to write in to support at this point since it's a pretty advanced ask. I agree destroy should work overall and clean up but I assume some things are created when Stripe.js as a library is loaded/initialized overall, separate from the element itself and I'm dubious we support destroying those
lone falcon
Yeah, the only thing I can think of is to put the payment form/Stripe.js in an <iframe> and then destroy the <iframe> when you're done, but I don't know how practical that is.
heavy tinsel
I will give that a try, thank you so much for your help everyone!
when you say write in to support, do you mean open a ticket on github?
or is there a better place to write into support
barren galeBOT
:question: Have a non-technical question, account issue, or need one-on-one support?
We wish we could help, but this community is focused on developers and technical discussions. Our support team will be able to assist you better than we can: https://support.stripe.com/contact
broken vector
^ you can write into support using the link above
heavy tinsel
nvm, the bot answered that haha