This is a React JS Fetch with a failing POST method

Question

I have a simple react application and I am trying to request and post the method and render out the response inside my return div. I am getting a 400 error in my dev tool (network). I have debugged the app so many times. I just can not hit a jackpot. If you run the endpoints in postman using the token attached you will see the response...

import React from "react";

function Checkout() {
  const handleSubmit = () => {
    const token = "TOKEN";
    const data = {
      transactionReference: "string",
      paymentMethod: "CreditCard",
      checkoutOrderUrl: "http://www.test.com/",
      user: {
        name: "string",
        msisdn: "+27610983142",
        email: "[email protected]",
      },
      payementMethodDetail: {
        RedirectUrl: "http://www.test.com",
        PurchaseEventWebhookUrl: "http://www.test.com",
      },
      bundle: [
        {
          productCode: "311",
          amount: 100,
          currencyCode: "ZAR",
          quantity: 1,
        },
      ],
    };
    const requestOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: data,
    };
    fetch(
      "--------",
      requestOptions
    )
      .then((response) => response.json())
      .then((res) => console.log(res));
  };

  return (
    <div className="App">
      <button type="submit" onClick={handleSubmit}>
        Post Data
      </button>
    </div>
  );
}

export default Checkout;

Answer 1

Inside requestOptions you need credentials: 'include', most likely its CORS related issue.