React,PayPal Checkout,TypeError无法读取道具'未定义的

时间:2018-01-31 04:10:03

标签: reactjs paypal react-props

我努力让PayPal Checkout在React-Redux应用程序中运行;具体来说,我可以付款,但是当付款成功时,我无法调用作为道具传递的功能,这样我就可以通知我的后端API处理了付款。

以下是相关代码:

import React from 'react';
import ReactDOM from 'react-dom';
import paypal from 'paypal-checkout';
import PropTypes from 'prop-types';
import { finishPayPalPayment } from '../../actions/billingActions';

const Button = paypal.Button.driver('react', { React, ReactDOM });

class PayPalButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      env: 'sandbox',
      client: {
        sandbox: '...',
        production: '...'
      },
      amount: this.props.amount,
      currency: this.props.currency,
      commit: this.props.commit
    };
    this.onAuthorize = this.onAuthorize.bind(this);
    this.payment = this.payment.bind(this);
  }

  static propTypes = {
    amount: PropTypes.number.isRequired,
    currency: PropTypes.string.isRequired,
    commit: PropTypes.bool.isRequired,
    unpaidChargeId: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired,
    finishPayPalPayment: PropTypes.func.isRequired
  };

  payment(data, actions) {
    return actions.payment.create({
      transactions: [
        {
          amount: { total: this.state.amount, currency: this.state.currency }
        }
      ]
    });
  }

  onAuthorize = (data, actions) => {
    return actions.payment.execute().then(function(response) {
      this.props.dispatch(finishPayPalPayment(this.props.unpaidChargeId, this.state.amount, this.props.title, this.props.description));
      console.log("Success");
    });
  }

  render() {
    return (
      <Button
        commit={ this.state.commit }
        env={ this.state.env }
        client={ this.state.client }
        payment={ (data, actions) => this.payment(data, actions) }
        onAuthorize={ this.onAuthorize }
      />
    );
  }
}

export default PayPalButton;

我正在努力的部分是在onAuthorize函数中,它应该调用finishPayPalPayment,它向我的后端发送一个axios请求,以及一些其他本地redux动作。

非常感谢任何帮助

0 个答案:

没有答案