我正在努力让 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 操作。
任何帮助将不胜感激