Debugging “unexpected token” in WooCommerce 2.4+

When the WooCommerce checkout is processed it requires that gateways return an array (which is then converted into JSON) telling the checkout whether or not it was successful. It’s been this way since v1. Here is a basic example from the PayPal gateway:

return array(
    'result'   => 'success',
    'redirect' => $paypal_request->get_request_url( $order, $this->testmode )
);

The above for example returns a successful response and tells the checkout to redirect the user to the URL provided.

In 2.4+ this was made more strict in that the response must be valid JSON. Anything else in the response (such as HTML, notices or whitespace) will invalidate this JSON and you may see an error along the lines of:

SyntaxError: Unexpected token

WooThemes own gateways have all been tested for 2.4, however, we’ve seen some less-supported gateways break due to returning invalid content.

I’ve seen a few vocal users complaining about this recently on the forums (some even feeling the need to attack me personally, thanks guys) and thought it best to post a few steps on how you can narrow down the issue.

First off its always best to rule out your plugins and theme by disabling them, even though a lot of users seem to ignore this step. It is only temporary and helps narrow down the issue. Much better than shouting at me on WordPress.org.

Lets assume this does not narrow down the issue for a moment. How would you know if content is being output? The answer is in your browser console.

Lets simulate an error. In the paypal gateway, just before the array is returned I’ll add:

trigger_error( 'Uh oh' );

This triggers the error as expected:

2015-11-12 at 16.29

Now lets try to debug this like someone who does not know where the error is coming from.

In Chrome, go to View > Developer > Javascript Console whilst viewing the checkout.

Now trigger the error again.

After the error is shown, in the console go to the Network tab and click XHR:

2015-11-12 at 16.31

In the list you’re see one which looks like this: ?wc-ajax=checkout. Click on that and go to the response tab:

2015-11-12 at 16.32

Notice in my above example, there is the notice. This invalidates the JSON.

A valid JSON response {starts and ends with a bracket} – if there is an error, white space or content before or after those brackets, that is your issue.

In some cases the error will be obvious and allow you to patch or disable the cause.

Hopefully that helps.

Show CommentsClose Comments

11 Comments

  • Ryan
    Posted November 15, 2015 at 10:17 am 0Likes

    Hi Mike,

    I’m still seeing issues with this. We don’t use any payment gateways but we have a function in functions.php that validates the order and uses wc_add_notice to add and set the notice:

    wc_add_notice(“Sorry, there was an error”, “error”);

    In the network panel, the call to ?wp-ajax=checkout returns a

    <

    ul> element with the error message as the only child element.

    Why would wc_add_notice be returning HTML?

    • Mike Jolley
      Posted November 16, 2015 at 2:32 pm 0Likes

      It wouldn’t. I also confirmed adding wc_add_notice to process_payment has no affect on checkout. You may have other code causing the output of the notices.

  • Darren
    Posted November 19, 2015 at 6:08 am 0Likes

    Hi Mike,

    I’ve been trying to get this working with the PayU MEA plugin, the response I am receiving seems correct (there is no HTML in the response) –
    {“result”:”success”,”redirect”:”https:\/\/secure.payu.co.za\/rpp.do?PayUReference=xxxxxxxxxxx”}

    But the error still persists, I noticed there are two spaces after the error, could this imply a space is causing the error? Not sure even where to look to correct this.

    http://oi68.tinypic.com/73jfpi.jpg
    http://oi67.tinypic.com/259x1cp.jpg

    • Mike Jolley
      Posted November 19, 2015 at 3:05 pm 0Likes

      White space will cause an error. So start with installed extensions – disable them, retest.

      • Darren
        Posted November 19, 2015 at 3:35 pm 0Likes

        Hi Mike,

        Thanks for the reply. It was actually a BOM character /ufeff causing an invalid JSON response within the plugins PHP files. Saving the PHP files with UTF-8 encoding without BOM fixed the issue. I’ve posted a fixed ver of the plugin on GitHub if anyone is having the same issues with this particular plugin – https://github.com/darrenjacoby/woocommerce-payu-mea-payment-gateway-2.4fix

  • Jay Butcher
    Posted January 7, 2016 at 3:09 pm 0Likes

    Hi Mike,

    Thanks for this post – I’m experiencing the same issues with the Unexpected Token. I realise you’re getting a number of questions about this but I was wondering whether you’d have a look at the response from my developer tools?

    {“result”:”success”,”redirect”:”https:\/\/liccshop.uk\/checkout\/order-received\/397?key=wc_order_568e7d54bbe54″}

    Should the response simply start at the {“result…..54”} ? If so how do I figure out where that additional code is coming from?

    Thanks
    Jay

    • Jay Butcher
      Posted January 7, 2016 at 3:14 pm 0Likes

      Hmm that’s removed a chuck of text…let me see if I can get that back in there…

      Everything between the **

      {“result”:”success”,”redirect”:”https:\/\/liccshop.uk\/checkout\/order-received\/398?key=wc_order_568e802e4c504″}

      • Jay Butcher
        Posted January 7, 2016 at 3:15 pm 0Likes

        nope done it again…

        meta http-equiv=’Refresh’ content=’1; Url=”https://liccshop.uk/checkout/order-received/398?key=wc_order_568e802e4c504″‘>{“result”:”success”,”redirect”:”https:\/\/liccshop.uk\/checkout\/order-received\/398?key=wc_order_568e802e4c504″}

      • Mike Jolley
        Posted January 7, 2016 at 3:16 pm 0Likes

        It’s likely from your gateway plugin – up to you to turn off plugins to find the cause.

      • Jay Butcher
        Posted January 7, 2016 at 3:43 pm 0Likes

        Ok great – found the one that was causing problems. If you’re interested it was this one (https://github.com/mkdo/gift-aid-for-woocommerce) we’re a UK charity so we had hoped we would be able to make use of the gift aid reclaim for donations through WooCommerce.

        Thanks for your help!

    • Mike Jolley
      Posted January 7, 2016 at 3:14 pm 0Likes

      it should start with the opening bracket. No white space should be before that.

Comments are closed.

%d bloggers like this: