I’m trying to create a Stripe checkout session using the Stripe JavaScript library. When I click the checkout button, I’m sending a POST request to my server-side API to create the checkout session. However, I’m getting a SyntaxError when trying to parse the response as JSON.

Here’s my JavaScript code:

  var stripe = Stripe("your_stripe_publishable_key");
  var checkoutButton = document.getElementById("checkout-button");

  try {
    checkoutButton.addEventListener("click", function() {
      var email = "{{order.email}}";

      checkoutButton.innerHTML = "Processing...";
      fetch("api/create_checkout_session/{{order.oid}}", {
        method: "POST",
        body: JSON.stringify({email:email})
      })
     .then(function(response){
        return response.json()
      })
     .then(function(session){
        return stripe.redirectToCheckout({sessionId: session.sessionId})
      })
     .then(function(result){
        if(result.error){
            alert(result.error.message)
        }
      })
     .catch(function(error){
        console.log("Error:",error);
      })
    });
  } catch (error) {
    console.log(error);
  }

And here’s the error I’m getting:

Error: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

I’ve checked my server-side code, and it’s supposed to return a JSON response with the checkout session ID. However, it seems like the response is being returned as HTML instead of JSON.

Can anyone help me figure out what’s going on and how to fix this issue?

Additional context:

I’m using Django as my backend framework.
I’ve verified that the server-side code is being called correctly and is supposed to return a JSON response.
I’ve checked the browser’s developer tools, and the response is indeed being returned as HTML instead of JSON.
Thanks in advance for your help!