PayPal SDK 集成 react-paypal-button-v2 的网络超时问题

Question

您好，我在为我的练习网站实施 PayPal 时出错。错误如下所示。除非我点击智能按钮，否则代码可以正常工作，然后让它保持原样。我该如何处理这个错误？我正在使用 react-paypal-button-v2。此处还显示了按钮代码。

州代码

function OrderScreen() {

    ...
    const addPayPalScript = () => {
        const script = document.createElement('script')
        script.type = 'text/javascript'
        // const ClIENT_ID = process.env.REACT_APP_PAYPAL_CLIENT_ID
        script.src = `https://www.paypal.com/sdk/js?client-id=${CLIENT_ID}`
        script.async = true
        script.onload = () => { 
            setSdkReady(true)
        }
        document.body.appendChild(script)
    }
    
    useEffect(() => { 
        if(!order || successPay || order._id !== Number(orderId)) {
            dispatch({type: ORDER_PAY_RESET})
            dispatch(getOrderDetails(orderId))
        } else if (!order.isPaid) {
            if(!window.paypal) {
                addPayPalScript()
            } else {
                setSdkReady(true)
            }
        }
        
        if(error?.includes('token not valid')) {
            dispatch(logout())
            dispatch('login')
        }
    }, [dispatch, order, orderId, error, successPay])

    const successPaymentHandler = (paymentResult) => {
        dispatch(payOrder(orderId, paymentResult))
    }

按钮代码

           {!sdkReady ? (
                                        <Loader />
                                    ) : (
                                        <PayPalButton 
                                            createOrder={(data, actions) => {
                                                return actions.order.create({
                                                purchase_units: [{
                                                    amount: {
                                                    currency_code: "USD",
                                                    value: order.totalPrice
                                                    },
                                                   ...
                                                      }
                                                   
                                                }],
                                                application_context: {
                                                    locale: 'us-US',
                                                    shipping_preference: 'SET_PROVIDED_ADDRESS',
                                                  }
                                            
                                                });
                                            }}
                                            onSuccess={successPaymentHandler}
                                            onError={(err)=>setErrorPayPal(err)}
                                        />
                                    )}
                                </List

Answer 1

“统计”请求很可能被某些广告拦截或浏览器反跟踪机制拦截。不管细节如何，这都不是问题，完全忽略它。

---

另外，react-paypal-button-v2 不是官方包。考虑改用react-paypal-js。