Hi, I am using async/await to fetch a file (createCharge.php) that contains arrays with data inside.
Here is my html page that has the <button> that fetches the createCharge.php file arrays data, the createCharge.php also creates a 'hosted_url' that the customer will use to navigate to the payment.
Currently I can return all array data into the console including the newly generated 'hosted_url' but how do I return just that one result? and how would I return it so that it goes into the <a> tag? Any help would be great :)
HTML Page...
<button id="btn">Pay with Crypto?</button>
<p id="pay"></p>
<script>
const btn = document.getElementById('btn');
const pay = document.getElementById('pay');
btn.onclick = async() => {
const response = await fetch('coinbasePHPtest/createCharge.php/');
const newurl = await response.text();
console.log(newurl);
pay.innerHTML = `<a href="${newurl.hosted_url}">Pay Now!</a>`
}
</script>
And here is my createCharge.php that creates the 'hosted_url' link and also contains the arrays with data...
(The 'hosted_url' isn't shown here in the arrays data because it gets created automatically when the button on the html page is clicked.)
createCharge.php...
<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.commerce.coinbase.com/charges');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(
array (
'name' => 'My-Company',
'description' => 'Selected Product',
'local_price' =>
array (
'amount' => '21.00',
'currency' => 'GBP',
),
'pricing_type' => 'fixed_price',
'metadata' =>
array (
'customer_id' => 'uid_1',
'customer_name' => 'Satoshi Nakamoto',
),
'redirect_url' => 'https://www.mysite.com/Checkout/payment_successful.php',
'cancel_url' => 'https://www.mysite.com/Checkout/payment_cancelled.php',
)
));
$headers = array();
$headers[] = 'Content-Type: application/json';
$headers[] = 'X-Cc-Api-Key: MY-API-KEY';
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$result = curl_exec($ch);
curl_close($ch);
return json_decode($result, true)['hosted_url'];
?>
What I have tried:
I have tried changing the <a href=""> in multiple ways...
pay.innerHTML = `<a href="${hosted_url}">Pay Now!</a>`
pay.innerHTML = `<a href="{hosted_url}">Pay Now!</a>`
pay.innerHTML = `<a href="${newurl->hosted_url}">Pay Now!</a>`
pay.innerHTML = `<a href="{.hosted_url}">Pay Now!</a>`
I also tried messing around with the fetch part with no luck...
btn.onclick = async() => {
const response = await fetch('coinbasePHPtest/createCharge.php/hosted_url');
const newurl = await response.text();
&
btn.onclick = async() => {
const response = await fetch('coinbasePHPtest/createCharge.php/hosted_url');
const newurl = await response.json();