2

I don't know why the button won't render properly on the screen. I've copied & pasted the example from the docs found here:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/app.css" rel="stylesheet" />
<script
  type="text/javascript"
  src="https://sandbox.web.squarecdn.com/v1/square.js"
></script>
<script>
  const appId = 'xxxxx';
  const locationId = 'xxxxx';

  function buildPaymentRequest(payments) {
    const paymentRequest = payments.paymentRequest({
      countryCode: 'US',
      currencyCode: 'USD',
      total: {
        amount: '1.00',
        label: 'Total',
      },
    });
    return paymentRequest;
  }

  async function initializeCashApp(payments) {
    const paymentRequest = buildPaymentRequest(payments);
    const cashAppPay = await payments.cashAppPay(paymentRequest, {
      redirectURL: window.location.href,
      referenceId: 'my-website-00000001',
    });
    const buttonOptions = {
      shape: 'semiround',
      width: 'full',
    };
    await cashAppPay.attach('#cash-app-pay', buttonOptions);
    return cashAppPay;
  }

  async function createPayment(token) {
    const body = JSON.stringify({
      locationId,
      sourceId: token,
    });

    const paymentResponse = await fetch('/payment', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body,
    });

    if (paymentResponse.ok) {
      return paymentResponse.json();
    }

    const errorBody = await paymentResponse.text();
    throw new Error(errorBody);
  }

  // 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 cashAppPay;
    try {
      cashAppPay = await initializeCashApp(payments);
    } catch (e) {
      console.error('Initializing Cash App Pay failed', e);
    }
    if (cashAppPay) {
      cashAppPay.addEventListener(
        'ontokenization',
        async function ({ detail }) {
          const tokenResult = detail.tokenResult;
          if (tokenResult.status === 'OK') {
            const paymentResults = await createPayment(tokenResult.token);

            displayPaymentResults('SUCCESS');
            console.debug('Payment Success', paymentResults);
          } else {
            let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;

            if (tokenResult.errors) {
              errorMessage += ` and errors: ${JSON.stringify(
                tokenResult.errors
              )}`;
            }
            displayPaymentResults('FAILURE');
            throw new Error(errorMessage);
          }
        }
      );
    }
  });
</script>

Pay $1.00

a screenshot of the above code block is below

enter image description here

Just can't get my head around why the button won't show since the code is from the docs? All feedback is welcome...

EDIT

After adding the app.css as suggested now it tells me the application and/or locationId are incorrect (see attached screenshot)? Copied and pasted directly from the developer console so I hope someone else has been through this issue before

enter image description here

EDIT #2

it works when using localhost as the url (see screenshot)

enter image description here

JC23
  • 1,248
  • 4
  • 18
  • 28
  • 1
    Did you copy over the css found in app.css? https://github.com/square/web-payments-quickstart/blob/main/public/app.css – b.stevens.photo Sep 01 '22 at 16:58
  • Thanks for reply @b.stevens.photo I missed that but have since added it & now you can see another issue from my edit.... – JC23 Sep 02 '22 at 20:50
  • Check this line in the readme at the root of that GitHub repo - re: Credentials - https://github.com/square/web-payments-quickstart/blob/main/README.md#credentials – b.stevens.photo Sep 03 '22 at 20:05
  • thanks again @b.stevens.photo found that I must use localhost as the url (flask is my backend).. it's a quirk because already have a working implementation that will be deprecated so I knew the appId & locationId are correct.. go figure – JC23 Sep 04 '22 at 19:17

0 Answers0