Paypal结账按钮与反应js和jsx

时间:2017-11-15 08:35:18

标签: javascript reactjs paypal

在页面上集成Paypal结帐按钮时,我遇到了一些错误。当我点击按钮时,应该打开一个PayPal,但在我的情况下,我不知道为什么弹出窗口没有正确显示,它会打开并关闭。谁能告诉我我做错了什么?

  

控制台出错:index.js:1193警告:道具类型失败:道具   client中标记为PaypalButton,但其值为。{1}}   undefined。       在PaypalButton中(由ScriptLoader创建)       在ScriptLoader中(由MyApp创建)       在MyApp中

这是我的代码。

PaypalExpressCheckOut.js

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

class PaypalButton extends React.Component {
  constructor(props) {
    super(props);
    window.React = React;
    window.ReactDOM = ReactDOM;
    this.state = {
      showButton: false,
      env: 'sandbox', // Or 'sandbox'
      client: {
        sandbox: 'AVYr65d7UewdrCT5k8sa5ywOSHCsTEZOuYT5eJJhTIW9IAyUXZltXmWeYLn_qaFYr7_Iq44kSJrReuMT', // sandbox client ID
        production: 'AZPD3t-x0T3zF5-8TgZKhkIcWPAirBEEGE5xxk14ejRPhgiUwpnIxBtnC9BnrxGJCoMof9Gr2iXYhSNs' // production client ID
      },
      commit: true, // Show a 'Pay Now' button
    };
  }
  componentDidMount() {
    const { isScriptLoaded, isScriptLoadSucceed } = this.props;
    if (isScriptLoaded && isScriptLoadSucceed) {
      this.setState({ showButton: true });
    }
  }
  componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
    if (!this.state.show) {
      if (isScriptLoaded && !this.props.isScriptLoaded) {
        if (isScriptLoadSucceed) {
          this.setState({ showButton: true });
        } else {
          console.log('Cannot load Paypal script!');
          this.props.onError();
        }
      }
    }
  }

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

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

    let ppbtn = '';
    if (this.state.showButton) {
      ppbtn = (<paypal.Button.react
        env={this.state.env}
        client={this.state.client}
        payment={payment}
        commit
        onAuthorize={onAuthorize}
        onCancel={this.props.onCancel}
      />);
    }
    return <div>{ppbtn}</div>;
      // console.log('client', client)
  }
}

PaypalButton.propTypes = {
  currency: PropTypes.string.isRequired,
  total: PropTypes.number.isRequired,
  client: PropTypes.object.isRequired,
};

PaypalButto.log('The payment was succeeded!', payment);
  },
  onCancel: (data) => {
    console.log('The payment was cancelled!', data);
  },
  onError: (err) => {
    console.log('Error loading Paypal script!', err);
  },
};

export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);n.defaultProps = {
  env: 'sandbox',
  onSuccess: (payment) => {
    console.log('The payment was succeeded!', payment);
  },
  onCancel: (data) => {
    console.log('The payment was cancelled!', data);
  },
  onError: (err) => {
    console.log('Error loading Paypal script!', err);
  },
};

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

App.jsx

import React from 'react';
import PaypalExpressBtn from './PayPalExpressCheckOut';

export default class MyApp extends React.Component {
    render() {    
        const onSuccess = (payment) => {
            console.log("Your payment was succeeded!", payment);
        }         
        const onCancel = (data) => {
            // User pressed "cancel" or close Paypal's popup! 
            console.log('You have cancelled the payment!', data);
        }         
        const onError = (err) => {
 // The main Paypal's script cannot be loaded or somethings block the loading of that script! 
            console.log("Error!", err);
// Since the Paypal's main script is loaded asynchronously from "https://www.paypalobjects.com/api/checkout.js" 
// => sometimes it may take about 0.5 second for everything to get set, or for the button to appear      
        }               
        let currency = 'USD'; // or you can set this value from your props or state   
        let total = 1.00; // same as above, this is the total amount (based on currency) to be paid by using Paypal express checkout 
 return (
    console.log(currency),
    console.log(total),
            <PaypalExpressBtn 
currency={currency}
total={total}
onError={onError}
onSuccess={onSuccess}
onCancel={onCancel}
 />
        );
    }  
 }

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyApp from './App.jsx';

ReactDOM.render(<MyApp />, document.getElementById('app'));

的index.html

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
      <link rel = "stylesheet" type = "text/css" href = "css/style.css">
   </head>

   <body>
      <div id = "app"></div>
      <!-- <link rel = "stylesheet" type = "text/css" href = "/css/style.css"> -->
      <script src = "index.js"></script>
   </body>

</html>

0 个答案:

没有答案