Setting up webhook on my bubble app to pass to an API (not shoppify/stripe)

Hey everyone,
I’m trying to send requests to a service that scrapes Google search results and gets back to me within 30 seconds. It’s Thruuu, and it uses webhooks to notify my bubble.io application that the results are ready.

I see a lot of discussions on Stripe and Shopify when it comes to webhooks, but for a not-so-popular API like thruuu, what are general steps to setup a webhook on my bubble app so I can provide it to the API for a call-back?

In case this helps, the following page has a succinct info on the webhook requirements and other quick details about thruuu’s API:

Thanks so much, and I hope this eventually helps others making API calls to obscure applications requiring webhooks.

Cheers, and thanks in advance for any help.

Is there a section in the platform to enter a webhook url? If so, choose detect on the backend wf, copy that url and paste it into the the Thru platform. Then submit a request and wait for bubble to receive the event.

1 Like

Hi Iantzgould, I looked for the following, but had no luck:

  1. section in bubble where a webhook URL can be entered
  2. a ‘detect’ option/button on the backend wf.

I even tried different types of backened wf’s to be sure: API Workflow and Custom.

I also tried looking for more ‘plugins’ searching for anything related to ‘webhooks’ there is no additional plugins I can add to help with webhooks.

Hi,
Create workflow, make it public, set “Parameter definition” to Detect request data.
When done, you’ll see Detect data button. Click it and you’ll see URL of initialization hook. Enter this URL into thruu and initiate request so that it will call this hook back in 30 seconds. When it does that, the “Detecting Request Data” popup will disappear and hook request parameter will be populated in workflow settings form.

Thank you Vladimir, your post was so amazing and helpful and clear. And thanks for the screenshot as well. Cheers,
Amir

1 Like

Hi Valdimir,
How would I parse that data if it came as application/x-www-form-urlencoded
My key is “payload”

Bubbble does not give me the ability to parse this?

{
“body”: {
“payload”: “{“id”:4,“status”:“completed”,“totalAmount”:100,“tipAmount”:0,“feeAmount”:3,“settleAmount”:97,“requiredAmount”:null,“date”:“2023-07-03T15:24:02Z”,“snapCode”:“Fa4GM9V2”,“snapCodeReference”:“5aead989-ac90-4be3-84ae-4230032aea32”,“userReference”:“777777”,“merchantReference”:null,“statementReference”:null,“authCode”:null,“deliveryAddress”:null,“deviceSerialNumber”:null,“extra”:{“merchantId”:“82C252D3-2105-4D80-9716-1842EED711EA”,“transactionType”:“Payment”,“checksum”:“6AD75139F93ED0E66541F9EF240D358AC6B7461E151D8AD55E2F473E683B7C5B”,“amount”:“100”,“strict”:false,“redirectUrl”:”",“successRedirectUrl”:"",“failRedirectUrl”:"",“id”:"",“wegotOrderId”:null,“plugin”:"",“plugin_version”:""},“isVoucher”:false,“isVoucherRedemption”:false,“paymentType”:“gateway”,“transactionType”:“payment”}"
}
}

Any help would be appreciated!!

Hi, @donovanmat.76

First, your json seems to be malformed. You need to replace opening/closing quotes with standard double quote.
Second, you need to escape quotes in “payload” value as this is a single string value.
In the perfect scenario you should end up with the following body:
{ “body”: { “payload”: “{‘id’:4,‘status’:‘completed’,‘totalAmount’:100,‘tipAmount’:0,‘feeAmount’:3,‘settleAmount’:97,‘requiredAmount’:null,‘date’:‘2023-07-03T15:24:02Z’,‘snapCode’:‘Fa4GM9V2’,‘snapCodeReference’:‘5aead989-ac90-4be3-84ae-4230032aea32’,‘userReference’:‘777777’,‘merchantReference’:null,‘statementReference’:null,‘authCode’:null,‘deliveryAddress’:null,‘deviceSerialNumber’:null,‘extra’:{‘merchantId’:‘82C252D3-2105-4D80-9716-1842EED711EA’,‘transactionType’:‘Payment’,‘checksum’:‘6AD75139F93ED0E66541F9EF240D358AC6B7461E151D8AD55E2F473E683B7C5B’,‘amount’:‘100’,‘strict’:false,‘redirectUrl’:’’,‘successRedirectUrl’:’’,‘failRedirectUrl’:’’,‘id’:’’,‘wegotOrderId’:null,‘plugin’:’’,‘plugin_version’:’’},‘isVoucher’:false,‘isVoucherRedemption’:false,‘paymentType’:‘gateway’,‘transactionType’:‘payment’}” } }

What is the origin of the body text above? Can you turn this into a valid json string?

Once you get this as a valid json string, you can then extract different values from JSON string in your backend workflow using json plugins that support backend workflows (i.e. provide server-side actions). For example, JSON Manipulator. If you have a thing that corresponds to “payload” structure, you can also try other plugins that convert JSON to things, but I never tried them.
And the most comprehensive, but the most solid approach, is to create your own plugin that parses “payload” and exposes it as a set of values you need. If you know javascript it won’t take you more than an hour.

And finally, you always have an option to parse the whole request body yourself without initializing backend workflow parameters.

1 Like

Hi @vladimir.pak Can you please show my how to parse the whole body without initializing the backend wf parameters. This is what I’m reciveing from the webhook when a payment is triggered. https://bit.ly/43d9j35

This is what im currently doing but it seems wrong https://bit.ly/46Fen3t
I should be able to “not rely” on multiple steps to extract the data I need

Ok, you’re receiving correct json, so your only problem is to parse payload json string.
There is a trick I can suggest:
Create second endpoint (backend workflow), create Action type API Call in the API Connector that will trigger second endpoint with the body provided as it’s parameter.
In the first workflow add action to trigger second workflow with a body set to payload string.
You will need to initialize second workflow first, so the initial URL in the API Call should end with /initialize, that you would need adjust after initialization.

1 Like

Got to my laptop, see the process here: Loom | Free Screen & Video Recording Software | Loom

I used payload string you provided to initializing second endpoint. Set <payload> parameter’s initial value of the Process Payload API call to this string. Then go to workflows and click Detect data of the process_payload workflow, then open another tab with editor, go to plugins and click Initialize button on the Process Payload API call of the API Connector. This will send payload string to second workflow that should detect parameters. After workflow is initialized, adjust URL of the Process Payload API Call removing /initialize tail and click Initialize again. Other actions are shown in the video, I’ll skip describing them.

2 Likes

Thank you so much. Really appreciate this. Let me by you a coffee or beer for the effort!

Did you manage it working?

Yes, worked perfectly. :brain:

Good, you’re welcome!

1 Like