@payment-kit-js/vanilla 0.5.2 → 0.5.4

package/dist/cdn/paymentkit.js

@@ -1,5 +1,5 @@
 /**
- * PaymentKit.js v0.5.2
+ * PaymentKit.js v0.5.4
  * https://paymentkit.com
  *
  * @license MIT
@@ -42,7 +42,7 @@ var PaymentKit = (() => {
   });
 
   // package.json
-  var version = "0.5.2";
+  var version = "0.5.4";
 
   // src/analytics/mock-adapter.ts
   var MockAnalyticsAdapter = class {
@@ -6872,6 +6872,27 @@ var PaymentKit = (() => {
       validations: ["required", "validCardSecurityCode"],
       css: fieldCss
     });
+    for (const selector of [mountPoints.pan, mountPoints.exp, mountPoints.cvc]) {
+      const container = document.querySelector(selector);
+      if (!container) continue;
+      const styleIframe = (iframe) => {
+        iframe.style.width = "100%";
+        iframe.style.height = "100%";
+      };
+      const existing = container.querySelector("iframe");
+      if (existing) {
+        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) {
       const fieldMap = [
         [panField, "card_pan"],
@@ -6920,6 +6941,8 @@ var PaymentKit = (() => {
         let cleanupVgs;
         let cleanupDirect;
         let cancelled = false;
+        if (!states.vgsMountSelectors) states.vgsMountSelectors = {};
+        states.vgsMountSelectors[type] = parentSelector;
         const doMount = () => {
           if (cancelled) return;
           const isVgsMode = states.cardTokenizationMode === "vgs";
@@ -6957,10 +6980,10 @@ var PaymentKit = (() => {
                 const css = style ? Object.fromEntries(
                   Object.entries(style).map(([k2, v2]) => [k2.replace(/([A-Z])/g, "-$1").toLowerCase(), v2])
                 ) : void 0;
-                const expSelector = parentSelector.replace(/card[-_]pan/, (m2) => m2.replace("pan", "exp"));
-                const cvcSelector = parentSelector.replace(/card[-_]pan/, (m2) => m2.replace("pan", "cvc"));
-                if (expSelector === parentSelector || cvcSelector === parentSelector) {
-                  const msg = `[PaymentKit] Failed to derive exp/cvc selectors from "${parentSelector}". Expected a selector containing "card-pan" or "card_pan".`;
+                const expSelector = states.vgsMountSelectors?.card_exp;
+                const cvcSelector = states.vgsMountSelectors?.card_cvc;
+                if (!expSelector || !cvcSelector) {
+                  const msg = `[PaymentKit] VGS mode requires all three card fields to be mounted. Missing: ${!expSelector ? "card_exp" : ""}${!expSelector && !cvcSelector ? ", " : ""}${!cvcSelector ? "card_cvc" : ""}`;
                   console.error(msg);
                   onLoaded?.();
                   return;