[BUG] PayPal Button shows duplicate, double buttons

[OmerMessing]

To Do First

• [x] Did you try latest release? - Yes.
• [x] Did you look for existing matching issues? - Yes.

Software Package Version: v2.6.3

Describe the bug

I see the PayPal button double, I tried downgrading to react-paypal-button-v2@2.6.2 but I still see the same result. I tried moving the button in the page to different places in the code but it always shows double buttons.

The button is working but I also have this error in the console:

b.sbox.stats.paypal.com/v2/counter.cgi?p=uid_3890f557ca_mtu6mdc6nda&s=SMART_PAYMENT_BUTTONS:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

To Reproduce

1. Put the PayPalButton somewhere in your code with the required props and run the page on the browser.

Expected behavior

A single button is supposed to render.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS
• Browser: [e.g. chrome, safari] Chrome
• React Version: [e.g. 22] 18.0.0

Additional context

[DominicHulsey]

I had this issue also OmerMessing, figured it out. Using strictMode causes duplicate render. disable this in app initialization. If you used create-react-app and typescript like I did, do this in App.tsx:

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  //remove this tag
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

[lmwenda]

i got this as well i'm using nextjs

[wangxingxing123654]

+1

[nabilzouhir]

If you're using NextJS go to next.config.js and set reactStrictMode: false