PayPal SDK 集成 react-paypal-button-v2 上的網絡超時問題

Question

您好，我在為我的練習網站實施 PayPal 時出錯。 錯誤如下所示。 除非我點擊智能按鈕，否則代碼可以正常工作，然后讓它保持原樣。 我該如何處理這個錯誤？ 我正在使用 react-paypal-button-v2。 按鈕代碼也顯示在這里。

STATE 代碼

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 不是官方的 package。 考慮改用react-paypal-js 。