search

paypal / paypal-js

Loading wrapper and TypeScript types for the PayPal JS SDK
Apache License 2.0
217 stars 75 forks source link

[Bug] Paypal Modals hidden behind <dialog> modals #528

Open wesbos opened 1 month ago

wesbos commented 1 month ago

Library used

Using the React library, but this exists with all implementations.

🐞 Describe the Bug

Using a PayPal button to pay, when clicking to open the popup window, paypal shows a modal that essentially disables the website while the work in being done in the popup:

Screenshot 2024-06-13 at 1 20 12 PM

This modal is injected into the body and has a z-index of 2147483647 but that does not go higher than CSS top-layer, on things like a <dialog> element shown with .showModal().

In my case - I have a checkout using a <dialog> element, and the paypal UI renders underneath it.

Stripe is also suffering from the same issue

The fix is to move Paypal modal to a native

element and if available (currently 100% browser support), use .showModal() to open it. Older browsers can still be polyfilled or just shown with CSS as your already are.

dkoenigroer commented 2 weeks ago

Sorry, just deleted my comment and opened another issue. I think its another problem.