@odus/checkout 0.29.0 → 0.30.0-beta.0

package/dist/checkout.es.js

@@ -1,6 +1,6 @@
-import { c as ie, a as ce, f as V, d as he, C as A, I as re, g as ue, S as R, b as Z, e as w, A as me, P as pe, E as fe, l as ge, h as ye, i as be, j as Ee, k as Se, F as Fe, m as ve, n as Ce } from "./shared.js";
-import { o as vt, p as Ct, q as Mt, r as Nt, s as Pt, t as At, u as wt, v as kt } from "./shared.js";
-const v = {
+import { l as pe, c as de, a as ge, f as U, d as fe, C as P, I as ce, g as ye, S as H, b as Z, H as be, V as J, e as k, A as ve, P as Se, E as Ee, h as Ce, i as Fe, j as Me, k as Ne, m as we, n as Pe, F as ke, o as Ae, p as De } from "./shared.js";
+import { q as Tt, r as Lt, s as Vt, t as _t, u as Bt, v as Ot, w as Rt, x as Ut } from "./shared.js";
+const C = {
   // Checkout lifecycle events
   CHECKOUT_INITIALIZED: "checkout.initialized",
   CHECKOUT_MOUNTED: "checkout.mounted",
@@ -16,88 +16,88 @@ const v = {
   PAYMENT_AUTHORIZED: "payment.authorized",
   PAYMENT_FAILED: "payment.failed",
   PAYMENT_ACTION_REQUIRED: "payment.action_required"
-}, G = {
+}, X = {
   PAYMENT_AUTHORIZATION_TIME: "payment.authorization_time",
   CHECKOUT_LOAD_TIME: "checkout.load_time",
   FORM_RENDER_TIME: "form.render_time"
-}, Me = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, Ne = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Pe = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, q = (n) => {
-  if (!n)
+}, Ie = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, xe = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Te = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, q = (i) => {
+  if (!i)
     return [];
-  const e = [], t = n.split(`
+  const e = [], t = i.split(`
 `);
   for (const s of t) {
-    const i = s.trim();
-    if (!i)
+    const a = s.trim();
+    if (!a)
       continue;
-    let a = Me.exec(i);
-    if (a) {
+    let n = Ie.exec(a);
+    if (n) {
       e.push({
-        function: a[1] || "(anonymous)",
-        filename: a[2],
-        lineno: parseInt(a[3], 10),
-        colno: parseInt(a[4], 10)
+        function: n[1] || "(anonymous)",
+        filename: n[2],
+        lineno: parseInt(n[3], 10),
+        colno: parseInt(n[4], 10)
       });
       continue;
     }
-    a = Ne.exec(i) ?? Pe.exec(i), a && e.push({
-      function: a[1] || "(anonymous)",
-      filename: a[2],
-      lineno: parseInt(a[3], 10),
-      colno: parseInt(a[4], 10)
+    n = xe.exec(a) ?? Te.exec(a), n && e.push({
+      function: n[1] || "(anonymous)",
+      filename: n[2],
+      lineno: parseInt(n[3], 10),
+      colno: parseInt(n[4], 10)
     });
   }
   return e;
-}, Ae = "@odus/telemetry", we = "0.0.1";
-let O, x, Y;
-const ke = () => {
+}, Le = "@odus/telemetry", Ve = "0.0.1";
+let B, O, Y;
+const _e = () => {
   if (typeof navigator > "u")
     return {};
-  const n = navigator.userAgent;
+  const i = navigator.userAgent;
   let e, t, s;
-  n.includes("Firefox/") ? (e = "Firefox", t = n.match(/Firefox\/([\d.]+)/)?.[1]) : n.includes("Edg/") ? (e = "Edge", t = n.match(/Edg\/([\d.]+)/)?.[1]) : n.includes("Chrome/") ? (e = "Chrome", t = n.match(/Chrome\/([\d.]+)/)?.[1]) : n.includes("Safari/") && (e = "Safari", t = n.match(/Version\/([\d.]+)/)?.[1]), n.includes("Windows") ? s = "Windows" : n.includes("Mac OS") ? s = "macOS" : n.includes("Linux") ? s = "Linux" : n.includes("Android") ? s = "Android" : (n.includes("iPhone") || n.includes("iPad")) && (s = "iOS");
-  const i = /Mobi|Android|iPhone|iPad/i.test(n) || void 0;
+  i.includes("Firefox/") ? (e = "Firefox", t = i.match(/Firefox\/([\d.]+)/)?.[1]) : i.includes("Edg/") ? (e = "Edge", t = i.match(/Edg\/([\d.]+)/)?.[1]) : i.includes("Chrome/") ? (e = "Chrome", t = i.match(/Chrome\/([\d.]+)/)?.[1]) : i.includes("Safari/") && (e = "Safari", t = i.match(/Version\/([\d.]+)/)?.[1]), i.includes("Windows") ? s = "Windows" : i.includes("Mac OS") ? s = "macOS" : i.includes("Linux") ? s = "Linux" : i.includes("Android") ? s = "Android" : (i.includes("iPhone") || i.includes("iPad")) && (s = "iOS");
+  const a = /Mobi|Android|iPhone|iPad/i.test(i) || void 0;
   return {
     name: e,
     version: t,
     os: s,
-    mobile: i ?? !1,
+    mobile: a ?? !1,
     language: navigator.language,
     viewportWidth: String(window.innerWidth),
     viewportHeight: String(window.innerHeight),
-    userAgent: n
+    userAgent: i
   };
-}, Ie = () => typeof window > "u" ? {} : { url: window.location.href }, De = (n) => {
-  O = void 0, Y = void 0, x = n.sessionTracking?.session ? { id: n.sessionTracking.session.id } : void 0;
-}, Te = (n) => {
-  O = n;
-}, Le = () => {
-  O = void 0;
-}, _e = (n) => {
-  x = n;
-}, Be = (n) => {
-  Y = n;
-}, Oe = () => x?.id, xe = (n) => ({
-  sdk: { name: Ae, version: we },
-  app: n.app,
-  user: O,
-  session: x,
-  page: Ie(),
-  browser: ke(),
+}, Be = () => typeof window > "u" ? {} : { url: window.location.href }, Oe = (i) => {
+  B = void 0, Y = void 0, O = i.sessionTracking?.session ? { id: i.sessionTracking.session.id } : void 0;
+}, Re = (i) => {
+  B = i;
+}, Ue = () => {
+  B = void 0;
+}, He = (i) => {
+  O = i;
+}, ze = (i) => {
+  Y = i;
+}, $e = () => O?.id, je = (i) => ({
+  sdk: { name: Le, version: Ve },
+  app: i.app,
+  user: B,
+  session: O,
+  page: Be(),
+  browser: _e(),
   view: Y
-}), Ue = 30, Ve = 250, Re = 6e4;
-let k = [], P = null, W = 0, T = null, L = null;
-const He = (n) => {
-  if (P)
+}), Ke = 30, qe = 250, We = 6e4;
+let A = [], w = null, G = 0, T = null, L = null;
+const Ye = (i) => {
+  if (w)
     return;
-  const e = n.batching?.sendTimeout ?? Ve;
-  P = setTimeout(() => {
-    U(n);
+  const e = i.batching?.sendTimeout ?? qe;
+  w = setTimeout(() => {
+    R(i);
   }, e);
-}, ze = (n, e) => {
+}, Ge = (i, e) => {
   const t = {
-    meta: xe(e)
+    meta: je(e)
   };
-  for (const s of n)
+  for (const s of i)
     switch (s.type) {
       case "exception":
         (t.exceptions ??= []).push(s.payload);
@@ -113,248 +113,248 @@ const He = (n) => {
         break;
     }
   return t;
-}, je = (n, e, t = !1) => {
-  const s = JSON.stringify(n), i = Oe(), a = {
+}, Ze = (i, e, t = !1) => {
+  const s = JSON.stringify(i), a = $e(), n = {
     "Content-Type": "application/json"
   };
-  if (i && (a["x-faro-session-id"] = i), t && typeof navigator < "u" && navigator.sendBeacon) {
-    const d = new Blob([s], { type: "application/json" });
-    navigator.sendBeacon(e, d);
+  if (a && (n["x-faro-session-id"] = a), t && typeof navigator < "u" && navigator.sendBeacon) {
+    const l = new Blob([s], { type: "application/json" });
+    navigator.sendBeacon(e, l);
     return;
   }
-  const r = s.length < Re;
+  const r = s.length < We;
   fetch(e, {
     method: "POST",
-    headers: a,
+    headers: n,
     body: s,
     keepalive: r
-  }).then((d) => {
-    if (d.status === 429) {
-      const l = d.headers.get("Retry-After"), u = l ? parseInt(l, 10) * 1e3 : 3e4;
-      W = Date.now() + u;
+  }).then((l) => {
+    if (l.status === 429) {
+      const d = l.headers.get("Retry-After"), c = d ? parseInt(d, 10) * 1e3 : 3e4;
+      G = Date.now() + c;
     }
   }).catch(() => {
   });
-}, U = (n, e = !1) => {
-  if (P && (clearTimeout(P), P = null), k.length === 0)
+}, R = (i, e = !1) => {
+  if (w && (clearTimeout(w), w = null), A.length === 0)
     return;
-  if (Date.now() < W) {
-    k = [];
+  if (Date.now() < G) {
+    A = [];
     return;
   }
-  const t = k;
-  k = [];
+  const t = A;
+  A = [];
   try {
-    let s = ze(t, n);
-    if (n.beforeSend) {
-      const i = n.beforeSend(s);
-      if (!i)
+    let s = Ge(t, i);
+    if (i.beforeSend) {
+      const a = i.beforeSend(s);
+      if (!a)
         return;
-      s = i;
+      s = a;
     }
-    je(s, n.url, e);
+    Ze(s, i.url, e);
   } catch {
   }
-}, M = (n, e) => {
-  k.push(n);
-  const t = e.batching?.itemLimit ?? Ue;
-  if (k.length >= t) {
-    U(e);
+}, N = (i, e) => {
+  A.push(i);
+  const t = e.batching?.itemLimit ?? Ke;
+  if (A.length >= t) {
+    R(e);
     return;
   }
-  He(e);
-}, Ke = (n) => {
-  if (k = [], W = 0, P && (clearTimeout(P), P = null), typeof document > "u")
+  Ye(e);
+}, Je = (i) => {
+  if (A = [], G = 0, w && (clearTimeout(w), w = null), typeof document > "u")
     return;
   T && document.removeEventListener("visibilitychange", T), L && window.removeEventListener("pagehide", L);
-  const e = () => U(n, !0);
+  const e = () => R(i, !0);
   T = () => {
     document.visibilityState === "hidden" && e();
   }, L = e, document.addEventListener("visibilitychange", T), window.addEventListener("pagehide", L);
-}, X = () => (/* @__PURE__ */ new Date()).toISOString();
-let Q = null, J = null;
-const qe = (n) => {
-  typeof window > "u" || (Q = (e) => {
+}, Q = () => (/* @__PURE__ */ new Date()).toISOString();
+let ee = null, te = null;
+const Xe = (i) => {
+  typeof window > "u" || (ee = (e) => {
     const t = e.error instanceof Error ? e.error : new Error(e.message);
-    M({
+    N({
       type: "exception",
       payload: {
         type: t.name,
         value: t.message,
-        timestamp: X(),
+        timestamp: Q(),
         stacktrace: t.stack ? { frames: q(t.stack) } : void 0
       }
-    }, n);
-  }, J = (e) => {
+    }, i);
+  }, te = (e) => {
     const t = e.reason, s = t instanceof Error ? t : new Error(String(t));
-    M({
+    N({
       type: "exception",
       payload: {
         type: s.name,
         value: s.message,
-        timestamp: X(),
+        timestamp: Q(),
         stacktrace: s.stack ? { frames: q(s.stack) } : void 0,
         context: { source: "unhandledrejection" }
       }
-    }, n);
-  }, window.addEventListener("error", Q), window.addEventListener("unhandledrejection", J));
-}, ee = "odus_telemetry_session_id", H = () => {
-  const n = new Uint8Array(16);
-  return crypto.getRandomValues(n), Array.from(n, (e) => e.toString(16).padStart(2, "0")).join("");
-}, $e = (n) => {
-  if (n)
-    return n;
+    }, i);
+  }, window.addEventListener("error", ee), window.addEventListener("unhandledrejection", te));
+}, se = "odus_telemetry_session_id", z = () => {
+  const i = new Uint8Array(16);
+  return crypto.getRandomValues(i), Array.from(i, (e) => e.toString(16).padStart(2, "0")).join("");
+}, Qe = (i) => {
+  if (i)
+    return i;
   if (typeof sessionStorage > "u")
-    return H();
+    return z();
   try {
-    const e = sessionStorage.getItem(ee);
+    const e = sessionStorage.getItem(se);
     if (e)
       return e;
-    const t = H();
-    return sessionStorage.setItem(ee, t), t;
+    const t = z();
+    return sessionStorage.setItem(se, t), t;
   } catch {
-    return H();
+    return z();
   }
-}, Ye = (n) => {
-  if (!n.sessionTracking?.enabled)
+}, et = (i) => {
+  if (!i.sessionTracking?.enabled)
     return;
-  const e = $e(n.sessionTracking.session?.id);
-  _e({ id: e });
-}, z = () => (/* @__PURE__ */ new Date()).toISOString(), j = (n, e) => {
-  if (typeof PerformanceObserver > "u" || !PerformanceObserver.supportedEntryTypes?.includes(n))
+  const e = Qe(i.sessionTracking.session?.id);
+  He({ id: e });
+}, $ = () => (/* @__PURE__ */ new Date()).toISOString(), j = (i, e) => {
+  if (typeof PerformanceObserver > "u" || !PerformanceObserver.supportedEntryTypes?.includes(i))
     return;
   new PerformanceObserver((s) => {
-    for (const i of s.getEntries())
-      e(i);
-  }).observe({ type: n, buffered: !0 });
-}, We = (n) => {
+    for (const a of s.getEntries())
+      e(a);
+  }).observe({ type: i, buffered: !0 });
+}, tt = (i) => {
   if (typeof window > "u")
     return;
   j("largest-contentful-paint", (t) => {
-    M({
+    N({
       type: "measurement",
       payload: {
         type: "web-vitals",
         values: { lcp: t.startTime },
-        timestamp: z()
+        timestamp: $()
       }
-    }, n);
+    }, i);
   });
   let e = 0;
   j("layout-shift", (t) => {
     const s = t;
-    s.hadRecentInput || (e += s.value, M({
+    s.hadRecentInput || (e += s.value, N({
       type: "measurement",
       payload: {
         type: "web-vitals",
         values: { cls: e },
-        timestamp: z()
+        timestamp: $()
       }
-    }, n));
+    }, i));
   }), j("event", (t) => {
     const s = t;
-    s.duration > 0 && M({
+    s.duration > 0 && N({
       type: "measurement",
       payload: {
         type: "web-vitals",
         values: { inp: s.duration },
-        timestamp: z()
+        timestamp: $()
       }
-    }, n);
+    }, i);
   });
-}, B = {
+}, _ = {
   INFO: "info",
   WARN: "warn",
   ERROR: "error"
-}, _ = () => (/* @__PURE__ */ new Date()).toISOString(), Ze = (n) => {
-  De(n), Ke(n);
-  const e = n.instrumentations ?? {
+}, V = () => (/* @__PURE__ */ new Date()).toISOString(), st = (i) => {
+  Oe(i), Je(i);
+  const e = i.instrumentations ?? {
     errors: !0,
     webVitals: !0,
     session: !0
   };
-  return e.session !== !1 && Ye(n), e.errors !== !1 && qe(n), e.webVitals !== !1 && We(n), {
+  return e.session !== !1 && et(i), e.errors !== !1 && Xe(i), e.webVitals !== !1 && tt(i), {
     pushError(t, s) {
-      M({
+      N({
         type: "exception",
         payload: {
           type: t.name,
           value: t.message,
-          timestamp: _(),
+          timestamp: V(),
           stacktrace: t.stack ? { frames: q(t.stack) } : void 0,
           context: s?.context
         }
-      }, n);
+      }, i);
     },
     pushEvent(t, s) {
-      M({
+      N({
         type: "event",
         payload: {
           name: t,
-          timestamp: _(),
+          timestamp: V(),
           attributes: s
         }
-      }, n);
+      }, i);
     },
     pushMeasurement(t) {
-      M({
+      N({
         type: "measurement",
         payload: {
           type: t.type,
           values: t.values,
-          timestamp: _(),
+          timestamp: V(),
           context: t.context
         }
-      }, n);
+      }, i);
     },
     pushLog(t, s) {
-      M({
+      N({
         type: "log",
         payload: {
           message: t.join(" "),
-          level: s?.level ?? B.INFO,
-          timestamp: _(),
+          level: s?.level ?? _.INFO,
+          timestamp: V(),
           context: s?.context
         }
-      }, n);
+      }, i);
     },
     setUser(t) {
-      Te(t);
+      Re(t);
     },
     resetUser() {
-      Le();
+      Ue();
     },
     setView(t) {
-      Be(t);
+      ze(t);
     },
     flush() {
-      U(n);
+      R(i);
     }
   };
-}, Ge = (n) => n === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", Xe = () => {
+}, nt = (i) => i === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", it = () => {
   if (typeof window > "u")
     return !1;
-  const n = window.location.hostname;
-  return n === "localhost" || n === "127.0.0.1" || n === "0.0.0.0" || n === "::1" || n === "[::1]" || n.endsWith(".localhost");
+  const i = window.location.hostname;
+  return i === "localhost" || i === "127.0.0.1" || i === "0.0.0.0" || i === "::1" || i === "[::1]" || i.endsWith(".localhost");
 };
-let F = null;
-const Qe = (n) => {
-  if (F)
-    return F;
-  if (Xe())
+let E = null;
+const at = (i) => {
+  if (E)
+    return E;
+  if (it())
     return null;
-  const e = Ge(n.environment);
-  return F = Ze({
+  const e = nt(i.environment);
+  return E = st({
     url: e,
     app: {
       name: "odus-checkout",
-      environment: n.environment === "test" ? "sandbox" : "production"
+      environment: i.environment === "test" ? "sandbox" : "production"
     },
     isolate: !0,
     sessionTracking: {
       enabled: !0,
       session: {
-        id: n.sessionId
+        id: i.sessionId
       }
     },
     beforeSend: (t) => {
@@ -368,44 +368,236 @@ const Qe = (n) => {
             "card",
             "cvv",
             "pan"
-          ].forEach((a) => {
-            s.searchParams.has(a) && s.searchParams.set(a, "[REDACTED]");
+          ].forEach((n) => {
+            s.searchParams.has(n) && s.searchParams.set(n, "[REDACTED]");
           }), t.meta.view.name = s.toString();
         } catch {
         }
       return t;
     }
-  }), F;
-}, Je = (n, e) => {
-  F && F.pushError(n, { context: e });
-}, C = (n, e) => {
-  F && F.pushEvent(n, e);
-}, te = (n, e, t, s) => {
-  F && F.pushMeasurement({
-    type: n,
-    values: { [n]: e },
+  }), E;
+}, rt = (i, e) => {
+  E && E.pushError(i, { context: e });
+}, F = (i, e) => {
+  E && E.pushEvent(i, e);
+}, ne = (i, e, t, s) => {
+  E && E.pushMeasurement({
+    type: i,
+    values: { [i]: e },
     context: {
       ...t && { unit: t },
       ...s
     }
   });
-}, Et = (n, e = "info", t) => {
-  if (!F) return;
+}, Dt = (i, e = "info", t) => {
+  if (!E) return;
   const s = {
-    info: B.INFO,
-    warn: B.WARN,
-    error: B.ERROR
+    info: _.INFO,
+    warn: _.WARN,
+    error: _.ERROR
   };
-  F.pushLog([n], {
+  E.pushLog([i], {
     level: s[e],
     context: t
   });
+}, ie = {
+  test: "tntwpdhfwng",
+  live: "TBD"
+}, ae = {
+  test: "sandbox",
+  live: "live"
 };
-function K(n) {
+class I {
+  vgsForm = null;
+  fields = [];
+  readyResolve;
+  readyPromise;
+  environment;
+  constructor() {
+    this.readyPromise = new Promise((e) => {
+      this.readyResolve = e;
+    });
+  }
+  async init(e) {
+    return this.environment = e, await pe({
+      vaultId: ie[e],
+      environment: ae[e],
+      version: "3.2.2"
+    });
+  }
+  createForm(e, t) {
+    if (!this.environment)
+      throw new Error("VGS not initialized — call init() first");
+    return this.vgsForm = e.create(
+      ie[this.environment],
+      ae[this.environment],
+      t
+    ), this.readyResolve?.(), this.vgsForm;
+  }
+  whenReady() {
+    return this.readyPromise;
+  }
+  mountCardFields(e, t, s, a) {
+    if (!this.vgsForm)
+      throw new Error("VGS form not initialized");
+    if (e.cardNumber) {
+      const n = this.vgsForm.cardNumberField(e.cardNumber, {
+        placeholder: s.cardNumber,
+        autoComplete: "cc-number",
+        validations: ["required", "validCardNumber"],
+        css: t
+      });
+      n.on("update", (r) => {
+        a && a(I.mapCardType(r.cardType));
+      }), this.fields.push(n);
+    }
+    if (e.cardExpiry) {
+      const n = this.vgsForm.cardExpirationDateField(
+        e.cardExpiry,
+        {
+          placeholder: s.cardExpiry,
+          autoComplete: "cc-exp",
+          validations: ["required", "validCardExpirationDate"],
+          css: t
+        }
+      );
+      this.fields.push(n);
+    }
+    if (e.cardCvv) {
+      const n = this.vgsForm.cardCVCField(e.cardCvv, {
+        placeholder: s.cardCvv,
+        autoComplete: "cc-csc",
+        validations: ["required", "validCardSecurityCode"],
+        css: t
+      });
+      this.fields.push(n);
+    }
+    if (e.cardholderName) {
+      const n = this.vgsForm.cardholderNameField(
+        e.cardholderName,
+        {
+          placeholder: s.cardholderName,
+          autoComplete: "cc-name",
+          validations: ["required"],
+          css: t
+        }
+      );
+      this.fields.push(n);
+    }
+  }
+  waitForFieldsReady() {
+    return Promise.all(this.fields.map((e) => e.promise));
+  }
+  createCard(e) {
+    if (!this.vgsForm)
+      return Promise.reject(new Error("VGS form not initialized"));
+    const t = this.vgsForm;
+    return new Promise((s, a) => {
+      t.createCard(
+        { auth: e },
+        (n, r) => {
+          if (r?.errors) {
+            a(r.errors);
+            return;
+          }
+          const l = r?.data;
+          if (!l?.id) {
+            a(new Error("Card creation failed: no card ID returned"));
+            return;
+          }
+          if (n === 303) {
+            this.patchCard(e, l.id).then(s).catch(a);
+            return;
+          }
+          s(I.extractCardResult(l));
+        },
+        (n) => {
+          a(n);
+        }
+      );
+    });
+  }
+  patchCard(e, t) {
+    if (!this.vgsForm || !this.environment)
+      return Promise.reject(new Error("VGS not initialized"));
+    const s = this.vgsForm;
+    return new Promise((a, n) => {
+      s.submit(
+        `/cards/${t}`,
+        {
+          method: "PATCH",
+          headers: {
+            Authorization: `Bearer ${e}`,
+            "Content-Type": "application/vnd.api+json"
+          },
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          data: (r) => ({
+            data: {
+              attributes: {
+                cvc: r.cvc,
+                exp_month: r["exp-date"].month,
+                exp_year: r["exp-date"].year
+              }
+            }
+          })
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (r, l) => {
+          if (r >= 400 || l?.errors) {
+            n(l?.errors ?? new Error("Card update failed"));
+            return;
+          }
+          const d = l?.data;
+          if (!d?.id) {
+            n(new Error("Card update failed: no card ID returned"));
+            return;
+          }
+          const c = I.extractCardResult(d), p = l.included?.find(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (b) => b.type === "card_updates"
+          );
+          p?.attributes?.updated_values?.length && (c.updatedValues = p.attributes.updated_values), a(c);
+        },
+        (r) => {
+          n(r);
+        }
+      );
+    });
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static extractCardResult(e) {
+    const t = e.attributes;
+    return {
+      cardId: e.id,
+      expMonth: String(t?.exp_month ?? ""),
+      cvc: String(t?.cvc ?? ""),
+      expYear: String(t?.exp_year ?? ""),
+      name: String(t?.cardholder?.name ?? "")
+    };
+  }
+  destroy() {
+    this.vgsForm = null, this.fields = [];
+  }
+  static mapCardType(e) {
+    return e ? {
+      visa: "visa",
+      mastercard: "mastercard",
+      "american-express": "amex",
+      amex: "amex",
+      "diners-club": "unknown",
+      discover: "discover",
+      jcb: "unknown",
+      unionpay: "unknown",
+      maestro: "unknown",
+      elo: "unknown"
+    }[e] ?? "unknown" : "unknown";
+  }
+}
+function K(i) {
   return {
     name: "Custom Appearance",
-    additionalPaymentMethods: n.additionalPaymentMethods || {},
-    styles: n.styles || {
+    additionalPaymentMethods: i.additionalPaymentMethods || {},
+    styles: i.styles || {
       fontSize: 14,
       textColor: "#000000",
       buttonColor: "#0070f3",
@@ -415,102 +607,102 @@ function K(n) {
       buttonFontSize: 16
     },
     layout: {
-      grouped: n.layout?.grouped,
-      actionButton: n.layout?.actionButton || {
+      grouped: i.layout?.grouped,
+      actionButton: i.layout?.actionButton || {
         translationKey: null
       },
-      phoneNumber: n.layout?.phoneNumber ? {
-        enabled: n.layout.phoneNumber.enabled,
-        label: n.layout.phoneNumber.label,
-        defaultCountry: n.layout.phoneNumber.defaultCountry,
-        allowedCountries: n.layout.phoneNumber.allowedCountries
+      phoneNumber: i.layout?.phoneNumber ? {
+        enabled: i.layout.phoneNumber.enabled,
+        label: i.layout.phoneNumber.label,
+        defaultCountry: i.layout.phoneNumber.defaultCountry,
+        allowedCountries: i.layout.phoneNumber.allowedCountries
       } : void 0,
       billingFields: {
         street: {
-          enabled: n.layout?.billingFields?.street?.enabled ?? !1,
-          label: n.layout?.billingFields?.street?.label
+          enabled: i.layout?.billingFields?.street?.enabled ?? !1,
+          label: i.layout?.billingFields?.street?.label
         },
         city: {
-          enabled: n.layout?.billingFields?.city?.enabled ?? !1,
-          label: n.layout?.billingFields?.city?.label
+          enabled: i.layout?.billingFields?.city?.enabled ?? !1,
+          label: i.layout?.billingFields?.city?.label
         },
         state: {
-          enabled: n.layout?.billingFields?.state?.enabled ?? !1,
-          label: n.layout?.billingFields?.state?.label,
-          options: n.layout?.billingFields?.state?.options
+          enabled: i.layout?.billingFields?.state?.enabled ?? !1,
+          label: i.layout?.billingFields?.state?.label,
+          options: i.layout?.billingFields?.state?.options
         },
         zipCode: {
-          enabled: n.layout?.billingFields?.zipCode?.enabled ?? !1,
-          label: n.layout?.billingFields?.zipCode?.label
+          enabled: i.layout?.billingFields?.zipCode?.enabled ?? !1,
+          label: i.layout?.billingFields?.zipCode?.label
         },
         firstName: {
-          enabled: n.layout?.billingFields?.firstName?.enabled ?? !1,
-          label: n.layout?.billingFields?.firstName?.label
+          enabled: i.layout?.billingFields?.firstName?.enabled ?? !1,
+          label: i.layout?.billingFields?.firstName?.label
         },
         lastName: {
-          enabled: n.layout?.billingFields?.lastName?.enabled ?? !1,
-          label: n.layout?.billingFields?.lastName?.label
+          enabled: i.layout?.billingFields?.lastName?.enabled ?? !1,
+          label: i.layout?.billingFields?.lastName?.label
         },
         country: {
-          enabled: n.layout?.billingFields?.country?.enabled ?? !1,
-          label: n.layout?.billingFields?.country?.label,
-          options: n.layout?.billingFields?.country?.options
+          enabled: i.layout?.billingFields?.country?.enabled ?? !1,
+          label: i.layout?.billingFields?.country?.label,
+          options: i.layout?.billingFields?.country?.options
         }
       },
-      shippingFields: n.layout?.shippingFields ? {
+      shippingFields: i.layout?.shippingFields ? {
         street: {
-          enabled: n.layout.shippingFields.street?.enabled ?? !1,
-          label: n.layout.shippingFields.street?.label
+          enabled: i.layout.shippingFields.street?.enabled ?? !1,
+          label: i.layout.shippingFields.street?.label
         },
         firstName: {
-          enabled: n.layout.shippingFields.firstName?.enabled ?? !1,
-          label: n.layout.shippingFields.firstName?.label
+          enabled: i.layout.shippingFields.firstName?.enabled ?? !1,
+          label: i.layout.shippingFields.firstName?.label
         },
         lastName: {
-          enabled: n.layout.shippingFields.lastName?.enabled ?? !1,
-          label: n.layout.shippingFields.lastName?.label
+          enabled: i.layout.shippingFields.lastName?.enabled ?? !1,
+          label: i.layout.shippingFields.lastName?.label
         },
         city: {
-          enabled: n.layout.shippingFields.city?.enabled ?? !1,
-          label: n.layout.shippingFields.city?.label
+          enabled: i.layout.shippingFields.city?.enabled ?? !1,
+          label: i.layout.shippingFields.city?.label
         },
         state: {
-          enabled: n.layout.shippingFields.state?.enabled ?? !1,
-          label: n.layout.shippingFields.state?.label,
-          options: n.layout.shippingFields.state?.options
+          enabled: i.layout.shippingFields.state?.enabled ?? !1,
+          label: i.layout.shippingFields.state?.label,
+          options: i.layout.shippingFields.state?.options
         },
         zipCode: {
-          enabled: n.layout.shippingFields.zipCode?.enabled ?? !1,
-          label: n.layout.shippingFields.zipCode?.label
+          enabled: i.layout.shippingFields.zipCode?.enabled ?? !1,
+          label: i.layout.shippingFields.zipCode?.label
         },
         country: {
-          enabled: n.layout.shippingFields.country?.enabled ?? !1,
-          label: n.layout.shippingFields.country?.label,
-          options: n.layout.shippingFields.country?.options
+          enabled: i.layout.shippingFields.country?.enabled ?? !1,
+          label: i.layout.shippingFields.country?.label,
+          options: i.layout.shippingFields.country?.options
         }
       } : void 0
     },
     appearance: {
-      additionalPaymentMethods: n.additionalPaymentMethods ? {
-        applePay: n.additionalPaymentMethods.applePay ? {
-          displayName: n.additionalPaymentMethods.applePay.displayName,
-          requiredBillingContactFields: n.additionalPaymentMethods.applePay.requiredBillingContactFields,
-          requiredShippingContactFields: n.additionalPaymentMethods.applePay.requiredShippingContactFields
+      additionalPaymentMethods: i.additionalPaymentMethods ? {
+        applePay: i.additionalPaymentMethods.applePay ? {
+          displayName: i.additionalPaymentMethods.applePay.displayName,
+          requiredBillingContactFields: i.additionalPaymentMethods.applePay.requiredBillingContactFields,
+          requiredShippingContactFields: i.additionalPaymentMethods.applePay.requiredShippingContactFields
         } : void 0
       } : void 0
     }
   };
 }
-function et({
-  appearance: n
+function ot({
+  appearance: i
 }) {
-  const e = ie({
+  const e = de({
     checkoutProfile: void 0,
     isLoading: !0,
     error: null
   });
-  if (n) {
-    const s = K(n);
+  if (i) {
+    const s = K(i);
     return Promise.resolve().then(() => {
       e.setState({
         checkoutProfile: s,
@@ -520,10 +712,10 @@ function et({
     }), {
       getState: e.getState.bind(e),
       subscribe: e.subscribe.bind(e),
-      updateProfile: (i) => {
-        const a = K(i);
+      updateProfile: (a) => {
+        const n = K(a);
         e.setState({
-          checkoutProfile: a,
+          checkoutProfile: n,
           isLoading: !1,
           error: null
         });
@@ -570,9 +762,9 @@ function et({
     getState: e.getState.bind(e),
     subscribe: e.subscribe.bind(e),
     updateProfile: (s) => {
-      const i = K(s);
+      const a = K(s);
       e.setState({
-        checkoutProfile: i,
+        checkoutProfile: a,
         isLoading: !1,
         error: null
       });
@@ -581,8 +773,8 @@ function et({
     }
   };
 }
-const tt = () => {
-  const n = ce(), e = ie({
+const lt = () => {
+  const i = ge(), e = de({
     formData: {
       name: "",
       email: "",
@@ -599,185 +791,199 @@ const tt = () => {
       cardCvv: !1
     },
     isValid: !1
-  }), t = (o, f, m, h) => {
+  }), t = (o, g, m, u) => {
     if (o === "cardCvv")
-      return n.cardCvv(f, m);
-    if (o === "phoneNumber" && h)
-      return n.phoneNumber(f, h);
-    const p = n[o];
-    return p?.(f);
+      return i.cardCvv(g, m);
+    if (o === "phoneNumber" && u)
+      return i.phoneNumber(g, u);
+    const f = i[o];
+    return f?.(g);
   }, s = (o) => {
-    const f = {};
-    return Object.keys(o).forEach((h) => {
-      const p = o[h];
-      if (p === void 0) return;
-      let c;
-      h === "cardCvv" ? c = t(h, p, o.cardNumber) : h === "phoneNumber" ? c = t(
-        h,
-        p,
+    const g = {};
+    return Object.keys(o).forEach((u) => {
+      const f = o[u];
+      if (f === void 0) return;
+      let h;
+      u === "cardCvv" ? h = t(u, f, o.cardNumber) : u === "phoneNumber" ? h = t(
+        u,
+        f,
         void 0,
         o.phoneCountryCode
-      ) : c = t(h, p), c && (f[h] = c);
+      ) : h = t(u, f), h && (g[u] = h);
     }), [
       "billingAddress",
       "shippingAddress"
-    ].forEach((h) => {
-      const p = o[h];
-      if (p && typeof p == "object") {
-        const c = {};
-        Object.keys(p).forEach(
-          (b) => {
-            const g = p[b];
-            if (g === void 0) return;
-            const S = n[b];
+    ].forEach((u) => {
+      const f = o[u];
+      if (f && typeof f == "object") {
+        const h = {};
+        Object.keys(f).forEach(
+          (y) => {
+            const v = f[y];
+            if (v === void 0) return;
+            const S = i[y];
             if (S) {
-              const N = S(g);
-              N && (c[b] = N);
+              const M = S(v);
+              M && (h[y] = M);
             }
           }
-        ), Object.keys(c).length > 0 && (f[h] = c);
+        ), Object.keys(h).length > 0 && (g[u] = h);
       }
-    }), f;
-  }, i = (o) => {
-    const f = s(o);
-    return Object.keys(f).length === 0;
-  }, a = "billingAddress.", r = "shippingAddress.", d = (o) => o.startsWith(a) ? {
+    }), g;
+  }, a = (o) => {
+    const g = s(o);
+    return Object.keys(g).length === 0;
+  }, n = "billingAddress.", r = "shippingAddress.", l = (o) => o.startsWith(n) ? {
     parent: "billingAddress",
-    field: o.slice(a.length)
+    field: o.slice(n.length)
   } : o.startsWith(r) ? {
     parent: "shippingAddress",
     field: o.slice(r.length)
-  } : null, l = (o, f, m, h) => {
-    const p = { ...o };
-    if (h)
-      p[f] = {
-        ...p[f],
-        [m]: h
+  } : null, d = (o, g, m, u) => {
+    const f = { ...o };
+    if (u)
+      f[g] = {
+        ...f[g],
+        [m]: u
       };
     else {
-      const c = {
-        ...p[f]
+      const h = {
+        ...f[g]
       };
-      delete c[m], Object.keys(c).length === 0 ? delete p[f] : p[f] = c;
+      delete h[m], Object.keys(h).length === 0 ? delete f[g] : f[g] = h;
     }
-    return p;
-  }, u = (o, f) => {
+    return f;
+  }, c = (o, g) => {
     const m = e.getState();
-    let h = f;
-    const p = d(o);
-    if (!p && o in V)
+    let u = g;
+    const f = l(o);
+    if (!f && o in U)
       if (o === "cardCvv") {
-        const S = he(m.formData.cardNumber) === "amex" ? 4 : 3;
-        h = V.cardCvv(f, S);
+        const S = fe(m.formData.cardNumber) === "amex" ? 4 : 3;
+        u = U.cardCvv(g, S);
       } else
-        h = V[o](f);
-    let c;
-    if (p) {
-      const { parent: g, field: S } = p;
-      c = {
+        u = U[o](g);
+    let h;
+    if (f) {
+      const { parent: v, field: S } = f;
+      h = {
         ...m.formData,
-        [g]: {
-          ...m.formData[g] ?? {},
-          [S]: h
+        [v]: {
+          ...m.formData[v] ?? {},
+          [S]: u
         }
       };
     } else
-      c = {
+      h = {
         ...m.formData,
-        [o]: h
+        [o]: u
       };
-    let b = { ...m.errors };
-    if (o === "phoneCountryCode" && c.phoneNumber) {
-      const g = t(
+    let y = { ...m.errors };
+    if (o === "phoneCountryCode" && h.phoneNumber) {
+      const v = t(
         "phoneNumber",
-        c.phoneNumber,
+        h.phoneNumber,
         void 0,
-        h
+        u
       );
-      g ? b.phoneNumber = g : delete b.phoneNumber;
+      v ? y.phoneNumber = v : delete y.phoneNumber;
     }
     if (m.touched[o])
-      if (p) {
-        const { parent: g, field: S } = p, N = n[S], D = N ? N(
-          h
+      if (f) {
+        const { parent: v, field: S } = f, M = i[S], x = M ? M(
+          u
         ) : void 0;
-        b = l(b, g, S, D);
+        y = d(y, v, S, x);
       } else {
-        let g;
-        o === "cardCvv" ? g = t(o, h, c.cardNumber) : o === "phoneNumber" ? g = t(
+        let v;
+        o === "cardCvv" ? v = t(o, u, h.cardNumber) : o === "phoneNumber" ? v = t(
           o,
-          h,
+          u,
           void 0,
-          c.phoneCountryCode
-        ) : g = t(o, h), g ? b[o] = g : delete b[o];
+          h.phoneCountryCode
+        ) : v = t(o, u), v ? y[o] = v : delete y[o];
       }
     e.setState({
-      formData: c,
-      errors: b,
-      isValid: i(c)
+      formData: h,
+      errors: y,
+      isValid: a(h)
     });
-  }, E = (o, f) => {
-    const m = e.getState(), h = d(o);
-    if (h) {
-      const { parent: g, field: S } = h, N = {
+  }, p = (o, g) => {
+    const m = e.getState(), u = l(o);
+    if (u) {
+      const { parent: v, field: S } = u, M = {
         ...m.formData,
-        [g]: {
-          ...m.formData[g] ?? {},
-          [S]: f
+        [v]: {
+          ...m.formData[v] ?? {},
+          [S]: g
         }
-      }, D = n[S], le = D ? D(f) : void 0, de = l(m.errors, g, S, le);
+      }, x = i[S], ue = x ? x(g) : void 0, me = d(m.errors, v, S, ue);
       e.setState({
-        formData: N,
+        formData: M,
         touched: {
           ...m.touched,
           [o]: !0
         },
-        errors: de,
-        isValid: i(N)
+        errors: me,
+        isValid: a(M)
       });
       return;
     }
-    const p = {
+    const f = {
       ...m.touched,
       [o]: !0
     };
-    let c;
-    o === "cardCvv" ? c = t(o, f, m.formData.cardNumber) : o === "phoneNumber" ? c = t(
+    let h;
+    o === "cardCvv" ? h = t(o, g, m.formData.cardNumber) : o === "phoneNumber" ? h = t(
       o,
-      f,
+      g,
       void 0,
       m.formData.phoneCountryCode
-    ) : c = t(o, f);
-    const b = { ...m.errors };
-    c ? b[o] = c : delete b[o], e.setState({
-      touched: p,
-      errors: b
+    ) : h = t(o, g);
+    const y = { ...m.errors };
+    h ? y[o] = h : delete y[o], e.setState({
+      touched: f,
+      errors: y
     });
-  }, y = (o) => {
+  }, b = (o) => {
     const m = {
       ...e.getState().formData,
       ...o
     };
     e.setState({
       formData: m,
-      isValid: i(m)
+      isValid: a(m)
     });
   };
   return {
     getFormState: e.getState.bind(e),
     subscribe: e.subscribe.bind(e),
-    handleChange: u,
-    handleBlur: E,
-    setFormData: y,
+    handleChange: c,
+    handleBlur: p,
+    setFormData: b,
     reset: e.resetState.bind(e)
   };
-};
-function $(n) {
-  if (!n) return !1;
-  const { billingFields: e, shippingFields: t } = n, s = e && Object.values(e).some((a) => a?.enabled), i = t && Object.values(t).some((a) => a?.enabled);
-  return !!(s || i);
+}, dt = "https://fonts.googleapis.com/css2", ct = /src:\s*url\(([^)]+\.woff2[^)]*)\)/, ht = /\/\*\s*latin\s*\*\/\s*@font-face\s*\{[^}]*src:\s*url\(([^)]+\.woff2[^)]*)\)[^}]*\}/;
+async function ut(i) {
+  if (!i) return null;
+  const e = i.trim().replace(/\s+/g, "+"), t = `${dt}?family=${e}:wght@400;700&display=swap`;
+  try {
+    const s = await fetch(t);
+    if (!s.ok) return null;
+    const a = await s.text(), n = ht.exec(a);
+    if (n?.[1]) return n[1];
+    const r = ct.exec(a);
+    return r?.[1] ? r[1] : null;
+  } catch {
+    return null;
+  }
 }
-class se extends A {
+function W(i) {
+  if (!i) return !1;
+  const { billingFields: e, shippingFields: t } = i, s = e && Object.values(e).some((n) => n?.enabled), a = t && Object.values(t).some((n) => n?.enabled);
+  return !!(s || a);
+}
+class re extends P {
   inputs = /* @__PURE__ */ new Map();
   type;
   onChange;
@@ -789,159 +995,159 @@ class se extends A {
   grouped;
   constructor(e) {
     super("div", ["address-section"]), this.type = e.type, this.onChange = e.onChange, this.onBlur = e.onBlur, this.translationFunc = e.translationFunc, this.locale = e.locale, this.grouped = e.grouped ?? !0;
-    const { title: t, checkoutProfile: s, fieldsConfig: i, values: a, errors: r, touched: d } = e;
+    const { title: t, checkoutProfile: s, fieldsConfig: a, values: n, errors: r, touched: l } = e;
     if (this.grouped) {
-      const l = document.createElement("h3");
-      l.className = "address-section-title", l.textContent = t, l.style.color = s.styles.textColor, l.style.fontFamily = `"${s.styles.fontFamily}", sans-serif`, l.style.fontSize = `${s.styles.fontSize}px`, l.style.fontWeight = "normal", this.getElement().appendChild(l);
+      const d = document.createElement("h3");
+      d.className = "address-section-title", d.textContent = t, d.style.color = s.styles.textColor, d.style.fontFamily = `"${s.styles.fontFamily}", sans-serif`, d.style.fontSize = `${s.styles.fontSize}px`, d.style.fontWeight = "normal", this.getElement().appendChild(d);
     }
-    this.fieldsContainer = document.createElement("div"), this.fieldsContainer.className = "address-fields", this.grouped || this.fieldsContainer.classList.add("address-fields--ungrouped"), this.getElement().appendChild(this.fieldsContainer), this.createFields(s, i, a, r, d);
+    this.fieldsContainer = document.createElement("div"), this.fieldsContainer.className = "address-fields", this.grouped || this.fieldsContainer.classList.add("address-fields--ungrouped"), this.getElement().appendChild(this.fieldsContainer), this.createFields(s, a, n, r, l);
   }
-  borderRadius(e, t, s, i, a) {
-    const r = (d) => d ? `${e}px` : "0px";
-    return `${r(t)} ${r(s)} ${r(i)} ${r(a)}`;
+  borderRadius(e, t, s, a, n) {
+    const r = (l) => l ? `${e}px` : "0px";
+    return `${r(t)} ${r(s)} ${r(a)} ${r(n)}`;
   }
-  createFields(e, t, s, i, a) {
+  createFields(e, t, s, a, n) {
     if (!this.grouped) {
       this.createUngroupedFields(
         e,
         t,
         s,
-        i,
-        a
+        a,
+        n
       );
       return;
     }
-    const r = e.styles.borderRadius, d = {
+    const r = e.styles.borderRadius, l = {
       color: e.styles.textColor,
       fontSize: e.styles.fontSize,
       fontFamily: e.styles.fontFamily
-    }, l = [];
-    t.street?.enabled && l.push({ kind: "street" });
-    const u = [];
-    t.firstName?.enabled && u.push("firstName"), t.lastName?.enabled && u.push("lastName"), u.length > 0 && l.push({ kind: "name", fields: u }), t.country?.enabled && l.push({ kind: "country" });
-    const E = [];
-    t.city?.enabled && E.push("city"), t.zipCode?.enabled && E.push("zipCode"), E.length > 0 && l.push({ kind: "cityZip", fields: E }), t.state?.enabled && l.push({ kind: "state" });
-    const y = l.length;
-    l.forEach((o, f) => {
-      const m = f === 0, h = f === y - 1, p = (c, b) => ({
-        ...d,
+    }, d = [];
+    t.street?.enabled && d.push({ kind: "street" });
+    const c = [];
+    t.firstName?.enabled && c.push("firstName"), t.lastName?.enabled && c.push("lastName"), c.length > 0 && d.push({ kind: "name", fields: c }), t.country?.enabled && d.push({ kind: "country" });
+    const p = [];
+    t.city?.enabled && p.push("city"), t.zipCode?.enabled && p.push("zipCode"), p.length > 0 && d.push({ kind: "cityZip", fields: p }), t.state?.enabled && d.push({ kind: "state" });
+    const b = d.length;
+    d.forEach((o, g) => {
+      const m = g === 0, u = g === b - 1, f = (h, y) => ({
+        ...l,
         borderRadius: this.borderRadius(
           r,
-          m && c,
-          m && b,
-          h && b,
-          h && c
+          m && h,
+          m && y,
+          u && y,
+          u && h
         )
       });
       if (o.kind === "street") {
-        const c = this.createRow(["full"]), b = this.createInput(
+        const h = this.createRow(["full"]), y = this.createInput(
           "street",
           t.street?.label ?? this.translationFunc("address.addressLine1"),
           s.street,
-          i.street,
           a.street,
-          p(!0, !0),
+          n.street,
+          f(!0, !0),
           "street-address"
         );
-        this.inputs.set("street", b), c.appendChild(b.getElement()), this.fieldsContainer.appendChild(c);
+        this.inputs.set("street", y), h.appendChild(y.getElement()), this.fieldsContainer.appendChild(h);
         return;
       }
       if (o.kind === "name") {
-        const c = this.createRow(o.fields.map(() => "half")), b = o.fields.length === 1;
+        const h = this.createRow(o.fields.map(() => "half")), y = o.fields.length === 1;
         if (o.fields.includes("firstName")) {
-          const g = b || o.fields[o.fields.length - 1] === "firstName", S = this.createInput(
+          const v = y || o.fields[o.fields.length - 1] === "firstName", S = this.createInput(
             "firstName",
             t.firstName?.label ?? this.translationFunc("address.firstName"),
             s.firstName,
-            i.firstName,
             a.firstName,
-            p(!0, g),
+            n.firstName,
+            f(!0, v),
             "given-name"
           );
-          this.inputs.set("firstName", S), c.appendChild(S.getElement());
+          this.inputs.set("firstName", S), h.appendChild(S.getElement());
         }
         if (o.fields.includes("lastName")) {
-          const g = b || o.fields[0] === "lastName", S = this.createInput(
+          const v = y || o.fields[0] === "lastName", S = this.createInput(
             "lastName",
             t.lastName?.label ?? this.translationFunc("address.lastName"),
             s.lastName,
-            i.lastName,
             a.lastName,
-            p(g, !0),
+            n.lastName,
+            f(v, !0),
             "family-name"
           );
-          this.inputs.set("lastName", S), c.appendChild(S.getElement());
+          this.inputs.set("lastName", S), h.appendChild(S.getElement());
         }
-        this.fieldsContainer.appendChild(c);
+        this.fieldsContainer.appendChild(h);
         return;
       }
       if (o.kind === "country") {
-        const c = this.createRow(["full"]), b = this.createCountrySelect(
+        const h = this.createRow(["full"]), y = this.createCountrySelect(
           s.country,
-          i.country,
           a.country,
-          p(!0, !0),
+          n.country,
+          f(!0, !0),
           t.country?.options,
           t.country?.label
         );
-        this.inputs.set("country", b), c.appendChild(b.getElement()), this.fieldsContainer.appendChild(c);
+        this.inputs.set("country", y), h.appendChild(y.getElement()), this.fieldsContainer.appendChild(h);
         return;
       }
       if (o.kind === "cityZip") {
-        const c = this.createRow(o.fields.map(() => "half")), b = o.fields.length === 1;
+        const h = this.createRow(o.fields.map(() => "half")), y = o.fields.length === 1;
         if (o.fields.includes("city")) {
-          const g = b || o.fields[o.fields.length - 1] === "city", S = this.createInput(
+          const v = y || o.fields[o.fields.length - 1] === "city", S = this.createInput(
             "city",
             t.city?.label ?? this.translationFunc("address.townCity"),
             s.city,
-            i.city,
             a.city,
-            p(!0, g),
+            n.city,
+            f(!0, v),
             "address-level2"
           );
-          this.inputs.set("city", S), c.appendChild(S.getElement());
+          this.inputs.set("city", S), h.appendChild(S.getElement());
         }
         if (o.fields.includes("zipCode")) {
-          const g = b || o.fields[0] === "zipCode", S = this.createInput(
+          const v = y || o.fields[0] === "zipCode", S = this.createInput(
             "zipCode",
             t.zipCode?.label ?? this.translationFunc("address.postalCode"),
             s.zipCode,
-            i.zipCode,
             a.zipCode,
-            p(g, !0),
+            n.zipCode,
+            f(v, !0),
             "postal-code"
           );
-          this.inputs.set("zipCode", S), c.appendChild(S.getElement());
+          this.inputs.set("zipCode", S), h.appendChild(S.getElement());
         }
-        this.fieldsContainer.appendChild(c);
+        this.fieldsContainer.appendChild(h);
         return;
       }
       if (o.kind === "state") {
-        const c = this.createRow(["full"]);
+        const h = this.createRow(["full"]);
         if (this.stateOptions = t.state?.options, t.state?.options && t.state.options.length > 0) {
-          const g = this.createStateSelect(
+          const v = this.createStateSelect(
             s.state,
-            i.state,
             a.state,
-            p(!0, !0),
+            n.state,
+            f(!0, !0),
             t.state?.options,
             s.country,
             t.state?.label
           );
-          this.inputs.set("state", g), c.appendChild(g.getElement());
+          this.inputs.set("state", v), h.appendChild(v.getElement());
         } else {
-          const g = this.createInput(
+          const v = this.createInput(
             "state",
             t.state?.label ?? this.translationFunc("address.chooseState"),
             s.state,
-            i.state,
             a.state,
-            p(!0, !0),
+            n.state,
+            f(!0, !0),
             "address-level1"
           );
-          this.inputs.set("state", g), c.appendChild(g.getElement());
+          this.inputs.set("state", v), h.appendChild(v.getElement());
         }
-        this.fieldsContainer.appendChild(c);
+        this.fieldsContainer.appendChild(h);
       }
     });
   }
@@ -949,181 +1155,181 @@ class se extends A {
     const t = document.createElement("div");
     return t.className = `address-row address-row-${e.length === 1 ? "single" : "double"}`, t;
   }
-  createInput(e, t, s, i, a, r, d) {
-    const l = `${this.type}Address.${e}`, u = new re({
-      name: l,
+  createInput(e, t, s, a, n, r, l) {
+    const d = `${this.type}Address.${e}`, c = new ce({
+      name: d,
       error: !1,
       errorMsg: void 0,
       styles: r,
       ...this.grouped ? { placeholder: t } : {
         label: t,
         placeholder: (() => {
-          const E = `address.placeholder.${e}`, y = this.translationFunc(E);
-          return y !== E ? y : t;
+          const p = `address.placeholder.${e}`, b = this.translationFunc(p);
+          return b !== p ? b : t;
         })()
       },
       value: s,
-      autocomplete: d,
-      onChange: (E) => {
-        u.setError(!1);
-        const y = new Event("input", { bubbles: !0 });
-        Object.defineProperty(y, "target", {
+      autocomplete: l,
+      onChange: (p) => {
+        c.setError(!1);
+        const b = new Event("input", { bubbles: !0 });
+        Object.defineProperty(b, "target", {
           writable: !1,
           value: {
-            name: l,
-            value: E.target.value
+            name: d,
+            value: p.target.value
           }
-        }), this.onChange(y);
+        }), this.onChange(b);
       }
     });
-    return u.addEventListener("blur", (E) => {
-      const y = new Event("blur", { bubbles: !0 });
-      Object.defineProperty(y, "target", {
+    return c.addEventListener("blur", (p) => {
+      const b = new Event("blur", { bubbles: !0 });
+      Object.defineProperty(b, "target", {
         writable: !1,
         value: {
-          name: l,
-          value: E.target.value
+          name: d,
+          value: p.target.value
         }
-      }), this.onBlur(y);
-    }), u;
+      }), this.onBlur(b);
+    }), c;
   }
-  createCountrySelect(e, t, s, i, a, r) {
-    const d = `${this.type}Address.country`, l = ue(a, this.locale), u = new R({
-      name: d,
+  createCountrySelect(e, t, s, a, n, r) {
+    const l = `${this.type}Address.country`, d = ye(n, this.locale), c = new H({
+      name: l,
       error: !1,
       errorMsg: void 0,
-      styles: i,
+      styles: a,
       placeholder: this.translationFunc("address.chooseCountry"),
       ...!this.grouped && {
         label: r ?? this.translationFunc("address.chooseCountry")
       },
       value: e,
-      options: l,
+      options: d,
       autocomplete: "country",
-      onChange: (E) => {
-        u.setError(!1);
-        const y = E.target.value;
-        this.updateStateOptionsForCountry(y);
+      onChange: (p) => {
+        c.setError(!1);
+        const b = p.target.value;
+        this.updateStateOptionsForCountry(b);
         const o = new Event("change", { bubbles: !0 });
         Object.defineProperty(o, "target", {
           writable: !1,
           value: {
-            name: d,
-            value: y
+            name: l,
+            value: b
           }
         }), this.onChange(o);
       }
     });
-    return u.addEventListener("blur", (E) => {
-      const y = new Event("blur", { bubbles: !0 });
-      Object.defineProperty(y, "target", {
+    return c.addEventListener("blur", (p) => {
+      const b = new Event("blur", { bubbles: !0 });
+      Object.defineProperty(b, "target", {
         writable: !1,
         value: {
-          name: d,
-          value: E.target.value
+          name: l,
+          value: p.target.value
         }
-      }), this.onBlur(y);
-    }), u;
+      }), this.onBlur(b);
+    }), c;
   }
   updateStateOptionsForCountry(e) {
     const t = this.inputs.get("state");
-    if (!(t instanceof R)) return;
-    const s = e === "CA" ? "CA" : "US", i = Z(this.stateOptions, s), a = s === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
-    t.setOptions(i, a);
+    if (!(t instanceof H)) return;
+    const s = e === "CA" ? "CA" : "US", a = Z(this.stateOptions, s), n = s === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
+    t.setOptions(a, n);
   }
-  createStateSelect(e, t, s, i, a, r, d) {
-    const l = `${this.type}Address.state`, u = r === "CA" ? "CA" : "US", E = Z(a, u), y = u === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), o = new R({
-      name: l,
+  createStateSelect(e, t, s, a, n, r, l) {
+    const d = `${this.type}Address.state`, c = r === "CA" ? "CA" : "US", p = Z(n, c), b = c === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), o = new H({
+      name: d,
       error: !1,
       errorMsg: void 0,
-      styles: i,
-      placeholder: y,
-      ...!this.grouped && { label: d ?? y },
+      styles: a,
+      placeholder: b,
+      ...!this.grouped && { label: l ?? b },
       value: e,
-      options: E,
+      options: p,
       autocomplete: "address-level1",
-      onChange: (f) => {
+      onChange: (g) => {
         o.setError(!1);
         const m = new Event("change", { bubbles: !0 });
         Object.defineProperty(m, "target", {
           writable: !1,
           value: {
-            name: l,
-            value: f.target.value
+            name: d,
+            value: g.target.value
           }
         }), this.onChange(m);
       }
     });
-    return o.addEventListener("blur", (f) => {
+    return o.addEventListener("blur", (g) => {
       const m = new Event("blur", { bubbles: !0 });
       Object.defineProperty(m, "target", {
         writable: !1,
         value: {
-          name: l,
-          value: f.target.value
+          name: d,
+          value: g.target.value
         }
       }), this.onBlur(m);
     }), o;
   }
-  createUngroupedFields(e, t, s, i, a) {
-    const r = e.styles.borderRadius, d = {
+  createUngroupedFields(e, t, s, a, n) {
+    const r = e.styles.borderRadius, l = {
       color: e.styles.textColor,
       fontSize: e.styles.fontSize,
       fontFamily: e.styles.fontFamily,
       borderRadius: `${r}px`
-    }, l = (u, E, y) => {
-      if (!t[u]?.enabled) return;
-      const o = t[u]?.label ?? this.translationFunc(E), f = this.createRow(["full"]), m = this.createInput(
-        u,
+    }, d = (c, p, b) => {
+      if (!t[c]?.enabled) return;
+      const o = t[c]?.label ?? this.translationFunc(p), g = this.createRow(["full"]), m = this.createInput(
+        c,
         o,
-        s[u],
-        i[u],
-        a[u],
-        d,
-        y
+        s[c],
+        a[c],
+        n[c],
+        l,
+        b
       );
-      this.inputs.set(u, m), f.appendChild(m.getElement()), this.fieldsContainer.appendChild(f);
+      this.inputs.set(c, m), g.appendChild(m.getElement()), this.fieldsContainer.appendChild(g);
     };
-    if (l("firstName", "address.firstName", "given-name"), l("lastName", "address.lastName", "family-name"), l("street", "address.addressLine1", "street-address"), l("city", "address.townCity", "address-level2"), t.country?.enabled) {
-      const u = t.country?.label ?? this.translationFunc("address.chooseCountry"), E = this.createRow(["full"]), y = this.createCountrySelect(
+    if (d("firstName", "address.firstName", "given-name"), d("lastName", "address.lastName", "family-name"), d("street", "address.addressLine1", "street-address"), d("city", "address.townCity", "address-level2"), t.country?.enabled) {
+      const c = t.country?.label ?? this.translationFunc("address.chooseCountry"), p = this.createRow(["full"]), b = this.createCountrySelect(
         s.country,
-        i.country,
         a.country,
-        d,
+        n.country,
+        l,
         t.country?.options,
-        u
+        c
       );
-      this.inputs.set("country", y), E.appendChild(y.getElement()), this.fieldsContainer.appendChild(E);
+      this.inputs.set("country", b), p.appendChild(b.getElement()), this.fieldsContainer.appendChild(p);
     }
     if (t.state?.enabled) {
       this.stateOptions = t.state?.options;
-      const u = this.createRow(["full"]), E = t.state?.options && t.state.options.length > 0, y = t.state?.label ?? this.translationFunc("address.chooseState");
-      if (E) {
+      const c = this.createRow(["full"]), p = t.state?.options && t.state.options.length > 0, b = t.state?.label ?? this.translationFunc("address.chooseState");
+      if (p) {
         const o = this.createStateSelect(
           s.state,
-          i.state,
           a.state,
-          d,
+          n.state,
+          l,
           t.state?.options,
           s.country,
-          y
+          b
         );
-        this.inputs.set("state", o), u.appendChild(o.getElement());
+        this.inputs.set("state", o), c.appendChild(o.getElement());
       } else {
         const o = this.createInput(
           "state",
-          y,
+          b,
           s.state,
-          i.state,
           a.state,
-          d,
+          n.state,
+          l,
           "address-level1"
         );
-        this.inputs.set("state", o), u.appendChild(o.getElement());
+        this.inputs.set("state", o), c.appendChild(o.getElement());
       }
-      this.fieldsContainer.appendChild(u);
+      this.fieldsContainer.appendChild(c);
     }
-    l("zipCode", "address.postalCode", "postal-code");
+    d("zipCode", "address.postalCode", "postal-code");
   }
   getValue(e) {
     return this.inputs.get(e)?.getValue() ?? "";
@@ -1148,28 +1354,28 @@ class se extends A {
     });
   }
   setError(e, t, s) {
-    const i = this.inputs.get(e);
-    if (i) {
-      const a = i.getElement().querySelector("input") || i.getElement().querySelector("select");
-      document.activeElement !== a && i.setError(t, s);
-    }
-  }
-  updateField(e, t, s, i) {
     const a = this.inputs.get(e);
     if (a) {
-      const d = a.getElement().querySelector("input") || a.getElement().querySelector("select"), l = a.getValue();
-      !(document.activeElement === d) && !(t === "" && l !== "") && this.setValue(e, t);
+      const n = a.getElement().querySelector("input") || a.getElement().querySelector("select");
+      document.activeElement !== n && a.setError(t, s);
     }
-    const r = !!(i && s);
+  }
+  updateField(e, t, s, a) {
+    const n = this.inputs.get(e);
+    if (n) {
+      const l = n.getElement().querySelector("input") || n.getElement().querySelector("select"), d = n.getValue();
+      !(document.activeElement === l) && !(t === "" && d !== "") && this.setValue(e, t);
+    }
+    const r = !!(a && s);
     this.setError(e, r, s);
   }
   updateAllFields(e, t, s) {
-    Object.keys(e).forEach((i) => {
+    Object.keys(e).forEach((a) => {
       this.updateField(
-        i,
-        e[i],
-        t[i],
-        !!s[i]
+        a,
+        e[a],
+        t[a],
+        !!s[a]
       );
     });
   }
@@ -1178,66 +1384,108 @@ class se extends A {
     e && e.focus();
   }
 }
-class st {
-  input;
+class mt {
+  input = null;
+  isVgsMode;
+  vgsWrapper = null;
+  vgsContainer = null;
+  vgsHelperText = null;
+  wrapperElement;
   constructor(e) {
     const {
       value: t,
       onChange: s,
-      onBlur: i,
-      errorMsg: a,
+      onBlur: a,
+      errorMsg: n,
       checkoutProfile: r,
-      translationFunc: d,
-      autocomplete: l = "cc-name"
+      translationFunc: l,
+      autocomplete: d = "cc-name",
+      isVgsMode: c = !1
     } = e;
-    this.input = new re({
+    this.isVgsMode = c, this.wrapperElement = document.createElement("div"), c ? this.buildVgsLayout(r, l) : this.buildNativeLayout(
+      t,
+      s,
+      a,
+      n,
+      r,
+      l,
+      d
+    );
+  }
+  buildVgsLayout(e, t) {
+    const s = e.styles.borderRadius, a = document.createElement("div");
+    a.style.marginBottom = "4px";
+    const n = document.createElement("label");
+    n.className = "input-label", n.textContent = t("cardholderNameLabel"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), this.wrapperElement.appendChild(a), this.vgsWrapper = document.createElement("div"), this.vgsWrapper.className = "vgs-wrap", this.vgsWrapper.style.position = "relative", this.vgsWrapper.style.borderRadius = `${s}px`, this.vgsWrapper.style.height = "38.5px", this.vgsWrapper.style.width = "100%", this.vgsWrapper.style.overflow = "hidden", this.vgsWrapper.style.background = "#fff", this.vgsWrapper.style.boxShadow = "none";
+    const r = document.createElement("div");
+    r.className = "vgs-field-skeleton", this.vgsWrapper.appendChild(r), this.vgsContainer = document.createElement("div"), this.vgsContainer.id = `vgs-cc-name-${Date.now()}`, this.vgsContainer.style.position = "relative", this.vgsContainer.style.zIndex = "1", this.vgsContainer.style.width = "100%", this.vgsContainer.style.height = "100%", this.vgsWrapper.appendChild(this.vgsContainer), this.wrapperElement.appendChild(this.vgsWrapper), this.vgsHelperText = new be({ visible: !1 }), this.wrapperElement.appendChild(this.vgsHelperText.getElement());
+  }
+  buildNativeLayout(e, t, s, a, n, r, l) {
+    this.input = new ce({
       name: "name",
-      label: d("cardholderNameLabel"),
-      // Always hide error initially - we'll show it only on blur if needed
+      label: r("cardholderNameLabel"),
       error: !1,
       errorMsg: a,
       styles: {
-        color: r.styles.textColor,
-        borderRadius: `${r.styles.borderRadius}px`,
-        fontSize: r.styles.fontSize,
-        fontFamily: r.styles.fontFamily
+        color: n.styles.textColor,
+        borderRadius: `${n.styles.borderRadius}px`,
+        fontSize: n.styles.fontSize,
+        fontFamily: n.styles.fontFamily
       },
-      placeholder: d("cardholderNamePlaceholder"),
-      value: t,
+      placeholder: r("cardholderNamePlaceholder"),
+      value: e,
       autocomplete: l,
-      onChange: (u) => {
-        const y = u.target.value, o = y.replace(/[^a-zA-Z\s\-'.]/g, "");
-        y !== o && this.input.setValue(o), this.input.setError(!1), this.trim(), s(u);
+      onChange: (d) => {
+        const p = d.target.value, b = p.replace(/[^a-zA-Z\s\-'.]/g, "");
+        p !== b && this.input?.setValue(b), this.input?.setError(!1), this.trim(), t(d);
       }
-    }), this.input.addEventListener("blur", (u) => {
-      i(u);
-    });
+    }), this.input.addEventListener("blur", (d) => {
+      s(d);
+    }), this.wrapperElement.appendChild(this.input.getElement());
+  }
+  getVgsContainerId() {
+    return this.vgsContainer?.id;
+  }
+  handleVgsStateChange(e, t) {
+    if (!this.isVgsMode || !this.vgsWrapper) return;
+    const a = !!e[J.CARDHOLDER]?.isFocused;
+    if (this.vgsWrapper.classList.toggle("vgs-wrap-focused", a), !t || !this.vgsHelperText) return;
+    const n = t[J.CARDHOLDER];
+    n ? (this.vgsHelperText.setText(n), this.vgsHelperText.toggleVisibility(!0)) : this.vgsHelperText.toggleVisibility(!1);
+  }
+  hideFakePlaceholder() {
+    if (!this.vgsWrapper) return;
+    this.vgsWrapper.style.boxShadow = "";
+    const e = this.vgsWrapper.querySelector(".vgs-field-skeleton");
+    e && e.remove();
   }
   getValue() {
-    return this.input.getValue();
+    return this.isVgsMode ? "" : this.input?.getValue() ?? "";
   }
   setValue(e) {
-    return this.input.setValue(e), this;
+    return this.isVgsMode || this.input?.setValue(e), this;
   }
   trim() {
+    if (this.isVgsMode) return this;
     const e = this.getValue().trimStart();
     return this.setValue(e), this;
   }
   setError(e, t) {
-    const s = this.input.getElement().querySelector("input");
-    return document.activeElement !== s && this.input.setError(e, t), this;
+    if (this.isVgsMode) return this;
+    const s = this.input?.getElement().querySelector("input");
+    return s && document.activeElement !== s && this.input?.setError(e, t), this;
   }
   getElement() {
-    return this.input.getElement();
+    return !this.isVgsMode && this.input ? this.input.getElement() : this.wrapperElement;
   }
   appendTo(e) {
-    return this.input.appendTo(e), this;
+    return e.appendChild(this.getElement()), this;
   }
   focus() {
-    this.input.focus();
+    this.isVgsMode || this.input?.focus();
   }
 }
-class oe extends A {
+class he extends P {
   constructor() {
     super("div", ["skeleton-container"]), this.createSkeletonElements();
   }
@@ -1245,35 +1493,35 @@ class oe extends A {
     this.appendChild(this.createPaymentMethodSkeleton()), this.appendChild(this.createPaymentSeparatorSkeleton());
   }
   createPaymentMethodSkeleton() {
-    const e = w.createDiv(["skeleton-field"]), t = w.createDiv([
+    const e = k.createDiv(["skeleton-field"]), t = k.createDiv([
       "skeleton",
       "skeleton-payment-method"
     ]);
     return e.appendChild(t), e;
   }
   createPaymentSeparatorSkeleton() {
-    const e = w.createDiv([
+    const e = k.createDiv([
       "payment-separator_container"
-    ]), t = w.createDiv(["payment-separator__line"]), s = w.createDiv([
+    ]), t = k.createDiv(["payment-separator__line"]), s = k.createDiv([
       "skeleton",
       "skeleton-separator-text"
-    ]), i = w.createDiv(["payment-separator__line"]);
-    return e.appendChild(t), e.appendChild(s), e.appendChild(i), e;
+    ]), a = k.createDiv(["payment-separator__line"]);
+    return e.appendChild(t), e.appendChild(s), e.appendChild(a), e;
   }
 }
-class nt extends A {
+class pt extends P {
   constructor(e) {
     const { translationFunc: t, checkoutProfile: s } = e;
     super("div", ["payment-separator"]);
-    const i = this.getElement(), a = document.createElement("span");
-    a.className = "payment-separator__line";
+    const a = this.getElement(), n = document.createElement("span");
+    n.className = "payment-separator__line";
     const r = document.createElement("p");
     r.textContent = t("pay-with-card"), r.className = "payment-separator__text", r.style.fontFamily = `${s.styles.fontFamily}, sans-serif`;
-    const d = document.createElement("span");
-    d.className = "payment-separator__line", i.appendChild(a), i.appendChild(r), i.appendChild(d);
+    const l = document.createElement("span");
+    l.className = "payment-separator__line", a.appendChild(n), a.appendChild(r), a.appendChild(l);
   }
 }
-class at extends A {
+class gt extends P {
   paymentMethods;
   paymentSeparator;
   skeleton;
@@ -1281,14 +1529,14 @@ class at extends A {
     const {
       checkoutProfile: t,
       formData: s,
-      onPaypalSubmit: i,
-      onApplePaySubmit: a,
+      onPaypalSubmit: a,
+      onApplePaySubmit: n,
       supportedPaymentMethods: r,
-      translationFunc: d,
-      paymentId: l,
-      checkoutKey: u,
-      checkoutDetails: E,
-      environment: y,
+      translationFunc: l,
+      paymentId: d,
+      checkoutKey: c,
+      checkoutDetails: p,
+      environment: b,
       countryCode: o
     } = e;
     if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
@@ -1299,44 +1547,44 @@ class at extends A {
       this.renderSkeleton();
       return;
     }
-    const f = Object.entries(
+    const g = Object.entries(
       t.additionalPaymentMethods
-    ).filter(([m, h]) => {
-      const p = h.enabled, c = r ? r[m] === !0 : !0, b = !h.countries || o && h.countries.includes(o);
-      return p && c && b;
-    }).sort((m, h) => m[1].order - h[1].order);
-    if (f.length === 0) {
+    ).filter(([m, u]) => {
+      const f = u.enabled, h = r ? r[m] === !0 : !0, y = !u.countries || o && u.countries.includes(o);
+      return f && h && y;
+    }).sort((m, u) => m[1].order - u[1].order);
+    if (g.length === 0) {
       this.getElement().style.display = "none";
       return;
     }
-    for (const [m] of f)
+    for (const [m] of g)
       switch (m) {
         case "paypal": {
-          if (i) {
-            const h = new pe({
+          if (a) {
+            const u = new Se({
               checkoutProfile: t,
               formData: s,
-              onSubmit: i
+              onSubmit: a
             });
-            this.paymentMethods.set("paypal", h), h.appendTo(this.getElement());
+            this.paymentMethods.set("paypal", u), u.appendTo(this.getElement());
           }
           break;
         }
         case "applePay": {
-          if (a && l && u) {
-            const h = t.appearance?.additionalPaymentMethods?.applePay, p = new me({
+          if (n && d && c) {
+            const u = t.appearance?.additionalPaymentMethods?.applePay, f = new ve({
               checkoutProfile: t,
               formData: s,
-              onSubmit: a,
-              paymentId: l,
-              checkoutKey: u,
-              checkoutDetails: E,
-              environment: y,
-              displayName: h?.displayName,
-              requiredBillingContactFields: h?.requiredBillingContactFields,
-              requiredShippingContactFields: h?.requiredShippingContactFields
+              onSubmit: n,
+              paymentId: d,
+              checkoutKey: c,
+              checkoutDetails: p,
+              environment: b,
+              displayName: u?.displayName,
+              requiredBillingContactFields: u?.requiredBillingContactFields,
+              requiredShippingContactFields: u?.requiredShippingContactFields
             });
-            this.paymentMethods.set("applePay", p), p.appendTo(this.getElement());
+            this.paymentMethods.set("applePay", f), f.appendTo(this.getElement());
           }
           break;
         }
@@ -1352,13 +1600,13 @@ class at extends A {
           );
           break;
       }
-    this.paymentMethods.size > 0 && (this.paymentSeparator = new nt({
-      translationFunc: d,
+    this.paymentMethods.size > 0 && (this.paymentSeparator = new pt({
+      translationFunc: l,
       checkoutProfile: t
     }), this.getElement().appendChild(this.paymentSeparator.getElement()));
   }
   renderSkeleton() {
-    this.skeleton = new oe(), this.getElement().appendChild(this.skeleton.getElement());
+    this.skeleton = new he(), this.getElement().appendChild(this.skeleton.getElement());
   }
   updateFormData(e) {
     const t = this.paymentMethods.get("paypal");
@@ -1370,8 +1618,8 @@ class at extends A {
     return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
   }
 }
-const it = 17;
-class rt extends A {
+const ft = 17;
+class yt extends P {
   styles;
   isHovered = !1;
   constructor(e) {
@@ -1381,7 +1629,7 @@ class rt extends A {
   }
   applyStyles() {
     const e = this.getElement();
-    e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? (e.style.color = "rgb(150, 150, 150)", e.style.backgroundColor = "rgb(200, 200, 200)") : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius === it ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
+    e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? (e.style.color = "rgb(150, 150, 150)", e.style.backgroundColor = "rgb(200, 200, 200)") : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius === ft ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
   }
   handleMouseEnter() {
     this.isHovered = !0, this.applyStyles();
@@ -1393,12 +1641,12 @@ class rt extends A {
     return this.getElement().disabled = e, e ? (this.addClass("disabled"), this.removeClass("valid")) : (this.removeClass("disabled"), this.addClass("valid")), this.applyStyles(), this;
   }
 }
-class ot {
+class bt {
   button;
   constructor(e) {
-    const { disabled: t, checkoutProfile: s, translationFunc: i } = e;
-    this.button = new rt({
-      text: i(
+    const { disabled: t, checkoutProfile: s, translationFunc: a } = e;
+    this.button = new yt({
+      text: a(
         `buttonTexts.${s?.layout.actionButton.translationKey}`
       ),
       styles: {
@@ -1424,7 +1672,7 @@ class ot {
     return this.button.appendTo(e), this;
   }
 }
-class lt {
+class vt {
   formElement;
   focusManager;
   translationFunc;
@@ -1439,6 +1687,8 @@ class lt {
   checkoutKey;
   checkoutDetails;
   environment;
+  vgsService;
+  onVgsStateChange;
   // Form components
   emailField;
   phoneNumberField;
@@ -1449,6 +1699,9 @@ class lt {
   paymentMethods;
   billingAddressSection;
   shippingAddressSection;
+  cardSectionSkeleton;
+  cardholderSectionSkeleton;
+  isCheckoutDetailsLoaded = !1;
   // Event handler references
   emailFocusHandler;
   phoneNumberFocusHandler;
@@ -1457,15 +1710,15 @@ class lt {
   cardCvvFocusHandler;
   nameFocusHandler;
   constructor(e) {
-    this.formElement = e.formElement, this.focusManager = e.focusManager, this.translationFunc = e.translationFunc, this.locale = e.locale, this.onFieldFocus = e.onFieldFocus, this.onChange = e.onChange, this.onBlur = e.onBlur, this.onPaypalSubmit = e.onPaypalSubmit, this.onApplePaySubmit = e.onApplePaySubmit, this.supportedPaymentMethods = e.supportedPaymentMethods, this.paymentId = e.paymentId, this.checkoutKey = e.checkoutKey, this.checkoutDetails = e.checkoutDetails, this.environment = e.environment;
+    this.formElement = e.formElement, this.focusManager = e.focusManager, this.translationFunc = e.translationFunc, this.locale = e.locale, this.onFieldFocus = e.onFieldFocus, this.onChange = e.onChange, this.onBlur = e.onBlur, this.onPaypalSubmit = e.onPaypalSubmit, this.onApplePaySubmit = e.onApplePaySubmit, this.supportedPaymentMethods = e.supportedPaymentMethods, this.paymentId = e.paymentId, this.checkoutKey = e.checkoutKey, this.checkoutDetails = e.checkoutDetails, this.environment = e.environment, this.vgsService = e.vgsService, this.onVgsStateChange = e.onVgsStateChange;
   }
   createPaymentMethods(e, t, s = !1) {
     try {
       if (!e?.additionalPaymentMethods || Object.keys(e.additionalPaymentMethods).length === 0 || !Object.values(e.additionalPaymentMethods).some(
-        (i) => i.enabled
+        (a) => a.enabled
       ))
         return;
-      this.paymentMethods = new at({
+      this.paymentMethods = new gt({
         checkoutProfile: e,
         formData: t,
         supportedPaymentMethods: this.supportedPaymentMethods,
@@ -1481,119 +1734,143 @@ class lt {
         this.paymentMethods.getElement(),
         this.formElement.firstChild
       ) : this.formElement.appendChild(this.paymentMethods.getElement());
-    } catch (i) {
-      throw console.error("Error creating payment methods:", i), i;
+    } catch (a) {
+      throw console.error("Error creating payment methods:", a), a;
     }
   }
-  createEmailField(e, t, s, i) {
+  createEmailField(e, t, s, a) {
     try {
-      const a = e.layout.billingFields && Object.values(e.layout.billingFields).some(
+      const n = e.layout.billingFields && Object.values(e.layout.billingFields).some(
         (r) => r?.enabled
       ) || e.layout.shippingFields && Object.values(e.layout.shippingFields).some(
         (r) => r?.enabled
       );
-      this.emailField = new fe({
+      this.emailField = new Ee({
         value: t.email,
         onChange: this.onChange,
         onBlur: this.onBlur,
-        onTab: a ? void 0 : () => this.focusManager.focusField(
+        onTab: n ? void 0 : () => this.focusManager.focusField(
           e.layout.phoneNumber?.enabled ? "phoneNumber" : "cardNumber"
         ),
-        error: !!(s.email && i.email),
+        error: !!(s.email && a.email),
         errorMsg: s.email,
         checkoutProfile: e,
         translationFunc: this.translationFunc
       }), this.emailFocusHandler = () => this.onFieldFocus("email"), this.emailField.getElement().addEventListener("focus", this.emailFocusHandler, !0), this.focusManager.registerField("email", this.emailField), this.formElement.appendChild(this.emailField.getElement());
-    } catch (a) {
-      throw console.error("Error creating email field:", a), a;
+    } catch (n) {
+      throw console.error("Error creating email field:", n), n;
     }
   }
-  createPhoneNumberField(e, t, s, i) {
-    const a = document.createElement("div");
-    this.phonePlaceholder = a, this.formElement.appendChild(a), ge().then(({ PhoneNumberField: r }) => {
-      a.isConnected && (this.phoneNumberField = new r({
+  createPhoneNumberField(e, t, s, a) {
+    const n = document.createElement("div");
+    this.phonePlaceholder = n, this.formElement.appendChild(n), Ce().then(({ PhoneNumberField: r }) => {
+      n.isConnected && (this.phoneNumberField = new r({
         value: t.phoneNumber ?? "",
         onChange: this.onChange,
         onBlur: this.onBlur,
         onTab: () => this.focusManager.focusField("cardNumber"),
-        error: !!(s.phoneNumber && i.phoneNumber),
+        error: !!(s.phoneNumber && a.phoneNumber),
         errorMsg: s.phoneNumber,
         checkoutProfile: e,
         translationFunc: this.translationFunc,
         defaultCountry: e.layout.phoneNumber?.defaultCountry || "US",
         allowedCountries: e.layout.phoneNumber?.allowedCountries,
         locale: this.locale
-      }), this.phoneNumberFocusHandler = () => this.onFieldFocus("phoneNumber"), this.phoneNumberField.getElement().addEventListener("focus", this.phoneNumberFocusHandler, !0), this.focusManager.registerField("phoneNumber", this.phoneNumberField), a.replaceWith(this.phoneNumberField.getElement()), this.phonePlaceholder = void 0);
+      }), this.phoneNumberFocusHandler = () => this.onFieldFocus("phoneNumber"), this.phoneNumberField.getElement().addEventListener("focus", this.phoneNumberFocusHandler, !0), this.focusManager.registerField("phoneNumber", this.phoneNumberField), n.replaceWith(this.phoneNumberField.getElement()), this.phonePlaceholder = void 0);
     }).catch((r) => {
-      console.error("Error creating phone number field:", r), a.remove(), this.phonePlaceholder = void 0;
+      console.error("Error creating phone number field:", r), n.remove(), this.phonePlaceholder = void 0;
     });
   }
-  createCardSection(e, t, s, i) {
+  setCheckoutDetailsLoaded(e) {
+    this.isCheckoutDetailsLoaded = e;
+  }
+  createCardSection(e, t, s, a) {
     try {
-      this.cardSection = new ye({
+      if (!this.isCheckoutDetailsLoaded) {
+        this.cardSectionSkeleton = this.buildCardSkeleton(e), this.formElement.appendChild(this.cardSectionSkeleton);
+        return;
+      }
+      if (this.cardSection = new Fe({
         checkoutProfile: e,
         cardNumber: t.cardNumber,
         cardNumberError: s.cardNumber,
-        cardNumberTouched: !!i.cardNumber,
+        cardNumberTouched: !!a.cardNumber,
         cardCvv: t.cardCvv,
         cardCvvError: s.cardCvv,
-        cardCvvTouched: !!i.cardCvv,
+        cardCvvTouched: !!a.cardCvv,
         cardExpiry: t.cardExpiry,
         cardExpiryError: s.cardExpiry,
-        cardExpiryTouched: !!i.cardExpiry,
+        cardExpiryTouched: !!a.cardExpiry,
         onChange: this.onChange,
         onBlur: this.onBlur,
         onCardBrandChange: () => {
           if (t.cardCvv) {
-            const l = new Event("blur", { bubbles: !0 });
-            Object.defineProperty(l, "target", {
+            const n = new Event("blur", { bubbles: !0 });
+            Object.defineProperty(n, "target", {
               writable: !1,
               value: { name: "cardCvv", value: t.cardCvv }
-            }), this.onBlur(l);
+            }), this.onBlur(n);
           }
         },
-        translationFunc: this.translationFunc
-      });
-      const a = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
-      a && (this.cardExpiryFocusHandler = () => this.onFieldFocus("cardExpiry"), a.addEventListener("focus", this.cardExpiryFocusHandler));
-      const r = this.cardSection.getElement().querySelector('input[name="cardNumber"]');
-      r && (this.cardNumberFocusHandler = () => this.onFieldFocus("cardNumber"), r.addEventListener("focus", this.cardNumberFocusHandler));
-      const d = this.cardSection.getElement().querySelector('input[name="cardCvv"]');
-      d && (this.cardCvvFocusHandler = () => this.onFieldFocus("cardCvv"), d.addEventListener("focus", this.cardCvvFocusHandler)), this.focusManager.registerField("cardNumber", {
+        translationFunc: this.translationFunc,
+        vgsService: this.vgsService,
+        onVgsStateChange: this.onVgsStateChange
+      }), !this.vgsService) {
+        const n = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
+        n && (this.cardExpiryFocusHandler = () => this.onFieldFocus("cardExpiry"), n.addEventListener(
+          "focus",
+          this.cardExpiryFocusHandler
+        ));
+        const r = this.cardSection.getElement().querySelector('input[name="cardNumber"]');
+        r && (this.cardNumberFocusHandler = () => this.onFieldFocus("cardNumber"), r.addEventListener(
+          "focus",
+          this.cardNumberFocusHandler
+        ));
+        const l = this.cardSection.getElement().querySelector('input[name="cardCvv"]');
+        l && (this.cardCvvFocusHandler = () => this.onFieldFocus("cardCvv"), l.addEventListener("focus", this.cardCvvFocusHandler));
+      }
+      this.focusManager.registerField("cardNumber", {
         focus: () => this.cardSection?.focusField("cardNumber")
       }), this.focusManager.registerField("cardExpiry", {
         focus: () => this.cardSection?.focusField("cardExpiry")
       }), this.focusManager.registerField("cardCvv", {
         focus: () => this.cardSection?.focusField("cardCvv")
       }), this.formElement.appendChild(this.cardSection.getElement());
-    } catch (a) {
-      throw console.error("Error creating card section:", a), a;
+    } catch (n) {
+      throw console.error("Error creating card section:", n), n;
     }
   }
-  createCardholderSection(e, t, s, i) {
+  createCardholderSection(e, t, s, a) {
     try {
-      this.cardholderSection = new st({
+      if (!this.isCheckoutDetailsLoaded) {
+        this.cardholderSectionSkeleton = this.buildCardholderSkeleton(e), this.formElement.appendChild(this.cardholderSectionSkeleton);
+        return;
+      }
+      if (this.cardholderSection = new mt({
         value: t.name,
         onChange: this.onChange,
         onBlur: this.onBlur,
-        error: !!(s.name && i.name),
+        error: !!(s.name && a.name),
         errorMsg: s.name,
         checkoutProfile: e,
-        translationFunc: this.translationFunc
-      });
-      const a = this.cardholderSection.getElement().querySelector('input[name="name"]');
-      a && (this.nameFocusHandler = () => this.onFieldFocus("name"), a.addEventListener("focus", this.nameFocusHandler)), this.focusManager.registerField("name", this.cardholderSection), this.formElement.appendChild(this.cardholderSection.getElement());
-    } catch (a) {
-      throw console.error("Error creating cardholder section:", a), a;
+        translationFunc: this.translationFunc,
+        isVgsMode: !!this.vgsService
+      }), !this.vgsService) {
+        const n = this.cardholderSection.getElement().querySelector('input[name="name"]');
+        n && (this.nameFocusHandler = () => this.onFieldFocus("name"), n.addEventListener("focus", this.nameFocusHandler));
+      }
+      this.focusManager.registerField("name", this.cardholderSection), this.formElement.appendChild(this.cardholderSection.getElement());
+    } catch (n) {
+      throw console.error("Error creating cardholder section:", n), n;
     }
   }
-  createBillingAddressSection(e, t, s, i) {
+  createBillingAddressSection(e, t, s, a) {
     try {
-      const a = e.layout.billingFields;
-      if (!a || !Object.values(a).some(
-        (l) => l?.enabled
+      const n = e.layout.billingFields;
+      if (!n || !Object.values(n).some(
+        (d) => d?.enabled
       )) return;
-      const d = {
+      const l = {
         street: "",
         firstName: "",
         lastName: "",
@@ -1602,31 +1879,31 @@ class lt {
         zipCode: "",
         country: ""
       };
-      this.billingAddressSection = new se({
+      this.billingAddressSection = new re({
         type: "billing",
         title: this.translationFunc("address.billingTitle"),
         checkoutProfile: e,
-        fieldsConfig: a,
-        values: t.billingAddress ?? d,
+        fieldsConfig: n,
+        values: t.billingAddress ?? l,
         errors: s.billingAddress ?? {},
-        touched: i.billingAddress ?? {},
+        touched: a.billingAddress ?? {},
         onChange: this.onChange,
         onBlur: this.onBlur,
         translationFunc: this.translationFunc,
         locale: this.locale,
         grouped: e.layout.grouped
       }), this.formElement.appendChild(this.billingAddressSection.getElement());
-    } catch (a) {
-      throw console.error("Error creating billing address section:", a), a;
+    } catch (n) {
+      throw console.error("Error creating billing address section:", n), n;
     }
   }
-  createShippingAddressSection(e, t, s, i) {
+  createShippingAddressSection(e, t, s, a) {
     try {
-      const a = e.layout.shippingFields;
-      if (!a || !Object.values(a).some(
-        (l) => l?.enabled
+      const n = e.layout.shippingFields;
+      if (!n || !Object.values(n).some(
+        (d) => d?.enabled
       )) return;
-      const d = {
+      const l = {
         street: "",
         firstName: "",
         lastName: "",
@@ -1635,27 +1912,27 @@ class lt {
         zipCode: "",
         country: ""
       };
-      this.shippingAddressSection = new se({
+      this.shippingAddressSection = new re({
         type: "shipping",
         title: this.translationFunc("address.shippingTitle"),
         checkoutProfile: e,
-        fieldsConfig: a,
-        values: t.shippingAddress ?? d,
+        fieldsConfig: n,
+        values: t.shippingAddress ?? l,
         errors: s.shippingAddress ?? {},
-        touched: i.shippingAddress ?? {},
+        touched: a.shippingAddress ?? {},
         onChange: this.onChange,
         onBlur: this.onBlur,
         translationFunc: this.translationFunc,
         locale: this.locale,
         grouped: e.layout.grouped
       }), this.formElement.appendChild(this.shippingAddressSection.getElement());
-    } catch (a) {
-      throw console.error("Error creating shipping address section:", a), a;
+    } catch (n) {
+      throw console.error("Error creating shipping address section:", n), n;
     }
   }
   createSubmitButton(e, t) {
     try {
-      this.submitButton = new ot({
+      this.submitButton = new bt({
         disabled: t,
         checkoutProfile: e,
         translationFunc: this.translationFunc
@@ -1670,15 +1947,15 @@ class lt {
   updatePhoneNumberField(e, t, s) {
     this.phoneNumberField && (this.phoneNumberField.setValue(e), this.phoneNumberField.setError(t, s));
   }
-  updateCardSection(e, t, s, i, a, r, d, l, u) {
+  updateCardSection(e, t, s, a, n, r, l, d, c) {
     this.cardSection && (this.cardSection.updateCardNumber(
       e,
       t,
       s
-    ), this.cardSection.updateCardCvv(i, a, r), this.cardSection.updateCardExpiry(
-      d,
+    ), this.cardSection.updateCardCvv(a, n, r), this.cardSection.updateCardExpiry(
       l,
-      u
+      d,
+      c
     ));
   }
   updateCardholderSection(e, t, s) {
@@ -1708,6 +1985,70 @@ class lt {
   hasComponents() {
     return !!this.emailField;
   }
+  setVgsService(e) {
+    this.vgsService = e;
+  }
+  buildCardSkeleton(e) {
+    const t = e.styles.borderRadius, s = document.createElement("div"), a = document.createElement("div");
+    a.style.marginBottom = "4px";
+    const n = document.createElement("label");
+    n.className = "input-label", n.textContent = this.translationFunc("cardInformation"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), s.appendChild(a);
+    const r = document.createElement("div");
+    r.className = "vgs-card-group", r.style.borderRadius = `${t}px`, r.style.background = "#fff", r.style.display = "flex", r.style.flexDirection = "column", r.style.gap = "8px";
+    const l = document.createElement("div");
+    l.className = "card-number-row", l.style.position = "relative", l.style.height = "38.5px", l.style.overflow = "hidden", l.style.borderRadius = `${t}px`, l.appendChild(this.createSkeletonDiv()), r.appendChild(l);
+    const d = document.createElement("div");
+    d.style.display = "flex", d.style.gap = "8px";
+    const c = document.createElement("div");
+    c.style.position = "relative", c.style.flex = "1", c.style.height = "38.5px", c.style.overflow = "hidden", c.style.borderRadius = `${t}px`, c.appendChild(this.createSkeletonDiv()), d.appendChild(c);
+    const p = document.createElement("div");
+    return p.style.position = "relative", p.style.flex = "1", p.style.height = "38.5px", p.style.overflow = "hidden", p.style.borderRadius = `${t}px`, p.appendChild(this.createSkeletonDiv()), d.appendChild(p), r.appendChild(d), s.appendChild(r), s;
+  }
+  createSkeletonDiv() {
+    const e = document.createElement("div");
+    return e.className = "vgs-field-skeleton", e;
+  }
+  buildCardholderSkeleton(e) {
+    const t = e.styles.borderRadius, s = document.createElement("div"), a = document.createElement("div");
+    a.style.marginBottom = "4px";
+    const n = document.createElement("label");
+    n.className = "input-label", n.textContent = this.translationFunc("cardholderNameLabel"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), s.appendChild(a);
+    const r = document.createElement("div");
+    return r.style.position = "relative", r.style.borderRadius = `${t}px`, r.style.height = "38.5px", r.style.width = "100%", r.style.overflow = "hidden", r.style.background = "#fff", r.appendChild(this.createSkeletonDiv()), s.appendChild(r), s;
+  }
+  async mountVgsFields(e) {
+    if (!this.vgsService || !this.cardSection) return;
+    await this.vgsService.whenReady();
+    const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await ut(
+      e.styles.fontFamily
+    ), n = this.cardSection.buildVgsFieldCss(
+      e,
+      a
+    );
+    this.vgsService.mountCardFields(
+      {
+        cardNumber: t.cardNumber ? `#${t.cardNumber}` : void 0,
+        cardExpiry: t.cardExpiry ? `#${t.cardExpiry}` : void 0,
+        cardCvv: t.cardCvv ? `#${t.cardCvv}` : void 0,
+        cardholderName: s ? `#${s}` : void 0
+      },
+      n,
+      {
+        cardNumber: "1234 5678 9012 3456",
+        cardExpiry: this.translationFunc("cardExpiry"),
+        cardCvv: "CVV",
+        cardholderName: this.translationFunc("cardholderNamePlaceholder")
+      },
+      (r) => this.cardSection?.updateVgsCardBrand(r)
+    ), this.vgsService.waitForFieldsReady().then(() => {
+      requestAnimationFrame(() => {
+        this.cardSection?.hideFakePlaceholders(), this.cardholderSection?.hideFakePlaceholder();
+      });
+    });
+  }
+  handleVgsStateChange(e, t) {
+    this.cardSection?.handleVgsStateChange(e, t), this.cardholderSection?.handleVgsStateChange(e, t);
+  }
   cleanup() {
     if (this.emailField) {
       const e = this.emailField.getElement().querySelector('input[name="email"]');
@@ -1717,7 +2058,7 @@ class lt {
       const e = this.phoneNumberField.getElement().querySelector('input[name="phoneNumber"]');
       e && this.phoneNumberFocusHandler && e.removeEventListener("focus", this.phoneNumberFocusHandler), this.phoneNumberField.getElement().remove(), this.phoneNumberField = void 0;
     }
-    if (this.cardSection) {
+    if (this.cardSectionSkeleton && (this.cardSectionSkeleton.remove(), this.cardSectionSkeleton = void 0), this.cardSection) {
       const e = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
       e && this.cardExpiryFocusHandler && e.removeEventListener(
         "focus",
@@ -1731,14 +2072,14 @@ class lt {
       const s = this.cardSection.getElement().querySelector('input[name="cardCvv"]');
       s && this.cardCvvFocusHandler && s.removeEventListener("focus", this.cardCvvFocusHandler), this.cardSection.getElement().remove(), this.cardSection = void 0;
     }
-    if (this.cardholderSection) {
+    if (this.cardholderSectionSkeleton && (this.cardholderSectionSkeleton.remove(), this.cardholderSectionSkeleton = void 0), this.cardholderSection) {
       const e = this.cardholderSection.getElement().querySelector('input[name="name"]');
       e && this.nameFocusHandler && e.removeEventListener("focus", this.nameFocusHandler), this.cardholderSection.getElement().remove(), this.cardholderSection = void 0;
     }
     this.billingAddressSection && (this.billingAddressSection.getElement().remove(), this.billingAddressSection = void 0), this.shippingAddressSection && (this.shippingAddressSection.getElement().remove(), this.shippingAddressSection = void 0), this.submitButton && (this.submitButton.getElement().remove(), this.submitButton = void 0), this.paymentMethods && (this.paymentMethods.getElement().remove(), this.paymentMethods = void 0);
   }
 }
-class dt {
+class St {
   formManager;
   focusManager;
   onFormSubmit;
@@ -1748,18 +2089,18 @@ class dt {
     this.formManager = e.formManager, this.focusManager = e.focusManager, this.onFormSubmit = e.onFormSubmit, this.onUIUpdate = e.onUIUpdate;
   }
   handleChange = (e) => {
-    const t = e.target, { name: s, value: i } = t, a = s;
-    this.formManager.handleChange(a, i), this.localTouchedFields.has(a) || (this.localTouchedFields.add(a), this.formManager.handleBlur(a, i));
-    const { formData: r, errors: d, touched: l } = this.formManager.getFormState();
-    this.focusManager.handleStateUpdate(r, d, l);
+    const t = e.target, { name: s, value: a } = t, n = s;
+    this.formManager.handleChange(n, a), this.localTouchedFields.has(n) || (this.localTouchedFields.add(n), this.formManager.handleBlur(n, a));
+    const { formData: r, errors: l, touched: d } = this.formManager.getFormState();
+    this.focusManager.handleStateUpdate(r, l, d);
   };
   handleBlur = (e) => {
-    const t = e.target, { name: s, value: i } = t, a = s;
-    this.localTouchedFields.add(a), this.formManager.handleBlur(a, i), setTimeout(() => {
+    const t = e.target, { name: s, value: a } = t, n = s;
+    this.localTouchedFields.add(n), this.formManager.handleBlur(n, a), setTimeout(() => {
       this.onUIUpdate();
     }, 0);
-    const { formData: r, errors: d, touched: l } = this.formManager.getFormState();
-    l[a] || this.focusManager.handleStateUpdate(r, d, l);
+    const { formData: r, errors: l, touched: d } = this.formManager.getFormState();
+    d[n] || this.focusManager.handleStateUpdate(r, l, d);
   };
   handleSubmit = async (e) => {
     e.preventDefault(), await this.onFormSubmit(e);
@@ -1779,7 +2120,7 @@ class dt {
     this.localTouchedFields.clear();
   }
 }
-class ct {
+class Et {
   formManager;
   checkoutProfile;
   formElement;
@@ -1789,6 +2130,8 @@ class ct {
   onLoadingChange;
   fontCleanup;
   isSubmitting = !1;
+  isVgsMode = !1;
+  vgsFieldsState = {};
   constructor(e) {
     this.formManager = e.formManager, this.checkoutProfile = e.checkoutProfile, this.formElement = e.formElement, this.onUIUpdate = e.onUIUpdate, this.onProfileLoaded = e.onProfileLoaded, this.onError = e.onError, this.onLoadingChange = e.onLoadingChange;
   }
@@ -1801,7 +2144,7 @@ class ct {
         try {
           if (e.checkoutProfile.styles?.fontFamily)
             try {
-              const { cleanup: t } = be({
+              const { cleanup: t } = Me({
                 fontFamily: e.checkoutProfile.styles.fontFamily
               });
               this.fontCleanup = t, this.formElement.style.fontFamily = e.checkoutProfile.styles.fontFamily;
@@ -1818,17 +2161,37 @@ class ct {
   };
   isFormDisabled() {
     const e = this.formManager.getFormState(), t = this.checkoutProfile.getState(), s = Object.keys(e.errors).filter(
-      (c) => c !== "billingAddress" && c !== "shippingAddress"
-    ).length > 0, i = e.errors.billingAddress, a = i && typeof i == "object" ? Object.keys(i).length > 0 : !1, r = e.errors.shippingAddress, d = r && typeof r == "object" ? Object.keys(r).length > 0 : !1, l = s || a || d, E = $(
+      (y) => y !== "billingAddress" && y !== "shippingAddress"
+    ).length > 0, a = e.errors.billingAddress, n = a && typeof a == "object" ? Object.keys(a).length > 0 : !1, r = e.errors.shippingAddress, l = r && typeof r == "object" ? Object.keys(r).length > 0 : !1, d = s || n || l, p = W(
       t.checkoutProfile?.layout
-    ) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name, o = t.checkoutProfile?.layout.phoneNumber?.enabled ?? !1 ? !!e.formData.phoneNumber : !0, { billingFields: f, shippingFields: m } = t.checkoutProfile?.layout ?? {}, h = (c, b) => !c || Object.entries(c).every(
-      ([g, S]) => !S?.enabled || !!b?.[g]?.trim()
-    ), p = !!e.formData.email && o && E && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && h(f, e.formData.billingAddress) && h(m, e.formData.shippingAddress);
-    return l || !p || this.isSubmitting;
+    ) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name, o = t.checkoutProfile?.layout.phoneNumber?.enabled ?? !1 ? !!e.formData.phoneNumber : !0, { billingFields: g, shippingFields: m } = t.checkoutProfile?.layout ?? {}, u = (y, v) => !y || Object.entries(y).every(
+      ([S, M]) => !M?.enabled || !!v?.[S]?.trim()
+    ), f = !this.isVgsMode || Object.values(this.vgsFieldsState).every(
+      (y) => y?.isValid === !0
+    ), h = this.isVgsMode ? !!e.formData.email && o && f && u(g, e.formData.billingAddress) && u(m, e.formData.shippingAddress) : !!e.formData.email && o && p && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && u(g, e.formData.billingAddress) && u(m, e.formData.shippingAddress);
+    return d || !h || this.isSubmitting;
   }
   setSubmitting(e) {
     this.isSubmitting = e;
   }
+  setVgsMode(e) {
+    this.isVgsMode = e;
+  }
+  updateVgsState(e) {
+    this.vgsFieldsState = e;
+  }
+  getVgsFieldErrors(e) {
+    const t = {};
+    for (const [s, a] of Object.entries(this.vgsFieldsState)) {
+      if (!a?.isTouched || a.isFocused || a.isValid)
+        continue;
+      const n = a.errors?.[0];
+      if (!n) continue;
+      const r = Ne(s, n.code);
+      r && (t[s] = e(r));
+    }
+    return t;
+  }
   getSubmitting() {
     return this.isSubmitting;
   }
@@ -1836,18 +2199,18 @@ class ct {
     this.fontCleanup && (this.fontCleanup(), this.fontCleanup = void 0);
   }
 }
-class ht extends A {
+class Ct extends P {
   titleElement;
   constructor(e = {}) {
     super("div", ["blur-bg"]);
-    const t = w.createDiv(["loader"]);
-    this.titleElement = new A("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
+    const t = k.createDiv(["loader"]);
+    this.titleElement = new P("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
   }
   setText(e) {
     return this.titleElement.setText(e), this;
   }
 }
-const ne = {
+const oe = {
   street: "",
   firstName: "",
   lastName: "",
@@ -1855,16 +2218,16 @@ const ne = {
   city: "",
   zipCode: "",
   country: ""
-}, ae = (n, e) => {
+}, le = (i, e) => {
   const t = {}, s = `${e}.`;
-  return Object.keys(n).forEach((i) => {
-    if (i.startsWith(s)) {
-      const a = i.slice(s.length);
-      t[a] = n[i];
+  return Object.keys(i).forEach((a) => {
+    if (a.startsWith(s)) {
+      const n = a.slice(s.length);
+      t[n] = i[a];
     }
   }), t;
 };
-class ut {
+class Ft {
   formElement;
   componentManager;
   onLoadingStateChange;
@@ -1898,13 +2261,13 @@ class ut {
       !!(e.errors.name && e.touched.name),
       e.errors.name
     ), this.componentManager.updateBillingAddressSection(
-      e.formData.billingAddress ?? ne,
+      e.formData.billingAddress ?? oe,
       e.errors.billingAddress ?? {},
-      ae(e.touched, "billingAddress")
+      le(e.touched, "billingAddress")
     ), this.componentManager.updateShippingAddressSection(
-      e.formData.shippingAddress ?? ne,
+      e.formData.shippingAddress ?? oe,
       e.errors.shippingAddress ?? {},
-      ae(e.touched, "shippingAddress")
+      le(e.touched, "shippingAddress")
     ), this.componentManager.updateSubmitButton(t);
   }
   setLoadingState(e) {
@@ -1912,10 +2275,10 @@ class ut {
       this.onLoadingStateChange(e);
       return;
     }
-    e ? (this.hideSkeleton(), this.formSkeleton = new oe(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
+    e ? (this.hideSkeleton(), this.formSkeleton = new he(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
   }
   showSpinner(e) {
-    this.hideSpinner(), this.spinner = new ht({ text: e }), this.formElement.appendChild(this.spinner.getElement());
+    this.hideSpinner(), this.spinner = new Ct({ text: e }), this.formElement.appendChild(this.spinner.getElement());
   }
   hideSpinner() {
     this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
@@ -1924,7 +2287,7 @@ class ut {
     this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0);
   }
   setErrorMessage(e) {
-    this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new Ee({ message: e }), this.formElement.insertBefore(
+    this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new we({ message: e }), this.formElement.insertBefore(
       this.alert.getElement(),
       this.formElement.firstChild
     );
@@ -1936,7 +2299,7 @@ class ut {
     this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0), this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0), this.alert && (this.alert.getElement().remove(), this.alert = void 0);
   }
 }
-const I = (n) => ({
+const D = (i) => ({
   street: "",
   firstName: "",
   lastName: "",
@@ -1944,23 +2307,27 @@ const I = (n) => ({
   city: "",
   zipCode: "",
   country: "",
-  ...n
+  ...i
 });
-class mt extends A {
+class Mt extends P {
   options;
-  formManager = tt();
+  formManager = lt();
   checkoutProfile;
-  translation = Se();
-  focusManager = new Fe();
+  translation = Pe();
+  focusManager = new ke();
   // Managers
   componentManager;
   eventHandler;
   stateCoordinator;
   uiManager;
+  // VGS
+  vgsService;
+  vgsJwt;
+  vgsCardResult;
   constructor(e) {
-    super("form", ["form-container"]), this.options = e, this.checkoutProfile = et({
+    super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new I()), this.checkoutProfile = ot({
       appearance: e.appearance
-    }), e.locale && this.translation.setLocale(e.locale), this.componentManager = new lt({
+    }), e.locale && this.translation.setLocale(e.locale), this.componentManager = new vt({
       formElement: this.element,
       focusManager: this.focusManager,
       translationFunc: this.translation.t,
@@ -1974,12 +2341,14 @@ class mt extends A {
       paymentId: e.paymentId,
       checkoutKey: e.checkoutKey,
       checkoutDetails: e.checkoutDetails,
-      environment: e.environment
-    }), this.uiManager = new ut({
+      environment: e.environment,
+      vgsService: this.vgsService,
+      onVgsStateChange: (t) => this.handleVgsStateChange(t)
+    }), this.uiManager = new Ft({
       formElement: this.element,
       componentManager: this.componentManager,
       onLoadingStateChange: e.onLoadingStateChange
-    }), this.stateCoordinator = new ct({
+    }), this.stateCoordinator = new Et({
       formManager: this.formManager,
       checkoutProfile: this.checkoutProfile,
       componentManager: this.componentManager,
@@ -1989,7 +2358,7 @@ class mt extends A {
       onError: (t) => this.uiManager.setErrorMessage(t),
       onLoadingChange: (t) => this.uiManager.setLoadingState(t),
       getInitialFormData: () => this._getFormStateData().formData
-    }), this.eventHandler = new dt({
+    }), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new St({
       formManager: this.formManager,
       focusManager: this.focusManager,
       onFormSubmit: async () => this.handleSubmit(),
@@ -2014,12 +2383,12 @@ class mt extends A {
       },
       ...e.initialValues.name && { name: e.initialValues.name },
       ...e.initialValues.billingAddress && {
-        billingAddress: I(
+        billingAddress: D(
           e.initialValues.billingAddress
         )
       },
       ...e.initialValues.shippingAddress && {
-        shippingAddress: I(
+        shippingAddress: D(
           e.initialValues.shippingAddress
         )
       }
@@ -2036,10 +2405,10 @@ class mt extends A {
         cardNumber: "",
         cardCvv: "",
         ...t?.billingAddress && {
-          billingAddress: I(t.billingAddress)
+          billingAddress: D(t.billingAddress)
         },
         ...t?.shippingAddress && {
-          shippingAddress: I(t.shippingAddress)
+          shippingAddress: D(t.shippingAddress)
         }
       },
       errors: e.errors || {},
@@ -2047,7 +2416,14 @@ class mt extends A {
     };
   }
   initializeForm() {
-    this.uiManager.setLoadingState(!0), this.options.errorMsg && this.uiManager.setErrorMessage(this.options.errorMsg);
+    this.uiManager.setLoadingState(!0), this.options.errorMsg && this.uiManager.setErrorMessage(this.options.errorMsg), this.vgsService && this.vgsService.init(this.options.environment).then((e) => {
+      this.vgsService?.createForm(
+        e,
+        (t) => this.handleVgsStateChange(t)
+      );
+    }).catch(() => {
+      this.vgsService = void 0, this.vgsJwt = void 0;
+    });
   }
   renderFormComponents() {
     const e = this.checkoutProfile.getState();
@@ -2056,11 +2432,11 @@ class mt extends A {
       return;
     }
     this.componentManager.hasComponents() && this.componentManager.cleanup(), e.checkoutProfile.layout.phoneNumber?.enabled && this.formManager.getFormState().formData.phoneNumber === void 0 && this.formManager.setFormData({ phoneNumber: "" }), e.checkoutProfile.layout.billingFields && this.formManager.getFormState().formData.billingAddress === void 0 && this.formManager.setFormData({
-      billingAddress: I()
+      billingAddress: D()
     }), e.checkoutProfile.layout.shippingFields && this.formManager.getFormState().formData.shippingAddress === void 0 && this.formManager.setFormData({
-      shippingAddress: I()
+      shippingAddress: D()
     });
-    const { formData: t, errors: s, touched: i } = this._getFormStateData(), a = $(
+    const { formData: t, errors: s, touched: a } = this._getFormStateData(), n = W(
       e.checkoutProfile.layout
     );
     try {
@@ -2076,18 +2452,18 @@ class mt extends A {
         e.checkoutProfile,
         t,
         s,
-        i
+        a
       );
     } catch (r) {
       console.error("Failed to create email field:", r);
     }
-    if (a) {
+    if (n) {
       try {
         this.componentManager.createBillingAddressSection(
           e.checkoutProfile,
           t,
           s,
-          i
+          a
         );
       } catch (r) {
         console.error("Failed to create billing address section:", r);
@@ -2097,7 +2473,7 @@ class mt extends A {
           e.checkoutProfile,
           t,
           s,
-          i
+          a
         );
       } catch (r) {
         console.error("Failed to create shipping address section:", r);
@@ -2109,7 +2485,7 @@ class mt extends A {
           e.checkoutProfile,
           t,
           s,
-          i
+          a
         );
       } catch (r) {
         console.error("Failed to create phone number field:", r);
@@ -2119,22 +2495,25 @@ class mt extends A {
         e.checkoutProfile,
         t,
         s,
-        i
+        a
       );
     } catch (r) {
       console.error("Failed to create card section:", r);
     }
-    if (!a)
+    if (!n)
       try {
         this.componentManager.createCardholderSection(
           e.checkoutProfile,
           t,
           s,
-          i
+          a
         );
       } catch (r) {
         console.error("Failed to create cardholder section:", r);
       }
+    this.vgsService && this.componentManager.mountVgsFields(e.checkoutProfile).catch((r) => {
+      console.error("Failed to mount VGS fields:", r);
+    });
     try {
       this.componentManager.createSubmitButton(
         e.checkoutProfile,
@@ -2157,13 +2536,13 @@ class mt extends A {
    */
   inferCardholderName() {
     const e = this.checkoutProfile.getState();
-    if (!e.checkoutProfile || !$(
+    if (!e.checkoutProfile || !W(
       e.checkoutProfile.layout
     )) return;
-    const { formData: s } = this._getFormStateData(), i = s.billingAddress ?? s.shippingAddress;
-    if (!i) return;
-    const a = i.firstName?.trim() ?? "", r = i.lastName?.trim() ?? "", d = [a, r].filter(Boolean).join(" ");
-    d && this.formManager.setFormData({ name: d });
+    const { formData: s } = this._getFormStateData(), a = s.billingAddress ?? s.shippingAddress;
+    if (!a) return;
+    const n = a.firstName?.trim() ?? "", r = a.lastName?.trim() ?? "", l = [n, r].filter(Boolean).join(" ");
+    l && this.formManager.setFormData({ name: l });
   }
   /**
    * Infers address data based on field configuration.
@@ -2173,18 +2552,46 @@ class mt extends A {
   inferAddresses() {
     const e = this.checkoutProfile.getState();
     if (!e.checkoutProfile) return;
-    const { billingFields: t, shippingFields: s } = e.checkoutProfile.layout, i = t && Object.values(t).some((d) => d?.enabled), a = s && Object.values(s).some((d) => d?.enabled), { formData: r } = this._getFormStateData();
-    !i && a && r.shippingAddress ? this.formManager.setFormData({
+    const { billingFields: t, shippingFields: s } = e.checkoutProfile.layout, a = t && Object.values(t).some((l) => l?.enabled), n = s && Object.values(s).some((l) => l?.enabled), { formData: r } = this._getFormStateData();
+    !a && n && r.shippingAddress ? this.formManager.setFormData({
       billingAddress: { ...r.shippingAddress }
-    }) : !a && i && r.billingAddress && this.formManager.setFormData({
+    }) : !n && a && r.billingAddress && this.formManager.setFormData({
       shippingAddress: { ...r.billingAddress }
     });
   }
+  handleVgsStateChange(e) {
+    this.stateCoordinator.updateVgsState(e);
+    const t = this.stateCoordinator.getVgsFieldErrors(
+      this.translation.t
+    );
+    this.componentManager.handleVgsStateChange(e, t), this.updateFormUI();
+  }
   async handleSubmit() {
     if (!this.stateCoordinator.isFormDisabled())
       try {
-        this.stateCoordinator.setSubmitting(!0), this.updateFormUI(), this.options.onLoadingStateChange?.(!0), this.uiManager.showSpinner(this.translation.t("loading")), this.inferCardholderName(), this.inferAddresses(), await this.options.onSubmit({
-          formData: this.formManager.getFormState().formData
+        if (this.stateCoordinator.setSubmitting(!0), this.updateFormUI(), this.options.onLoadingStateChange?.(!0), this.uiManager.showSpinner(this.translation.t("loading")), this.inferCardholderName(), this.inferAddresses(), this.vgsService && this.vgsJwt)
+          try {
+            this.vgsCardResult = await this.vgsService.createCard(this.vgsJwt);
+          } catch (t) {
+            console.error("VGS card creation failed:", t), this.handleSubmitError(
+              "Card processing failed. Please check your card details and try again."
+            );
+            return;
+          }
+        const e = this.formManager.getFormState().formData;
+        await this.options.onSubmit({
+          formData: this.vgsCardResult ? {
+            ...e,
+            vgsCardData: {
+              cardId: this.vgsCardResult.cardId,
+              expMonth: this.vgsCardResult.expMonth,
+              expYear: this.vgsCardResult.expYear,
+              name: this.vgsCardResult.name,
+              ...this.vgsCardResult.updatedValues && {
+                updatedValues: this.vgsCardResult.updatedValues
+              }
+            }
+          } : e
         }), this.uiManager.hideSpinner(), this.options.onLoadingStateChange?.(!1), this.stateCoordinator.setSubmitting(!1), this.updateFormUI();
       } catch {
         this.handleSubmitError("Payment processing failed. Please try again.");
@@ -2228,7 +2635,7 @@ class mt extends A {
     e.locale && this.translation.setLocale(e.locale), e.appearance && this.checkoutProfile.updateProfile(e.appearance), e.locale && (this.componentManager.cleanup(), this.renderFormComponents());
   }
   destroy() {
-    this.stateCoordinator.cleanup(), this.eventHandler.clearTouchedFields(), this.getElement().removeEventListener(
+    this.vgsService?.destroy(), this.stateCoordinator.cleanup(), this.eventHandler.clearTouchedFields(), this.getElement().removeEventListener(
       "submit",
       this.eventHandler.handleSubmit
     ), this.getElement().removeEventListener(
@@ -2236,26 +2643,33 @@ class mt extends A {
       this.eventHandler.handleKeyDown
     ), this.componentManager.cleanup(), this.uiManager.cleanup(), this.getElement().remove();
   }
-  associatePayment(e, t, s, i) {
-    this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = i, this.componentManager.removePaymentMethods(), this.componentManager.updateSupportedPaymentMethods(
+  associatePayment(e, t, s, a, n) {
+    this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), n && !this.vgsService && (this.vgsJwt = n, this.vgsService = new I(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((l) => {
+      this.vgsService?.createForm(
+        l,
+        (d) => this.handleVgsStateChange(d)
+      ), this.renderFormComponents();
+    }).catch((l) => {
+      console.error("Failed to load VGS Collect:", l), this.vgsService = void 0, this.vgsJwt = void 0, this.renderFormComponents();
+    })), this.componentManager.removePaymentMethods(), this.componentManager.updateSupportedPaymentMethods(
       s
     ), this.componentManager.updatePaymentDetails(
       e,
       t,
-      i
-    );
-    const a = this.checkoutProfile.getState();
-    if (a.checkoutProfile) {
-      const { formData: r } = this._getFormStateData();
+      a
+    ), !n && this.checkoutProfile.getState().checkoutProfile && this.renderFormComponents();
+    const r = this.checkoutProfile.getState();
+    if (r.checkoutProfile) {
+      const { formData: l } = this._getFormStateData();
       this.componentManager.createPaymentMethods(
-        a.checkoutProfile,
-        r,
+        r.checkoutProfile,
+        l,
         !0
       );
     }
   }
 }
-class pt {
+class Nt {
   container = null;
   options;
   onSubmit;
@@ -2279,7 +2693,7 @@ class pt {
     }
   }
   renderForm(e) {
-    this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new mt({
+    this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new Mt({
       apiKey: this.options.apiKey,
       onSubmit: this.onSubmit,
       locale: this.options.locale,
@@ -2291,7 +2705,8 @@ class pt {
       paymentId: this.options.paymentId,
       checkoutKey: this.options.checkoutKey,
       checkoutDetails: this.options.checkoutDetails,
-      initialValues: this.options.initialValues
+      initialValues: this.options.initialValues,
+      vgsJwt: this.options.vgsJwt
     }));
   }
   unmount() {
@@ -2305,16 +2720,17 @@ class pt {
   clearError() {
     this.form && this.form.clearErrorMessage();
   }
-  async associatePayment(e, t, s, i) {
-    this.options.paymentId = e, this.options.checkoutKey = t, this.options.checkoutDetails = i, this.form && this.form.associatePayment(
+  async associatePayment(e, t, s, a, n) {
+    this.options.paymentId = e, this.options.checkoutKey = t, this.options.checkoutDetails = a, this.options.vgsJwt = n, this.form && this.form.associatePayment(
       e,
       t,
       s,
-      i
+      a,
+      n
     );
   }
 }
-class ft {
+class wt {
   state;
   listeners = /* @__PURE__ */ new Set();
   constructor(e) {
@@ -2336,8 +2752,8 @@ class ft {
     this.listeners.forEach((t) => t(e));
   }
 }
-const gt = "en";
-class yt {
+const Pt = "en";
+class kt {
   config;
   paymentState;
   apiService;
@@ -2345,18 +2761,18 @@ class yt {
   stateManager;
   sessionId;
   constructor(e) {
-    this.config = this.validateConfig(e), this.paymentState = {}, this.sessionId = crypto.randomUUID(), Qe({
+    this.config = this.validateConfig(e), this.paymentState = {}, this.sessionId = crypto.randomUUID(), at({
       environment: this.config.environment,
       sessionId: this.sessionId
-    }), C(v.CHECKOUT_INITIALIZED, {
+    }), F(C.CHECKOUT_INITIALIZED, {
       environment: this.config.environment
-    }), this.apiService = new ve(
+    }), this.apiService = new Ae(
       this.config.apiKey,
       this.config.environment
-    ), this.stateManager = new ft({
+    ), this.stateManager = new wt({
       mounted: !1,
       form: null
-    }), this.formManager = new pt(
+    }), this.formManager = new Nt(
       {
         locale: this.config.locale,
         apiKey: this.config.apiKey,
@@ -2378,7 +2794,7 @@ class yt {
       apiKey: e.apiKey,
       returnUrl: e.returnUrl,
       environment: e.environment,
-      locale: e.locale || gt,
+      locale: e.locale || Pt,
       disableErrorMessages: e.disableErrorMessages ?? !1,
       manualActionHandling: e.manualActionHandling ?? !1,
       appearance: e.appearance,
@@ -2399,7 +2815,7 @@ class yt {
     return t.appendChild(s), this.stateManager.updateState({
       form: s,
       mounted: !0
-    }), this.formManager.mount(s), C(v.CHECKOUT_MOUNTED, {
+    }), this.formManager.mount(s), F(C.CHECKOUT_MOUNTED, {
       container_id: e
     }), this;
   }
@@ -2411,7 +2827,7 @@ class yt {
       t && t.remove(), this.stateManager.updateState({
         form: null,
         mounted: !1
-      }), C(v.CHECKOUT_UNMOUNTED);
+      }), F(C.CHECKOUT_UNMOUNTED);
     });
   }
   async handleSubmit({
@@ -2423,21 +2839,21 @@ class yt {
         "Payment must be associated before submitting. Call associatePayment() first."
       );
     const s = this.getPaymentMethod(e, t);
-    C(v.PAYMENT_SUBMIT_STARTED, {
+    F(C.PAYMENT_SUBMIT_STARTED, {
       payment_id: this.paymentState.paymentId,
       payment_method: s
     });
-    const i = performance.now();
+    const a = performance.now();
     try {
-      const a = await this.apiService.authorizePayment({
+      const n = await this.apiService.authorizePayment({
         checkoutKey: this.paymentState.checkoutKey,
         formData: e || null,
         paymentId: this.paymentState.paymentId,
         returnUrl: this.config.returnUrl,
         applePayData: t
-      }), r = performance.now() - i;
-      te(
-        G.PAYMENT_AUTHORIZATION_TIME,
+      }), r = performance.now() - a;
+      ne(
+        X.PAYMENT_AUTHORIZATION_TIME,
         r,
         "ms",
         {
@@ -2445,14 +2861,14 @@ class yt {
           payment_method: s,
           status: "success"
         }
-      ), C(v.PAYMENT_SUBMIT_SUCCESS, {
+      ), F(C.PAYMENT_SUBMIT_SUCCESS, {
         payment_id: this.paymentState.paymentId,
         payment_method: s
-      }), this.handlePaymentResponse(a);
-    } catch (a) {
-      const r = performance.now() - i;
-      te(
-        G.PAYMENT_AUTHORIZATION_TIME,
+      }), this.handlePaymentResponse(n);
+    } catch (n) {
+      const r = performance.now() - a;
+      ne(
+        X.PAYMENT_AUTHORIZATION_TIME,
         r,
         "ms",
         {
@@ -2460,25 +2876,25 @@ class yt {
           payment_method: s,
           status: "failed"
         }
-      ), C(v.PAYMENT_SUBMIT_FAILED, {
+      ), F(C.PAYMENT_SUBMIT_FAILED, {
         payment_id: this.paymentState.paymentId,
         payment_method: s,
-        error_message: a.details?.message ?? "Unknown error"
-      }), this.handleAuthorizationError(a);
+        error_message: n.details?.message ?? "Unknown error"
+      }), this.handleAuthorizationError(n);
     }
   }
   handlePaymentResponse(e) {
-    if (e.latestTransaction.status === "authorized" && (C(v.PAYMENT_AUTHORIZED, {
+    if (e.latestTransaction.status === "authorized" && (F(C.PAYMENT_AUTHORIZED, {
       payment_id: this.paymentState.paymentId ?? "",
       status: e.latestTransaction.status
     }), this.config.callbacks.onPaymentSucceeded?.(
       e.latestTransaction.status
-    )), e.latestTransaction.status === "failed" && (C(v.PAYMENT_FAILED, {
+    )), e.latestTransaction.status === "failed" && (F(C.PAYMENT_FAILED, {
       payment_id: this.paymentState.paymentId ?? "",
       status: e.latestTransaction.status
     }), this.config.callbacks.onPaymentFailed?.(e.latestTransaction.status)), e.status === "requires_action") {
       const { redirectUrl: t } = e.action;
-      C(v.PAYMENT_ACTION_REQUIRED, {
+      F(C.PAYMENT_ACTION_REQUIRED, {
         payment_id: this.paymentState.paymentId ?? "",
         status: e.status
       }), this.config.manualActionHandling ? this.config.callbacks.onActionRequired?.(t) : globalThis.location.href = t;
@@ -2518,7 +2934,7 @@ class yt {
       throw new Error("paymentId and checkoutKey are required");
     this.paymentState.paymentId = e, this.paymentState.checkoutKey = t;
     try {
-      const s = await Ce({
+      const s = await De({
         id: e,
         checkoutKey: t,
         environment: this.config.environment
@@ -2528,7 +2944,7 @@ class yt {
           "Invalid response: supportedPaymentMethods must be an array"
         );
       if (!s.supportedPaymentMethods.every(
-        (a) => typeof a == "string"
+        (n) => typeof n == "string"
       ))
         throw new Error(
           "Invalid response: all supportedPaymentMethods must be strings"
@@ -2538,44 +2954,45 @@ class yt {
         currency: s.currency,
         countryCode: s.countryCode
       };
-      const i = s.supportedPaymentMethods.reduce(
-        (a, r) => (a[r] = !0, a),
+      const a = s.supportedPaymentMethods.reduce(
+        (n, r) => (n[r] = !0, n),
         {}
       );
       await this.formManager.associatePayment(
         e,
         t,
-        i,
-        this.paymentState.checkoutDetails
-      ), C(v.PAYMENT_ASSOCIATED, {
+        a,
+        this.paymentState.checkoutDetails,
+        s.vgsJwt
+      ), F(C.PAYMENT_ASSOCIATED, {
         payment_id: e,
         currency: s.currency,
         country_code: s.countryCode
       });
     } catch (s) {
-      throw C(v.PAYMENT_ASSOCIATION_FAILED, {
+      throw F(C.PAYMENT_ASSOCIATION_FAILED, {
         payment_id: e,
         error_message: s instanceof Error ? s.message : "Unknown error"
-      }), Je(
+      }), rt(
         s instanceof Error ? s : new Error("Failed to associate payment"),
         { payment_id: e }
       ), s;
     }
   }
 }
-typeof globalThis < "u" && (globalThis.OdusCheckout = yt);
+typeof globalThis < "u" && (globalThis.OdusCheckout = kt);
 export {
-  yt as OdusCheckout,
-  vt as deLocale,
-  Ct as enLocale,
-  Mt as esLocale,
-  Nt as frLocale,
-  Pt as itLocale,
-  At as plLocale,
-  wt as ptLocale,
-  Je as pushError,
-  C as pushEvent,
-  Et as pushLog,
-  te as pushMeasurement,
-  kt as trLocale
+  kt as OdusCheckout,
+  Tt as deLocale,
+  Lt as enLocale,
+  Vt as esLocale,
+  _t as frLocale,
+  Bt as itLocale,
+  Ot as plLocale,
+  Rt as ptLocale,
+  rt as pushError,
+  F as pushEvent,
+  Dt as pushLog,
+  ne as pushMeasurement,
+  Ut as trLocale
 };