0

我正在努力让 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 操作。

任何帮助将不胜感激

4

0 回答 0