Issue with Iframe Data Persisting Across Popups (Add vs Edit Payment Card)

Need help APIs
1

I’m running into an issue with two different popups in my Bubble app that both use external iframes from an API to handle payment card info.

Context:

  • Popup A (Add Card) uses an iframe to add a new payment method.
  • Popup B (Edit Card) uses a different iframe to edit an existing payment method.
  • Both iframes load from external APIs via HTML elements and are initialized with different URLs and parameters.

The Problem:

Sometimes, when I open the Add Card popup, it still shows pre-filled data from the Edit Card iframe (even though it’s supposed to be blank). It seems like the iframe or browser session is persisting data between popups unexpectedly.

What I’ve Tried:

  1. Resetting data sources and closing popups fully before opening the next.
  2. Using reset data actions in the popup workflow.
  3. Clearing the iframe HTML dynamically via JavaScript before loading a new one.
  4. Ensuring iframe URLs are unique and loaded cleanly each time.

Additional Info:

  • Both popups work with external APIs (hosted on n8n).
  • I use the “Run JavaScript” action to communicate with the iframe via postMessage.
  • No workflow errors appear in the Bubble debugger.

My Goal:

I want the Add Card popup to always load with an empty iframe/form and not retain or show any previous input from the Edit Card popup.

Has anyone experienced something similar or have suggestions for reliably clearing iframe data or isolating iframe states between different popups in Bubble?

2

It doesn’t make sense that a popup shows an iframe from another popup. But hey, it is Bubble. :smile: Can you show the issue in a screen recording?