Using dropin leaves iframe in body behind

[satazor]

Hi,

I'm using the dropin widget in a modal dialog. The issue is that if the modal is closed, an "iframe" is left behind in the document.body. I searched for a destroy or dispose method in the component but couldn't find none. At the moment I'm removing the iframe manually, but it doesn't feel right.

Am I missing something? Thanks in advance.

[kyledetella]

@satazor the iframe that contains the modal does not get destroyed since the "inline" iframe may still have to invoke it at another point in the lifecycle.

In the future we are looking to add better lifecycle management including reset and/or destroy methods.

[satazor]

The inline iframe gets removed when the modal is closed since it is a descendant of the modal element. So I think it will never get called nor reused since another call to .setup will create another iframe in the body.

As an intermediate solution until those methods are available, is it acceptable to remove the outer iframe manually?

[kyledetella]

@satazor I am a bit confused. The inline frame and the modal iframe are separate DOM nodes in the document. The inline is not part of the modal frame. The inline frame is the what contains these two views (depending on your state):

So we never remove it since you either use it to enter a card or change your selected payment method. Could you shed some more light on your situation? When are you seeing the inline get removed?

[satazor]

Sorry, forget everything that I've said before. I will try to explain in a more clearer way.

The web app we are using braintree is baboom. This is a single page app, so don't expect refreshes to happen very often. We have several stuff that can be bought and when trying to do so, it will trigger the buy process that occurs in a modal dialog, similar to bootstrap modals. This modal has nothing to do with braintrees iframes yet.

In that modal, the product is presented to the user as well as a "proceed to buy" button which instantiates the braintree dropin widget inside the modal. The braintree widget creates an inline iframe inside the modal as well as a iframe in the body. The problem is that when the modal is closed by the user, the inline iframe gets automatically destroyed (because its a descendant of the modal) but the iframe in the body remains. I was expecting to call a destroy method or similar in braintree but none is available.

Hope this is clearer now. If needed I can send you some screenshots to your email. Thank you.

[tnunes]

👍

[kyledetella]

@satazor as you may have seen in issue #29, we recently introduced an update to braintree.js that will allow you to tear down your integration and setup a new one. This functionality is supported as of version 2.14.0.

By calling teardown, we will cleanup your integration and remove things like iFrames that we created.

Let us know if you run into any further issues.