Uncaught TypeError: paymentForm.requestCardNonce is not a function 令牌未生成

Question

未捕获的类型错误：paymentForm.requestCardNonce 不是函数令牌未生成。请发送任何建议或任何链接。实际上我集成了 Square Payment API，但它没有加载或错误。如果您有任何参考，请发送给我和显示 const moviesRouteMatch = useRouteMatch("/movies"); const newsRouteMatch = useRouteMatch("/news"); const uploadRouteMatch = useRouteMatch("/uploads");

const PaymentForm = ({ paymentForm }) => {
  const [details, setDetails] = useState({
    cardBrand: '',
    nonce: undefined,
    googlePay: false,
    applePay: false,
    masterpass: false,
  });
  const requestCardNonce = () => {
    paymentForm.requestCardNonce();
  };
  useEffect(() => {
    const config = {
      applicationId: 'sandbox-sq0idb-5SScYBbnEFt3pv9JwVjeRw',
      locationId: 'LQTHZ296Y4X5N',
      inputClass: 'sq-input',
      autoBuild: false,
      inputStyles: [
        {
          fontSize: '16px',
          fontFamily: 'Helvetica Neue',
          padding: '16px',
          color: '#373F4A',
          backgroundColor: 'transparent',
          lineHeight: '1.15em',
          placeholderColor: '#000',
          _webkitFontSmoothing: 'antialiased',
          _mozOsxFontSmoothing: 'grayscale',
        },
      ],
      applePay: {
        elementId: 'sq-apple-pay',
      },
      masterpass: {
        elementId: 'sq-masterpass',
      },
      googlePay: {
        elementId: 'sq-google-pay',
      },
      cardNumber: {
        elementId: 'sq-card-number',
        placeholder: '• • • •  • • • •  • • • •  • • • •',
      },
      cvv: {
        elementId: 'sq-cvv',
        placeholder: 'CVV',
      },
      expirationDate: {
        elementId: 'sq-expiration-date',
        placeholder: 'MM/YY',
      },
      postalCode: {
        elementId: 'sq-postal-code',
        placeholder: 'Zip',
      },
      callbacks: {
        methodsSupported: (methods) => {
          if (methods.googlePay) {
            setDetails({
              ...details,
              googlePay: methods.googlePay,
            });
          }
          if (methods.applePay) {
            setDetails({
              ...details,
              applePay: methods.applePay,
            });
          }
          if (methods.masterpass) {
            setDetails({
              ...details,
              masterpass: methods.masterpass,
            });
          }
          return;
        },
        createPaymentRequest: () => {
          return {
            requestShippingAddress: false,
            requestBillingInfo: true,
            currencyCode: 'USD',
            countryCode: 'US',
            total: {
              label: 'MERCHANT NAME',
              amount: '100',
              pending: false,
            },
            lineItems: [
              {
                label: 'Subtotal',
                amount: '100',
                pending: false,
              },
            ],
          };
        },
        cardNonceResponseReceived: (errors, nonce, cardData) => {
          if (errors) {
            // Log errors from nonce generation to the Javascript console
            console.log('Encountered errors:');
            errors.forEach(function (error) {
              console.log('  ' + error.message);
            });
            return;
          }
          setDetails({
            ...details,
            nonce: nonce,
          });
        },
        unsupportedBrowserDetected: () => {},
        inputEventReceived: (inputEvent) => {
          switch (inputEvent.eventType) {
            case 'focusClassAdded':
              break;
            case 'focusClassRemoved':
              break;
            case 'errorClassAdded':
              document.getElementById('error').innerHTML =
                'Please fix card information errors before continuing.';
              break;
            case 'errorClassRemoved':
              document.getElementById('error').style.display = 'none';
              break;
            case 'cardBrandChanged':
              if (inputEvent.cardBrand !== 'unknown') {
                setDetails({
                  ...details,
                  cardBrand: inputEvent.cardBrand,
                });
              } else {
                setDetails({
                  ...details,
                  cardBrand: '',
                });
              }
              break;
            case 'postalCodeChanged':
              break;
            default:
              break;
          }
        },
        paymentFormLoaded: function () {
          document.getElementById('name').style.display = 'inline-flex';
        },
      },
    };
    paymentForm = new paymentForm(config);
    paymentForm.build();
  }, []);**