Duplicate iframe elements

[jordan-bite]

General information

• SDK/Library version: 1.42.0
• Environment: both
• Browser and OS Chrome 126.0.6478.127 (Official Build) (arm64) on MacOS 14.5

Issue description

When initiating the dropin instance we're getting two distinct iframe elements. The first appears to be prerender frame which includes just an image element. It is quickly removed from the dom but is clearly visible for a second or so and causes the paypal button to suddenly move after it's removed.

Our implementation is very simple:

        (window as any).braintree.dropin.create(
          {
            authorization: process.env.BRAINTREE_KEY,
            container: "#bt-dropin-container",
            paymentOptionPriority: ["paypal"],
            paypal: {
              flow: "vault",
              buttonStyle: {
                label: "pay",
                size: "medium",
                shape: "pill",
                color: "blue",
                tagline: "false",
              },
            },
          },
          (createErr: any, instance: any) => {
            if (createErr != null) {
              // eslint-disable-next-line
              console.error(createErr);
              return;
            }
            this.btInstance = instance;
          },
        );

Screen.Recording.2024-07-11.at.11.25.12.AM.mov