Link Paypal-Buttons (client) to Server-Response (PHP) with ajax

Question

I want to use Paypal on my website, so I am following the tutorial here. Everything is working so far: Downloaded the SDK with composer. Created the class PayPalClient and CreateOrder.

At the end of this section of the tutorial, the result of CreateOrder needs to be linked to the Buttons using javascript:

    <script>
    paypal.Buttons({
        createOrder: function() {
            return fetch('test_paypal_create_paypal_transaction.php', {
                method: 'post',
                headers: {
                    'content-type': 'application/json'
                }
            }).then(function(res) {
                return res.json();
            }).then(function(data) {
                return data.orderID;
            });
        },
        onApprove: function(data, actions) {
            // This function captures the funds from the transaction.
            return actions.order.capture().then(function(details) {
                // This function shows a transaction success message to your buyer.
                alert('Transaction completed by ' + details.payer.name.given_name);
            });
        }
    }).render('#paypal-button-container');
    //This function displays Smart Payment Buttons on your web page.
</script>

And this is the php file (test_paypal_create_paypal_transaction.php):

require __DIR__ . '/../../vendor/autoload.php';

use MyProject\PayPay\CreateOrder;

$response = CreateOrder::createOrder(false);
echo json_encode($response);

The class CreateOrder is working correct. I can out put response from paypal. The issue does not seems to be there. I can also see in the Firefox-Dev-Tools that the XHR-Request is done correctly, when I press the Paypal-Button. There is also a XHR-Response comming back to the buttons. But it seems I am using the wrong format or wrong part of the data, that is returned into the fetch()-Function.

Anybody an idea?

Thanks for help!!!

Tim

Answer 1

Ok, I found the solution.

This:

[...]
    }).then(function(data) {
        return data.orderID;
    });
[...]

needs to be replaced by that:

[...]
    }).then(function(data) {
        return data.result.id;
    });
[...]