I am currently finalizing a payment system in my ReactJS - FastAPI web app, and I'm facing a problem.

Indeed, I use stripe for payments and I use the stripe webhooks system to update the user infos in the db (like the current plan, the period, if the user plan is active or not etc.).

However, the problem with that is that then, some events are asynchronous and not come from a frontend request (payment renewal fail, end of trial period, upgrade at the end of billing cycle etc.), which means that the frontend does not "receive" the changes.

The problem with that is that if it happens while the user is still connected, I don't find the cleanest way to update the user infos saved in frontend (stored with redux states in my app).

So I'd love to have some explanations about it, cause I don't know how people commonly handle that !

Indeed I thought about a few things :

• use a websocket system to send the updates done by the stripe webhook. However, I'm a bit dubitative as if the user has not an open session on his account I suppose that it will not work.

• use a pooling system, which would be calling a "/me" endpoint from the backend every X time. This then only happens when the user is connected, but I suppose that it's way too costly.

• fetch the "/me" endpoint on every API request and update user infos if needed, but this is close to the pooling so I'm worried that it will be too costly too (as it doubles the number of requests).

• use middleware in FastAPI to send the user infos in every request, and then using middleware in redux to extract user infos and update the redux state if they are different than the stored one. This seemed to probably be the best, but in that case I'm worried about latencies for database, and also I find it really complex ! So I'm wondering if everybody really needs to implement that in his app !

Thanks in advance for your replies !

I am currently finalizing a payment system in my ReactJS - FastAPI web app, and I'm facing a problem.

Indeed, I use stripe for payments and I use the stripe webhooks system to update the user infos in the db (like the current plan, the period, if the user plan is active or not etc.).

However, the problem with that is that then, some events are asynchronous and not come from a frontend request (payment renewal fail, end of trial period, upgrade at the end of billing cycle etc.), which means that the frontend does not "receive" the changes.

The problem with that is that if it happens while the user is still connected, I don't find the cleanest way to update the user infos saved in frontend (stored with redux states in my app).

So I'd love to have some explanations about it, cause I don't know how people commonly handle that !

Indeed I thought about a few things :

• use a websocket system to send the updates done by the stripe webhook. However, I'm a bit dubitative as if the user has not an open session on his account I suppose that it will not work.

• use a pooling system, which would be calling a "/me" endpoint from the backend every X time. This then only happens when the user is connected, but I suppose that it's way too costly.

• fetch the "/me" endpoint on every API request and update user infos if needed, but this is close to the pooling so I'm worried that it will be too costly too (as it doubles the number of requests).

• use middleware in FastAPI to send the user infos in every request, and then using middleware in redux to extract user infos and update the redux state if they are different than the stored one. This seemed to probably be the best, but in that case I'm worried about latencies for database, and also I find it really complex ! So I'm wondering if everybody really needs to implement that in his app !

Thanks in advance for your replies !

• reactjs
• websocket
• stripe-payments
• fastapi
• middleware

2 Answers 2

Stripe webhooks are designed to notify your backend systems when certain events occur on Stripe's end, and are entirely a server-to-server way to communicate information. They are not designed to be part of any customer-facing flow.

In other words, you should never build a system that relies on or waits for webhooks in a user-facing flow or process.

What you should do instead is, when something happens on the frontend that requires information about the current state of things from Stripe, send a request for that information to your server. Your server, in turn, can fetch the required information from the Stripe API and relay it back to your frontend. No webhooks are involved in this process.

Also note that if you're using Stripe.js or another Stripe client-side SDK you may be able to fetch some limited information client-side directly from Stripe. For example, you can retrieve a Payment Intent client-side with Stripe.js if you have the client secret.

Finally the best option was to directly send websocket messages to the appropriate room when an update is done from stripe webhook so that when the user connects to the frontend his account is automatically updated thanks to the ws pending message.