Unexpected character at line 1 column 1 of the JSON data


My customer was using square payment until the start of this year.
The code that I manage to build, some time ago, stop working asking for a “CARD_DECLINED_VERIFICATION_REQUIRED”.

I decided to move to the latest api version and download the latest example.

So …. I :
a) used composer to download the latest SDK and copy the vendor folder in my server
b) changed the version targeting at the dashboard
c) download the connect-api-examples-master/connect-examples/v2/php_payment/ code
d) remove the Dotenv library and hard-code the credentials in the code

at the createPayment async function I am get the error: ”Error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data”

this is the result of the JSON.stringify({token}) ->{“token”:“cnon:CBASEHliYZ8p_8S3lesvM7sftsk”}


Can somebody, please, help me?
Thank you

1 Like

Was the example in a working state prior to you making any changes? If so what was the change that broke the example. :slightly_smiling_face:

I dont think I broke the example, the only changes that I have done is to bypass the Dotenv library.
I think I can handle that. :slight_smile:

location-info.php is working fine

inside the sq-payment-flow.js the createPayment function returns the error

Error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data square.js:formatted:5890
ke square.js:5890
and the following code is your square.js code is crashing inside the “case ‘console’” at the
“t && t.apply(xe.console, r)”

   function ke(e, t) {
      Ue[e] = Ue[e] || [
      function (e) {
        if (!Me[e]) switch (Me[e] = !0, e) {
          case 'console':
            'console' in xe && X.forEach((function (e) {
              e in xe.console && G(xe.console, e, (function (t) {
                return function (...r) {
                  He('console', {
                    args: r,
                    level: e
                  t && t.apply(xe.console, r)

window.createPayment = async function(token) {
  const dataJsonString = JSON.stringify({

  try {
      const response = await fetch('https://mymadrasah.co.uk/123456/process-payment.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      body: dataJsonString

    const data = await response.json();

    if (data.errors && data.errors.length > 0) {
      if (data.errors[0].detail) {
      } else {
        window.showError('Payment Failed.');
    } else {
      window.showSuccess('Payment Successful!');
  } catch (error) {
    console.error('Error:', error);



// Note this line needs to change if you don't use Composer:
// require('square-php-sdk/autoload.php');
require 'vendor/autoload.php';

// use Dotenv\Dotenv;
use Square\SquareClient;

// dotenv is used to read from the '.env' file created for credentials
// $dotenv = Dotenv::create(dirname(__DIR__));
// $dotenv->load();

// The access token to use in all Connect API requests.
// Set your environment as *sandbox* if you're just testing things out.

class LocationInfo {
  // Initialize the Square client.
  var $currency;
  var $country;
  var $location_id;

  function __construct() {
    //$access_token =  getenv('SQUARE_ACCESS_TOKEN');
    $access_token =  "EAAAENUaCQNZuTd4ugz7nzrs-86RFjVUxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

    //   'environment' => getenv('ENVIRONMENT')
    $this->square_client = new SquareClient([
      'accessToken' => $access_token,  
      'environment' => "sandbox"
    // $location = $this->square_client->getLocationsApi()->retrieveLocation(getenv('SQUARE_LOCATION_ID'))->getResult()->getLocation();
    $location = $this->square_client->getLocationsApi()->retrieveLocation("31M5Txxxxxxxx")->getResult()->getLocation();
    $this->location_id = $location->getId();
    $this->currency = $location->getCurrency();
    $this->country = $location->getCountry();  

  public function getCurrency() {
    return $this->currency;

  public function getCountry() {
    return $this->country;

  public function getId() {
    return $this->location_id;

$location_info = new LocationInfo();



require 'vendor/autoload.php';
include 'utils/location-info.php';

use Square\Environment;
// dotenv is used to read from the '.env' file created for credentials
// $dotenv = Dotenv\Dotenv::create(__DIR__);
// $dotenv->load();

// Pulled from the .env file and upper cased e.g. SANDBOX, PRODUCTION.
// $upper_case_environment = strtoupper(getenv('ENVIRONMENT'));
$upper_case_environment = "SANDBOX";
//$web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https://web.squarecdn.com/v1/square.js" : "https://sandbox.web.squarecdn.com/v1/square.js";
$web_payment_sdk_url = "https://sandbox.web.squarecdn.com/v1/square.js";


  <title>My Payment Flow</title>
  <!-- link to the Square web payment SDK library -->
  <script type="text/javascript" src="<?php echo $web_payment_sdk_url ?>"></script>
  <script type="text/javascript">
    window.applicationId =
        // echo getenv('SQUARE_APPLICATION_ID');
        echo "sandbox-sq0idb-1sdAosroBG2XGsq8wGuL3w";
    window.locationId =
        // echo getenv('SQUARE_LOCATION_ID');
        echo "31M5T28Sxxxxxxx";
    window.currency =
        echo $location_info->getCurrency();
    window.country =
        echo $location_info->getCountry();
  <link rel="stylesheet" type="text/css" href="public/stylesheets/style.css">
  <link rel="stylesheet" type="text/css" href="public/stylesheets/sq-payment.css">

  <form class="payment-form" id="fast-checkout">
    <div class="wrapper">
      <div id="apple-pay-button" alt="apple-pay" type="button"></div>
      <div id="google-pay-button" alt="google-pay" type="button"></div>
      <div class="border">
      <div id="ach-wrapper">
        <label for="ach-account-holder-name">Full Name</label>
        <input id="ach-account-holder-name" type="text" placeholder="Jane Doe" name="ach-account-holder-name" autocomplete="name" /><span id="ach-message"></span><button id="ach-button" type="button">Pay with Bank Account</button>

        <div class="border">
      <div id="card-container"></div><button id="card-button" type="button">Pay with Card</button>
      <span id="payment-flow-message"></span>

  <script type="text/javascript" src="public/js/sq-ach.js"></script>
  <script type="text/javascript" src="public/js/sq-apple-pay.js"></script>
  <script type="text/javascript" src="public/js/sq-card-pay.js"></script>
  <script type="text/javascript" src="public/js/sq-google-pay.js"></script>
  <script type="text/javascript" src="public/js/sq-payment-flow.js"></script>

JSON.parse: unexpected character at line 1 column 1 of the JSON data on this page. https://www.bigdippergraphics.com/public/examples/card.php

I’m lost, all I did was update the the sandbox id and location

Hmm, everything looks good from what I see. Did you follow all the steps in the README.md? :slightly_smiling_face: