Issues with showing/hiding Recurly.js container

[brianlenz]

We're running into a problem with Recurly.js when using it in a modal popup. We're using a standard web app (non-SPA), and the billing form is to be loaded into a modal popup on the page. As such, the form is initially hidden on page load. We only initialize recurly.configure once the modal is open. This works great the first time the modal is opened. The problem comes into play if the modal is closed/hidden and subsequently re-opened. In this case, Recurly.js sets the visibility of the form text input to hidden:

At this point, it appears the form field is permanently hidden. Is there a way to set the visibility back to visible in this case? Or is there something we can do to prevent it from being hidden? Or is there some other way we should be dealing with the problem?

I've looked through the documentation and can't find anything relevant or helpful there. I had noticed some conversation in #494 that seemed related, but even the undocumented recurly.destroy method referenced there doesn't seem to remove the form fields from the page, so it appears that it doesn't fully destroy everything?

I realize that this may not be an issue with Recurly.js code, per se, given that the problem is actually contained within the hosted iframe. I took a look at the Recurly.js source code and don't see any references to visibility at all.

Any help would be appreciated! Thanks!

[chrissrogers]

Hi! Happy to help get your form operating well. Do you have a code sample that can demonstrate the requirement and where the issue arises? A codesandbox (or similar) example would help iron things out very quickly.

The input visibility being hidden is a consequence of the Element/Hosted Field not being initialized completely. When the iframe loads, the inputs are visibility: hidden, and once the iframes are fully initialized and organized by the recurly instance on the parent page, they are set to visibility: visible.

My best estimate of what is occurring is that when the modal is closed, the iframes are removed from the DOM, and thus their document contents are flushed. The result is that the parent recurly instance can no longer communicate with them. This is only an educated guess, however.

If you are using Elements, you can call element.remove() when the modal is to be hidden, and then element.attach() when re-opening the modal. If you're not currently using Elements, I recommend moving to them as they make state management much easier.

If you are using Hosted Fields, you should be able to call recurly.configure again when the modal is re-opened to re-initialize the hosted fields onto the targets.

[brianlenz]

Thanks much, @chrissrogers! That provided exactly the context I needed 👍 The issue was that our modal framework repositions the form in the DOM when it is shown and hidden. As a result of that, the iframe elements were being reinitialized by the browser, which is why they would end up in that uninitialized (hidden) state.

We're now leveraging your suggestion of element.remove() when the modal is closed, which completely solves the issue.

Thanks again!

[chrissrogers]

Great! Happy to help.