@payment-kit-js/vanilla 0.5.3 → 0.5.5

package/dist/cdn/paymentkit.js

@@ -1,5 +1,5 @@
 /**
- * PaymentKit.js v0.5.3
+ * PaymentKit.js v0.5.5
  * https://paymentkit.com
  *
  * @license MIT
@@ -42,7 +42,7 @@ var PaymentKit = (() => {
   });
 
   // package.json
-  var version = "0.5.3";
+  var version = "0.5.5";
 
   // src/analytics/mock-adapter.ts
   var MockAnalyticsAdapter = class {
@@ -6850,28 +6850,63 @@ var PaymentKit = (() => {
     return window.VGSCollect.create(vaultId, environment, () => {
     });
   }
-  function createVgsCardFields(form, mountPoints, css, onFocusChangeCallbacks) {
-    const fieldCss = css ?? {
-      height: "46px",
+  function createVgsCardFields(form, mountPoints, css, onFocusChangeCallbacks, placeholders) {
+    const sampleContainer = document.querySelector(mountPoints.pan);
+    const containerPadding = sampleContainer ? getComputedStyle(sampleContainer).padding : void 0;
+    const baseCss = css ?? {
       "font-size": "1rem",
       color: "#18181b",
       "font-family": "ui-sans-serif, system-ui, sans-serif"
     };
+    const fieldCss = {
+      ...baseCss,
+      height: "100%",
+      "box-sizing": "border-box",
+      ...containerPadding && containerPadding !== "0px" ? { padding: containerPadding } : {}
+    };
     const panField = form.cardNumberField(mountPoints.pan, {
-      placeholder: "Card number",
+      placeholder: placeholders?.card_pan ?? "Card number",
       validations: ["required", "validCardNumber"],
       css: fieldCss
     });
     const expField = form.cardExpirationDateField(mountPoints.exp, {
-      placeholder: "MM / YY",
+      placeholder: placeholders?.card_exp ?? "MM / YY",
       validations: ["required", "validCardExpirationDate"],
       css: fieldCss
     });
     const cvcField = form.cardCVCField(mountPoints.cvc, {
-      placeholder: "123",
+      placeholder: placeholders?.card_cvc ?? "123",
       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) => {
+        const containerEl = container;
+        if (getComputedStyle(containerEl).position === "static") {
+          containerEl.style.position = "relative";
+        }
+        iframe.style.position = "absolute";
+        iframe.style.inset = "0";
+        iframe.style.width = "100%";
+        iframe.style.height = "100%";
+        iframe.style.border = "none";
+      };
+      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"],
@@ -6915,7 +6950,7 @@ var PaymentKit = (() => {
   var defCreateElement = (states) => {
     const { baseUrl, apiBaseUrl, cardInputConnections, secureToken, timingTracker } = states;
     return (type, options) => {
-      const { style, onLoaded, onFocusChange } = options;
+      const { style, onLoaded, onFocusChange, placeholder } = options;
       const mountIFrame = (parentSelector) => {
         let cleanupVgs;
         let cleanupDirect;
@@ -6933,6 +6968,10 @@ var PaymentKit = (() => {
               if (!states.vgsFocusCallbacks) states.vgsFocusCallbacks = {};
               states.vgsFocusCallbacks[type] = onFocusChange;
             }
+            if (placeholder) {
+              if (!states.vgsPlaceholders) states.vgsPlaceholders = {};
+              states.vgsPlaceholders[type] = placeholder;
+            }
             if (type === "card_pan") {
               const vaultId = states.vgsVaultId;
               const vgsEnv = states.vgsEnvironment;
@@ -6978,7 +7017,8 @@ var PaymentKit = (() => {
                     cvc: cvcSelector
                   },
                   css,
-                  states.vgsFocusCallbacks
+                  states.vgsFocusCallbacks,
+                  states.vgsPlaceholders
                 );
                 console.log("[PaymentKit] VGS card fields created successfully");
                 timingTracker.trackInputReady();
@@ -7005,14 +7045,25 @@ var PaymentKit = (() => {
             );
           }
           const parent = $(parentSelector);
+          const computed = getComputedStyle(parent);
+          const containerPadding = computed.padding !== "0px" ? computed.padding : void 0;
+          const enhancedStyle = {
+            ...style ?? {},
+            height: "100%",
+            boxSizing: "border-box",
+            ...containerPadding ? { padding: containerPadding } : {}
+          };
           const params = {
             checkout_token: secureToken,
-            api_base_url: apiBaseUrl
+            api_base_url: apiBaseUrl,
+            style: JSON.stringify(enhancedStyle)
           };
-          if (style) {
-            params.style = JSON.stringify(style);
-          }
           const iframe = createCheckoutIFrame(type.replace("_", "-"), baseUrl, params);
+          if (computed.position === "static") {
+            parent.style.position = "relative";
+          }
+          iframe.style.position = "absolute";
+          iframe.style.inset = "0";
           cleanupDirect = () => {
             const connection = cardInputConnections[type];
             connection?.destroy();