Google pay not working for web on android

Questions
1

When i use google pay on PC and attempt a transaction, it works perfectly, when i do it from an android device (samsung s22) the google pay payment sheet does not load at all.

The error i get is: Request Failed
The merchant is having trouble accepting your payment right now. Try using a different payment method. [OR_BIBED_06]

The code is below:

Google Pay Test body { font-family: sans-serif; max-width: 480px; margin: 40px auto; padding: 20px; } #log { background: #f5f5f5; border: 1px solid #ccc; padding: 12px; margin-top: 20px; font-family: monospace; font-size: 13px; white-space: pre-wrap; min-height: 80px; } #google-pay-button { margin: 20px 0; } h2 { margin-bottom: 4px; } .status { margin-top: 8px; font-weight: bold; } .ok { color: green; } .err { color: red; } .info { color: #555; }

Google Pay Test

Follows the exact Square quickstart pattern. Tap the button below.

<div id="google-pay-button"></div>

<div class="status" id="status"></div>
<div id="log">Initializing...</div>

<script src="https://web.squarecdn.com/v1/square.js"></script>
<script>
    const APP_ID      = 'XXXXX';
    const LOCATION_ID = 'XXXXXX';
    const AMOUNT      = '1.00';

    const logEl    = document.getElementById('log');
    const statusEl = document.getElementById('status');

    function log(msg, cls) {
        const line = new Date().toISOString().slice(11,23) + '  ' + msg;
        logEl.textContent += '\n' + line;
        if (cls) statusEl.className = 'status ' + cls;
        if (cls) statusEl.textContent = msg;
        console.log(line);
    }

    document.addEventListener('DOMContentLoaded', async () => {
        logEl.textContent = '';

        if (!window.Square) {
            log('ERROR: Square.js failed to load', 'err');
            return;
        }
        log('Square.js loaded OK');

        let payments;
        try {
            payments = window.Square.payments(APP_ID, LOCATION_ID);
            log('payments() OK');
        } catch (e) {
            log('payments() FAILED: ' + e.message, 'err');
            return;
        }

        let googlePay;
        try {
            const paymentRequest = payments.paymentRequest({
                countryCode: 'US',
                currencyCode: 'USD',
                total: { amount: AMOUNT, label: 'Test' }
            });
            log('paymentRequest() OK');

            googlePay = await payments.googlePay(paymentRequest);
            log('googlePay() OK — instance created');

            await googlePay.attach('#google-pay-button');
            log('attach() OK — button rendered', 'info');
        } catch (e) {
            log('Google Pay init FAILED: ' + e.message, 'err');
            return;
        }

        document.getElementById('google-pay-button').addEventListener('click', async (event) => {
            log('--- button clicked ---');
            event.preventDefault();
            try {
                const result = await googlePay.tokenize();
                log('tokenize() status: ' + result.status);
                if (result.errors) {
                    log('tokenize() errors: ' + JSON.stringify(result.errors));
                }
                if (result.status === 'OK') {
                    log('SUCCESS — token: ' + result.token.substring(0, 24) + '...', 'ok');
                } else {
                    log('tokenize() non-OK: ' + result.status, 'err');
                }
            } catch (e) {
                log('tokenize() THREW: ' + e.message, 'err');
            }
        });
    });
</script>

The output is as follows:

02:49:41.736 Square.js loaded OK
02:49:41.749 payments() OK
02:49:41.754 paymentRequest() OK
02:49:42.954 googlePay() OK — instance created
02:49:43.276 attach() OK — button rendered
02:49:45.492 — button clicked —
02:49:50.669 tokenize() status: Cancel
02:49:50.670 tokenize() non-OK: Cancel