Forum Academy Marketplace Showcase Pricing Features

Connecting to API via HTML form post

The payment gateway we’re working with accepts HTML form posts as the only means of connecting to their API. Does this rule out the Bubble API Connector? We can’t seem to find a way to make this work. Currently, we’re using a HTML element to post data outbound to the payment gateway, which means we don’t have any mechanisms setup to receive information back.

Has anyone else encountered this issue before and/or have a fix in mind? I’ve posted what our outbound HTML code looks like this:

<form name='Newebpay' method='post' action='https://ccore.newebpay.com/MPG/mpg_gateway'>

	MerchantID:<input type = 'hidden' name = 'MerchantID' value = 'J2B merchantid's value'><br>
	TradeInfo: <input type = 'hidden' name = 'TradeInfo' value = 'J2B tradeinfo's value'><br>
	TradeSha: <input type = 'hidden' name = 'TradeSha' value = 'J2B tradesha's value'><br>
    Version: <input type = 'hidden' name = 'Version' value = 'J2B version's value'><br>
</form>

<script type="text/javascript">
    document.Newebpay.submit();
</script>

The form submission action is an HTTP Post call.

From Bubble, this should work with a POST API call to
"https://ccore.newebpay.com/MPG/mpg_gateway"
as the URL

The data can be added to the call via query parameters.
Click on ‘Add Parameter’ to list the data fields to attach to the API call.

In the ‘key’ input, enter the ‘name’ value of each data point
And in the ‘value’ input, enter the actual value of this data point. This will be a variable so that it can be dynamically updated from the Bubble workflow.

So you’ll have
Key: MerchantID Value: <MyMerchantID>
is now a variable. Bubble will ask you for a value to insert here in your workflow.

Do this for all the 4 data points that you want to send.

This should behave the same as a form submit.

I guess that’s what you mean right? I’ve tried the same way as you mentioned.
However, in this case, I can’t even initialize my API call as I posting in JSON data type.
If I posted it in text data type, I can receive HTML from the payment gateway company, but it shows that the information I sent is incorrect.
With the same data, I used HTML Post call, I can successfully direct the payment page.

I’ve also asked the payment gateway company, they request me to use HTML Post call to send data.

In this case, is there any solution to the problem above?

Hmm.
It could be because the HTML post call doesn’t send data as JSON, it sends form data / query parameters

Try changing ‘body type’ from JSON to Form Data

1 Like

Thank you for your response! Your suggestion seemed to have worked…

But I was also wondering if there’s a syntax that makes the Value inputs variable? It shouldn’t be hardcoded as it’s different for each transaction. See the image below:

Another question - this is for posting data to the API, how would we get data back if the API uses a “NotifyURL” action for calling data back?

The response type the payment gateway API should be in JSON, so I set the data type as JSON. The payment gateway has offered to send the information back using a NotifyURL function in JSON format.

I tried running it using the setup above and this is the error I get:

Yes, it should be JSON but it looks like it either isn’t JSON or isn’t properly formatted JSON.
So you could change the Data Type to Text and see the output that it returns.

HTTP requests like these usually expect some functionalities to run on the server in response to the request and return the results.
In cases where the server may take more time to process and respond to the request (because maybe it uses another 3rd party service), the server may choose to respond a little later when it has a response ready.

That’s when it uses a notifyUrl. This seems to be a webhook - meaning that it will make an API call back to your Server with the response to the request you made, once it is done processing.

For this, you will have to create a backend API workflow on Bubble and provide that backend workflow’s URL as the notifyUrl.

If that’s how this is working, it might make sense for the immediate response to your API request to be plain text (something like “success” or “OK”) because there is no immediate data to return.

1 Like

Thank you!!

Just wanted to follow up - what would the syntax be on the Bubble API Connector if we wanted the values to be variable?

Just uncheck the ‘Private’ checkboxes on the fields you want to keep variable

2 Likes