@payment-kit-js/vanilla 0.5.1 → 0.5.3

package/dist/cdn/paymentkit.js

@@ -1,5 +1,5 @@
 /**
- * PaymentKit.js v0.5.1
+ * PaymentKit.js v0.5.3
  * https://paymentkit.com
  *
  * @license MIT
@@ -42,7 +42,7 @@ var PaymentKit = (() => {
   });
 
   // package.json
-  var version = "0.5.1";
+  var version = "0.5.3";
 
   // src/analytics/mock-adapter.ts
   var MockAnalyticsAdapter = class {
@@ -6509,24 +6509,44 @@ var PaymentKit = (() => {
       _sessionConfigReady: void 0
     };
     if (cardTokenizationMode === void 0) {
-      paymentKitStates._sessionConfigReady = fetch(`${apiBaseUrl}/api/checkout-sessions/token/${secureToken}`).then((resp) => resp.ok ? resp.json() : null).then((session) => {
+      const sessionConfigUrl = `${apiBaseUrl}/api/checkout-sessions/token/${secureToken}`;
+      console.log(
+        `[PaymentKit] cardTokenizationMode not provided \u2014 auto-detecting from session API: ${sessionConfigUrl}`
+      );
+      paymentKitStates._sessionConfigReady = fetch(sessionConfigUrl).then((resp) => {
+        if (!resp.ok) {
+          console.warn(`[PaymentKit] Session config fetch failed with status ${resp.status}`);
+          return null;
+        }
+        return resp.json();
+      }).then((session) => {
         if (session && typeof session === "object" && typeof session.card_tokenization_mode === "string") {
           paymentKitStates.cardTokenizationMode = session.card_tokenization_mode || "direct";
+          console.log(
+            `[PaymentKit] Session config detected \u2014 cardTokenizationMode: ${paymentKitStates.cardTokenizationMode}`
+          );
           const vaultId = session.vgs_vault_id;
           const vgsEnv = session.vgs_environment;
           if (vaultId && /^tnt[a-z0-9]+$/.test(vaultId) && (vgsEnv === "sandbox" || vgsEnv === "live")) {
             paymentKitStates.vgsVaultId = vaultId;
             paymentKitStates.vgsEnvironment = vgsEnv;
+            console.log(`[PaymentKit] VGS config valid \u2014 vaultId: ${vaultId}, environment: ${vgsEnv}`);
           } else if (paymentKitStates.cardTokenizationMode === "vgs") {
-            console.warn("[PaymentKit] Invalid VGS config from session API, falling back to direct mode");
+            console.warn(
+              `[PaymentKit] Invalid VGS config from session API (vaultId: ${vaultId}, env: ${vgsEnv}), falling back to direct mode`
+            );
             paymentKitStates.cardTokenizationMode = "direct";
           }
         } else {
+          console.log("[PaymentKit] Session response missing card_tokenization_mode \u2014 defaulting to direct mode");
           paymentKitStates.cardTokenizationMode = "direct";
         }
-      }).catch(() => {
+      }).catch((err) => {
+        console.error("[PaymentKit] Session config fetch error \u2014 falling back to direct mode:", err);
         paymentKitStates.cardTokenizationMode = "direct";
       });
+    } else {
+      console.log(`[PaymentKit] cardTokenizationMode explicitly set: ${cardTokenizationMode}`);
     }
     const pmInstances = paymentMethods.map((paymentMethod) => paymentMethod(paymentKitStates));
     const externalFuncsMapByPm = pmInstances.reduce(
@@ -6796,17 +6816,26 @@ var PaymentKit = (() => {
   var VGS_COLLECT_CDN = "https://js.verygoodvault.com/vgs-collect/3.2.1/vgs-collect.js";
   var loadPromise = null;
   function loadVgsCollectScript() {
-    if (loadPromise) return loadPromise;
+    if (loadPromise) {
+      console.log("[PaymentKit] VGS Collect CDN load already in progress \u2014 reusing promise");
+      return loadPromise;
+    }
     loadPromise = new Promise((resolve, reject) => {
       if (typeof window !== "undefined" && window.VGSCollect) {
+        console.log("[PaymentKit] VGS Collect JS already available on window");
         resolve();
         return;
       }
+      console.log(`[PaymentKit] Loading VGS Collect JS from CDN: ${VGS_COLLECT_CDN}`);
       const script = document.createElement("script");
       script.src = VGS_COLLECT_CDN;
       script.async = true;
-      script.onload = () => resolve();
+      script.onload = () => {
+        console.log("[PaymentKit] VGS Collect JS loaded successfully from CDN");
+        resolve();
+      };
       script.onerror = () => {
+        console.error(`[PaymentKit] Failed to load VGS Collect JS from CDN: ${VGS_COLLECT_CDN}`);
         loadPromise = null;
         reject(new Error("Failed to load VGS Collect JS"));
       };
@@ -6891,9 +6920,14 @@ 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";
+          console.log(
+            `[PaymentKit] card.doMount(${type}) \u2014 mode: ${states.cardTokenizationMode}, vgsVaultId: ${states.vgsVaultId ?? "unset"}, vgsEnvironment: ${states.vgsEnvironment ?? "unset"}`
+          );
           if (isVgsMode && states.vgsVaultId && states.vgsEnvironment) {
             if (onFocusChange) {
               if (!states.vgsFocusCallbacks) states.vgsFocusCallbacks = {};
@@ -6902,18 +6936,20 @@ var PaymentKit = (() => {
             if (type === "card_pan") {
               const vaultId = states.vgsVaultId;
               const vgsEnv = states.vgsEnvironment;
+              console.log(`[PaymentKit] VGS mode active \u2014 loading VGS Collect CDN for vault ${vaultId} (${vgsEnv})...`);
               const VGS_CDN_TIMEOUT_MS = 15e3;
               let cdnTimeoutId;
               Promise.race([
                 loadVgsCollectScript(),
                 new Promise((_2, reject) => {
-                  cdnTimeoutId = setTimeout(
-                    () => reject(new Error("VGS Collect CDN load timed out")),
-                    VGS_CDN_TIMEOUT_MS
-                  );
+                  cdnTimeoutId = setTimeout(() => {
+                    console.warn(`[PaymentKit] VGS Collect CDN load timed out after ${VGS_CDN_TIMEOUT_MS / 1e3}s`);
+                    reject(new Error("VGS Collect CDN load timed out"));
+                  }, VGS_CDN_TIMEOUT_MS);
                 })
               ]).finally(() => clearTimeout(cdnTimeoutId)).then(() => {
                 if (cancelled) return;
+                console.log("[PaymentKit] VGS Collect CDN loaded \u2014 initializing form...");
                 const form = initVgsCollect(vaultId, vgsEnv);
                 if (cancelled) {
                   form.unmount();
@@ -6923,14 +6959,17 @@ 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;
                 }
+                console.log(
+                  `[PaymentKit] Creating VGS card fields \u2014 pan: ${parentSelector}, exp: ${expSelector}, cvc: ${cvcSelector}`
+                );
                 createVgsCardFields(
                   form,
                   {
@@ -6941,6 +6980,7 @@ var PaymentKit = (() => {
                   css,
                   states.vgsFocusCallbacks
                 );
+                console.log("[PaymentKit] VGS card fields created successfully");
                 timingTracker.trackInputReady();
                 onLoaded?.();
               }).catch((err) => {
@@ -6959,6 +6999,11 @@ var PaymentKit = (() => {
             };
             return;
           }
+          if (isVgsMode) {
+            console.warn(
+              `[PaymentKit] VGS mode requested but config incomplete (vgsVaultId: ${states.vgsVaultId ?? "unset"}, vgsEnvironment: ${states.vgsEnvironment ?? "unset"}) \u2014 using direct mode`
+            );
+          }
           const parent = $(parentSelector);
           const params = {
             checkout_token: secureToken,
@@ -7030,6 +7075,7 @@ var PaymentKit = (() => {
         states.cardSetupIntentId = res.cardSetupIntentId;
       }
       if (isVgsMode) {
+        console.log("[PaymentKit] Submitting card via VGS CMP...");
         const vgsSubmitResult = await submitVgsCardFields(states, tunnelX);
         if (!vgsSubmitResult.isSuccess) {
           timingTracker.trackFail(null, "card_submit_error", "VGS card submission failed");