#Tawzzles-webhooks
solid forge
thanks so much! In essence I have a .jsx file that performs a fetch("/api/create-payment-intent").then()
I can successfully create the payment intent and capture when the paymentIntent is complete (let event = stripe.webhooks.constructEvent(...))with my webhook under /api/stripe_hook, but how can I return that back to the .jsx file? I would like to update the HTML based on the status of the paymentIntent (ie success or fail)
currently in the end of the webhook, I perform a res.status(200).send("success") if the paymentIntent is successful, but I'm not exactly sure where this res is being sent
mystic raft
Ok, so I wanted to clarify that there are two separate things going on. The webhooks is separate than the payment status you're seeking.
The res/ response is sent to Stripe letting us know that we got the events and the payment processed successfully.
You're ultimately looking to show that the payment succeeded/ failed. To achieve this, you can retrieve the payment intent, https://stripe.com/docs/js/payment_intents/retrieve_payment_intent on the front end and check the status of the intent to show the payment status on your website.
solid forge
ohh ill look into that, thanks so much!
in that case, is there a way to trigger this function from the .jsx file after the webhook captures the update? Otherwise I would need to keep polling this function right? @mystic raft
mystic raft
These two are separate, you'd want to retrieve the payment intent and look at the status to show the data you're looking for.
solid forge
right, but I guess I'm wondering if I call this function immediately after creating the paymentIntent, it might retrieve the paymentIntent before it reaches the success state right?
my understanding is that the webhook would capture whenever the paymentIntent status gets updated, and can return that update to my .jsx file so that I can parse it without needing to continously polling the paymentIntent -- can you correct me if I'm wrong on that part? Thanks so much for all your help! @mystic raft
mystic raft
The recommendation here is that you retrieve the payment intent status to show the latest payment status. If you were to rely on webhooks, if there are delays or issues, then your customers won't know the status of the payment intent.
solid forge
so rather than using a webhook, you would recommend that I just continuously poll the paymentIntent status? @mystic raft
cerulean temple
Hello! I'm taking over and catching up...
So in your frontend code how are you confirming the Payment Intent?
solid forge
I think that's the question I have -- in the front end, I'm trying to update the HTML based on the status of the paymentIntent (specifically update it after it succeeds)
currently, I'm using a webhook to capture events sent by Stripe when the paymentIntent updates, and I send a res.status(200).send("success") after it's successful
cerulean temple
Right, so how are you confirming it and getting it to succeed?
solid forge
but I'm not sure how to capture that in the front end
i.e. I'm not sure where the res.status(200).send("success") is actually sending the res to
Performing a fetch('/api/stripe_hook') in the front end to retrieve that information doesn't seem to work
cerulean temple
It sends the response to Stripe to let Stripe know you received the event. It's completely unrelated to anything happening on your website as far as the customer is concerned.
solid forge
Am i misunderstanding the flow?
cerulean temple
I think so, but I think we can get you sorted out! Are you following a guide or doc somewhere?
solid forge
I've been following guides for setting up the webhook, but none of the guides I've seen have the front end integrated with the webhook
So currently the webhook works properly, but I can't update the front end based on the information captured by the webhook
Thanks so much for all your help!
cerulean temple
Let's back up. What are you trying to build?
solid forge
I'm trying to build a checkout function -- i.e. the user clicks a button that will trigger a create-payment-intent
and then I want the HTML to update after the paymentIntent.status == "success" rather than redirecting the user
cerulean temple
Okay, are you using the Payment Element?
I think this is the guide you want to be following: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements