Web Payments SDK Card container not showing

Problem :
Only Pay button is showing and input fields for card is not showing. No errors in console. everything loading correctly.

<?php

?>
<!doctype html>
<html>

<head>
    <link href="<?php echo BASE; ?>assets/css/app.css" rel="stylesheet" />
    <script
        type="text/javascript"
        src="https://sandbox.web.squarecdn.com/v1/square.js"></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>

    <script>
        const appId = 'sandbox-sq0idb-qf0eluugdyZ8rAH_5PcMBg';
        const locationId = 'L32DBA406JD41';

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

            return card;
        }

        async function createPayment(token, verificationToken) {
            const body = JSON.stringify({
                locationId,
                sourceId: token,
                verificationToken,
                idempotencyKey: window.crypto.randomUUID(),
            });

            const paymentResponse = await fetch('/process', {
                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);
            }
        }

        // Required in SCA Mandated Regions: Learn more at https://developer.squareup.com/docs/sca-overview
        async function verifyBuyer(payments, token) {
            const verificationDetails = {
                amount: '1.00',
                billingContact: {
                    givenName: 'John',
                    familyName: 'Doe',
                    email: '[email protected]',
                    phone: '3214563987',
                    addressLines: ['123 Main Street', 'Apartment 1'],
                    city: 'London',
                    state: 'LND',
                    countryCode: 'GB',
                },
                currencyCode: 'GBP',
                intent: 'CHARGE',
            };

            const verificationResults = await payments.verifyBuyer(
                token,
                verificationDetails,
            );
            return verificationResults.token;
        }

        // 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;
            }

            async function handlePaymentMethodSubmission(event, card) {
                event.preventDefault();

                try {
                    // disable the submit button as we await tokenization and make a payment request.
                    cardButton.disabled = true;
                    const token = await tokenize(card);
                    const verificationToken = await verifyBuyer(payments, token);
                    const paymentResults = await createPayment(
                        token,
                        verificationToken,
                    );
                    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>
</body>

</html>

How I can fix this error, I cannot see any error messages in my developer console.

here is my console

@Bryan-Square here i created new topic.

Are you trying to render the form field in an iframe? :slightly_smiling_face:

No… I think the square library is not getting effect, because i tried to change the appId to invalid, that also not getting any errors.

I tried in a seperate folder, then it works. but i need to implement this into a existing project.

If it’s working in a different repo then there must be a nesting issue within the repo your using when initializing the SDK. :slightly_smiling_face:

Nesting means, can you elaborate please ?

If it’s working outside of your project but not working in your project do you have it at the right level in the repo or the routs to render the the form field correctly set? :slightly_smiling_face:

Have you tried a different browser? Microsoft Edge does not let you enter a credit card number. Square knows about the problem but does not seem in a hurry to fix it.