Получите PayPal платеж с реагировать JS - PullRequest
0 голосов
/ 31 декабря 2018

Я установил компонент реагирования, чтобы получить кнопку 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 и использовал идентификатор клиента в своем коде.Пожалуйста, помогите, спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...