使用react js

Question

我设置了一个React组件来获取PayPal按钮，以便我可以通过网站接收付款。 这是组件代码：

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 paypal = window.PAYPAL;
  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);

然后将组件导入到我的App.js文件中：

import React, { Component } from "react";
import PaypalButton from "./components/paypal/PayPal";
const CLIENT = {
     sandbox:"",
     production: ""
};

const ENV = process.env.NODE_ENV === "production" ? "production" : "sandbox";
class App extends Component {


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={0.3}
        onSuccess={onSuccess}
        onError={onError}
        onCancel={onCancel}
      />
    </div>

我设法获得了PayPal按钮，当我单击它时，它在浏览器中打开了一个带有PayPal登录表单的新窗口。

问题是，当我尝试使用正确的凭据以这种形式登录时，即使贝宝（PayPal）官方网站上使用了相同的凭据，也始终会显示“您的某些信息不正确”。我确实在PayPal上设置了一个企业帐户，并且在代码中使用了客户ID。 请帮助，谢谢