Click here to Skip to main content
15,558,537 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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();
Posted
Updated 2-Nov-21 1:37am
v2

1 solution

Your PHP script is returning the URL as text. Your newurl variable will be a string containing the URL. It doesn't have a property called hosted_url, so newurl.hosted_url will be undefined.

You haven't declared a variable called hosted_url in your Javascript, so injecting that will also return undefined.

Using href="{hosted_url}" won't inject anything, since that's not a valid Javascript interpolated string.

href="${newurl->hosted_url}" will generate a syntax error, since that's not valid Javascript syntax.

And href="{.hosted_url}" also won't inject anything, since it's not a valid Javascript interpolated string.

Try:
JavaScript
btn.addEventListener('click', async (e) => {
    e.preventDefault();
    
    const response = await fetch('coinbasePHPtest/createCharge.php/');
    if (!response.ok) {
        const errorMessage = await response.text();
        console.error(response.status, response.statusText, errorMessage);
        alert('There was an error creating the charge.');
        return;
    }
    
    const newurl = await response.text();
    console.log(newurl);
    
    pay.innerHTML = `<a href="${newurl}">Pay Now!</a>`;
});
 
Share this answer
 
Comments
[no name] 2-Nov-21 8:55am    
Okay thanks, So I'm testing this javascript now and I am still returning all the same array results into console using Print_r($response) within the PHP file, and when I click 'Pay Now'-(on checkout.html) I am receiving all Array results inside like so: www.my-site.co.uk/Array ( [data] => Array ( etc.

If I remove print_r I just receive <empty string>

Do I also need to change my PHP file so it only returns 1 result?

I have tried using 'return $response->data->hosted_url' inside PHP file, but this just returns all the array results also.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900