PayPal Button Not Responding After Clicking “Pay” – React Integration

I’m integrating PayPal into my React app using the @paypal/react-paypal-js library, and I’m encountering an issue. When I click the “Pay” button after entering all payment details, nothing happens—the payment process doesn’t proceed, and no confirmation or error message appears.

The rest of the PayPal setup, including creating the order, works without issues. However, the final “Pay” button click doesn’t trigger any action, and there are no visible errors. I’ve tried several troubleshooting steps, but I’m not sure what else to check.

Here’s the code for my PayPal component:

import { clientId, ROOT_URL } from "../utils/constants";
import { useState } from "react";

const PayPalComponent = ({ amount, handlePayment }) => {
const [orderId, setOrderId] = useState(null);

return (
  <PayPalScriptProvider options={{ "client-id": clientId, currency: "USD", components: "buttons,funding-eligibility" }}>
    <div>
      <h2>Complete Payment</h2>
      <PayPalButtons
        fundingSource={FUNDING.CARD}
        createOrder={async (data, actions) => {
          try {  
            const order = await fetch(
              `${ROOT_URL}/paypal/create-order`,
              {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({ amount: amount }),
              }
            );  
            const result = await order.json();
            if (result.status === "success") {
              setOrderId(result.data.id);
              return result.data.id;
            }
          } catch (error) {
            console.error("Error creating order:", error);
            throw error;
          }
        }}
        onApprove={async (data, actions) => {
          try {
            if (orderId) {
              const order = await fetch(
                `${ROOT_URL}/paypal/capture-order/${orderId}`,
                {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                }
              );  
              const result = await order.json();
              console.log(result, "Results");
              if (result.status === "success") {
                handlePayment(true, orderId, data.payerID);
              }
            }
          } catch (error) {
            console.error("Error capturing order:", error);
            throw error;
          }
        }}
        onError={(err) => {
          console.error("Payment Error:", err);
        }}
        style={{ layout: "vertical" }}
        funding={{ disallowed: [FUNDING.PAYPAL] }}
      />
    </div>
  </PayPalScriptProvider>
);
};

export default PayPalComponent;```


Troubleshooting Steps I’ve Tried
Checked Browser Compatibility:

I tried different browsers and cleared the cache and cookies to ensure there were no issues caused by outdated or cached data.
I also checked that my browser's pop-up blocker was disabled to ensure that PayPal could open necessary pop-ups for payment.
Checked Developer Console for JavaScript Errors:

There are no JavaScript errors in the console when I click the "Pay" button, which makes it difficult to debug the issue.
PayPal Account Settings:

Verified that my PayPal account is active and that it supports the currency being used in the app.
Tried Different Devices and Browsers:

Tested on multiple devices and browsers to ensure the issue wasn't device-specific, but the problem persists.
Updated PayPal SDK:

I confirmed that my @paypal/react-paypal-js package is up-to-date to avoid issues due to outdated code.
Checked Network and Internet Connection:

Verified that the internet connection is stable during testing, so network interruptions are unlikely to be the cause.