Why Unbounce modal overlays interfered with embedded Stripe checkout and the z-index + click passthrough patch that recovered payments

Published On - November 27, 2025

Emily Harris

When integrating modern web technologies, it’s not uncommon to stumble upon unexpected behavior between third-party tools. This was the case with a particularly frustrating issue involving modal overlays in Unbounce and the embedded Stripe checkout interface. The issue resulted in failed payments, lost customer conversions, and a fair share of headaches for developers and marketers alike. Thankfully, with a deeper understanding of stacking contexts, z-index properties, and CSS click behavior, a workable solution was eventually found.

TL;DR

Unbounce’s modal overlays created a stacking context problem that interfered with embedded Stripe checkout components. This caused click events to be swallowed or misdirected, breaking customer payment flows. The culprit: an aggressive z-index value and improper handling of pointer events. By patching the modal styling with correct z-index layers and using CSS pointer-events, the payment interface was restored to functionality.

The Root of the Problem: Layering and Modern Interfaces

To understand what went wrong, we need to look at how Unbounce modals and Stripe checkout embeds function in a live environment.

  • Unbounce is a popular landing page builder that includes modals or overlays for lead generation, announcements, or promotions.
  • Stripe offers embeddable payment forms like Elements and Checkout which get inserted directly into a webpage via iframe-based widgets.

These two components — although seemingly unrelated — both add layered elements to the page. These layers sometimes compete for attention, with one unintentionally obstructing the other.

The Problem Emerges: Payments Stop Working

When customers opened an Unbounce modal (for example, a promotional offer or newsletter prompt), and then attempted to proceed through a Stripe-hosted embed, something strange occurred:

  1. Clicking inside the checkout fields often didn’t register.
  2. The “Pay” button would not respond.
  3. Sometimes the entire Stripe iframe seemed to freeze.

At first glance, everything looked fine. Elements were positioned properly, forms appeared as intended. But payment completion failures were being logged — and users were dropping off at the moment they tried to pay.

Dissecting the Culprit: Z-Index and Pointer Events

The issue boiled down to a CSS stacking context conflict. The Unbounce modal had a z-index value in the exosphere — sometimes over 99999 — with a semi-transparent backdrop that covered the entire viewport and remained active even after the modal closed. Worse, parts of the overlay weren’t fully removed from the DOM, and CSS pointer-events remained enabled on invisible layers.

This created two immediate problems:

  • Visual interference: Although the Overlay was hidden from sight, it still took up logical space in the DOM stack, layering above the Stripe embed.
  • Click suppression: Since pointer-events: auto was still active for the modal backdrop, any click passed through to Stripe was effectively intercepted and discarded.

If you’re embedding Stripe Elements via iframe or DOM insertion, your payment interface needs to be both visible and click-accessible. And that’s where these hidden overlays broke the experience.

The Quick Fix That Didn’t Work

One early attempt to fix the issue involved simply adding a higher z-index to Stripe’s parent element. But this didn’t solve the issue because:

  • Unbounce dynamically injected overlays after page load, overriding manually set styles.
  • The hidden overlay backdrop retained control over user interactions.

In other words, this fix was too shallow and didn’t address the underlying pointer behavior.

The Recovery Plan: Z-Index Realignment and Click Restoration

The solution required a multi-part patch:

  1. Override Unbounce Modal’s Z-Index:

    Reduce the z-index of the Unbounce modal and its backdrop. Ideally, bring it below Stripe’s container. This was done using direct CSS targeting:

    
#ub-modal-overlay, .ub-overlay {
  z-index: 10 !important;
}
  2. Disable Pointer Interception:

    Force-disable pointer events on inactive overlays. This ensures that invisible elements do not block user actions.

    
.ub-overlay[aria-hidden="true"],
.ub-modal[style*="display: none"] {
  pointer-events: none !important;
}
  3. Raise Stripe Embed Above Inherited Contexts:

    Ensure that the Stripe widget, often contained within an iframe, has a stable and high z-index positioned within an independent stacking context:

    
#stripe-container {
  position: relative;
  z-index: 100;
}

This triage did two things extraordinarily well:

  • Prevented invisible modals from intercepting clicks.
  • Restored Stripe’s interactivity and payment capability.

In effect, it isolated the Stripe interface from Unbounce modal interference and allowed both systems to coexist on the same page — a critical requirement for ecommerce flows.

UX and Business Consequences

Before this patch was in place, businesses relying on Unbounce + Stripe combinations saw elevated bounce rates at the final payment stage. Customers filled out forms, clicked “Pay,” and then… nothing. The confidence-shaking nature of a non-responsive payment form cannot be overstated.

After implementation, conversion rates rebounded. Stripe interactions became fluid again, error reports dropped to near zero, and customers were able to complete transactions. What seemed like a minor visual layer conflict had real-world monetary impact — and resolving it meant more than correcting CSS bugs; it translated into recovered revenue.

Lessons Learned

This scenario offers several broader takeaways:

  • Always audit third-party overlays for inactive but interactive DOM layers.
  • Use developer tools to inspect z-index and click tracing — especially watch for invisible elements swallowing clicks.
  • Don’t trust “display: none” alone — if pointer events are still on, the element can be logically present even when visually hidden.
  • Use pointer-events: none strategically to allow critical UI elements (like Stripe) to remain accessible at all times.

Final Thoughts

Modern websites often juggle multiple SDKs, embedded modules, and dynamic UI layers. While tools like Unbounce and Stripe are best-in-class at what they do, putting them together without conflict sometimes requires careful orchestration. A deep understanding of CSS stacking contexts and pointer event handling can mean the difference between broken UX and high-converting experiences. In this case, attention to detail restored a mission-critical flow — and saved more than just a few sales.