Paypal smart button server integration in PHP: Error: Expected an order id to be passed

Question

I'm trying to implement a server side integration for smart button paypal. I've tried to fix this for days now. I'm new at this, it's a personal project, I'm trying to learn.

I keep getting 'Error: Expected an order id to be passed' every time that a click on the paypal button. What am I missing?

This is my client-side code:

paypal.Buttons({
// Customize button (optional)
style: {
    color: 'blue',
    shape: 'pill',
},
//Set up a payment
// This function sets up the details of the transaction, including the amount and line item details.
createOrder: function(){
    return fetch('<?php echo URLROOT; ?>/libraries/Paypal.php', {
        method: 'post',
        headers: {
        'content-type': 'application/json',
        },
    }).then(function(res){
        //console.log(res.json());
        return res.text();
    }).then(function(data){
        return data.orderID; // Use the same key name for order ID on the client and server
    });
},
// Execute the payment
onApprove: function (data) {
    //This function captures the funds from the transaction.
    return fetch('<?php echo URLROOT; ?>/libraries/Paypal.php', {
        method: 'post',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify({
            orderID: data.orderID
        })

    }).then(function (res) {
        return res.json();
    }).then(function(orderData){
        if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
          return actions.restart();
        }
        if (errorDetail) {
            var msg = 'Sorry, your transaction could not be processed.';
            if (errorDetail.description) msg += '\n\n' + errorDetail.description;
            if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
            return alert(msg);
        }
      alert('Transaction completed by ' + orderData.payer.name.given_name);
  });
},
onError: function (err){
    alert('An Error occured ' + err);
}
      
}).render('#payment-btn');

This is my server-side:

// Creating an environment
$clientId = "HIDDEN";
$clientSecret = "HIDDEN";
$environment = new SandboxEnvironment($clientId, $clientSecret);
$client = new PayPalHttpClient($environment);
// Construct a request object and set desired parameters
// Here, OrdersCreateRequest() creates a POST request to /v2/checkout/orders
use PayPalCheckoutSdk\Orders\OrdersCreateRequest;
$request = new OrdersCreateRequest();
$request->prefer('return=representation');
$request->body = array(
    'intent' => 'CAPTURE',
    'application_context' =>
        array(
            'locale' => 'en-US',
            'return_url' => URLROOT.'/bookings/payment',
            'cancel_url' => URLROOT.'/bookings/payment'
        ),
    'purchase_units' =>
        array(
            0 =>
                array(
                    'amount' =>
                        array(
                            'currency_code' => 'EUR',
                            'value' => $_SESSION["total-price"]
                        )
                )
        )
);
try {
    // Call API with your client and get a response for your call
    $response = $client->execute($request);

    return $response->result;

    // If call returns body in response, you can get the deserialized version from the result attribute of the response
    print_r($response);
}catch (HttpException $ex) {
    echo $ex->statusCode;
    print_r($ex->getMessage());
}
use PayPalCheckoutSdk\Orders\OrdersCaptureRequest;
// Here, OrdersCaptureRequest() creates a POST request to /v2/checkout/orders
// $response->result->id gives the orderId of the order created above
//$orderId = $response->result->id;
$request = new OrdersCaptureRequest($orderId);
$request->prefer('return=representation');
try {
    // Call API with your client and get a response for your call
    $response = $client->execute($request);

    // If call returns body in response, you can get the deserialized version from the result attribute of the response
    print_r($response);
}catch (HttpException $ex) {
    echo $ex->statusCode;
    print_r($ex->getMessage());
}

Answer 1

What are you returning from your server to the client, exactly? Have you logged this, either on the server end or more simply using the "Network" tab of your browser's Dev Tools?

In your client code, you have:

return data.orderID; // Use the same key name for order ID on the client and server

Where, specifically, are you setting the key "orderID" with the value of "id" returned by the PayPal API? I don't see that happening anywhere.

If your server is simply regurgitating the PayPal API JSON, change your client-side code to return data.id instead, for the id key is what is used by the PayPal v2/checkout/orders API.

Here is the most straightforward sample to be basing your HTML/JS on: https://developer.paypal.com/demo/checkout/#/pattern/server