Paypal Checkout按钮,React不允许登录

问题描述 投票:1回答:1

我在使用沙盒将Paypal与我的反应应用程序集成时遇到问题。当我点击按钮时,会打开一个PayPal弹出窗口,当我输入我的凭据登录时,我收到以下错误:

Paypal popup Paypal error

我能够看到登录表单,但它不会让我登录,而是来看看那条消息。

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);

有人可以帮我解决这个问题吗?

javascript reactjs paypal
1个回答
0
投票

我上周遇到了同样的问题。工作了一段时间后,沙箱开始给我这个错误。我还原了所有提交,以确保它不是我的代码的问题。一两天后,它再次开始工作。

似乎这是PayPal的沙盒环境的一个问题。 (Apparently it happens to the best of us)。

如果你发送的数据不正确,你会看到错误的console.log

© www.soinside.com 2019 - 2024. All rights reserved.