@payment-kit-js/vanilla 0.5.8 → 0.5.9

package/dist/cdn/paymentkit.js

@@ -1,5 +1,5 @@
 /**
- * PaymentKit.js v0.5.8
+ * PaymentKit.js v0.5.9
  * https://paymentkit.com
  *
  * @license MIT
@@ -42,7 +42,7 @@ var PaymentKit = (() => {
   });
 
   // package.json
-  var version = "0.5.8";
+  var version = "0.5.9";
 
   // src/analytics/mock-adapter.ts
   var MockAnalyticsAdapter = class {
@@ -6864,6 +6864,14 @@ var PaymentKit = (() => {
       "box-sizing": "border-box",
       ...containerPadding && containerPadding !== "0px" ? { padding: containerPadding } : {}
     };
+    for (const selector of [mountPoints.pan, mountPoints.exp, mountPoints.cvc]) {
+      const container = document.querySelector(selector);
+      if (!container) continue;
+      const staleIframes = container.querySelectorAll("iframe");
+      for (const iframe of staleIframes) {
+        iframe.remove();
+      }
+    }
     const panField = form.cardNumberField(mountPoints.pan, {
       placeholder: placeholders?.card_pan ?? "Card number",
       validations: ["required", "validCardNumber"],
@@ -6883,9 +6891,12 @@ var PaymentKit = (() => {
       validations: ["required", "validCardSecurityCode"],
       css: fieldCss
     });
+    const observers = [];
+    const containers = [];
     for (const selector of [mountPoints.pan, mountPoints.exp, mountPoints.cvc]) {
       const container = document.querySelector(selector);
       if (!container) continue;
+      containers.push(container);
       const styleIframe = (iframe) => {
         const containerEl = container;
         if (getComputedStyle(containerEl).position === "static") {
@@ -6897,18 +6908,17 @@ var PaymentKit = (() => {
         iframe.style.height = "100%";
         iframe.style.border = "none";
       };
+      const observer = new MutationObserver(() => {
+        const iframe = container.querySelector("iframe");
+        if (iframe && iframe.style.position !== "absolute") {
+          styleIframe(iframe);
+        }
+      });
+      observer.observe(container, { childList: true, subtree: true });
+      observers.push(observer);
       const existing = container.querySelector("iframe");
-      if (existing) {
+      if (existing && existing.style.position !== "absolute") {
         styleIframe(existing);
-      } else {
-        const observer = new MutationObserver((_2, obs) => {
-          const iframe = container.querySelector("iframe");
-          if (iframe) {
-            styleIframe(iframe);
-            obs.disconnect();
-          }
-        });
-        observer.observe(container, { childList: true, subtree: true });
       }
     }
     if (onFocusChangeCallbacks) {
@@ -6925,6 +6935,17 @@ var PaymentKit = (() => {
         }
       }
     }
+    return () => {
+      for (const observer of observers) {
+        observer.disconnect();
+      }
+      for (const container of containers) {
+        const iframes = container.querySelectorAll("iframe");
+        for (const iframe of iframes) {
+          iframe.remove();
+        }
+      }
+    };
   }
 
   // src/payment-methods/card.ts
@@ -7037,7 +7058,7 @@ var PaymentKit = (() => {
                 console.log(
                   `[PaymentKit] Creating VGS card fields \u2014 pan: ${parentSelector}, exp: ${expSelector}, cvc: ${cvcSelector}`
                 );
-                createVgsCardFields(
+                states.vgsFieldsCleanup = createVgsCardFields(
                   form,
                   {
                     pan: parentSelector,
@@ -7061,6 +7082,8 @@ var PaymentKit = (() => {
             }
             cleanupVgs = () => {
               if (type === "card_pan" && states.vgsForm) {
+                states.vgsFieldsCleanup?.();
+                states.vgsFieldsCleanup = void 0;
                 states.vgsForm.unmount();
                 states.vgsForm = void 0;
               }
@@ -7376,6 +7399,8 @@ var PaymentKit = (() => {
         submitPayment: defSubmitPayment(localStates),
         cleanup: () => {
           if (localStates.vgsForm) {
+            localStates.vgsFieldsCleanup?.();
+            localStates.vgsFieldsCleanup = void 0;
             localStates.vgsForm.unmount();
             localStates.vgsForm = void 0;
           }