Stripe Unexpected token < in JSON at position 0

Question

I am getting this error, it points to client.js line 21. It is the second.then of the fetch(create.php).

The first response returns 200. So, not sure how to fix it. The whole code so far is as extracted from demo instructions. https://stripe.com/docs/payments/integration-builder

See browser console info:

jquery-migrate.min.js?ver=3.3.2:2 JQMIGRATE: Migrate is installed, version 3.3.2
?ver=3.0.0:1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.
value @ ?ver=3.0.0:1
Ec @ ?ver=3.0.0:1
Sc @ ?ver=3.0.0:1
(anonymous) @ client.js:3
client.js:18 Response {type: "basic", url: "http://amore-paraiso.local/wp-content/plugins/sm-amore-stripe/create.php", redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: trueheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "basic"url: "http://amore-paraiso.local/wp-content/plugins/sm-amore-stripe/create.php"__proto__: Response
content-tss.js:1 TSS: content-tss.js loaded:  https://js.stripe.com/v3/m-outer-59cdd15d8db95826a41100f00b589171.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
content-ads.js:1 INS: content-ads.js loaded:  https://js.stripe.com/v3/m-outer-59cdd15d8db95826a41100f00b589171.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
VM353:4 hosted page injected
(index):1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.then (async)
(anonymous) @ client.js:21
content-tss.js:1 TSS: content-tss.js loaded:  https://m.stripe.network/inner.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
content-ads.js:1 INS: content-ads.js loaded:  https://m.stripe.network/inner.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false

Answer 1

Most likely scenario is that your create.php is encountering an error and returning an error page as HTML (hence the < at position 0). You need to debug your create.php to understand where it is failing, then correct that. Check your Stripe developer logs to see if the API request is made successfully.

Answer 2

I've had simular problems passing data from php to js. Instead of immediately parsing the data, just do console.log(this.responseText); and it will show you the content. Normally it's an error in your php code and it will tell you where the error is and what's causing it for you to fix

Answer 3

I've encountered this error a few times. You aren't actually getting back JSON as a response, and so the attempt to parse that response as JSON is failing.

If you are doing something like result.json() you can instead log result.text() and have a look at what is actually being returned.

PHP has a habit of catching people out and returning HTML rather than JSON.

Here is a massively popular Stack Overflow thread on the topic:

SyntaxError: Unexpected token < in JSON at position 0

Edit because reviewed:

Your error is appearing here

  .then(function(result) {
    return result.json();
  })

So if you want to make sure this is JSON you can check the response content type like below. Taken from MDN

fetch("/create-payment-intent", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(purchase)
})
  .then(result => {
     const contentType = result.headers.get('content-type');
     if (!contentType || !contentType.includes('application/json')) {
       // Or do something else with the result to get it into JSON
       throw new TypeError("Oops, we haven't got JSON!");
     }
     return result.json();
  }

Answer 4

It turned out the error was on the require './stripe-php/init.php'; on the create.php file.

As I am developing it with Wordpress I had it as require plugin_dir_url(__FILE__). 'stripe-php/init.php'; require plugin_dir_url(__FILE__). 'stripe-php/init.php'; .

Summary:

Make sure the path to require stripe-php/init.php is correct, as below:

require './stripe-php/init.php';

Thanks to @jason who recommended checking the Network tab.