Display Stripe Webhook in bubble app

Need help APIs
1

hello to all, Ive aetup a webhook in stripe to tell me when a charge succeeded or failed. I am trying to display that data in my bubble app. I currently have 3 payment methods all via stripe. One, used save payment method, 2 quickpay (only cc# cvc and i think date) and the last a HTML i got from stripe with our “product” and cc# input. i would like to get the webhook results in my app and set workflows accordingly

2

You need to setup a backend workflow. Make the data source ‘detect data’ then setup the webhook in Stripe dashboard, and then send a test webhook to allow the bubble app to ‘detect data’ so you could then use the data that is sent to the backend workflow via Stripe webhook in your backend workflow actions.

3

You can pass a reference on the payment and use that to search for the origin.

4

I have the webhook setup already, I am in the backend workflows but I dont know where should I begin, example, what data source would I be making ‘detect data’?

5

Hi,
I’ll give you a short answer now, and if you’ve got any questions, I’ll go into more detail later if necessary.

  • Set up a backend API workflow

  • Make sure it is exposed as a public API workflow and for testing purposes tick the box that it can be run without authentication

  • Select ‘Detect request data’ from the parameter definition dropdown

image
image1218×1166 103 KB

  • Press Detect data and copy and paste the given URL as URL for the Stripe webhook

  • Trigger the webhook in Stripe, while the API workflow in Bubble is in detection mode.

  • If successful, Bubble will show you all parameters after having successfully listened for the Stripe webhook response.

  • You can now use the response parameters, such as status in your API workflow. Everything after this is all happening in Bubble workflows and should be familiar.

One important last word: The testing URL bubble has given you includes a detect data parameter at the end of the URL. Delete that from the Stripe webhook, otherwise it’ll keep giving you errors, that the API is not in detection mode.

2 Likes
6

image
image3024×4032 2.47 MB

image
image3024×4032 2.38 MB

Is something wrong with the url ? I thought I had it😫

7

I’m having the same issue. Most online tutorials are using an older version of stripe which allows them to send a test webhook. That no longer seems to be the case. I’ve tried manually triggering the event through the app preview in debug mode but bubble doesn’t detect the data. I’ve also tried to trigger the event through the Stripe CLI but that also doesnt work

8

Open your app twice, on one of them use detect data then fire the event from the other browser where another instance of your app is running.

9

That worked, thanks Doug!

1 Like