The issue is that strategy="beforeInteractive" doesn't work in client components - it only works in app/layout.tsx or _document.tsx. Let me fix this by changing the strategy to afterInteractive which is the correct approach for client components:

I changed the Script strategy from beforeInteractive to afterInteractive since beforeInteractive only works in layout/document files, not client components. I also added an onReady callback which fires when the script is ready to use - this ensures setupPayPalButtons() runs even if the component re-renders after the script has already loaded. Check your browser console for the debug logs to verify if the SDK is loading.

Let me install the PayPal React SDK and refactor to use the proper PayPalScriptProvider approach:

Now I'll rewrite the component to use the PayPal React SDK properly with PayPalScriptProvider and PayPalButtons components, which will fix the duplication issue and properly set the production environment:

I've completely refactored the PayPal integration to use the official @paypal/react-paypal-js package. Key changes:

1. PayPalScriptProvider wraps the entire component with clientId, currency: "EUR", and intent: "capture" - this properly configures the production environment
2. PayPalButtons component is used directly in each pricing card instead of manual DOM manipulation - this eliminates the button duplication issue
3. Removed all manual script loading code and the old setupPayPalButtons function
4. Each button has its own createOrder with console.log for debugging, plus proper onApprove and onError handlers
5. Both button containers have relative z-50 to ensure they're clickable on mobile