带有React的Paypal Checkout按钮不允许登录

Question

我在使用沙箱将Paypal与我的react应用程序集成时遇到问题。 当我单击按钮时，贝宝（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>
  )
}

贝宝按钮

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 。