reactjspaypal

PayPalButtons working on desktop but onApprove() function don't run?


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>


Solution

  • 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.

    https://www.paypal-community.com/t5/REST-APIs/Failed-transactions-using-PayPal-Payments-API/m-p/3033825#M8130