# Web Payments SDK: Square.js failing to load properly on an old version of Chromium

**URL:** <https://developer.squareup.com/forums/t/web-payments-sdk-square-js-failing-to-load-properly-on-an-old-version-of-chromium/11658>\
**Category:** Questions\
**Tags:** sdk, web-payments-sdk\
**Created:** [December 24, 2023, 9:29pm UTC](https://developer.squareup.com/forums/t/web-payments-sdk-square-js-failing-to-load-properly-on-an-old-version-of-chromium/11658 "2023-12-24T21:29:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![gustavo](https://avatars.discourse-cdn.com/v4/letter/g/a9adbd/32.png) [@gustavo](https://developer.squareup.com/forums/u/gustavo)\
**Post date:** [December 24, 2023, 9:29pm UTC](https://developer.squareup.com/forums/t/web-payments-sdk-square-js-failing-to-load-properly-on-an-old-version-of-chromium/11658/1 "2023-12-24T21:29:16Z")

</div>

One of our clients was complaing that Square wasn’t working for them.  
We are using the Web payments SDK.

After doing some tests, we determined that this problem happens on **Chromium** , version **79.0.3945.0** (from 2019, apparently), but not on Chromium’s newest version, or in any other browser we tested.

This version of Chromium can’t even load the example at [https://developer.squareup.com/reference/sdks/web/payments](https://developer.squareup.com/reference/sdks/web/payments), which we used as a basis for our code, so we deemed it unlikely to be a problem in our own code.

The error in question is thrown when we run:

```auto
if (!window.Square) {
    throw new Error('Square.js failed to load properly');
}

```

The square script being loaded, that is throwing the exception, is:

> [https://web.squarecdn.com/v1/square.js](https://web.squarecdn.com/v1/square.js)

The exact exception we get, on the console is:

> square.js:1 Uncaught SyntaxError: Unexpected token ‘.’

So our question is:  
Is there anything we can do about this?  
Is it likely that this a bug with this browser, that was fixed later on, or could this be some old browser dependency we are missing?  
Any information on the subject would be appreciated.  
Thank you.

---

<div class="post-metadata">

**Author:** ![Square-Dev-AI](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/square-dev-ai/32/2513_2.png) [@Square-Dev-AI](https://developer.squareup.com/forums/u/Square-Dev-AI)\
**Post date:** [December 24, 2023, 9:29pm UTC](https://developer.squareup.com/forums/t/web-payments-sdk-square-js-failing-to-load-properly-on-an-old-version-of-chromium/11658/2 "2023-12-24T21:29:32Z")

</div>

👋 I’m Square Dev AI, here to help answer your question!  
Based on the information you’ve provided, the following documentation will help answer your question:

> **[Troubleshoot In-App Payments SDK Problems](https://developer.squareup.com/docs/in-app-payments-sdk/troubleshooting)**
>
> Troubleshoot problems with the Square In-App Payments SDK.

> **[Web Payments SDK Requirements](https://developer.squareup.com/docs/app-marketplace/requirements/web-payments-sdk)**
>
> Learn about the Square App Marketplaces requirements related to the Web Payments SDK.

> **Additional Documentation**
>
> [Payment APIs](https://developer.squareup.com/docs/payments)  
> [Handling Errors](https://developer.squareup.com/docs/build-basics/handling-errors)  
> [Square Node.js SDK Quickstart](https://developer.squareup.com/docs/sdks/nodejs/quick-start)

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.  
Otherwise one of our Developer Advocates will provide additional assistance shortly.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [December 26, 2023, 5:12pm UTC](https://developer.squareup.com/forums/t/web-payments-sdk-square-js-failing-to-load-properly-on-an-old-version-of-chromium/11658/3 "2023-12-26T17:12:22Z")

</div>

When you get this error is this when you submit payment? Or is the form not loading correctly? 🙂

---

<div class="post-metadata">

**Author:** ![gustavo](https://avatars.discourse-cdn.com/v4/letter/g/a9adbd/32.png) [@gustavo](https://developer.squareup.com/forums/u/gustavo)\
**Post date:** [December 28, 2023, 1:09am UTC](https://developer.squareup.com/forums/t/web-payments-sdk-square-js-failing-to-load-properly-on-an-old-version-of-chromium/11658/4 "2023-12-28T01:09:58Z")

</div>

The problem is the form. The form does not load at all.  
It seems a problem happens while loading the square.js script.  
Calling “window.square.someOtherMethod” (like when we do: payments = window.Square.payments(appId, locationId)) does not work, because the “square” attribute on “window” is not loaded

This doesn’t happen in any other browser I’ve tested, but it does happen on chromium on that specific version.

Im assuming its a problem with the browser, not with square itself, but maybe somebody had a similar problem and there is something I can add to javascript to make it work

---

<div class="post-metadata">

**Author:** ![sushma](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/sushma/32/2630_2.png) [@sushma](https://developer.squareup.com/forums/u/sushma)\
**Post date:** [January 10, 2024, 10:26am UTC](https://developer.squareup.com/forums/t/web-payments-sdk-square-js-failing-to-load-properly-on-an-old-version-of-chromium/11658/5 "2024-01-10T10:26:14Z")

</div>

@Bryan-Square , @gustavo  
Hello, I am Sushma,  
Currently, I am also facing the same issue,  
So, can you please help me on this.  
The form does not load, and am only able to see button there, no CVV, card, expriy date fields.  
The code is given below. Am i doing something wrong?

```auto
@extends('frontend.layouts.master')

@section('title')
<title>
    {{ env('APP_NAME') }} | Checkout
</title>
@endsection

@section('content')
<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>
<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>
<script>
    const appId = '{{ env("SANDBOX_APP_ID") }}';
    const locationId = '{{ env("LOCATION_ID") }}';

    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(
            "{{ route('square.store') }}", {
                method: 'POST',
                headers: {
                    // 'Accept': 'application/json',
                    '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', paymentResults);
            } 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>
@endsection

```

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [January 10, 2024, 6:01pm UTC](https://developer.squareup.com/forums/t/web-payments-sdk-square-js-failing-to-load-properly-on-an-old-version-of-chromium/11658/6 "2024-01-10T18:01:12Z")

</div>

Is there a reason your still using Chromium, version 79.0.3945.0? This version is almost 5 years old. Browsers should be updated to keep up with all the security updates. 🙂