SquareTokenTest.js

SquareTokenTest.js

            const appId = 'sq0idp-yCB3jRpR0PbPfffcFBEVbA';
            const locationId = 'LGB4QKD1ME9BE';
            const username = 'xxxx';
            const amount = '500';
            const partyId = 'xx';
            const winningBidderId = 'xxxx';
            const auctionGroupId = 'xxxx';

            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,
                    username: username,
                    amount: amount,
                    partyId: partyId,
                    winningBidderId: winningBidderId,
                    auctionGroupId: auctionGroupId,
                });
                // Create a page to accept this post and return the payment response.
                const paymentResponse = await fetch('SquarePayment.ashx', {
                    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', 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);
                });
            });