aromatt_api

[restive mist]

👋 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/1300442631783845888

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[gleaming marlin]

so I can see that my state is updating after creating new paymentIntent
but elements seem to still be attached to the previous one as it fails to process the payment

[eternal widget]

Hi 👋 can you elaborate a bit? I'm not sure I'm grasping what you're referring to when you say you're trying to refetch the Payment Element.

[gleaming marlin]

so I am calling elements.fetchUpdates()

sorry for not being clear

to provide a little more context:

Elements react component is wrapping my form
then i have some fields and some client side validation and also the Payment component within the form

all the intent creation and updates are handled by dedicated endpoints

so at the start i am calling create payment intent

or if customer has a payment intent id saved in local storage i am using that one and calling update

to get the secret

then that is passed to the Elements

now once the validation of the form passes and payment succeeds

i am deleting the payment intent from the local storage and hitting my endpoint to get new intent

this works fine

i get the intent back etc

then I am replacing it in the Elements component

but when I try to do new payment it fails

i need to refresh the page

to get it hooked to the payment

I can see in the failed response that it refers back the old payment Intent

which already has completed status

so I cant use it for new payment

<Elements stripe={stripeSettings.stripe} options={stripeSettings.stripeOptions}>

type StripeSettings = {
  stripe: ReturnType<typeof loadStripe> | undefined;
  stripeOptions: StripeElementsOptions;
}

and this is stored in state

const [stripeSettings, setStripeSettings] = useState<StripeSettings>()

that updates correctly and all but seems that Elements is not providing the Payment with updated options

worth noting I used state just because I am experimenting with different approaches etc doesn't have to be that way but just want to know how can I "refresh" the context of the Elements component

[eternal widget]

As far as I'm aware you can't update the client secret that an Elements instance is using. You'd instead create a new Elements instance.

[gleaming marlin]

okay thanks, that saves me some time experimenting further 🙂
What I am basically trying to achieve is preventing the entire form from rerendering as it pulls some stuff dynamically

need some sort of hotswapping tech for this I guess

thanks anyway! 🙂 You can mark this as closed