Square Cash App Pay按钮渲染异常及凭证错误问题求助

不清楚为何Cash App Pay按钮无法在页面正常渲染，已复制官方文档中的示例代码如下：

<!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>

支付1.00美元 #

上述代码块的截图：

实在无法理解为何复制官方代码后按钮仍不显示，欢迎各位提供解决建议...

编辑1 #

按照建议添加app.css后，系统提示应用ID和/或位置ID不正确（截图如下），该凭证是直接从开发者控制台复制的，希望有遇到过此问题的用户提供帮助。

编辑2 #

使用localhost作为URL时功能可正常运行（截图如下）

内容的提问来源于stack exchange，提问作者JC23