Hello I am having an error implementing PayPal for my practice website. The error is shown below. Code otherwise works unless I click on smart button then leave it sitting. How can I error handle this? I am using react-paypal-button-v2. Button code is also shown here.
STATE CODE
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))
}
BUTTON CODE
{!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
>Solution :
Most likely that ‘stats’ request is being blocked by some adblock or browser anti-tracking mechanism. Regardless of the specifics it’s not a problem, ignore it completely.
Separately, react-paypal-button-v2 is not an official package. Consider using react-paypal-js instead.