I'm struggling to get PayPal Checkout working in a React-Redux app; specifically, I can make a payment, however I'm unable to call a function passed as a prop when the payment succeeds, such that I can notify my backend API that the payment processed.
Here's the relevant code:
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;
The part I'm struggling with is in the onAuthorize function, which should call finishPayPalPayment, which dispatches an axios request to my backend, as well as a few other local redux actions.
Any help would be extremely appreciated