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

The error is clear. The JSON syntax is invalid. ... Have you attempted to inspect the return JSON string? It may not even be JSON. `Unexpected token <` where `<` wouldn't begin JSON. Maybe it's HTML or XML. — GetSet, Dec 31 '20 at 01:48
Based on the `client.js` code in the Stripe tutorial, evidently `fetch("/create-payment-intent")` is not responding with a promise that resolves to valid JSON. You can check the "Network" tab in the browser tools and see the actual request/response values. — Jason, Dec 31 '20 at 01:52
Does this answer your question? ["SyntaxError: Unexpected token < in JSON at position 0"](https://stackoverflow.com/questions/37280274/syntaxerror-unexpected-token-in-json-at-position-0) — Peter O., Dec 31 '20 at 02:22

score 1 · Answer 1 · answered Dec 31 '20 at 02:26

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.

score 0 · Answer 2 · answered Dec 31 '20 at 01:58

0

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

answered Dec 31 '20 at 01:58

Edward Drake

23
7

1

Edward, instead of writing the console.log, you can just pop over to the network tab in the browser's developer tools and view the response body (and the actual body of the request). – Jason Dec 31 '20 at 02:03

Ben S · Answer 3 · 2020-12-31T07:59:21.027

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();
  }

With all due respect the user hasn't actually asked a question; I have pointed them in the direction of debugging the issue and explained why they are receiving this error. The other answers on this question provide less information. I'm interested why this is flagged for delete; could you explain so that I may improve my answers moving forward? — Ben S, Dec 31 '20 at 07:48

score 0 · Accepted Answer · answered Jan 04 '21 at 17:25

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';.

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.

Stripe Unexpected token < in JSON at position 0

4 Answers4