Can You Help Me With Some Javascript Please? (Paypal Integration)

Wappler General Need Help
1

I am trying to implement an integration with Paypal and it involves the following javascript code:

const cardField = paypal.CardFields({
  createOrder: function (data) {
    return fetch("myserver.com/api/orders", {
      method: "POST",
      body: {
        paymentSource: data.paymentSource,
      },
    })
      .then((res) => {
        return res.json();
      })
      .then((orderData) => {
        return orderData.id;
      });
  },
  onApprove: function (data) {
    const { orderID } = data;
    return fetch(`myserver.com/api/orders/${orderID}/capture`, {
      method: "POST",
    })
      .then((res) => {
        return res.json();
      })
      .then((orderData) => {
        // Redirect to success page
      });
  },
  onError: function (error) {
    // Do something with the error from the SDK
  },
});

I have modified the first fetch command to call my own API, like this:

const cardField = paypal.CardFields({
  createOrder: function (data) {
    console.log('Paypal createOrder...');
    return fetch("dmxConnect/api/external_api/pp_create_order_id.php", {
      method: "GET"
    })
      .then((res) => {
          return res.json();
        
      })
      .then((orderData) => {
      return orderData.id; // ** WHAT DO I PUT HERE?
      });
  }
});

The pp_create_order_id.php api is being called, and returns the following data:

{"order_id":"13U18902WY089882E"}

However the onError part is then called with the message I have pasted below... so I'm, guessing something isn't right with the then((orderData) => { part of the code...

I don't really understand what all this .then() javascript is doing!

Can someone please take a look at this and help me understand how to fix this?

Thanks!
Antony.

Error message:

{
    "err": "TypeError: Failed to execute 'json' on 'Response': body stream already read\n    at http://localhost/pp.php:122:20\n\nError: Failed to execute 'json' on 'Response': body stream already read\n    at eo.error (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:76543)\n    at Object.<anonymous> (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:84928)\n    at JSON.parse (<anonymous>)\n    at o (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:84787)\n    at ho (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:84940)\n    at To.u.on (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:89527)\n    at To (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:89647)\n    at https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:95969\n    at n.try (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:17132)\n    at https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:95766\n\nError: Failed to execute 'json' on 'Response': body stream already read\n    at eo.error (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:76543)\n    at Object.<anonymous> (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:84928)\n    at JSON.parse (<anonymous>)\n    at o (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:84787)\n    at ho (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:84940)\n    at To.u.on (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:89527)\n    at To (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:89647)\n    at https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:95969\n    at n.try (https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:17132)\n    at https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v:3:95766",
    "timestamp": "1718977613867",
    "uid": "uid_ae36c0737d_mtm6mzq6ndg",
    "env": "sandbox",
    "clientId": "AbdSLwdQdQn1g1IC0R03oNBAWZtWVXD9JRcn5MuL8QUA7TgFmTbGXwdpPRvQa93XF1RvTKoqZQ7djy0v",
    "csnwCorrelationId": "f905562e8b7af",
    "referrer": "localhost",
    "version": "5.0.447",
    "merchantId": [],
    "sessionId": "uid_ae36c0737d_mtm6mzq6ndg",
    "userAction": "commit",
    "loadedInFrame": "non_paypal"
}

c

2

If you console.log the output, you'll be able to choose what you want. This way you don't have to guess.

.then((orderData) => {
      console.log(orderData);
      return orderData.id; // ** WHAT DO I PUT HERE?
      });