Stripe – getting a successful payment to the frontend without changing page

Ask us anything
1

Hi all,

Does anyone have any thoughts about how to generally push a webhook to the front-end? This would be the perfect use case for websockets for real-time updates, which Xano doesn’t support.

My use case: we’ve built a Stripe physical reader and can successfully pass off payment intents to the device to accept payment. I need a way to let the employee know on our web app that the payment has been received successfully (they may not always be able to see the screen as it may be many feet away).

My idea is to hand the payment intent off to the reader, and then create a loop (circled in screenshot but not built yet) that lasts 2 minutes or so. Every few seconds, it calls Stripe’s GET payment intent endpoint to check on the status of the intent that was sent to the reader. Another option is that my backend catches the Stripe webhook, saves it, then this loop calls my backend for this data. Should be the same either way. Then, if its successful, we should the employee a success screen and exit the loop. If the loop makes it way through all the items, it will cancel the reader action and payment intent automatically.

Can’t help but think there is a better way here to allow the employee to stay on the same page and receive an update upon successful payment. I wish i could send Stripe webhooks right to WeWeb. I know the goat @dorilama helped me on the other stripe thread so would love your thoughts here in particular :slight_smile:.

image
image1384×1758 317 KB

2

Hey @Jack :wave:

You got it all right.

Honestly, if I were you, I would send successful payment intents using the proper Stripe Webhook to your backend, then fetching the data in WeWeb (Stripe has no websockets, and you need a websocket to listen to real-time changes in a frontend. Webhooks work on backends only).

The thing is, WeWeb doesn’t handle websockets for now (it’s on our roadmap), except real-time Supabase tables. I know that Xano is working on their own websockets solution that we’ll integrate asap, but it’s not shipped yet.

The “hack” would be to indeed do a loop. But keep in mind that this can break your app very easily if the loop never finishes or throw infinite errors. Also, this can flood your backend when many users are connected at the same time.

Anyway, here is the code to execute a workflow in a loop:

 setInterval(() => {
  wwLib.executeWorkflow('4ce9bc43-b370-4f9d-889c-c4524f519ce7') // Replace by your workflow ID
}, 5000) // Time between two executions, in milliseconds

How to show workflow IDs:
Arc

1 Like