Paypal 成功付款后，贝宝抛出错误-窗口无响应。打扫干净

我正在用React实现Paypal支付网关。我正在跟踪一个消息

我能够完成付款程序，但在付款完成后，它不会从窗口抛出

响应。已清理

。在firefox中，我的应用程序崩溃，但在chrome中，它只将错误记录到控制台（没有崩溃）。

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)

从“../common/Paypal”导入Paypal；
常数imgStyle={
宽度：`150px`，
高度：`60px`
}
类Cart扩展组件{
状态={
快递类：“”
}
isValidPayment=（e）=>{
e、 预防默认值（）；
如果（！this.props.isAuthenticated）{
this.props.errorHandler（'请登录以继续'）；
this.props.history.push（'/user/sign'）；
}
否则{
返回true；
}
}
addOrders=（付款）=>{
this.props.successHandler（'付款成功。我们正在处理您的订单请求'）；
这是我的国家({
提交：正确
})
this.props.orderHandler（将订单数据发送到服务器）
.然后（（）=>{
这是我的国家({
提交：错误
})
this.props.history.push（“/”）
})
.catch（（）=>this.setState({
提交：错误
}))
}
onPaymentCancel=（数据）=>{
this.props.errorHandler（“您取消了付款”）；
console.log（'付款已取消！'，数据）；
}
onPaymentError=（err）=>{
log（err，'error'）；
this.props.errorHandler（`我们现在无法处理您的付款。`）
}
render（）{
设{isAuthenticated，}=this.props；
让{courierClass，isSubmitting}=this.state；
让totalPrice=0；
cart.items.forEach（{item，item\u quantity}）=>{
总价+=（项目价格*项目数量）
})
让env=‘沙盒’；
货币=英镑；
让风格={
形状：“rect”，
尺寸：'中等'，
标签：“签出”，
标语：错
} 
//总价格=总价格；
常量客户端={
沙盒：process.env.REACT\u APP\u sandbox\u APP\u ID，
}
返回(
{courierClass？：null
}
)
}
}
函数MapStateTops（状态）{
返回{
isAuthenticated:state.currentUser.isAuthenticated
}
}
导出默认连接（mapStateToProps，{}）（购物车）

**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);

从“React”导入React；
从“react dom”导入react dom；
从“反应异步脚本加载程序”导入脚本加载程序；
const{NODE_ENV，REACT_APP_SANDBOX_APP_ID，REACT_APP_PAYPAL_APP_ID}=process.ENV
类Paypal扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
showButton:false，
};
window.React=反应；
window.ReactDOM=ReactDOM；
}   
componentDidMount（）{
const{isScriptLoaded，IsScriptLoadSuccess}=this.props；
如果（isScriptLoaded&&ISScriptLoadSuccess）{
this.setState（{showButton:true}）；
}
}
组件将接收道具（下一步）{
常量{isScriptLoaded，IsScriptLoadSuccess}=nextProps；
const isLoadedButWasntLoadedBefore=！this.state.showButton&&！this.props.isScriptLoaded&&isScriptLoaded；
如果（isLoadedButWasntLoadedBefore）{
如果（ISScriptLoadSuccess）{
this.setState（{showButton:true}）；
}
}
}
组件将卸载（）{
//这是我的国家({
//showButton:false
// });
//this.paypal=null
}
render（）{
const paypal=window.paypal；
const{total，commit，onSuccess，onError，onCancel，}=this.props；
const{showButton}=this.state；
//让样式={
//尺寸：'小'，
//颜色：“金色”，
//形状：'药丸'，
//标签：“结账：只要2.99美元！”
// }
让env=NODE_env==='production'？'live'：'sandbox'；
货币=英镑；
常量客户端={
沙盒：反应\u应用程序\u沙盒\u应用程序\u ID，
live:REACT\u APP\u PAYPAL\u APP\u ID
}
持续付款=（）=>
paypal.rest.payment.create（环境、客户端、{
交易：[
{
金额：{
全部的
货币，
}
},
]}
);
const onAuthorize=（数据、操作）=>
actions.payment.execute（）
.然后（（）=>{
施工费用={
是的，
取消：假，
payerID:data.payerID，
paymentID:data.paymentID，
paymentToken:data.paymentToken，
returnUrl:data.returnUrl，
};
成功（付款）；
});
返回(
showButton？：空
);
}
}
导出默认脚本加载器（'https://www.paypalobjects.com/api/checkout.js"(Paypal),；

我还在其他组件中使用这个Paypal.js，同样的问题也存在。 请帮忙。我现在很头疼，今天我必须部署它

我也在PayPalGithub页面上搜索它，但他们说他们解决了这个问题

我是否需要更新payapl，如中所述

更新

我的

付款。返回URL

有错误

https://www.paypal.com/checkoutnow/error?paymentId=PAYID-syufsaddhew&token=EC shdgasdPayerID=dasgda

。 我将返回url设置为

localhost