dfabulich_code

[granite jay]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1316936517612208218

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[strange knoll]

Hi, will be here after a MTG

[strange knoll]

Hi there, are you using an embeded Checkout?

I don't see that z-index. Looking forward to your URL

[keen yew]

To repro, go to https://www.choiceofgames.com/beta/broadsides/

It's secured behind basic authentication, username "beta" password "yardarm"

Click "Buy It Now"

Login as [e-mail] password stripe

Select payment method "Card"

Use the "Payment requires authentication" card 4000002500003155

Expected: The 3D Secure popup should appear
Actual: The background darkens a little extra; the 3D Secure popup is behind the <dialog>.

As for the z-index, run this in the Dev Tools console:

document.querySelector("iframe[name='embedded-checkout-modals']").parentElement

You'll see that Stripe added this element:

<div tabindex=​"-1" style=​"display:​ block !important;​ position:​ fixed !important;​ z-index:​ 2147483647 !important;​ inset:​ 0px !important;​ margin:​ 0px !important;​ padding:​ 0px !important;​ visibility:​ hidden !important;​ opacity:​ 0 !important;​">​<iframe name=​"embedded-checkout-modals" allow=​"publickey-credentials-get *" src=​"https:​/​/​js.stripe.com/​v3/​embedded-checkout-modal-bbbdd5ee64c3ba852a522098d9f7dc69c3a5d49f.html" tabindex=​"-1" style=​"position:​ absolute !important;​ left:​ 0px !important;​ top:​ 0px !important;​ height:​ 100% !important;​ width:​ 100% !important;​ border:​ none !important;​">​…​</iframe>​</div>​

Note the z-index: 2147483647. It's quite high, but nothing can be as high as a <dialog>.

[strange knoll]

I see. Not sure if this is related but can you share how you initialized this <dialog>?

[keen yew]

Here's code copied and pasted from ui.js linked from this page

window.Stripe(window.stripeKey).initEmbeddedCheckout({fetchClientSecret, onComplete: handleComplete}).then(function (result) {
        checkout = result;
        var dialog = document.createElement("dialog");
        dialog.setAttribute("id", "checkoutDialog");
        var closeButton = document.createElement("button");
        closeButton.innerHTML = "X";
        closeButton.addEventListener("click", function () {
          checkout.destroy();
          dialog.remove();
        })
        closeButton.setAttribute("class", "close");
        dialog.appendChild(closeButton);
        var checkoutDiv = document.createElement("div");
        checkoutDiv.setAttribute("id", "checkout");
        dialog.appendChild(checkoutDiv);
        dialog.addEventListener("click", function(e) {
          if (e.target === this) {
            checkout.destroy();
            this.remove();
          }
        })
        document.body.appendChild(dialog);
        dialog.showModal();
        checkout.mount(document.getElementById('checkout'));
      }).catch(function (e) {
        console.error(e);
        return asyncAlert("Sorry, we weren't able to initiate payment. (Your " +
          "network connection may be down.) Please refresh the page and try again, or contact " +
          "[e-mail] for assistance.");
      });
    }

There's not a lot of magic here; the magic is in the <dialog> element itself, which appears in the "top layer." https://developer.mozilla.org/en-US/docs/Glossary/Top_layer

[strange knoll]

hmm

[sour wasp]

Hi @keen yew I'm taking over this thread, let me take a look