after successfull payment, paypal throw error - No Response from window. cleaned up - paypal

Question

I'm implementing Paypal payment gateway with React. I'm following a a tutorial from robinwieruch.de.
I'm able to complete payment procedure, but after payment completed it throws no response from window. cleaned up. in firefox my app crashes, but in chrome, it only logs the error to console(no crashing).
Cart.js
import Paypal from '../common/Paypal';
const imgStyle = {
width: `150px`,
height: `60px`
}
class Cart extends Component{
state = {
courierClass: ''
}
isValidPayment = (e)=>{
e.preventDefault();
if(!this.props.isAuthenticated){
this.props.errorHandler('please signin to continue');
this.props.history.push('/user/signin');
}
else {
return true;
}
}
addOrders = (payment) => {
this.props.successHandler('payment successful. we are processing you order request');
this.setState({
isSubmitting: true
})
this.props.orderHandler(send order data to server)
.then(()=>{
this.setState({
isSubmitting: false
})
this.props.history.push('/')
})
.catch(()=> this.setState({
isSubmitting: false
}))
}
onPaymentCancel = (data) => {
this.props.errorHandler('you cancel the payment');
console.log('The payment was cancelled!', data);
}
onPaymentError = (err) => {
console.log(err, 'error');
this.props.errorHandler(`we can't process your payment now.`)
}
render(){
let { isAuthenticated,} = this.props;
let {courierClass, isSubmitting} = this.state;
let totalPrice = 0;
cart.items.forEach(({item, item_quantity})=>{
totalPrice += (item.price * item_quantity)
})
let env = 'sandbox';
let currency = 'GBP';
let style={
shape: 'rect',
size: 'medium',
label: 'checkout',
tagline: false
}
// let total = totalPrice;
const client = {
sandbox: process.env.REACT_APP_SANDBOX_APP_ID,
}
return (
<div className="container">
{ courierClass ? <Paypal
env={env}
client={client}
currency={currency}
total={totalPrice}
style={style}
onClick={this.isValidPayment}
onError={this.onPaymentError}
onSuccess={this.addOrders}
onCancel={this.onPaymentCancel} /> : null
}
</div>
)
}
}
function mapStateToProps(state){
return {
isAuthenticated: state.currentUser.isAuthenticated
}
}
export default connect(mapStateToProps, {})(Cart)
** Paypal.js **
import React from 'react';
import ReactDOM from 'react-dom';
import scriptLoader from 'react-async-script-loader';
const {NODE_ENV, REACT_APP_SANDBOX_APP_ID, REACT_APP_PAYPAL_APP_ID } = process.env
class Paypal extends React.Component {
constructor(props) {
super(props);
this.state = {
showButton: false,
};
window.React = React;
window.ReactDOM = ReactDOM;
}
componentDidMount() {
const { isScriptLoaded, isScriptLoadSucceed } = this.props;
if (isScriptLoaded && isScriptLoadSucceed) {
this.setState({ showButton: true });
}
}
componentWillReceiveProps(nextProps) {
const { isScriptLoaded, isScriptLoadSucceed } = nextProps;
const isLoadedButWasntLoadedBefore = !this.state.showButton && !this.props.isScriptLoaded && isScriptLoaded;
if (isLoadedButWasntLoadedBefore) {
if (isScriptLoadSucceed) {
this.setState({ showButton: true });
}
}
}
componentWillUnmount(){
// this.setState({
// showButton: false
// });
// this.paypal = null
}
render() {
const paypal = window.PAYPAL;
const { total, commit, onSuccess, onError, onCancel,} = this.props;
const { showButton} = this.state;
// let style = {
// size: 'small',
// color: 'gold',
// shape: 'pill',
// label: 'checkout: Just $2.99!'
// }
let env = NODE_ENV === 'production' ? 'live' : 'sandbox' ;
let currency = 'GBP';
const client = {
sandbox: REACT_APP_SANDBOX_APP_ID,
live: REACT_APP_PAYPAL_APP_ID
}
const payment = () =>
paypal.rest.payment.create(env, client, {
transactions: [
{
amount: {
total,
currency,
}
},
]}
);
const onAuthorize = (data, actions) =>
actions.payment.execute()
.then(() => {
const payment = {
paid: true,
cancelled: false,
payerID: data.payerID,
paymentID: data.paymentID,
paymentToken: data.paymentToken,
returnUrl: data.returnUrl,
};
onSuccess(payment);
});
return (
showButton ? <paypal.Button.react
env={env}
client={client}
commit={commit}
payment={payment}
onAuthorize={onAuthorize}
onCancel={onCancel}
onError={onError}
style={{
shape: 'rect',
size: 'medium',
label: 'pay',
tagline: false
}}
/> : null
);
}
}
export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(Paypal);
I'm using this Paypal.js in other Components also, the same issue is there also.
please help. it's become a headache for me now and i have to deploy this today.
I also search for it on paypal github page, but they said that they resolved the issue paypal issue.
do i need to update the payapl as documented at paypal docs
Update
my payment.returnUrl has error https://www.paypal.com/checkoutnow/error?paymentId=PAYID-syufsaddhew&token=EC-shdgasdPayerID=dasgda.
i setup the return url to localhost