Кнопка Paypal Checkout с React не позволяет войти в систему

Question

У меня проблемы с интеграцией Paypal с моим приложением реакции, использующим песочницу. Когда я нажимаю кнопку, открывается всплывающее окно PayPal, и когда я ввожу свои учетные данные для входа в систему, я получаю следующую ошибку:

Я могу видеть знак в форме, но он просто не позволяет мне войти, и вместо этого я прихожу, чтобы увидеть это сообщение.

App.js

import PaypalButton from './PaypalButton';

const CLIENT = {
  sandbox: 'xxxxx',
  production: 'xxxxx',
};

const ENV = process.env.NODE_ENV === 'production' ? 'production' : 'sandbox';

render() {     
  const onSuccess = (payment) =>
    console.log('Successful payment!', payment);

  const onError = (error) =>
    console.log('Erroneous payment OR failed to load script!', error);

  const onCancel = (data) =>
    console.log('Cancelled payment!', data);

  return(
    <div>
        <PaypalButton
          client={CLIENT}
          env={ENV}
          commit={true}
          currency={'USD'}
          total={500.00}
          onSuccess={onSuccess}
          onError={onError}
          onCancel={onCancel}
        />
    </div>
  )
}

PaypalButton

import React from 'react';
import ReactDOM from 'react-dom';
import scriptLoader from 'react-async-script-loader';

class PaypalButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showButton: false,
    };

    window.React = React;
    window.ReactDOM = ReactDOM;
  }

  componentDidMount() {
    const {
      isScriptLoaded,
      isScriptLoadSucceed
    } = this.props;

    if (isScriptLoaded && isScriptLoadSucceed) {
      this.setState({ showButton: true });
    }
  }

  componentWillReceiveProps(nextProps) {
    const {
      isScriptLoaded,
      isScriptLoadSucceed,
    } = nextProps;

    const isLoadedButWasntLoadedBefore =
      !this.state.showButton &&
      !this.props.isScriptLoaded &&
      isScriptLoaded;

    if (isLoadedButWasntLoadedBefore) {
      if (isScriptLoadSucceed) {
        this.setState({ showButton: true });
      }
    }
  }

  render() {
    const {
      total,
      currency,
      env,
      commit,
      client,
      onSuccess,
      onError,
      onCancel,
    } = this.props;

    const {
      showButton,
    } = this.state;

    const payment = () =>
      paypal.rest.payment.create(env, client, {
        transactions: [
          {
            amount: {
              total,
              currency,
            }
          },
        ],
      });

    const onAuthorize = (data, actions) =>
      actions.payment.execute()
        .then(() => {
          const payment = {
            paid: true,
            cancelled: false,
            payerID: data.payerID,
            paymentID: data.paymentID,
            paymentToken: data.paymentToken,
            returnUrl: data.returnUrl,
          };

          onSuccess(payment);
        });

    return (
      <div>
        {showButton && <paypal.Button.react
          env={env}
          client={client}
          commit={commit}
          payment={payment}
          onAuthorize={onAuthorize}
          onCancel={onCancel}
          onError={onError}
        />}
      </div>
    );
  }
}

export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);

Может кто-нибудь помочь мне решить эту проблему?

Answer 1

У меня была такая же проблема на прошлой неделе. Поработав некоторое время, песочница начала выдавать мне эту ошибку. Я отменил все свои коммиты, чтобы убедиться, что это не проблема с моим кодом. Через день или два он снова начал работать.

Кажется, это была проблема со средой песочницы PayPal. ( Видимо, это случается с лучшими из нас ).

Если бы вы отправляли неверные данные, вы бы увидели console.log ошибки.