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

Questions
,
1

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, 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:

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

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.

2

:wave: 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:

Additional Documentation

Payment APIs
Handling Errors
Square Node.js SDK Quickstart

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.

3

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

4

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

5

@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?

@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
6

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. :slightly_smiling_face: