Token shows Unexpected token < in JSON at position 0

Questions
1

Hello, We are integrating the square payment gateway into our website. but every time it’s shows Unexpected token < in JSON at position 0. However, It’s showing from your Square.js file.

2

:wave: That error normally happens when the server isn’t running. Is the server your using have Node installed and running? :slightly_smiling_face:

3

We are using the PHP Ci framework. For this integration .

4

Okay, the quickstart uses Node.js but we have an example that uses PHP. :slightly_smiling_face:

5

Yes, After using this, it shows, Unexpected token < in JSON at position 0.

6

Is this page live? Also when you switched to the PHP example did you completely replace the previous Quickstart example you were using? :slightly_smiling_face:

7

Yes, Check this Square Payment Gateway

8

Thanks for providing the link. The form is definitely not initializing. It looks like you’re using the Quickstart example. I thought you mentioned that you were using the PHP example? :slightly_smiling_face:

9

I did not get what to say?
I want to integrate square on my website as a payment gateway, can you please, suggest me? We are using the PHP’s CodeIgniter framework.

10

Okay, your form isn’t initializing. If you try the following and put in your credentials does the form field initialize?

<!DOCTYPE html>
<html>
  <head>
    <link href="/app.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="https://sandbox.web.squarecdn.com/v1/square.js"
    ></script>
    <script>
      const appId = 'APPLICATION_ID_REPLACE_ME';
      const locationId = 'LOCATION_ID_REPLACE_ME';

      async function initializeCard(payments) {
        const card = await payments.card();
        await card.attach('#card-container');

        return card;
      }

      async function createPayment(token) {
        const body = JSON.stringify({
          locationId,
          sourceId: token,
        });

        const paymentResponse = await fetch('/payment', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body,
        });

        if (paymentResponse.ok) {
          return paymentResponse.json();
        }

        const errorBody = await paymentResponse.text();
        throw new Error(errorBody);
      }

      async function tokenize(paymentMethod) {
        const tokenResult = await paymentMethod.tokenize();
        if (tokenResult.status === 'OK') {
          return tokenResult.token;
        } else {
          let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
          if (tokenResult.errors) {
            errorMessage += ` and errors: ${JSON.stringify(
              tokenResult.errors
            )}`;
          }

          throw new Error(errorMessage);
        }
      }

      // status is either SUCCESS or FAILURE;
      function displayPaymentResults(status) {
        const statusContainer = document.getElementById(
          'payment-status-container'
        );
        if (status === 'SUCCESS') {
          statusContainer.classList.remove('is-failure');
          statusContainer.classList.add('is-success');
        } else {
          statusContainer.classList.remove('is-success');
          statusContainer.classList.add('is-failure');
        }

        statusContainer.style.visibility = 'visible';
      }

      document.addEventListener('DOMContentLoaded', async function () {
        if (!window.Square) {
          throw new Error('Square.js failed to load properly');
        }

        let payments;
        try {
          payments = window.Square.payments(appId, locationId);
        } catch {
          const statusContainer = document.getElementById(
            'payment-status-container'
          );
          statusContainer.className = 'missing-credentials';
          statusContainer.style.visibility = 'visible';
          return;
        }

        let card;
        try {
          card = await initializeCard(payments);
        } catch (e) {
          console.error('Initializing Card failed', e);
          return;
        }

        // Checkpoint 2.
        async function handlePaymentMethodSubmission(event, paymentMethod) {
          event.preventDefault();

          try {
            // disable the submit button as we await tokenization and make a payment request.
            cardButton.disabled = true;
            const token = await tokenize(paymentMethod);
            const paymentResults = await createPayment(token);
            displayPaymentResults('SUCCESS');

            console.debug('Payment Success');
          } catch (e) {
            cardButton.disabled = false;
            displayPaymentResults('FAILURE');
            console.error(e.message);
          }
        }

        const cardButton = document.getElementById('card-button');
        cardButton.addEventListener('click', async function (event) {
          await handlePaymentMethodSubmission(event, card);
        });
      });
    </script>
  </head>
  <body>
    <form id="payment-form">
      <div id="card-container"></div>
      <button id="card-button" type="button">Pay $1.00</button>
    </form>
    <div id="payment-status-container"></div>
  </body>
</html>
11

Checking your code. Give me some time.

12

It still showing Unexpected token < in JSON at position 0. I used your following code, check this link Square Payment Gateway please.

13

Hello ! Same problem ! solved ? helpme ! :frowning: Codeigniter here

14

@juankstylez What example are you using? Is it the quickstart that’s using Node.js? Or are you using one of our other language specific examples? :slightly_smiling_face: