I am using '@paypal/react-paypal-js' abstraction for react to enable payments on a website, the issue is on desktop it works like charm but on chrome / safari iphone the onApprove function doesn't run the I keep getting an endless spinner on the PayPal Btn what could be causing this issue ?
// Paypal provider
import { PayPalScriptProvider } from '@paypal/react-paypal-js';
import { PayPalButtons } from '@paypal/react-paypal-js';
<div style={{ margin: 20 }}>
<PayPalButtons
style={{
layout: 'vertical',
color: 'black',
shape: 'rect',
label: 'paypal',
}}
createOrder={async (data, actions) => {
const functions = getFunctions();
const paypalCreateOrder = httpsCallable(functions, 'paypalCreateOrder');
paypalCreateOrder(/*Empty*/).then((response: any) => {
return response.data.id;
});
}
}}
onApprove={async (data, actions) => {
alert('Payment Approved !!!');
// Cloud Function
const functions = getFunctions();
const paypalHandleOrder = httpsCallable(functions, 'paypalHandleOrder');
await paypalHandleOrder({ orderId: data.orderID })
.then((response: any) => {
_authContext.updatePremiumUntil();
})
.catch((error) => {
errorHandling(error, 'Payment error has happened', 'BodyPayPal onApprove', dispatch, setSnackBarMsg);
});
dispatch(setSnackBarMsg({ bool: true, msg: 'Payment has been accepted' }));
}}
onCancel={() => {
handleCancel();
}}
onError={(error) => {
errorHandling(error, 'Payment error has happened', 'BodyPayPal onError', dispatch, setSnackBarMsg);
}}
/>
</div>I don’t know if it is connected, but I believe there is a problem with the PayPal smart button checkout, I reported it to PayPal days ago as customers were experiencing the same problem. See this thread for what PayPal have said as they acknowledge there is a. Problem.