@odus/checkout 0.5.7 → 0.5.9

package/dist/checkout.es.js

@@ -10,17 +10,17 @@ class $ {
     endpoint: e,
     method: t = "POST",
     body: a,
-    customHeaders: i = {}
+    customHeaders: r = {}
   }) {
-    const r = {
+    const i = {
       Authorization: `Bearer ${this.apiKey}`,
       "Content-Type": "application/json",
-      ...i
+      ...r
     };
     try {
       const n = await fetch(`${this.baseUrl}${e}`, {
         method: t,
-        headers: r,
+        headers: i,
         body: a ? JSON.stringify(a) : void 0
       });
       if (!n.ok) {
@@ -52,17 +52,17 @@ class $ {
     paymentId: e,
     checkoutKey: t,
     formData: a,
-    token: i,
-    returnUrl: r
+    token: r,
+    returnUrl: i
   }) {
     let n = {};
-    if (i && a) {
+    if (r && a) {
       const o = a.cardExpiry.replace(/\s+/g, "").split("/"), l = o[0], c = o[1];
       n = {
         paymentMethodData: {
           type: "card",
           card: {
-            token: i,
+            token: r,
             expMonth: l,
             expYear: `20${c}`,
             cardholderName: a.name
@@ -73,7 +73,7 @@ class $ {
           name: a.name
         },
         context: {
-          returnUrl: r,
+          returnUrl: i,
           browserInfo: this.browserInfo
         }
       };
@@ -83,7 +83,7 @@ class $ {
           type: "paypal"
         },
         context: {
-          returnUrl: r,
+          returnUrl: i,
           browserInfo: this.browserInfo
         }
       };
@@ -101,16 +101,16 @@ const R = async ({
   apiKey: e,
   environment: t
 }) => {
-  const a = k(t), i = await fetch(`${a}/checkout-profiles/${s}`, {
+  const a = k(t), r = await fetch(`${a}/checkout-profiles/${s}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${e}`
     }
   });
-  if (!i.ok)
-    throw new Error(`HTTP error! Status: ${i.status}`);
-  return await i.json();
+  if (!r.ok)
+    throw new Error(`HTTP error! Status: ${r.status}`);
+  return await r.json();
 };
 class V {
   events = /* @__PURE__ */ new Map();
@@ -133,7 +133,7 @@ class V {
    */
   publish(e, t) {
     const a = this.events.get(e);
-    a && a.forEach((i) => i(t));
+    a && a.forEach((r) => r(t));
   }
   /**
    * Clear all event subscriptions
@@ -208,30 +208,30 @@ function H({
     checkoutProfile: void 0,
     isLoading: !0,
     error: null
-  }), i = async () => {
+  }), r = async () => {
     try {
       a.setState({ isLoading: !0 });
-      const r = await R({
+      const i = await R({
         apiKey: s,
         id: e,
         environment: t
       });
-      r && a.setState({
-        checkoutProfile: r,
+      i && a.setState({
+        checkoutProfile: i,
         isLoading: !1,
         error: null
       });
-    } catch (r) {
+    } catch (i) {
       a.setState({
         error: "Failed to load checkout profile",
         isLoading: !1
-      }), console.error(r);
+      }), console.error(i);
     }
   };
-  return i(), {
+  return r(), {
     getState: a.getState.bind(a),
     subscribe: a.subscribe.bind(a),
-    reload: i
+    reload: r
   };
 }
 const z = {
@@ -328,29 +328,29 @@ const z = {
 }, j = (s, e) => {
   if (s.length === 0) return e.length;
   if (e.length === 0) return s.length;
-  const t = e.length + 1, a = s.length + 1, i = Array.from(
+  const t = e.length + 1, a = s.length + 1, r = Array.from(
     { length: t },
-    (r, n) => Array.from({ length: a }, (o, l) => n === 0 ? l : l === 0 ? n : 0)
+    (i, n) => Array.from({ length: a }, (o, l) => n === 0 ? l : l === 0 ? n : 0)
   );
-  for (let r = 1; r < t; r++)
+  for (let i = 1; i < t; i++)
     for (let n = 1; n < a; n++) {
-      const o = s[n - 1] === e[r - 1] ? 0 : 1;
-      i[r][n] = Math.min(
-        i[r - 1][n] + 1,
+      const o = s[n - 1] === e[i - 1] ? 0 : 1;
+      r[i][n] = Math.min(
+        r[i - 1][n] + 1,
         // deletion
-        i[r][n - 1] + 1,
+        r[i][n - 1] + 1,
         // insertion
-        i[r - 1][n - 1] + o
+        r[i - 1][n - 1] + o
         // substitution
       );
     }
-  return i[e.length][s.length];
+  return r[e.length][s.length];
 }, U = (s) => {
   let t = null, a = 3;
-  const i = s.toLowerCase();
-  for (const r of Object.keys(D)) {
-    const n = j(i, r);
-    n <= 2 && n < a && (a = n, t = r);
+  const r = s.toLowerCase();
+  for (const i of Object.keys(D)) {
+    const n = j(r, i);
+    n <= 2 && n < a && (a = n, t = i);
   }
   return t;
 }, _ = () => {
@@ -364,32 +364,32 @@ const z = {
           message: s("validation.emailInvalid"),
           suggestion: null
         };
-      const i = t.indexOf("@");
-      if (i === -1)
+      const r = t.indexOf("@");
+      if (r === -1)
         return {
           isValid: !1,
           message: s("validation.emailInvalid"),
           suggestion: null
         };
-      const r = t.substring(0, i), n = t.substring(i + 1);
+      const i = t.substring(0, r), n = t.substring(r + 1);
       if (!n.includes(".")) {
         const l = K(n);
         if (l)
           return {
             isValid: !1,
             message: s("validation.emailSuggestion", {
-              email: `${r}@${l}`
+              email: `${i}@${l}`
             }),
-            suggestion: `${r}@${l}`
+            suggestion: `${i}@${l}`
           };
         for (const c of Object.keys(D))
           if (c.replace(/\./g, "") === n)
             return {
               isValid: !1,
               message: s("validation.emailSuggestion", {
-                email: `${r}@${c}`
+                email: `${i}@${c}`
               }),
-              suggestion: `${r}@${c}`
+              suggestion: `${i}@${c}`
             };
       }
       if (!a.test(t))
@@ -400,7 +400,7 @@ const z = {
         };
       const o = U(n);
       if (o && o !== n) {
-        const l = `${r}@${o}`;
+        const l = `${i}@${o}`;
         return {
           isValid: !1,
           message: s("validation.emailSuggestion", { email: l }),
@@ -426,10 +426,10 @@ const z = {
         return s("validation.nameRequired");
     },
     cardExpiry: (t) => {
-      const a = t.replace(/\s/g, ""), [i, r] = a.split("/").map((u) => u.trim());
-      if (!i || !r || i.length !== 2 || r.length !== 2)
+      const a = t.replace(/\s/g, ""), [r, i] = a.split("/").map((u) => u.trim());
+      if (!r || !i || r.length !== 2 || i.length !== 2)
         return s("validation.cardExpiryFormat");
-      const n = /* @__PURE__ */ new Date(), o = n.getFullYear() % 100, l = n.getMonth() + 1, c = parseInt(i, 10), d = parseInt(r, 10);
+      const n = /* @__PURE__ */ new Date(), o = n.getFullYear() % 100, l = n.getMonth() + 1, c = parseInt(r, 10), d = parseInt(i, 10);
       if (c < 1 || c > 12)
         return s("validation.cardExpiryFormat");
       if (d < o || d === o && c < l)
@@ -459,34 +459,34 @@ const z = {
       const u = t(d, l[d]);
       u && (c[d] = u);
     }), c;
-  }, i = (l) => {
+  }, r = (l) => {
     const c = a(l);
     return Object.keys(c).length === 0;
-  }, r = (l, c) => {
+  }, i = (l, c) => {
     const d = e.getState();
     let u = c;
     l in z && (u = z[l](c));
     const E = {
       ...d.formData,
       [l]: u
-    }, g = { ...d.errors };
+    }, f = { ...d.errors };
     if (d.touched[l]) {
       const m = t(l, u);
-      m ? g[l] = m : delete g[l];
+      m ? f[l] = m : delete f[l];
     }
     e.setState({
       formData: E,
-      errors: g,
-      isValid: i(E)
+      errors: f,
+      isValid: r(E)
     });
   }, n = (l, c) => {
     const d = e.getState(), u = {
       ...d.touched,
       [l]: !0
-    }, E = t(l, c), g = { ...d.errors };
-    E ? g[l] = E : delete g[l], e.setState({
+    }, E = t(l, c), f = { ...d.errors };
+    E ? f[l] = E : delete f[l], e.setState({
       touched: u,
-      errors: g
+      errors: f
     });
   }, o = (l) => {
     const d = {
@@ -495,13 +495,13 @@ const z = {
     };
     e.setState({
       formData: d,
-      isValid: i(d)
+      isValid: r(d)
     });
   };
   return {
     getFormState: e.getState.bind(e),
     subscribe: e.subscribe.bind(e),
-    handleChange: r,
+    handleChange: i,
     handleBlur: n,
     setFormData: o,
     reset: e.resetState.bind(e)
@@ -511,7 +511,7 @@ const z = {
   apiKey: e,
   environment: t
 }) => {
-  const a = k(t), i = await fetch(
+  const a = k(t), r = await fetch(
     `${a}/tokenization/generate-iframe-configuration`,
     {
       method: "POST",
@@ -522,9 +522,9 @@ const z = {
       body: JSON.stringify(s)
     }
   );
-  if (!i.ok)
-    throw new Error(`HTTP error! Status: ${i.status}`);
-  return await i.json();
+  if (!r.ok)
+    throw new Error(`HTTP error! Status: ${r.status}`);
+  return await r.json();
 }, Z = 100, J = 2, W = 2e3, X = 5;
 function Q({
   apiKey: s,
@@ -532,9 +532,9 @@ function Q({
   checkoutProfile: e,
   inputStyles: t,
   setFormData: a,
-  environment: i
+  environment: r
 }) {
-  const r = L({
+  const i = L({
     iframeConfig: void 0,
     loadingIframe: !0,
     isCcValid: !1,
@@ -551,9 +551,9 @@ function Q({
           allowedOrigins: [globalThis.location.origin]
         },
         apiKey: s,
-        environment: i
+        environment: r
       });
-      m && (r.setState({
+      m && (i.setState({
         iframeConfig: {
           ...m,
           origin: globalThis.location.origin
@@ -563,17 +563,13 @@ function Q({
       console.error("Failed to generate iframe config:", m);
     }
   }, l = () => {
-    const m = r.getState();
+    const m = i.getState();
     if (!m.iframeConfig || !e)
       return;
-    const y = document.getElementById("card-element"), f = document.getElementById("card-cvv-element");
-    if (!y || !f)
+    const y = document.getElementById("card-element"), v = document.getElementById("card-cvv-element");
+    if (!y || !v)
       throw new Error("Card elements not found in DOM");
-    console.log("✅ TokenEx iframe initializing successfully:", {
-      cardElementId: y.id,
-      cvvElementId: f.id,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    }), n = new globalThis.TokenEx.Iframe("card-element", {
+    n = new globalThis.TokenEx.Iframe("card-element", {
       ...m.iframeConfig,
       placeholder: "1234 1234 1234 1234",
       cvvPlaceholder: "CVC",
@@ -598,7 +594,7 @@ function Q({
         }
       }
     }), n.on("load", () => {
-      r.setState({ loadingIframe: !1 });
+      i.setState({ loadingIframe: !1 });
     }), n.on("autoCompleteValues", function(p) {
       const { nameOnCard: C, cardExp: b } = p;
       a({
@@ -607,22 +603,22 @@ function Q({
       });
     }), n.on("validate", function(p) {
       const { isValid: C, isCvvValid: b } = p;
-      r.setState({
+      i.setState({
         isCcValid: C,
         isCvvValid: b
       });
     }), n.on("focus", function() {
-      r.setState({ isFocused: !0 });
+      i.setState({ isFocused: !0 });
     }), n.on("blur", function() {
-      r.setState({ isFocused: !1 });
+      i.setState({ isFocused: !1 });
     }), n.on("cvvFocus", function() {
-      r.setState({ isCvvFocused: !0 });
+      i.setState({ isCvvFocused: !0 });
     }), n.on("cvvBlur", function() {
-      r.setState({ isCvvFocused: !1 });
+      i.setState({ isCvvFocused: !1 });
     }), n.on(
       "cardTypeChange",
       function({ possibleCardType: p }) {
-        r.setState({ possibleCardType: p });
+        i.setState({ possibleCardType: p });
       }
     ), n.load();
   }, c = () => {
@@ -631,7 +627,7 @@ function Q({
     console.warn(
       "Card elements not found in DOM, retrying iframe initialization..."
     );
-    const f = () => {
+    const v = () => {
       if (m++, m > y) {
         console.error("Failed to find card elements after maximum retries");
         return;
@@ -645,22 +641,22 @@ function Q({
         if (C && b)
           try {
             l();
-          } catch (v) {
-            console.error("Failed to create TokenEx iframe:", v);
+          } catch (g) {
+            console.error("Failed to create TokenEx iframe:", g);
           }
-        else m < y && f();
+        else m < y && v();
       }, p);
     };
-    f();
+    v();
   }, d = () => {
-    if (!r.getState().iframeConfig || !e)
+    if (!i.getState().iframeConfig || !e)
       return;
     if (!globalThis.TokenEx?.Iframe) {
       console.error("TokenEx script not loaded correctly");
       return;
     }
-    const y = document.getElementById("card-element"), f = document.getElementById("card-cvv-element");
-    if (!y || !f) {
+    const y = document.getElementById("card-element"), v = document.getElementById("card-cvv-element");
+    if (!y || !v) {
       c();
       return;
     }
@@ -673,25 +669,25 @@ function Q({
     s && await o();
   }, E = () => {
     n && (n.remove(), n = null);
-  }, g = async (m) => {
+  }, f = async (m) => {
     n && (n.on("tokenize", async function(y) {
       await m(y);
     }), n.tokenize());
   };
   return {
-    getState: r.getState.bind(r),
-    subscribe: r.subscribe.bind(r),
-    tokenize: g,
+    getState: i.getState.bind(i),
+    subscribe: i.subscribe.bind(i),
+    tokenize: f,
     cleanup: E,
     initialize: u
   };
 }
-const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ae = "Kartendaten", ie = "Vollständiger Name", re = "MM / JJ", ne = "Das Fenster nicht schließen", se = { pay: "ZAHLEN", submit: "ABSENDEN", getPlan: "MEINEN PLAN ERHALTEN", donate: "spenden", book: "jetzt buchen", order: "jetzt bestellen" }, oe = { emailSuggestion: "Meinten Sie {{email}}?", emailInvalid: "Ihre E-Mail-Adresse ist nicht korrekt", cardExpiryInvalid: "Das Ablaufdatum Ihrer Karte liegt in der Vergangenheit", cardExpiryFormat: "Das Ablaufdatum Ihrer Karte ist unvollständig", cardSecurityFormat: "Der Sicherheitscode Ihrer Karte ist unvollständig", nameRequired: "Gib deinen Namen genau so ein, wie er auf deiner Karte steht", cardNumberInvalid: "Die Kartennummer ist unvollständig" }, le = {
+const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ae = "Kartendaten", re = "Vollständiger Name", ie = "MM / JJ", ne = "Das Fenster nicht schließen", se = { pay: "ZAHLEN", submit: "ABSENDEN", getPlan: "MEINEN PLAN ERHALTEN", donate: "spenden", book: "jetzt buchen", order: "jetzt bestellen" }, oe = { emailSuggestion: "Meinten Sie {{email}}?", emailInvalid: "Ihre E-Mail-Adresse ist nicht korrekt", cardExpiryInvalid: "Das Ablaufdatum Ihrer Karte liegt in der Vergangenheit", cardExpiryFormat: "Das Ablaufdatum Ihrer Karte ist unvollständig", cardSecurityFormat: "Der Sicherheitscode Ihrer Karte ist unvollständig", nameRequired: "Gib deinen Namen genau so ein, wie er auf deiner Karte steht", cardNumberInvalid: "Die Kartennummer ist unvollständig" }, le = {
   email: ee,
   cardholderNameLabel: te,
   cardInformation: ae,
-  cardholderNamePlaceholder: ie,
-  cardExpiry: re,
+  cardholderNamePlaceholder: re,
+  cardExpiry: ie,
   loading: ne,
   buttonTexts: se,
   validation: oe
@@ -740,12 +736,12 @@ const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ae = "Kartendaten", i
   loading: Je,
   buttonTexts: We,
   validation: Xe
-}, et = "E-mail", tt = "Nome do titular do cartão", at = "Informações do cartão", it = "Nome completo no cartão", rt = "MM / AA", nt = "Por favor, não feche esta janela", st = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTER MEU PLANO", donate: "DOAR", book: "RESERVAR AGORA", order: "FAZER PEDIDO" }, ot = { emailSuggestion: "Você quis dizer {{email}}?", emailInvalid: "O seu endereço de e-mail não é válido", cardExpiryInvalid: "A data de validade do seu cartão está no passado", cardExpiryFormat: "A data de validade do seu cartão está incompleta", cardSecurityFormat: "O código de segurança do seu cartão está incompleto", nameRequired: "Por favor, insira o nome conforme aparece no cartão", cardNumberInvalid: "O número do seu cartão é inválido" }, lt = {
+}, et = "E-mail", tt = "Nome do titular do cartão", at = "Informações do cartão", rt = "Nome completo no cartão", it = "MM / AA", nt = "Por favor, não feche esta janela", st = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTER MEU PLANO", donate: "DOAR", book: "RESERVAR AGORA", order: "FAZER PEDIDO" }, ot = { emailSuggestion: "Você quis dizer {{email}}?", emailInvalid: "O seu endereço de e-mail não é válido", cardExpiryInvalid: "A data de validade do seu cartão está no passado", cardExpiryFormat: "A data de validade do seu cartão está incompleta", cardSecurityFormat: "O código de segurança do seu cartão está incompleto", nameRequired: "Por favor, insira o nome conforme aparece no cartão", cardNumberInvalid: "O número do seu cartão é inválido" }, lt = {
   email: et,
   cardholderNameLabel: tt,
   cardInformation: at,
-  cardholderNamePlaceholder: it,
-  cardExpiry: rt,
+  cardholderNamePlaceholder: rt,
+  cardExpiry: it,
   loading: nt,
   buttonTexts: st,
   validation: ot
@@ -792,18 +788,18 @@ class vt {
   }
   findNestedValue(e, t) {
     const a = t.split(".");
-    let i = e;
-    for (const r of a) {
-      if (i == null || !Object.prototype.hasOwnProperty.call(i, r))
+    let r = e;
+    for (const i of a) {
+      if (r == null || !Object.prototype.hasOwnProperty.call(r, i))
         return;
-      i = i[r];
+      r = r[i];
     }
-    return typeof i == "string" ? i : void 0;
+    return typeof r == "string" ? r : void 0;
   }
   interpolate(e, t) {
-    return e.replace(/{{(\w+)}}/g, (a, i) => {
-      const r = t[i];
-      return r === void 0 ? a : String(r);
+    return e.replace(/{{(\w+)}}/g, (a, r) => {
+      const i = t[r];
+      return i === void 0 ? a : String(i);
     });
   }
 }
@@ -823,18 +819,18 @@ function bt(s) {
     return A.includes(o) ? o : Et;
   })();
   e.setLocale(a);
-  const i = L({
+  const r = L({
     locale: a,
     translationService: e
   });
   return {
-    store: i,
-    translate: (o, l) => i.getState().translationService.translate(o, l),
+    store: r,
+    translate: (o, l) => r.getState().translationService.translate(o, l),
     setLocale: (o) => {
-      A.includes(o) && (i.getState().translationService.setLocale(o), i.setState({ locale: o }));
+      A.includes(o) && (r.getState().translationService.setLocale(o), r.setState({ locale: o }));
     },
-    getLocale: () => i.getValue("locale"),
-    subscribe: i.subscribe.bind(i)
+    getLocale: () => r.getValue("locale"),
+    subscribe: r.subscribe.bind(r)
   };
 }
 const Ct = bt(), I = () => {
@@ -852,22 +848,22 @@ const Ct = bt(), I = () => {
     } };
   const e = s.replace(/\s+/g, "+"), t = `https://fonts.googleapis.com/css2?family=${e}:wght@400;700&display=swap`, a = [...document.head.querySelectorAll("link")].filter(
     (o) => o.href.includes("fonts.googleapis.com/css2") && o.rel === "stylesheet"
-  ), i = document.createElement("link");
-  i.rel = "stylesheet", i.href = t;
-  const r = a.find(
+  ), r = document.createElement("link");
+  r.rel = "stylesheet", r.href = t;
+  const i = a.find(
     (o) => o.href.includes(`family=${e}`)
   );
-  if (r)
-    r.href = t;
+  if (i)
+    i.href = t;
   else if (a.length > 0) {
     const o = a.at(
       -1
     );
-    o?.nextSibling ? document.head.insertBefore(i, o.nextSibling) : document.head.appendChild(i);
+    o?.nextSibling ? document.head.insertBefore(r, o.nextSibling) : document.head.appendChild(r);
   } else
-    document.head.appendChild(i);
+    document.head.appendChild(r);
   return { cleanup: () => {
-    document.head.contains(i) && document.head.removeChild(i);
+    document.head.contains(r) && document.head.removeChild(r);
   } };
 }, xt = ({
   scriptSrc: s,
@@ -889,7 +885,7 @@ const Ct = bt(), I = () => {
     };
   const a = document.createElement("script");
   a.src = s, a.async = e;
-  const i = new Promise((n, o) => {
+  const r = new Promise((n, o) => {
     a.onload = () => n(!0), a.onerror = () => {
       console.error(`Failed to load script: ${s}`), o(new Error(`Failed to load script: ${s}`));
     };
@@ -898,11 +894,11 @@ const Ct = bt(), I = () => {
     cleanup: () => {
       document.head.contains(a) && document.head.removeChild(a);
     },
-    isLoaded: i
+    isLoaded: r
   };
 }, w = (s) => Object.entries(s).map(([e, t]) => {
-  const a = e.replace(/([A-Z])/g, "-$1").toLowerCase(), i = typeof t == "number" ? `${t}px` : t;
-  return `${a}: ${i}`;
+  const a = e.replace(/([A-Z])/g, "-$1").toLowerCase(), r = typeof t == "number" ? `${t}px` : t;
+  return `${a}: ${r}`;
 }).join("; ");
 function Ft(s) {
   if (!s)
@@ -937,22 +933,22 @@ function Ft(s) {
     fontFamily: `${s.styles.fontFamily}, sans-serif`
   }, a = {
     color: "#dc2727"
-  }, i = {
-    outline: 0
   }, r = {
+    outline: 0
+  }, i = {
     fontFamily: `${s.styles.fontFamily}, sans-serif`
   }, n = {
     base: w(e),
     error: w(a),
-    focus: w(i),
+    focus: w(r),
     placeholder: w(t)
   };
   return {
-    formContainerStyle: r,
+    formContainerStyle: i,
     baseStyles: e,
     placeholderStyles: t,
     errorStyles: a,
-    focusStyles: i,
+    focusStyles: r,
     inputStyles: n
   };
 }
@@ -967,8 +963,8 @@ class h {
    * @param attributes Optional attributes to set on the element
    */
   constructor(e, t = [], a = {}) {
-    this.element = document.createElement(e), t.length > 0 && this.addClass(...t), Object.entries(a).forEach(([i, r]) => {
-      this.setAttribute(i, r);
+    this.element = document.createElement(e), t.length > 0 && this.addClass(...t), Object.entries(a).forEach(([r, i]) => {
+      this.setAttribute(r, i);
     });
   }
   /**
@@ -1070,26 +1066,26 @@ class S {
    * Create a button element
    */
   static createButton(e, t = [], a = {}) {
-    const i = new h("button", t, a);
-    return i.setText(e), i;
+    const r = new h("button", t, a);
+    return r.setText(e), r;
   }
   /**
    * Create an input element
    */
   static createInput(e, t = [], a = {}) {
-    const i = { type: e, ...a };
-    return new h("input", t, i);
+    const r = { type: e, ...a };
+    return new h("input", t, r);
   }
   /**
    * Create a text input
    */
   static createTextInput(e = "", t = [], a = {}) {
-    const i = {
+    const r = {
       type: "text",
       placeholder: e,
       ...a
     };
-    return new h("input", t, i);
+    return new h("input", t, r);
   }
   /**
    * Create a form element
@@ -1100,26 +1096,26 @@ class S {
   /**
    * Create a label element
    */
-  static createLabel(e, t = "", a = [], i = {}) {
-    const r = t ? { for: t, ...i } : i, n = new h("label", a, r);
+  static createLabel(e, t = "", a = [], r = {}) {
+    const i = t ? { for: t, ...r } : r, n = new h("label", a, i);
     return n.setText(e), n;
   }
   /**
    * Create a select element
    */
   static createSelect(e, t = [], a = {}) {
-    const i = new h("select", t, a);
-    return e.forEach((r) => {
+    const r = new h("select", t, a);
+    return e.forEach((i) => {
       const n = document.createElement("option");
-      n.value = r.value, n.textContent = r.text, r.selected && (n.selected = !0), i.getElement().appendChild(n);
-    }), i;
+      n.value = i.value, n.textContent = i.text, i.selected && (n.selected = !0), r.getElement().appendChild(n);
+    }), r;
   }
   /**
    * Create an image element
    */
-  static createImage(e, t = "", a = [], i = {}) {
-    const r = { src: e, alt: t, ...i };
-    return new h("img", a, r);
+  static createImage(e, t = "", a = [], r = {}) {
+    const i = { src: e, alt: t, ...r };
+    return new h("img", a, i);
   }
 }
 class wt extends h {
@@ -1129,18 +1125,18 @@ class wt extends h {
     const t = S.createDiv(["error-alert"], {
       role: "alert",
       "aria-live": "polite"
-    }), a = S.createDiv(["error-alert-content"]), i = S.createDiv([
+    }), a = S.createDiv(["error-alert-content"]), r = S.createDiv([
       "error-alert-icon-container"
     ]);
-    i.getElement().innerHTML = this.createAlertCircleSVG();
-    const r = S.createDiv([
+    r.getElement().innerHTML = this.createAlertCircleSVG();
+    const i = S.createDiv([
       "error-alert-text-container"
     ]), n = new h("h4", [
       "error-alert-title"
     ]);
     n.setText("Checkout Error"), this.messageComponent = new h("p", [
       "error-alert-message"
-    ]), this.messageComponent.setText(e.message || "Bad request"), r.appendChild(n), r.appendChild(this.messageComponent), a.appendChild(i), a.appendChild(r), t.appendChild(a), this.appendChild(t);
+    ]), this.messageComponent.setText(e.message || "Bad request"), i.appendChild(n), i.appendChild(this.messageComponent), a.appendChild(r), a.appendChild(i), t.appendChild(a), this.appendChild(t);
   }
   createAlertCircleSVG() {
     return `
@@ -1246,8 +1242,8 @@ class Mt {
     const {
       value: t,
       onChange: a,
-      onBlur: i,
-      error: r,
+      onBlur: r,
+      error: i,
       errorMsg: n,
       checkoutProfile: o,
       translationFunc: l,
@@ -1256,7 +1252,7 @@ class Mt {
     this.input = new T({
       name: "name",
       label: l("cardholderNameLabel"),
-      error: r,
+      error: i,
       errorMsg: n,
       styles: {
         color: o.styles.textColor,
@@ -1271,7 +1267,7 @@ class Mt {
         this.trim(), a(d);
       }
     }), this.input.addEventListener("blur", (d) => {
-      i(d);
+      r(d);
     });
   }
   getValue() {
@@ -1337,18 +1333,18 @@ class At extends h {
     t.setAttribute("for", "cardNumber"), t.textContent = e.label, t.style.color = e.styles.color, t.style.fontSize = `${e.styles.fontSize}px`, t.style.display = "block", t.style.marginBottom = "6px", this.getElement().appendChild(t);
     const a = document.createElement("div");
     a.className = e.isLoading ? "loading" : "", a.style.borderRadius = `${e.styles.borderRadius}px ${e.styles.borderRadius}px 0px 0px`;
-    const i = document.createElement("div");
-    i.id = "card-element", i.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, i.style.zIndex = e.isFocused ? "2" : "0";
     const r = document.createElement("div");
-    if (r.className = "cards-position", e.cardType === "unknown")
+    r.id = "card-element", r.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, r.style.zIndex = e.isFocused ? "2" : "0";
+    const i = document.createElement("div");
+    if (i.className = "cards-position", e.cardType === "unknown")
       F.forEach((n) => {
-        r.appendChild(this.createCardIcon(n));
+        i.appendChild(this.createCardIcon(n));
       });
     else {
       const n = F.find((o) => o.type === e.cardType);
-      n && r.appendChild(this.createCardIcon(n));
+      n && i.appendChild(this.createCardIcon(n));
     }
-    i.appendChild(r), a.appendChild(i), this.getElement().appendChild(a);
+    r.appendChild(i), a.appendChild(r), this.getElement().appendChild(a);
   }
   createCardIcon(e) {
     const t = document.createElement("div");
@@ -1376,13 +1372,13 @@ class At extends h {
     const a = this.getElement().querySelector(".cards-position");
     if (a)
       if (a.innerHTML = "", this.cardType === "unknown")
-        F.forEach((i) => {
-          a.appendChild(this.createCardIcon(i));
+        F.forEach((r) => {
+          a.appendChild(this.createCardIcon(r));
         });
       else {
-        const i = F.find((r) => r.type === this.cardType);
-        i ? a.appendChild(this.createCardIcon(i)) : F.forEach((r) => {
-          a.appendChild(this.createCardIcon(r));
+        const r = F.find((i) => i.type === this.cardType);
+        r ? a.appendChild(this.createCardIcon(r)) : F.forEach((i) => {
+          a.appendChild(this.createCardIcon(i));
         });
       }
     return this;
@@ -1398,8 +1394,8 @@ class Pt extends h {
     const {
       checkoutProfile: t,
       isLoading: a,
-      isFocused: i,
-      isCvvFocused: r,
+      isFocused: r,
+      isCvvFocused: i,
       isCcValid: n,
       isCvvValid: o,
       cardType: l,
@@ -1407,11 +1403,11 @@ class Pt extends h {
       cardExpiryError: d,
       cardExpiryTouched: u,
       onChange: E,
-      onBlur: g,
+      onBlur: f,
       translationFunc: m,
       cardExpiryAutocomplete: y = "cc-exp"
-    } = e, f = document.createElement("div");
-    f.className = "card-grid", this.cardNumber = new At({
+    } = e, v = document.createElement("div");
+    this.cardNumber = new At({
       styles: {
         color: t.styles.textColor,
         fontSize: t.styles.fontSize,
@@ -1419,9 +1415,9 @@ class Pt extends h {
       },
       label: m("cardInformation"),
       isLoading: a,
-      isFocused: i,
+      isFocused: r,
       cardType: l
-    }), f.appendChild(this.cardNumber.getElement());
+    }), v.appendChild(this.cardNumber.getElement());
     const p = document.createElement("div");
     p.className = "card-details", this.cardExpiry = new T({
       name: "cardExpiry",
@@ -1430,8 +1426,8 @@ class Pt extends h {
       errorMsg: d,
       value: c,
       autocomplete: y,
-      onChange: (v) => {
-        this.trimCardExpiry(), E(v);
+      onChange: (g) => {
+        this.trimCardExpiry(), E(g);
       },
       styles: {
         color: t.styles.textColor,
@@ -1439,8 +1435,8 @@ class Pt extends h {
         fontSize: t.styles.fontSize,
         fontFamily: t.styles.fontFamily
       }
-    }), this.cardExpiry.addEventListener("blur", g), this.cardExpiry.addEventListener("keydown", (v) => {
-      const M = v;
+    }), this.cardExpiry.addEventListener("blur", f), this.cardExpiry.addEventListener("keydown", (g) => {
+      const M = g;
       ![
         "Backspace",
         "Delete",
@@ -1457,18 +1453,18 @@ class Pt extends h {
         borderRadius: typeof t.styles.borderRadius == "number" ? t.styles.borderRadius : 0
       },
       isLoading: a,
-      isFocused: r
-    }), b.appendChild(this.cardCvv.getElement()), p.appendChild(this.cardExpiry.getElement()), p.appendChild(b), f.appendChild(p), this.getElement().appendChild(f), i && !n) {
-      const v = new x({
+      isFocused: i
+    }), b.appendChild(this.cardCvv.getElement()), p.appendChild(this.cardExpiry.getElement()), p.appendChild(b), v.appendChild(p), this.getElement().appendChild(v), r && !n) {
+      const g = new x({
         text: m("validation.cardNumberInvalid")
       });
-      this.validationMessages.set("cardNumber", v), this.appendChild(v);
+      this.validationMessages.set("cardNumber", g), this.appendChild(g);
     }
-    if (r && !o) {
-      const v = new x({
+    if (i && !o) {
+      const g = new x({
         text: m("validation.cardSecurityFormat")
       });
-      this.validationMessages.set("cardCvv", v), this.appendChild(v);
+      this.validationMessages.set("cardCvv", g), this.appendChild(g);
     }
   }
   updateCardType(e) {
@@ -1487,28 +1483,28 @@ class Pt extends h {
   updateCardNumberValidation(e, t, a) {
     if (this.cardNumber.setFocused(e), e && !t) {
       if (!this.validationMessages.has("cardNumber")) {
-        const i = new x({
+        const r = new x({
           text: a("validation.cardNumberInvalid")
         });
-        this.validationMessages.set("cardNumber", i), this.appendChild(i);
+        this.validationMessages.set("cardNumber", r), this.appendChild(r);
       }
     } else {
-      const i = this.validationMessages.get("cardNumber");
-      i && (i.getElement().remove(), this.validationMessages.delete("cardNumber"));
+      const r = this.validationMessages.get("cardNumber");
+      r && (r.getElement().remove(), this.validationMessages.delete("cardNumber"));
     }
     return this;
   }
   updateCardCvvValidation(e, t, a) {
     if (this.cardCvv.setFocused(e), e && !t) {
       if (!this.validationMessages.has("cardCvv")) {
-        const i = new x({
+        const r = new x({
           text: a("validation.cardSecurityFormat")
         });
-        this.validationMessages.set("cardCvv", i), this.appendChild(i);
+        this.validationMessages.set("cardCvv", r), this.appendChild(r);
       }
     } else {
-      const i = this.validationMessages.get("cardCvv");
-      i && (i.getElement().remove(), this.validationMessages.delete("cardCvv"));
+      const r = this.validationMessages.get("cardCvv");
+      r && (r.getElement().remove(), this.validationMessages.delete("cardCvv"));
     }
     return this;
   }
@@ -1522,8 +1518,8 @@ class Dt {
     const {
       value: t,
       onChange: a,
-      onBlur: i,
-      error: r,
+      onBlur: r,
+      error: i,
       errorMsg: n,
       checkoutProfile: o,
       translationFunc: l,
@@ -1532,7 +1528,7 @@ class Dt {
     this.input = new T({
       name: "email",
       label: l("email"),
-      error: r,
+      error: i,
       errorMsg: n,
       styles: {
         color: o.styles.textColor,
@@ -1548,7 +1544,7 @@ class Dt {
       onChange: (d) => {
         this.trim(), a(d);
       }
-    }), this.input.addEventListener("blur", i);
+    }), this.input.addEventListener("blur", r);
   }
   getValue() {
     return this.input.getValue();
@@ -1579,10 +1575,10 @@ class Rt extends h {
     super("div", ["paypal"]);
     const { formData: t, onSubmit: a } = e;
     this.formData = t, this.onSubmit = a, this.getElement().style.cursor = a ? "pointer" : "default", this.getElement().style.opacity = "1";
-    const i = document.createElement("div");
-    i.className = "paypal-icon-container";
-    const r = document.createElement("img");
-    r.src = $t, r.style.width = "69px", r.style.height = "22px", r.style.maxWidth = "100%", r.style.display = "block", r.style.height = "auto", i.appendChild(r), this.getElement().appendChild(i), a && this.getElement().addEventListener("click", () => this.handleSubmit());
+    const r = document.createElement("div");
+    r.className = "paypal-icon-container";
+    const i = document.createElement("img");
+    i.src = $t, i.style.width = "69px", i.style.height = "22px", i.style.maxWidth = "100%", i.style.display = "block", i.style.height = "auto", r.appendChild(i), this.getElement().appendChild(r), a && this.getElement().addEventListener("click", () => this.handleSubmit());
   }
   async handleSubmit() {
     if (!(!this.onSubmit || this.isSubmitting)) {
@@ -1606,26 +1602,26 @@ class Rt extends h {
 class Vt extends h {
   paymentMethods;
   constructor(e) {
-    const { checkoutProfile: t, formData: a, onPaypalSubmit: i } = e;
+    const { checkoutProfile: t, formData: a, onPaypalSubmit: r } = e;
     if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
       this.getElement().style.display = "none";
       return;
     }
-    const r = Object.entries(
+    const i = Object.entries(
       t.additionalPaymentMethods
     ).filter(([, n]) => n.enabled).sort((n, o) => n[1].order - o[1].order);
-    if (r.length === 0) {
+    if (i.length === 0) {
       this.getElement().style.display = "none";
       return;
     }
-    for (const [n] of r)
+    for (const [n] of i)
       switch (n) {
         case "paypal": {
-          if (i) {
+          if (r) {
             const o = new Rt({
               checkoutProfile: t,
               formData: a,
-              onSubmit: i
+              onSubmit: r
             });
             this.paymentMethods.set("paypal", o), o.appendTo(this.getElement());
           }
@@ -1668,9 +1664,9 @@ class Ot extends h {
 class Ht {
   button;
   constructor(e) {
-    const { disabled: t, checkoutProfile: a, translationFunc: i } = e;
+    const { disabled: t, checkoutProfile: a, translationFunc: r } = e;
     this.button = new Ot({
-      text: i(
+      text: r(
         `buttonTexts.${a?.layout.actionButton.translationKey}`
       ),
       styles: {
@@ -1782,16 +1778,12 @@ class Ut extends h {
         );
         this.applyFormContainerStyles(a);
         try {
-          this.cardSection || (this.createCardSection(e.checkoutProfile), console.log("✅ Card element check before iframe initialization:", {
-            cardElementExists: !!document.getElementById("card-element"),
-            cvvElementExists: !!document.getElementById("card-cvv-element"),
-            timestamp: (/* @__PURE__ */ new Date()).toISOString()
-          }));
+          this.cardSection || this.createCardSection(e.checkoutProfile);
         } catch (n) {
           console.error("Failed to create card section:", n);
         }
-        const i = document.getElementById("card-element"), r = document.getElementById("card-cvv-element");
-        if (!i || !r) {
+        const r = document.getElementById("card-element"), i = document.getElementById("card-cvv-element");
+        if (!r || !i) {
           console.error(
             "Card elements not found, cannot initialize TokenEx iframe"
           );
@@ -1805,9 +1797,7 @@ class Ut extends h {
             this.formManager.setFormData(n);
           },
           environment: this.options.environment
-        }), this.iframeHook?.subscribe(this.handleIframeStateChange), await this.iframeHook?.initialize(), console.log("✅ TokenEx iframe initialized successfully:", {
-          timestamp: (/* @__PURE__ */ new Date()).toISOString()
-        });
+        }), this.iframeHook?.subscribe(this.handleIframeStateChange), await this.iframeHook?.initialize();
       } catch (t) {
         throw console.error("Failed to initialize payment form:", t), t;
       }
@@ -1826,8 +1816,8 @@ class Ut extends h {
   createCardSection = (e) => {
     if (!this.cardSection)
       try {
-        const { formData: t, errors: a, touched: i } = this._getFormStateData();
-        let r = {
+        const { formData: t, errors: a, touched: r } = this._getFormStateData();
+        let i = {
           loadingIframe: !0,
           isFocused: !1,
           isCvvFocused: !1,
@@ -1835,17 +1825,17 @@ class Ut extends h {
           isCvvValid: !1,
           possibleCardType: "unknown"
         };
-        if (this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new Pt({
+        if (this.iframeHook && (i = this.iframeHook.getState()), this.cardSection = new Pt({
           checkoutProfile: e,
-          isLoading: r.loadingIframe,
-          isFocused: r.isFocused,
-          isCvvFocused: r.isCvvFocused,
-          isCcValid: r.isCcValid,
-          isCvvValid: r.isCvvValid,
-          cardType: r.possibleCardType,
+          isLoading: i.loadingIframe,
+          isFocused: i.isFocused,
+          isCvvFocused: i.isCvvFocused,
+          isCcValid: i.isCcValid,
+          isCvvValid: i.isCvvValid,
+          cardType: i.possibleCardType,
           cardExpiry: t.cardExpiry,
           cardExpiryError: a.cardExpiry,
-          cardExpiryTouched: !!i.cardExpiry,
+          cardExpiryTouched: !!r.cardExpiry,
           onChange: this.handleChange,
           onBlur: this.handleBlur,
           translationFunc: this.translation.t
@@ -1912,18 +1902,10 @@ class Ut extends h {
   }
   createPaymentMethods(e) {
     try {
-      if (!e?.additionalPaymentMethods) {
-        console.log(
-          "No additional payment methods configured, skipping component"
-        );
-        return;
-      }
-      if (Object.entries(
+      if (!e?.additionalPaymentMethods || Object.entries(
         e.additionalPaymentMethods
-      ).filter(([, i]) => i.enabled).length === 0) {
-        console.log("No enabled payment methods found, skipping component");
+      ).filter(([, r]) => r.enabled).length === 0)
         return;
-      }
       const { formData: a } = this._getFormStateData();
       this.paymentMethods = new Vt({
         checkoutProfile: e,
@@ -1938,12 +1920,12 @@ class Ut extends h {
   }
   createEmailField(e) {
     try {
-      const { formData: t, errors: a, touched: i } = this._getFormStateData();
+      const { formData: t, errors: a, touched: r } = this._getFormStateData();
       this.emailField = new Dt({
         value: t.email,
         onChange: this.handleChange,
         onBlur: this.handleBlur,
-        error: !!(a.email && i.email),
+        error: !!(a.email && r.email),
         errorMsg: a.email,
         checkoutProfile: e,
         translationFunc: this.translation.t
@@ -1954,12 +1936,12 @@ class Ut extends h {
   }
   createCardholderSection(e) {
     try {
-      const { formData: t, errors: a, touched: i } = this._getFormStateData();
+      const { formData: t, errors: a, touched: r } = this._getFormStateData();
       this.cardholderSection = new Mt({
         value: t.name,
         onChange: this.handleChange,
         onBlur: this.handleBlur,
-        error: !!(a.name && i.name),
+        error: !!(a.name && r.name),
         errorMsg: a.name,
         checkoutProfile: e,
         translationFunc: this.translation.t
@@ -1980,12 +1962,12 @@ class Ut extends h {
     }
   }
   handleChange = (e) => {
-    const t = e.target, { name: a, value: i } = t;
-    this.formManager.handleChange(a, i);
+    const t = e.target, { name: a, value: r } = t;
+    this.formManager.handleChange(a, r);
   };
   handleBlur = (e) => {
-    const t = e.target, { name: a, value: i } = t;
-    this.formManager.handleBlur(a, i);
+    const t = e.target, { name: a, value: r } = t;
+    this.formManager.handleBlur(a, r);
   };
   updateFormUI() {
     const e = this.formManager.getFormState();
@@ -2008,12 +1990,12 @@ class Ut extends h {
       isCvvValid: !1
     };
     this.iframeHook && (t = this.iframeHook.getState());
-    const a = Object.keys(e.errors).length > 0, i = (
+    const a = Object.keys(e.errors).length > 0, r = (
       // Only require card validation if CardSection exists
       (!this.cardSection || t.isCcValid && t.isCvvValid) && !!e.formData.email && !!e.formData.name && // Only require card expiry if CardSection exists
       (!this.cardSection || !!e.formData.cardExpiry)
     );
-    return a || !i || this.isSubmitting;
+    return a || !r || this.isSubmitting;
   }
   setLoadingState(e) {
     if (this.options.onLoadingStateChange) {

package/dist/index.css

@@ -1 +1 @@
-.form-container{display:grid;gap:24px;padding:4px;position:relative;min-height:400px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-grid{display:grid}.card-details{display:grid;grid-template-columns:1fr 1fr}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border:6px solid transparent;border-top:6px solid #4f81ff;border-right:6px solid #36d1dc;border-radius:50%;animation:spin 1s ease-in-out infinite,glow 1.5s ease-in-out infinite alternate;box-shadow:0 0 #4f81ff00}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{0%{box-shadow:0 0 #4f81ff00}to{box-shadow:0 0 20px #4f81ff99}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.input-wrapper{display:flex;flex-direction:column}.form-input{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box}.form-input-error{color:#dc2727}.form-input::placeholder{color:#717173;opacity:.3}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.form-helper-text{color:#dc2727;font-size:12px;font-weight:500;margin-top:4px}.input-label{margin-bottom:6px}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box;flex:1 1 50%;min-width:0}.card-element iframe{width:100%;min-width:0}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:16px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:20px;top:8px;display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;backdrop-filter:blur(3px);border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}
+.form-container{display:grid;gap:24px;padding:4px;position:relative;min-height:400px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-details{display:flex}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border:6px solid transparent;border-top:6px solid #4f81ff;border-right:6px solid #36d1dc;border-radius:50%;animation:spin 1s ease-in-out infinite,glow 1.5s ease-in-out infinite alternate;box-shadow:0 0 #4f81ff00}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{0%{box-shadow:0 0 #4f81ff00}to{box-shadow:0 0 20px #4f81ff99}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;flex-grow:1;flex-basis:0;box-sizing:border-box}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box}.form-input-error{color:#dc2727}.form-input::placeholder{color:#717173;opacity:.3}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.form-helper-text{color:#dc2727;font-size:12px;font-weight:500;margin-top:4px}.input-label{margin-bottom:6px}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:16px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:20px;top:8px;display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;backdrop-filter:blur(3px);border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",