Insight with using POST API with JavaScript & JSON body (also an AirTable form)

Question

I'm fairly new to API's and how they play with JavaScript... For work I need to create a form that gathers the form data and sends it a booking service that uses a REST API in JSON format.

I've gone through the supplied API document from our booking site (Rentle) and they do provide a sample block of what the JSON code should look like when sent. Below

{
  "startDate": "2022-04-04T06:26:21.871Z",
  "paid": false,
  "shoppers": [
    {
      "marketing": false,
      "language": "en",
      "userProperties": [
        {
          "property": "height",
          "value": "180",
          "unit": "cm"
        }
      ],
      "products": [
        {
          "productId": "gTYnKDeVkvUrWYiG1R9w",
          "variantId": "MkFzBOjjfHZ4MuoGBiAp",
          "customDuration": {
            "timePeriod": "hours",
            "timeValue": 1
          },
          "discount": 0
        }
      ],
      "firstName": "Earnestine",
      "lastName": "Stiedemann",
      "phone": "045-609-0183",
      "email": "[email protected]",
      "additionalInformation": ""
    }
  ],
  "rentalDuration": {
    "timePeriod": "hours",
    "timeValue": 1
  }
}

As you can see it's nested in many places and I'm struggling to find a webapp/program that can handle inserting form data in nested properties....

So here's were AirTable comes in. We already use AirTable and I find it quite good for displaying our booking data in various formats, so I'm wanting to also use this service (as we are already paying for it). I can make a shareable form similar to MS Forms, that 'on submit' can run a js script and input form data into it.

What I have tried/come up with so far:

const data = {
    "startDate": "2022-05-04T06:26:21",
    "paid": false,
    "shoppers": [
      {
        "marketing": false,
        "language": "en",
        "products": [
          {
            "productId": "recgM6LpEcV1HJIgS",
            "discount": 0
          }
        ],
        "firstName": "TEST",
        "lastName": "TEST",
        "phone": "888888888",
        "email": "[email protected]",
        "additionalInformation": "notes here"
      }
    ],
    "rentalDuration": {
      "timePeriod": "hours",
      "timeValue": 4
    }
  };



fetch('https://api.rentle.io/orders/x17nRY1WvxeRIgV5LJXv', {
  method: 'POST', // or 'PUT'
  headers: {
    "Authorization": "Basic 00000000000000000000000000000000000000000000",
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

It almost works....The authentication is fine the main issue is I'm either getting a Error 400 'shoppers can't be null' or and Error 500 'internal server error'

I'm using 'hard coded' date to test, with AirTable I can change any field to my input with {firstName} etc. later on when I get it working.

(I can also get it to work in Postman using '$.ajax()' but unfortunately this command is not supported in AirTable)

Thanks Muchly!!!