@odus/checkout 0.30.0-beta.0 → 0.30.0-beta.1

package/dist/checkout.es.js

@@ -1,5 +1,5 @@
 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";
+import { q as Tt, r as Vt, s as _t, t as Bt, u as Ot, v as Rt, w as Ut, x as Ht } from "./shared.js";
 const C = {
   // Checkout lifecycle events
   CHECKOUT_INITIALIZED: "checkout.initialized",
@@ -20,7 +20,7 @@ const C = {
   PAYMENT_AUTHORIZATION_TIME: "payment.authorization_time",
   CHECKOUT_LOAD_TIME: "checkout.load_time",
   FORM_RENDER_TIME: "form.render_time"
-}, 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) => {
+}, Ie = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, xe = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Le = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, q = (i) => {
   if (!i)
     return [];
   const e = [], t = i.split(`
@@ -39,7 +39,7 @@ const C = {
       });
       continue;
     }
-    n = xe.exec(a) ?? Te.exec(a), n && e.push({
+    n = xe.exec(a) ?? Le.exec(a), n && e.push({
       function: n[1] || "(anonymous)",
       filename: n[2],
       lineno: parseInt(n[3], 10),
@@ -47,7 +47,7 @@ const C = {
     });
   }
   return e;
-}, Le = "@odus/telemetry", Ve = "0.0.1";
+}, Te = "@odus/telemetry", Ve = "0.0.1";
 let B, O, Y;
 const _e = () => {
   if (typeof navigator > "u")
@@ -77,7 +77,7 @@ const _e = () => {
 }, ze = (i) => {
   Y = i;
 }, $e = () => O?.id, je = (i) => ({
-  sdk: { name: Le, version: Ve },
+  sdk: { name: Te, version: Ve },
   app: i.app,
   user: B,
   session: O,
@@ -85,7 +85,7 @@ const _e = () => {
   browser: _e(),
   view: Y
 }), Ke = 30, qe = 250, We = 6e4;
-let A = [], w = null, G = 0, T = null, L = null;
+let A = [], w = null, G = 0, L = null, T = null;
 const Ye = (i) => {
   if (w)
     return;
@@ -118,8 +118,8 @@ const Ye = (i) => {
     "Content-Type": "application/json"
   };
   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);
+    const o = new Blob([s], { type: "application/json" });
+    navigator.sendBeacon(e, o);
     return;
   }
   const r = s.length < We;
@@ -128,9 +128,9 @@ const Ye = (i) => {
     headers: n,
     body: s,
     keepalive: r
-  }).then((l) => {
-    if (l.status === 429) {
-      const d = l.headers.get("Retry-After"), c = d ? parseInt(d, 10) * 1e3 : 3e4;
+  }).then((o) => {
+    if (o.status === 429) {
+      const d = o.headers.get("Retry-After"), c = d ? parseInt(d, 10) * 1e3 : 3e4;
       G = Date.now() + c;
     }
   }).catch(() => {
@@ -166,11 +166,11 @@ const Ye = (i) => {
 }, 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);
+  L && document.removeEventListener("visibilitychange", L), T && window.removeEventListener("pagehide", T);
   const e = () => R(i, !0);
-  T = () => {
+  L = () => {
     document.visibilityState === "hidden" && e();
-  }, L = e, document.addEventListener("visibilitychange", T), window.addEventListener("pagehide", L);
+  }, T = e, document.addEventListener("visibilitychange", L), window.addEventListener("pagehide", T);
 }, Q = () => (/* @__PURE__ */ new Date()).toISOString();
 let ee = null, te = null;
 const Xe = (i) => {
@@ -389,7 +389,7 @@ const at = (i) => {
       ...s
     }
   });
-}, Dt = (i, e = "info", t) => {
+}, It = (i, e = "info", t) => {
   if (!E) return;
   const s = {
     info: _.INFO,
@@ -445,6 +445,40 @@ class I {
         placeholder: s.cardNumber,
         autoComplete: "cc-number",
         validations: ["required", "validCardNumber"],
+        addCardBrands: [
+          {
+            type: "visa",
+            pattern: /^4/,
+            format: /(\d{1,4})/g,
+            length: [16],
+            cvcLength: [3],
+            luhn: !0
+          },
+          {
+            type: "mastercard",
+            pattern: /^(5[1-5]|2[2-7])/,
+            format: /(\d{1,4})/g,
+            length: [16],
+            cvcLength: [3],
+            luhn: !0
+          },
+          {
+            type: "american-express",
+            pattern: /^3[47]/,
+            format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
+            length: [15],
+            cvcLength: [4],
+            luhn: !0
+          },
+          {
+            type: "discover",
+            pattern: /^(6011|65|64[4-9]|622)/,
+            format: /(\d{1,4})/g,
+            length: [16, 19],
+            cvcLength: [3],
+            luhn: !0
+          }
+        ],
         css: t
       });
       n.on("update", (r) => {
@@ -500,16 +534,16 @@ class I {
             a(r.errors);
             return;
           }
-          const l = r?.data;
-          if (!l?.id) {
+          const o = r?.data;
+          if (!o?.id) {
             a(new Error("Card creation failed: no card ID returned"));
             return;
           }
           if (n === 303) {
-            this.patchCard(e, l.id).then(s).catch(a);
+            this.patchCard(e, o.id).then(s).catch(a);
             return;
           }
-          s(I.extractCardResult(l));
+          s(I.extractCardResult(o));
         },
         (n) => {
           a(n);
@@ -542,17 +576,17 @@ class I {
           })
         },
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (r, l) => {
-          if (r >= 400 || l?.errors) {
-            n(l?.errors ?? new Error("Card update failed"));
+        (r, o) => {
+          if (r >= 400 || o?.errors) {
+            n(o?.errors ?? new Error("Card update failed"));
             return;
           }
-          const d = l?.data;
+          const d = o?.data;
           if (!d?.id) {
             n(new Error("Card update failed: no card ID returned"));
             return;
           }
-          const c = I.extractCardResult(d), p = l.included?.find(
+          const c = I.extractCardResult(d), p = o.included?.find(
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (b) => b.type === "card_updates"
           );
@@ -791,30 +825,30 @@ const lt = () => {
       cardCvv: !1
     },
     isValid: !1
-  }), t = (o, g, m, u) => {
-    if (o === "cardCvv")
+  }), t = (l, g, m, u) => {
+    if (l === "cardCvv")
       return i.cardCvv(g, m);
-    if (o === "phoneNumber" && u)
+    if (l === "phoneNumber" && u)
       return i.phoneNumber(g, u);
-    const f = i[o];
+    const f = i[l];
     return f?.(g);
-  }, s = (o) => {
+  }, s = (l) => {
     const g = {};
-    return Object.keys(o).forEach((u) => {
-      const f = o[u];
+    return Object.keys(l).forEach((u) => {
+      const f = l[u];
       if (f === void 0) return;
       let h;
-      u === "cardCvv" ? h = t(u, f, o.cardNumber) : u === "phoneNumber" ? h = t(
+      u === "cardCvv" ? h = t(u, f, l.cardNumber) : u === "phoneNumber" ? h = t(
         u,
         f,
         void 0,
-        o.phoneCountryCode
+        l.phoneCountryCode
       ) : h = t(u, f), h && (g[u] = h);
     }), [
       "billingAddress",
       "shippingAddress"
     ].forEach((u) => {
-      const f = o[u];
+      const f = l[u];
       if (f && typeof f == "object") {
         const h = {};
         Object.keys(f).forEach(
@@ -830,17 +864,17 @@ const lt = () => {
         ), Object.keys(h).length > 0 && (g[u] = h);
       }
     }), g;
-  }, a = (o) => {
-    const g = s(o);
+  }, a = (l) => {
+    const g = s(l);
     return Object.keys(g).length === 0;
-  }, n = "billingAddress.", r = "shippingAddress.", l = (o) => o.startsWith(n) ? {
+  }, n = "billingAddress.", r = "shippingAddress.", o = (l) => l.startsWith(n) ? {
     parent: "billingAddress",
-    field: o.slice(n.length)
-  } : o.startsWith(r) ? {
+    field: l.slice(n.length)
+  } : l.startsWith(r) ? {
     parent: "shippingAddress",
-    field: o.slice(r.length)
-  } : null, d = (o, g, m, u) => {
-    const f = { ...o };
+    field: l.slice(r.length)
+  } : null, d = (l, g, m, u) => {
+    const f = { ...l };
     if (u)
       f[g] = {
         ...f[g],
@@ -853,16 +887,16 @@ const lt = () => {
       delete h[m], Object.keys(h).length === 0 ? delete f[g] : f[g] = h;
     }
     return f;
-  }, c = (o, g) => {
+  }, c = (l, g) => {
     const m = e.getState();
     let u = g;
-    const f = l(o);
-    if (!f && o in U)
-      if (o === "cardCvv") {
+    const f = o(l);
+    if (!f && l in U)
+      if (l === "cardCvv") {
         const S = fe(m.formData.cardNumber) === "amex" ? 4 : 3;
         u = U.cardCvv(g, S);
       } else
-        u = U[o](g);
+        u = U[l](g);
     let h;
     if (f) {
       const { parent: v, field: S } = f;
@@ -876,10 +910,10 @@ const lt = () => {
     } else
       h = {
         ...m.formData,
-        [o]: u
+        [l]: u
       };
     let y = { ...m.errors };
-    if (o === "phoneCountryCode" && h.phoneNumber) {
+    if (l === "phoneCountryCode" && h.phoneNumber) {
       const v = t(
         "phoneNumber",
         h.phoneNumber,
@@ -888,7 +922,7 @@ const lt = () => {
       );
       v ? y.phoneNumber = v : delete y.phoneNumber;
     }
-    if (m.touched[o])
+    if (m.touched[l])
       if (f) {
         const { parent: v, field: S } = f, M = i[S], x = M ? M(
           u
@@ -896,20 +930,20 @@ const lt = () => {
         y = d(y, v, S, x);
       } else {
         let v;
-        o === "cardCvv" ? v = t(o, u, h.cardNumber) : o === "phoneNumber" ? v = t(
-          o,
+        l === "cardCvv" ? v = t(l, u, h.cardNumber) : l === "phoneNumber" ? v = t(
+          l,
           u,
           void 0,
           h.phoneCountryCode
-        ) : v = t(o, u), v ? y[o] = v : delete y[o];
+        ) : v = t(l, u), v ? y[l] = v : delete y[l];
       }
     e.setState({
       formData: h,
       errors: y,
       isValid: a(h)
     });
-  }, p = (o, g) => {
-    const m = e.getState(), u = l(o);
+  }, p = (l, g) => {
+    const m = e.getState(), u = o(l);
     if (u) {
       const { parent: v, field: S } = u, M = {
         ...m.formData,
@@ -922,7 +956,7 @@ const lt = () => {
         formData: M,
         touched: {
           ...m.touched,
-          [o]: !0
+          [l]: !0
         },
         errors: me,
         isValid: a(M)
@@ -931,24 +965,24 @@ const lt = () => {
     }
     const f = {
       ...m.touched,
-      [o]: !0
+      [l]: !0
     };
     let h;
-    o === "cardCvv" ? h = t(o, g, m.formData.cardNumber) : o === "phoneNumber" ? h = t(
-      o,
+    l === "cardCvv" ? h = t(l, g, m.formData.cardNumber) : l === "phoneNumber" ? h = t(
+      l,
       g,
       void 0,
       m.formData.phoneCountryCode
-    ) : h = t(o, g);
+    ) : h = t(l, g);
     const y = { ...m.errors };
-    h ? y[o] = h : delete y[o], e.setState({
+    h ? y[l] = h : delete y[l], e.setState({
       touched: f,
       errors: y
     });
-  }, b = (o) => {
+  }, b = (l) => {
     const m = {
       ...e.getState().formData,
-      ...o
+      ...l
     };
     e.setState({
       formData: m,
@@ -978,11 +1012,16 @@ async function ut(i) {
     return null;
   }
 }
-function W(i) {
+function mt(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);
 }
+function W(i) {
+  if (!i) return !1;
+  const { billingFields: e, shippingFields: t } = i, s = e?.firstName?.enabled && e?.lastName?.enabled, a = t?.firstName?.enabled && t?.lastName?.enabled;
+  return !!(s || a);
+}
 class re extends P {
   inputs = /* @__PURE__ */ new Map();
   type;
@@ -995,15 +1034,15 @@ class re extends P {
   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: a, values: n, errors: r, touched: l } = e;
+    const { title: t, checkoutProfile: s, fieldsConfig: a, values: n, errors: r, touched: o } = e;
     if (this.grouped) {
       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, a, n, r, l);
+    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, o);
   }
   borderRadius(e, t, s, a, n) {
-    const r = (l) => l ? `${e}px` : "0px";
+    const r = (o) => o ? `${e}px` : "0px";
     return `${r(t)} ${r(s)} ${r(a)} ${r(n)}`;
   }
   createFields(e, t, s, a, n) {
@@ -1017,7 +1056,7 @@ class re extends P {
       );
       return;
     }
-    const r = e.styles.borderRadius, l = {
+    const r = e.styles.borderRadius, o = {
       color: e.styles.textColor,
       fontSize: e.styles.fontSize,
       fontFamily: e.styles.fontFamily
@@ -1028,9 +1067,9 @@ class re extends P {
     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) => {
+    d.forEach((l, g) => {
       const m = g === 0, u = g === b - 1, f = (h, y) => ({
-        ...l,
+        ...o,
         borderRadius: this.borderRadius(
           r,
           m && h,
@@ -1039,7 +1078,7 @@ class re extends P {
           u && h
         )
       });
-      if (o.kind === "street") {
+      if (l.kind === "street") {
         const h = this.createRow(["full"]), y = this.createInput(
           "street",
           t.street?.label ?? this.translationFunc("address.addressLine1"),
@@ -1052,10 +1091,10 @@ class re extends P {
         this.inputs.set("street", y), h.appendChild(y.getElement()), this.fieldsContainer.appendChild(h);
         return;
       }
-      if (o.kind === "name") {
-        const h = this.createRow(o.fields.map(() => "half")), y = o.fields.length === 1;
-        if (o.fields.includes("firstName")) {
-          const v = y || o.fields[o.fields.length - 1] === "firstName", S = this.createInput(
+      if (l.kind === "name") {
+        const h = this.createRow(l.fields.map(() => "half")), y = l.fields.length === 1;
+        if (l.fields.includes("firstName")) {
+          const v = y || l.fields[l.fields.length - 1] === "firstName", S = this.createInput(
             "firstName",
             t.firstName?.label ?? this.translationFunc("address.firstName"),
             s.firstName,
@@ -1066,8 +1105,8 @@ class re extends P {
           );
           this.inputs.set("firstName", S), h.appendChild(S.getElement());
         }
-        if (o.fields.includes("lastName")) {
-          const v = y || o.fields[0] === "lastName", S = this.createInput(
+        if (l.fields.includes("lastName")) {
+          const v = y || l.fields[0] === "lastName", S = this.createInput(
             "lastName",
             t.lastName?.label ?? this.translationFunc("address.lastName"),
             s.lastName,
@@ -1081,7 +1120,7 @@ class re extends P {
         this.fieldsContainer.appendChild(h);
         return;
       }
-      if (o.kind === "country") {
+      if (l.kind === "country") {
         const h = this.createRow(["full"]), y = this.createCountrySelect(
           s.country,
           a.country,
@@ -1093,10 +1132,10 @@ class re extends P {
         this.inputs.set("country", y), h.appendChild(y.getElement()), this.fieldsContainer.appendChild(h);
         return;
       }
-      if (o.kind === "cityZip") {
-        const h = this.createRow(o.fields.map(() => "half")), y = o.fields.length === 1;
-        if (o.fields.includes("city")) {
-          const v = y || o.fields[o.fields.length - 1] === "city", S = this.createInput(
+      if (l.kind === "cityZip") {
+        const h = this.createRow(l.fields.map(() => "half")), y = l.fields.length === 1;
+        if (l.fields.includes("city")) {
+          const v = y || l.fields[l.fields.length - 1] === "city", S = this.createInput(
             "city",
             t.city?.label ?? this.translationFunc("address.townCity"),
             s.city,
@@ -1107,8 +1146,8 @@ class re extends P {
           );
           this.inputs.set("city", S), h.appendChild(S.getElement());
         }
-        if (o.fields.includes("zipCode")) {
-          const v = y || o.fields[0] === "zipCode", S = this.createInput(
+        if (l.fields.includes("zipCode")) {
+          const v = y || l.fields[0] === "zipCode", S = this.createInput(
             "zipCode",
             t.zipCode?.label ?? this.translationFunc("address.postalCode"),
             s.zipCode,
@@ -1122,7 +1161,7 @@ class re extends P {
         this.fieldsContainer.appendChild(h);
         return;
       }
-      if (o.kind === "state") {
+      if (l.kind === "state") {
         const h = this.createRow(["full"]);
         if (this.stateOptions = t.state?.options, t.state?.options && t.state.options.length > 0) {
           const v = this.createStateSelect(
@@ -1155,7 +1194,7 @@ class re extends P {
     const t = document.createElement("div");
     return t.className = `address-row address-row-${e.length === 1 ? "single" : "double"}`, t;
   }
-  createInput(e, t, s, a, n, r, l) {
+  createInput(e, t, s, a, n, r, o) {
     const d = `${this.type}Address.${e}`, c = new ce({
       name: d,
       error: !1,
@@ -1169,7 +1208,7 @@ class re extends P {
         })()
       },
       value: s,
-      autocomplete: l,
+      autocomplete: o,
       onChange: (p) => {
         c.setError(!1);
         const b = new Event("input", { bubbles: !0 });
@@ -1194,8 +1233,8 @@ class re extends P {
     }), c;
   }
   createCountrySelect(e, t, s, a, n, r) {
-    const l = `${this.type}Address.country`, d = ye(n, this.locale), c = new H({
-      name: l,
+    const o = `${this.type}Address.country`, d = ye(n, this.locale), c = new H({
+      name: o,
       error: !1,
       errorMsg: void 0,
       styles: a,
@@ -1210,14 +1249,14 @@ class re extends P {
         c.setError(!1);
         const b = p.target.value;
         this.updateStateOptionsForCountry(b);
-        const o = new Event("change", { bubbles: !0 });
-        Object.defineProperty(o, "target", {
+        const l = new Event("change", { bubbles: !0 });
+        Object.defineProperty(l, "target", {
           writable: !1,
           value: {
-            name: l,
+            name: o,
             value: b
           }
-        }), this.onChange(o);
+        }), this.onChange(l);
       }
     });
     return c.addEventListener("blur", (p) => {
@@ -1225,7 +1264,7 @@ class re extends P {
       Object.defineProperty(b, "target", {
         writable: !1,
         value: {
-          name: l,
+          name: o,
           value: p.target.value
         }
       }), this.onBlur(b);
@@ -1237,19 +1276,19 @@ class re extends P {
     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, 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({
+  createStateSelect(e, t, s, a, n, r, o) {
+    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"), l = new H({
       name: d,
       error: !1,
       errorMsg: void 0,
       styles: a,
       placeholder: b,
-      ...!this.grouped && { label: l ?? b },
+      ...!this.grouped && { label: o ?? b },
       value: e,
       options: p,
       autocomplete: "address-level1",
       onChange: (g) => {
-        o.setError(!1);
+        l.setError(!1);
         const m = new Event("change", { bubbles: !0 });
         Object.defineProperty(m, "target", {
           writable: !1,
@@ -1260,7 +1299,7 @@ class re extends P {
         }), this.onChange(m);
       }
     });
-    return o.addEventListener("blur", (g) => {
+    return l.addEventListener("blur", (g) => {
       const m = new Event("blur", { bubbles: !0 });
       Object.defineProperty(m, "target", {
         writable: !1,
@@ -1269,23 +1308,23 @@ class re extends P {
           value: g.target.value
         }
       }), this.onBlur(m);
-    }), o;
+    }), l;
   }
   createUngroupedFields(e, t, s, a, n) {
-    const r = e.styles.borderRadius, l = {
+    const r = e.styles.borderRadius, o = {
       color: e.styles.textColor,
       fontSize: e.styles.fontSize,
       fontFamily: e.styles.fontFamily,
       borderRadius: `${r}px`
     }, d = (c, p, b) => {
       if (!t[c]?.enabled) return;
-      const o = t[c]?.label ?? this.translationFunc(p), g = this.createRow(["full"]), m = this.createInput(
+      const l = t[c]?.label ?? this.translationFunc(p), g = this.createRow(["full"]), m = this.createInput(
         c,
-        o,
+        l,
         s[c],
         a[c],
         n[c],
-        l,
+        o,
         b
       );
       this.inputs.set(c, m), g.appendChild(m.getElement()), this.fieldsContainer.appendChild(g);
@@ -1295,7 +1334,7 @@ class re extends P {
         s.country,
         a.country,
         n.country,
-        l,
+        o,
         t.country?.options,
         c
       );
@@ -1305,27 +1344,27 @@ class re extends P {
       this.stateOptions = t.state?.options;
       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(
+        const l = this.createStateSelect(
           s.state,
           a.state,
           n.state,
-          l,
+          o,
           t.state?.options,
           s.country,
           b
         );
-        this.inputs.set("state", o), c.appendChild(o.getElement());
+        this.inputs.set("state", l), c.appendChild(l.getElement());
       } else {
-        const o = this.createInput(
+        const l = this.createInput(
           "state",
           b,
           s.state,
           a.state,
           n.state,
-          l,
+          o,
           "address-level1"
         );
-        this.inputs.set("state", o), c.appendChild(o.getElement());
+        this.inputs.set("state", l), c.appendChild(l.getElement());
       }
       this.fieldsContainer.appendChild(c);
     }
@@ -1363,8 +1402,8 @@ class re extends P {
   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 o = n.getElement().querySelector("input") || n.getElement().querySelector("select"), d = n.getValue();
+      !(document.activeElement === o) && !(t === "" && d !== "") && this.setValue(e, t);
     }
     const r = !!(a && s);
     this.setError(e, r, s);
@@ -1384,7 +1423,7 @@ class re extends P {
     e && e.focus();
   }
 }
-class mt {
+class pt {
   input = null;
   isVgsMode;
   vgsWrapper = null;
@@ -1398,17 +1437,17 @@ class mt {
       onBlur: a,
       errorMsg: n,
       checkoutProfile: r,
-      translationFunc: l,
+      translationFunc: o,
       autocomplete: d = "cc-name",
       isVgsMode: c = !1
     } = e;
-    this.isVgsMode = c, this.wrapperElement = document.createElement("div"), c ? this.buildVgsLayout(r, l) : this.buildNativeLayout(
+    this.isVgsMode = c, this.wrapperElement = document.createElement("div"), c ? this.buildVgsLayout(r, o) : this.buildNativeLayout(
       t,
       s,
       a,
       n,
       r,
-      l,
+      o,
       d
     );
   }
@@ -1420,7 +1459,7 @@ class mt {
     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) {
+  buildNativeLayout(e, t, s, a, n, r, o) {
     this.input = new ce({
       name: "name",
       label: r("cardholderNameLabel"),
@@ -1434,7 +1473,7 @@ class mt {
       },
       placeholder: r("cardholderNamePlaceholder"),
       value: e,
-      autocomplete: l,
+      autocomplete: o,
       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);
@@ -1509,7 +1548,7 @@ class he extends P {
     return e.appendChild(t), e.appendChild(s), e.appendChild(a), e;
   }
 }
-class pt extends P {
+class gt extends P {
   constructor(e) {
     const { translationFunc: t, checkoutProfile: s } = e;
     super("div", ["payment-separator"]);
@@ -1517,11 +1556,11 @@ class pt extends P {
     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 l = document.createElement("span");
-    l.className = "payment-separator__line", a.appendChild(n), a.appendChild(r), a.appendChild(l);
+    const o = document.createElement("span");
+    o.className = "payment-separator__line", a.appendChild(n), a.appendChild(r), a.appendChild(o);
   }
 }
-class gt extends P {
+class ft extends P {
   paymentMethods;
   paymentSeparator;
   skeleton;
@@ -1532,12 +1571,12 @@ class gt extends P {
       onPaypalSubmit: a,
       onApplePaySubmit: n,
       supportedPaymentMethods: r,
-      translationFunc: l,
+      translationFunc: o,
       paymentId: d,
       checkoutKey: c,
       checkoutDetails: p,
       environment: b,
-      countryCode: o
+      countryCode: l
     } = e;
     if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
       this.getElement().style.display = "none";
@@ -1550,7 +1589,7 @@ class gt extends P {
     const g = Object.entries(
       t.additionalPaymentMethods
     ).filter(([m, u]) => {
-      const f = u.enabled, h = r ? r[m] === !0 : !0, y = !u.countries || o && u.countries.includes(o);
+      const f = u.enabled, h = r ? r[m] === !0 : !0, y = !u.countries || l && u.countries.includes(l);
       return f && h && y;
     }).sort((m, u) => m[1].order - u[1].order);
     if (g.length === 0) {
@@ -1600,8 +1639,8 @@ class gt extends P {
           );
           break;
       }
-    this.paymentMethods.size > 0 && (this.paymentSeparator = new pt({
-      translationFunc: l,
+    this.paymentMethods.size > 0 && (this.paymentSeparator = new gt({
+      translationFunc: o,
       checkoutProfile: t
     }), this.getElement().appendChild(this.paymentSeparator.getElement()));
   }
@@ -1618,8 +1657,8 @@ class gt extends P {
     return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
   }
 }
-const ft = 17;
-class yt extends P {
+const yt = 17;
+class bt extends P {
   styles;
   isHovered = !1;
   constructor(e) {
@@ -1629,7 +1668,7 @@ class yt extends P {
   }
   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 === ft ? "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 === yt ? "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();
@@ -1641,11 +1680,11 @@ class yt extends P {
     return this.getElement().disabled = e, e ? (this.addClass("disabled"), this.removeClass("valid")) : (this.removeClass("disabled"), this.addClass("valid")), this.applyStyles(), this;
   }
 }
-class bt {
+class vt {
   button;
   constructor(e) {
     const { disabled: t, checkoutProfile: s, translationFunc: a } = e;
-    this.button = new yt({
+    this.button = new bt({
       text: a(
         `buttonTexts.${s?.layout.actionButton.translationKey}`
       ),
@@ -1672,7 +1711,7 @@ class bt {
     return this.button.appendTo(e), this;
   }
 }
-class vt {
+class St {
   formElement;
   focusManager;
   translationFunc;
@@ -1718,7 +1757,7 @@ class vt {
         (a) => a.enabled
       ))
         return;
-      this.paymentMethods = new gt({
+      this.paymentMethods = new ft({
         checkoutProfile: e,
         formData: t,
         supportedPaymentMethods: this.supportedPaymentMethods,
@@ -1826,8 +1865,8 @@ class vt {
           "focus",
           this.cardNumberFocusHandler
         ));
-        const l = this.cardSection.getElement().querySelector('input[name="cardCvv"]');
-        l && (this.cardCvvFocusHandler = () => this.onFieldFocus("cardCvv"), l.addEventListener("focus", this.cardCvvFocusHandler));
+        const o = this.cardSection.getElement().querySelector('input[name="cardCvv"]');
+        o && (this.cardCvvFocusHandler = () => this.onFieldFocus("cardCvv"), o.addEventListener("focus", this.cardCvvFocusHandler));
       }
       this.focusManager.registerField("cardNumber", {
         focus: () => this.cardSection?.focusField("cardNumber")
@@ -1846,7 +1885,7 @@ class vt {
         this.cardholderSectionSkeleton = this.buildCardholderSkeleton(e), this.formElement.appendChild(this.cardholderSectionSkeleton);
         return;
       }
-      if (this.cardholderSection = new mt({
+      if (this.cardholderSection = new pt({
         value: t.name,
         onChange: this.onChange,
         onBlur: this.onBlur,
@@ -1870,7 +1909,7 @@ class vt {
       if (!n || !Object.values(n).some(
         (d) => d?.enabled
       )) return;
-      const l = {
+      const o = {
         street: "",
         firstName: "",
         lastName: "",
@@ -1884,7 +1923,7 @@ class vt {
         title: this.translationFunc("address.billingTitle"),
         checkoutProfile: e,
         fieldsConfig: n,
-        values: t.billingAddress ?? l,
+        values: t.billingAddress ?? o,
         errors: s.billingAddress ?? {},
         touched: a.billingAddress ?? {},
         onChange: this.onChange,
@@ -1903,7 +1942,7 @@ class vt {
       if (!n || !Object.values(n).some(
         (d) => d?.enabled
       )) return;
-      const l = {
+      const o = {
         street: "",
         firstName: "",
         lastName: "",
@@ -1917,7 +1956,7 @@ class vt {
         title: this.translationFunc("address.shippingTitle"),
         checkoutProfile: e,
         fieldsConfig: n,
-        values: t.shippingAddress ?? l,
+        values: t.shippingAddress ?? o,
         errors: s.shippingAddress ?? {},
         touched: a.shippingAddress ?? {},
         onChange: this.onChange,
@@ -1932,7 +1971,7 @@ class vt {
   }
   createSubmitButton(e, t) {
     try {
-      this.submitButton = new bt({
+      this.submitButton = new vt({
         disabled: t,
         checkoutProfile: e,
         translationFunc: this.translationFunc
@@ -1947,13 +1986,13 @@ class vt {
   updatePhoneNumberField(e, t, s) {
     this.phoneNumberField && (this.phoneNumberField.setValue(e), this.phoneNumberField.setError(t, s));
   }
-  updateCardSection(e, t, s, a, n, r, l, d, c) {
+  updateCardSection(e, t, s, a, n, r, o, d, c) {
     this.cardSection && (this.cardSection.updateCardNumber(
       e,
       t,
       s
     ), this.cardSection.updateCardCvv(a, n, r), this.cardSection.updateCardExpiry(
-      l,
+      o,
       d,
       c
     ));
@@ -1995,8 +2034,8 @@ class vt {
     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 o = document.createElement("div");
+    o.className = "card-number-row", o.style.position = "relative", o.style.height = "38.5px", o.style.overflow = "hidden", o.style.borderRadius = `${t}px`, o.appendChild(this.createSkeletonDiv()), r.appendChild(o);
     const d = document.createElement("div");
     d.style.display = "flex", d.style.gap = "8px";
     const c = document.createElement("div");
@@ -2079,7 +2118,7 @@ class vt {
     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 St {
+class Et {
   formManager;
   focusManager;
   onFormSubmit;
@@ -2091,16 +2130,16 @@ class St {
   handleChange = (e) => {
     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);
+    const { formData: r, errors: o, touched: d } = this.formManager.getFormState();
+    this.focusManager.handleStateUpdate(r, o, d);
   };
   handleBlur = (e) => {
     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: l, touched: d } = this.formManager.getFormState();
-    d[n] || this.focusManager.handleStateUpdate(r, l, d);
+    const { formData: r, errors: o, touched: d } = this.formManager.getFormState();
+    d[n] || this.focusManager.handleStateUpdate(r, o, d);
   };
   handleSubmit = async (e) => {
     e.preventDefault(), await this.onFormSubmit(e);
@@ -2120,7 +2159,7 @@ class St {
     this.localTouchedFields.clear();
   }
 }
-class Et {
+class Ct {
   formManager;
   checkoutProfile;
   formElement;
@@ -2162,13 +2201,13 @@ class Et {
   isFormDisabled() {
     const e = this.formManager.getFormState(), t = this.checkoutProfile.getState(), s = Object.keys(e.errors).filter(
       (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(
+    ).length > 0, a = e.errors.billingAddress, n = a && typeof a == "object" ? Object.keys(a).length > 0 : !1, r = e.errors.shippingAddress, o = r && typeof r == "object" ? Object.keys(r).length > 0 : !1, d = s || n || o, 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: g, shippingFields: m } = t.checkoutProfile?.layout ?? {}, u = (y, v) => !y || Object.entries(y).every(
+    ) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name, l = 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);
+    ), h = this.isVgsMode ? !!e.formData.email && l && f && u(g, e.formData.billingAddress) && u(m, e.formData.shippingAddress) : !!e.formData.email && l && 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) {
@@ -2199,7 +2238,7 @@ class Et {
     this.fontCleanup && (this.fontCleanup(), this.fontCleanup = void 0);
   }
 }
-class Ct extends P {
+class Ft extends P {
   titleElement;
   constructor(e = {}) {
     super("div", ["blur-bg"]);
@@ -2227,7 +2266,7 @@ const oe = {
     }
   }), t;
 };
-class Ft {
+class Mt {
   formElement;
   componentManager;
   onLoadingStateChange;
@@ -2278,7 +2317,7 @@ class Ft {
     e ? (this.hideSkeleton(), this.formSkeleton = new he(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
   }
   showSpinner(e) {
-    this.hideSpinner(), this.spinner = new Ct({ text: e }), this.formElement.appendChild(this.spinner.getElement());
+    this.hideSpinner(), this.spinner = new Ft({ text: e }), this.formElement.appendChild(this.spinner.getElement());
   }
   hideSpinner() {
     this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
@@ -2309,7 +2348,7 @@ const D = (i) => ({
   country: "",
   ...i
 });
-class Mt extends P {
+class Nt extends P {
   options;
   formManager = lt();
   checkoutProfile;
@@ -2327,7 +2366,7 @@ class Mt extends P {
   constructor(e) {
     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 vt({
+    }), e.locale && this.translation.setLocale(e.locale), this.componentManager = new St({
       formElement: this.element,
       focusManager: this.focusManager,
       translationFunc: this.translation.t,
@@ -2344,11 +2383,11 @@ class Mt extends P {
       environment: e.environment,
       vgsService: this.vgsService,
       onVgsStateChange: (t) => this.handleVgsStateChange(t)
-    }), this.uiManager = new Ft({
+    }), this.uiManager = new Mt({
       formElement: this.element,
       componentManager: this.componentManager,
       onLoadingStateChange: e.onLoadingStateChange
-    }), this.stateCoordinator = new Et({
+    }), this.stateCoordinator = new Ct({
       formManager: this.formManager,
       checkoutProfile: this.checkoutProfile,
       componentManager: this.componentManager,
@@ -2358,7 +2397,7 @@ class Mt extends P {
       onError: (t) => this.uiManager.setErrorMessage(t),
       onLoadingChange: (t) => this.uiManager.setLoadingState(t),
       getInitialFormData: () => this._getFormStateData().formData
-    }), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new St({
+    }), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new Et({
       formManager: this.formManager,
       focusManager: this.focusManager,
       onFormSubmit: async () => this.handleSubmit(),
@@ -2431,12 +2470,15 @@ class Mt extends P {
       this.uiManager.setErrorMessage("Failed to load checkout configuration");
       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({
+    this.componentManager.hasComponents() && this.componentManager.cleanup(), e.checkoutProfile.layout.phoneNumber?.enabled && this.formManager.getFormState().formData.phoneNumber === void 0 && this.formManager.setFormData({
+      phoneNumber: "",
+      phoneCountryCode: e.checkoutProfile.layout.phoneNumber.defaultCountry?.toUpperCase() || "US"
+    }), e.checkoutProfile.layout.billingFields && this.formManager.getFormState().formData.billingAddress === void 0 && this.formManager.setFormData({
       billingAddress: D()
     }), e.checkoutProfile.layout.shippingFields && this.formManager.getFormState().formData.shippingAddress === void 0 && this.formManager.setFormData({
       shippingAddress: D()
     });
-    const { formData: t, errors: s, touched: a } = this._getFormStateData(), n = W(
+    const { formData: t, errors: s, touched: a } = this._getFormStateData(), n = mt(
       e.checkoutProfile.layout
     );
     try {
@@ -2444,8 +2486,8 @@ class Mt extends P {
         e.checkoutProfile,
         t
       );
-    } catch (r) {
-      console.error("Failed to create payment methods:", r);
+    } catch (o) {
+      console.error("Failed to create payment methods:", o);
     }
     try {
       this.componentManager.createEmailField(
@@ -2454,8 +2496,8 @@ class Mt extends P {
         s,
         a
       );
-    } catch (r) {
-      console.error("Failed to create email field:", r);
+    } catch (o) {
+      console.error("Failed to create email field:", o);
     }
     if (n) {
       try {
@@ -2465,8 +2507,8 @@ class Mt extends P {
           s,
           a
         );
-      } catch (r) {
-        console.error("Failed to create billing address section:", r);
+      } catch (o) {
+        console.error("Failed to create billing address section:", o);
       }
       try {
         this.componentManager.createShippingAddressSection(
@@ -2475,8 +2517,8 @@ class Mt extends P {
           s,
           a
         );
-      } catch (r) {
-        console.error("Failed to create shipping address section:", r);
+      } catch (o) {
+        console.error("Failed to create shipping address section:", o);
       }
     }
     if (e.checkoutProfile.layout.phoneNumber?.enabled)
@@ -2487,8 +2529,8 @@ class Mt extends P {
           s,
           a
         );
-      } catch (r) {
-        console.error("Failed to create phone number field:", r);
+      } catch (o) {
+        console.error("Failed to create phone number field:", o);
       }
     try {
       this.componentManager.createCardSection(
@@ -2497,10 +2539,12 @@ class Mt extends P {
         s,
         a
       );
-    } catch (r) {
-      console.error("Failed to create card section:", r);
+    } catch (o) {
+      console.error("Failed to create card section:", o);
     }
-    if (!n)
+    if (!W(
+      e.checkoutProfile.layout
+    ))
       try {
         this.componentManager.createCardholderSection(
           e.checkoutProfile,
@@ -2508,19 +2552,19 @@ class Mt extends P {
           s,
           a
         );
-      } catch (r) {
-        console.error("Failed to create cardholder section:", r);
+      } catch (o) {
+        console.error("Failed to create cardholder section:", o);
       }
-    this.vgsService && this.componentManager.mountVgsFields(e.checkoutProfile).catch((r) => {
-      console.error("Failed to mount VGS fields:", r);
+    this.vgsService && this.componentManager.mountVgsFields(e.checkoutProfile).catch((o) => {
+      console.error("Failed to mount VGS fields:", o);
     });
     try {
       this.componentManager.createSubmitButton(
         e.checkoutProfile,
         this.stateCoordinator.isFormDisabled()
       );
-    } catch (r) {
-      console.error("Failed to create submit button:", r);
+    } catch (o) {
+      console.error("Failed to create submit button:", o);
     }
   }
   updateFormUI() {
@@ -2541,8 +2585,8 @@ class Mt extends P {
     )) return;
     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 });
+    const n = a.firstName?.trim() ?? "", r = a.lastName?.trim() ?? "", o = [n, r].filter(Boolean).join(" ");
+    o && this.formManager.setFormData({ name: o });
   }
   /**
    * Infers address data based on field configuration.
@@ -2552,7 +2596,7 @@ class Mt extends P {
   inferAddresses() {
     const e = this.checkoutProfile.getState();
     if (!e.checkoutProfile) return;
-    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();
+    const { billingFields: t, shippingFields: s } = e.checkoutProfile.layout, a = t && Object.values(t).some((o) => o?.enabled), n = s && Object.values(s).some((o) => o?.enabled), { formData: r } = this._getFormStateData();
     !a && n && r.shippingAddress ? this.formManager.setFormData({
       billingAddress: { ...r.shippingAddress }
     }) : !n && a && r.billingAddress && this.formManager.setFormData({
@@ -2644,13 +2688,13 @@ class Mt extends P {
     ), this.componentManager.cleanup(), this.uiManager.cleanup(), this.getElement().remove();
   }
   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.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((o) => {
       this.vgsService?.createForm(
-        l,
+        o,
         (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();
+    }).catch((o) => {
+      console.error("Failed to load VGS Collect:", o), this.vgsService = void 0, this.vgsJwt = void 0, this.renderFormComponents();
     })), this.componentManager.removePaymentMethods(), this.componentManager.updateSupportedPaymentMethods(
       s
     ), this.componentManager.updatePaymentDetails(
@@ -2660,16 +2704,16 @@ class Mt extends P {
     ), !n && this.checkoutProfile.getState().checkoutProfile && this.renderFormComponents();
     const r = this.checkoutProfile.getState();
     if (r.checkoutProfile) {
-      const { formData: l } = this._getFormStateData();
+      const { formData: o } = this._getFormStateData();
       this.componentManager.createPaymentMethods(
         r.checkoutProfile,
-        l,
+        o,
         !0
       );
     }
   }
 }
-class Nt {
+class wt {
   container = null;
   options;
   onSubmit;
@@ -2693,7 +2737,7 @@ class Nt {
     }
   }
   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 Nt({
       apiKey: this.options.apiKey,
       onSubmit: this.onSubmit,
       locale: this.options.locale,
@@ -2730,7 +2774,7 @@ class Nt {
     );
   }
 }
-class wt {
+class Pt {
   state;
   listeners = /* @__PURE__ */ new Set();
   constructor(e) {
@@ -2752,8 +2796,8 @@ class wt {
     this.listeners.forEach((t) => t(e));
   }
 }
-const Pt = "en";
-class kt {
+const kt = "en";
+class At {
   config;
   paymentState;
   apiService;
@@ -2769,10 +2813,10 @@ class kt {
     }), this.apiService = new Ae(
       this.config.apiKey,
       this.config.environment
-    ), this.stateManager = new wt({
+    ), this.stateManager = new Pt({
       mounted: !1,
       form: null
-    }), this.formManager = new Nt(
+    }), this.formManager = new wt(
       {
         locale: this.config.locale,
         apiKey: this.config.apiKey,
@@ -2794,7 +2838,7 @@ class kt {
       apiKey: e.apiKey,
       returnUrl: e.returnUrl,
       environment: e.environment,
-      locale: e.locale || Pt,
+      locale: e.locale || kt,
       disableErrorMessages: e.disableErrorMessages ?? !1,
       manualActionHandling: e.manualActionHandling ?? !1,
       appearance: e.appearance,
@@ -2980,19 +3024,19 @@ class kt {
     }
   }
 }
-typeof globalThis < "u" && (globalThis.OdusCheckout = kt);
+typeof globalThis < "u" && (globalThis.OdusCheckout = At);
 export {
-  kt as OdusCheckout,
+  At as OdusCheckout,
   Tt as deLocale,
-  Lt as enLocale,
-  Vt as esLocale,
-  _t as frLocale,
-  Bt as itLocale,
-  Ot as plLocale,
-  Rt as ptLocale,
+  Vt as enLocale,
+  _t as esLocale,
+  Bt as frLocale,
+  Ot as itLocale,
+  Rt as plLocale,
+  Ut as ptLocale,
   rt as pushError,
   F as pushEvent,
-  Dt as pushLog,
+  It as pushLog,
   ne as pushMeasurement,
-  Ut as trLocale
+  Ht as trLocale
 };