[Bug] Bug report

[grzkracol]

Library used

@paypal/react-paypal-js, ver 8.1.3

🐞 Describe the Bug

In Mozilla Firefox(130.0) onClick event is raised after Paypal Popup window is opened.

🔬 Minimal Reproduction

Here's the example code we use in our system to render paypal buttons.

<PayPalScriptProvider
                    options={{
                        clientId: response.ClientId,
                        currency: response.Currency,
                    }}
                >
                    <PayPalButtons
                        style={{
                            layout: 'horizontal',
                            color: 'black',
                            height: 48,
                            shape: 'rect',
                            tagline: false,
                        }}
                        onApprove={(data, actions) =>
                            onApprove(
                                data,
                                actions,
                                response.PaymentProviderId
                            )
                        }
                        createOrder={() =>
                            createOrder(response.PaypalOrderId)
                        }
                        onClick={(data, actions) => {
                            if (window.validateAcceptTermsCheckbox()) {
                                return actions.resolve(data);
                            }
                            return actions.reject();
                        }}
                    />
                </PayPalScriptProvider>

This code works perfectly fine for Chrome and Edge browsers. But runs incorrectly for Firefox.

😕 Actual Behavior

Paypal modal window is opened, then (because window.validateAcceptTermsCheckbox() resolves to false) the popup is closed.
That looks unprofessional.

🤔 Expected Behavior

onClick is fired before the popup is opened. So the code has a real chance to run some validation and decide whether to open the modal or not.

🌍 Environment

• Node.js/npm: - node 20.15.0 / npm 10.7.0
• OS: - Windows 10 Enterprise, 22H2
• Browser: - Mozilla Firefox (130.0)

➕ Additional Context

Add any other context about the problem here.

[renarsvilnis]

Happens in Chrome 130.0.6723.92 as well using "@paypal/react-paypal-js": "8.7.0". The popup opens and doesn't wait for onClick function to settle.

Doesn't work like the documentation states in https://developer.paypal.com/docs/checkout/standard/customize/validate-user-input/#asynchronous-validation-

Our use-case is that we want the payment button to be enabled to always trigger form validation on-click and prevent popup-opening if there are issues.

Example:

<PayPalButtons
  fundingSource={FUNDING.PAYPAL}
  key={FUNDING.PAYPAL}
  disabled={shouldDisableBuyNowBtn}
  createOrder={createPaypalOrder}
  onCancel={onPaypalCancel}
  onApprove={onPaypalApproveOrder}
  onError={onPaypalError}
  onClick={(data, actions) => {
    console.log('Paypal onClick');
    return new Promise((resolve, reject) => {
      console.log('Faking async validation delay 1000ms')
      setTimeout(async () => {
        console.log('Issue rejection');
        await actions.reject();
        reject();
      }, 1000);
    })
  }}
/>

[wsbrunson]

@renarsvilnis because of Transient User Activation we always have to open the popup when the buyer clicks on the PayPal button.

If we delay opening the popup, some browsers will treat it like an unwanted popup ad and block it.

If you return false from onClick, we will close the popup immediately before running createOrder but we will always have to open the popup.