Taking url from server javascript response and opening the link in the User interface

Hi everyone, kindly pardon my ignorance.

I am running the following API call as server Javascript on my bubble app

const data = {
	countryCode: "ZA",
	amount: "0.01",
	transactionReference: "Test1",
	bankReference: "Test1",
	cancelUrl: "http://test.i-pay.co.za/responsetest.php",
	currencyCode: "ZAR",
	errorUrl: "http://test.i-pay.co.za/responsetest.php",
	isTest: false,
	notifyUrl: "http://test.i-pay.co.za/responsetest.php",
	siteCode: "[YOUR SITECODE]",
	successUrl: "http://test.i-pay.co.za/responsetest.php",
	hashCheck: "[GENERATED HASH]"
};

const options = {
	method: 'POST',
	headers: {
	'Accept': 'application/json',
	'ApiKey': '[API KEY HERE]',
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(data)
};

fetch('https://api.ozow.com/postpaymentrequest', options)
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));

The API returns a JSON response similar to the one below;

{
    "paymentRequestId": "00000000-0000-0000-0000-000000000000",
    "url": "https://pay.ozow.com/00000000-0000-0000-0000-000000000000/Secure",
    "errorMessage": null
}

What Iā€™m trying to achieve is to have the url sent and opened in the user interface once the API call recieves a response. Your help will be appreciated dearly.

To show the URL in the Bubble app page you need an iFrame

Hey @naidindustries are you able to integrate iframe inside the user interface?

1 Like

Hi @usama4745 Yes I am able