@odus/checkout 0.5.4 → 0.5.5

package/dist/checkout.es.js

@@ -1,4 +1,4 @@
-const k = (n) => n === "test" ? "https://sandbox-api.odus.com" : n === "live" ? "https://api.odus.com" : "http://localhost:3000";
+const k = (s) => s === "test" ? "https://sandbox-api.odus.com" : s === "live" ? "https://api.odus.com" : "http://localhost:3000";
 class $ {
   apiKey;
   baseUrl;
@@ -18,34 +18,34 @@ class $ {
       ...i
     };
     try {
-      const s = await fetch(`${this.baseUrl}${e}`, {
+      const n = await fetch(`${this.baseUrl}${e}`, {
         method: t,
         headers: r,
         body: a ? JSON.stringify(a) : void 0
       });
-      if (!s.ok) {
+      if (!n.ok) {
         let o;
         try {
-          o = await s.json();
+          o = await n.json();
         } catch (c) {
           console.log("error", c);
         }
         throw {
-          message: o?.message[0] || `API request failed: ${s.status} ${s.statusText}`,
-          status: s.status,
-          statusText: s.statusText,
+          message: o?.message[0] || `API request failed: ${n.status} ${n.statusText}`,
+          status: n.status,
+          statusText: n.statusText,
           details: o
         };
       }
-      return s.json();
-    } catch (s) {
-      throw s instanceof Error ? {
-        message: s.message,
+      return n.json();
+    } catch (n) {
+      throw n instanceof Error ? {
+        message: n.message,
         status: 0,
         // Use 0 for network/client errors
         statusText: "Network Error",
-        details: { message: s.message }
-      } : s;
+        details: { message: n.message }
+      } : n;
     }
   }
   async authorizePayment({
@@ -55,10 +55,10 @@ class $ {
     token: i,
     returnUrl: r
   }) {
-    let s = {};
+    let n = {};
     if (i && a) {
       const o = a.cardExpiry.replace(/\s+/g, "").split("/"), l = o[0], c = o[1];
-      s = {
+      n = {
         paymentMethodData: {
           type: "card",
           card: {
@@ -78,7 +78,7 @@ class $ {
         }
       };
     } else
-      s = {
+      n = {
         paymentMethodData: {
           type: "paypal"
         },
@@ -92,16 +92,16 @@ class $ {
       customHeaders: {
         Authorization: `Bearer ${t}`
       },
-      body: s
+      body: n
     });
   }
 }
 const R = async ({
-  id: n,
+  id: s,
   apiKey: e,
   environment: t
 }) => {
-  const a = k(t), i = await fetch(`${a}/checkout-profiles/${n}`, {
+  const a = k(t), i = await fetch(`${a}/checkout-profiles/${s}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
@@ -196,11 +196,11 @@ class O {
     return this.state[e];
   }
 }
-function L(n) {
-  return new O(n);
+function L(s) {
+  return new O(s);
 }
 function H({
-  apiKey: n,
+  apiKey: s,
   profileId: e,
   environment: t
 }) {
@@ -212,7 +212,7 @@ function H({
     try {
       a.setState({ isLoading: !0 });
       const r = await R({
-        apiKey: n,
+        apiKey: s,
         id: e,
         environment: t
       });
@@ -235,9 +235,9 @@ function H({
   };
 }
 const z = {
-  cardNumber: (n) => (n.replace(/\s/g, "").match(/.{1,4}/g) || []).join(" "),
-  cardExpiry: (n) => {
-    const t = n.replace(/\D/g, "").slice(0, 4);
+  cardNumber: (s) => (s.replace(/\s/g, "").match(/.{1,4}/g) || []).join(" "),
+  cardExpiry: (s) => {
+    const t = s.replace(/\D/g, "").slice(0, 4);
     return t.length > 2 ? `${t.slice(0, 2)} / ${t.slice(2)}` : t;
   }
 }, D = {
@@ -312,81 +312,81 @@ const z = {
   "comcast.net": ["comcast.com", "comcat.net", "comcst.net", "comcastnet", "comcast.nt", "comcas.net"],
   "verizon.net": ["verizon.com", "verizon.nt", "verizonnet", "verizn.net", "verizon.ne", "verzon.net"],
   "att.net": ["att.com", "at.net", "att.nt", "attnet", "att.ne", "attt.net"]
-}, K = (n) => {
-  if (!n || n.includes("."))
+}, K = (s) => {
+  if (!s || s.includes("."))
     return null;
   const e = ["com", "net", "org", "edu", "gov", "io", "co"];
   for (const t of e) {
-    if (n === "companycok" && t === "co")
+    if (s === "companycok" && t === "co")
       return "company.co";
-    if (n.endsWith(t) && !n.includes(".")) {
-      const a = n.length - t.length;
-      return `${n.substring(0, a)}.${t}`;
+    if (s.endsWith(t) && !s.includes(".")) {
+      const a = s.length - t.length;
+      return `${s.substring(0, a)}.${t}`;
     }
   }
   return null;
-}, j = (n, e) => {
-  if (n.length === 0) return e.length;
-  if (e.length === 0) return n.length;
-  const t = e.length + 1, a = n.length + 1, i = Array.from(
+}, 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(
     { length: t },
-    (r, s) => Array.from({ length: a }, (o, l) => s === 0 ? l : l === 0 ? s : 0)
+    (r, n) => Array.from({ length: a }, (o, l) => n === 0 ? l : l === 0 ? n : 0)
   );
   for (let r = 1; r < t; r++)
-    for (let s = 1; s < a; s++) {
-      const o = n[s - 1] === e[r - 1] ? 0 : 1;
-      i[r][s] = Math.min(
-        i[r - 1][s] + 1,
+    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,
         // deletion
-        i[r][s - 1] + 1,
+        i[r][n - 1] + 1,
         // insertion
-        i[r - 1][s - 1] + o
+        i[r - 1][n - 1] + o
         // substitution
       );
     }
-  return i[e.length][n.length];
-}, U = (n) => {
+  return i[e.length][s.length];
+}, U = (s) => {
   let t = null, a = 3;
-  const i = n.toLowerCase();
+  const i = s.toLowerCase();
   for (const r of Object.keys(D)) {
-    const s = j(i, r);
-    s <= 2 && s < a && (a = s, t = r);
+    const n = j(i, r);
+    n <= 2 && n < a && (a = n, t = r);
   }
   return t;
 }, _ = () => {
-  const { t: n } = I();
+  const { t: s } = I();
   return {
     validateEmail: (t) => {
       const a = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       if (!t)
         return {
           isValid: !1,
-          message: n("validation.emailInvalid"),
+          message: s("validation.emailInvalid"),
           suggestion: null
         };
       const i = t.indexOf("@");
       if (i === -1)
         return {
           isValid: !1,
-          message: n("validation.emailInvalid"),
+          message: s("validation.emailInvalid"),
           suggestion: null
         };
-      const r = t.substring(0, i), s = t.substring(i + 1);
-      if (!s.includes(".")) {
-        const l = K(s);
+      const r = t.substring(0, i), n = t.substring(i + 1);
+      if (!n.includes(".")) {
+        const l = K(n);
         if (l)
           return {
             isValid: !1,
-            message: n("validation.emailSuggestion", {
+            message: s("validation.emailSuggestion", {
               email: `${r}@${l}`
             }),
             suggestion: `${r}@${l}`
           };
         for (const c of Object.keys(D))
-          if (c.replace(/\./g, "") === s)
+          if (c.replace(/\./g, "") === n)
             return {
               isValid: !1,
-              message: n("validation.emailSuggestion", {
+              message: s("validation.emailSuggestion", {
                 email: `${r}@${c}`
               }),
               suggestion: `${r}@${c}`
@@ -395,15 +395,15 @@ const z = {
       if (!a.test(t))
         return {
           isValid: !1,
-          message: n("validation.emailInvalid"),
+          message: s("validation.emailInvalid"),
           suggestion: null
         };
-      const o = U(s);
-      if (o && o !== s) {
+      const o = U(n);
+      if (o && o !== n) {
         const l = `${r}@${o}`;
         return {
           isValid: !1,
-          message: n("validation.emailSuggestion", { email: l }),
+          message: s("validation.emailSuggestion", { email: l }),
           suggestion: l
         };
       }
@@ -415,7 +415,7 @@ const z = {
     }
   };
 }, q = () => {
-  const { t: n } = I(), { validateEmail: e } = _();
+  const { t: s } = I(), { validateEmail: e } = _();
   return {
     email: (t) => {
       const a = e(t);
@@ -423,21 +423,21 @@ const z = {
     },
     name: (t) => {
       if (!t.trim())
-        return n("validation.nameRequired");
+        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)
-        return n("validation.cardExpiryFormat");
-      const s = /* @__PURE__ */ new Date(), o = s.getFullYear() % 100, l = s.getMonth() + 1, c = parseInt(i, 10), d = parseInt(r, 10);
+        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);
       if (c < 1 || c > 12)
-        return n("validation.cardExpiryFormat");
+        return s("validation.cardExpiryFormat");
       if (d < o || d === o && c < l)
-        return n("validation.cardExpiryInvalid");
+        return s("validation.cardExpiryInvalid");
     }
   };
 }, Y = () => {
-  const n = q(), e = L({
+  const s = q(), e = L({
     formData: {
       name: "",
       email: "",
@@ -451,7 +451,7 @@ const z = {
     },
     isValid: !1
   }), t = (l, c) => {
-    const d = n[l];
+    const d = s[l];
     return d?.(c);
   }, a = (l) => {
     const c = {};
@@ -479,7 +479,7 @@ const z = {
       errors: y,
       isValid: i(E)
     });
-  }, s = (l, c) => {
+  }, n = (l, c) => {
     const d = e.getState(), u = {
       ...d.touched,
       [l]: !0
@@ -502,12 +502,12 @@ const z = {
     getFormState: e.getState.bind(e),
     subscribe: e.subscribe.bind(e),
     handleChange: r,
-    handleBlur: s,
+    handleBlur: n,
     setFormData: o,
     reset: e.resetState.bind(e)
   };
 }, G = async ({
-  props: n,
+  props: s,
   apiKey: e,
   environment: t
 }) => {
@@ -519,7 +519,7 @@ const z = {
         "Content-Type": "application/json",
         Authorization: `Bearer ${e}`
       },
-      body: JSON.stringify(n)
+      body: JSON.stringify(s)
     }
   );
   if (!i.ok)
@@ -527,7 +527,7 @@ const z = {
   return await i.json();
 }, Z = 100, J = 2, W = 2e3, X = 5;
 function Q({
-  apiKey: n,
+  apiKey: s,
   // scriptLoaded,
   checkoutProfile: e,
   inputStyles: t,
@@ -543,14 +543,14 @@ function Q({
     isCvvFocused: !1,
     possibleCardType: "unknown"
   });
-  let s = null;
+  let n = null;
   const o = async () => {
     try {
       const m = await G({
         props: {
           allowedOrigins: [globalThis.location.origin]
         },
-        apiKey: n,
+        apiKey: s,
         environment: i
       });
       m && (r.setState({
@@ -573,7 +573,7 @@ function Q({
       cardElementId: g.id,
       cvvElementId: f.id,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    }), s = new globalThis.TokenEx.Iframe("card-element", {
+    }), n = new globalThis.TokenEx.Iframe("card-element", {
       ...m.iframeConfig,
       placeholder: "1234 1234 1234 1234",
       cvvPlaceholder: "CVC",
@@ -597,34 +597,34 @@ function Q({
           base: `${t.base}; border-radius: 0px 0px ${e.styles.borderRadius}px 0px`
         }
       }
-    }), s.on("load", () => {
+    }), n.on("load", () => {
       r.setState({ loadingIframe: !1 });
-    }), s.on("autoCompleteValues", function(p) {
+    }), n.on("autoCompleteValues", function(p) {
       const { nameOnCard: C, cardExp: b } = p;
       a({
         name: C,
         cardExpiry: b
       });
-    }), s.on("validate", function(p) {
+    }), n.on("validate", function(p) {
       const { isValid: C, isCvvValid: b } = p;
       r.setState({
         isCcValid: C,
         isCvvValid: b
       });
-    }), s.on("focus", function() {
+    }), n.on("focus", function() {
       r.setState({ isFocused: !0 });
-    }), s.on("blur", function() {
+    }), n.on("blur", function() {
       r.setState({ isFocused: !1 });
-    }), s.on("cvvFocus", function() {
+    }), n.on("cvvFocus", function() {
       r.setState({ isCvvFocused: !0 });
-    }), s.on("cvvBlur", function() {
+    }), n.on("cvvBlur", function() {
       r.setState({ isCvvFocused: !1 });
-    }), s.on(
+    }), n.on(
       "cardTypeChange",
       function({ possibleCardType: p }) {
         r.setState({ possibleCardType: p });
       }
-    ), s.load();
+    ), n.load();
   }, c = () => {
     let m = 0;
     const g = X;
@@ -674,13 +674,13 @@ function Q({
       console.error("Failed to create TokenEx iframe:", p);
     }
   }, u = async () => {
-    n && await o();
+    s && await o();
   }, E = () => {
-    s && (s.remove(), s = null);
+    n && (n.remove(), n = null);
   }, y = async (m) => {
-    s && (s.on("tokenize", async function(g) {
+    n && (n.on("tokenize", async function(g) {
       await m(g);
-    }), s.tokenize());
+    }), n.tokenize());
   };
   return {
     getState: r.getState.bind(r),
@@ -690,14 +690,14 @@ function Q({
     initialize: u
   };
 }
-const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ae = "Kartendaten", ie = "Vollständiger Name", re = "MM / JJ", se = "Das Fenster nicht schließen", ne = { 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", 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 = {
   email: ee,
   cardholderNameLabel: te,
   cardInformation: ae,
   cardholderNamePlaceholder: ie,
   cardExpiry: re,
-  loading: se,
-  buttonTexts: ne,
+  loading: ne,
+  buttonTexts: se,
   validation: oe
 }, ce = "Email", de = "Cardholder name", he = "Card information", me = "Full name on card", ue = "MM / YY", pe = "Do not close the window", fe = { pay: "PAY", submit: "SUBMIT", getPlan: "GET MY PLAN", donate: "DONATE", book: "BOOK NOW", order: "ORDER NOW" }, ge = { emailSuggestion: "Did you mean {{email}}?", emailInvalid: "Your email is not correct", cardExpiryInvalid: "Your card's expiration date is in the past", cardExpiryFormat: "Your card’s expiration date is incomplete", cardSecurityFormat: "Your card’s security code is incomplete", nameRequired: "Please enter the name as it appears on your card", cardNumberInvalid: "Your card number is invalid" }, ye = {
   email: ce,
@@ -744,14 +744,14 @@ 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", st = "Por favor, não feche esta janela", nt = { 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", 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 = {
   email: et,
   cardholderNameLabel: tt,
   cardInformation: at,
   cardholderNamePlaceholder: it,
   cardExpiry: rt,
-  loading: st,
-  buttonTexts: nt,
+  loading: nt,
+  buttonTexts: st,
   validation: ot
 }, ct = "E-posta", dt = "Kart sahibinin adı", ht = "Kart bilgileri", mt = "Kart üzerindeki tam ad", ut = "AA / YY", pt = "Lütfen pencereyi kapatmayın", ft = { pay: "ÖDE", submit: "GÖNDER", getPlan: "PLANIMI AL", donate: "BAĞIŞ YAP", book: "ŞİMDİ REZERVASYON YAP", order: "ŞİMDİ SİPARİŞ VER" }, gt = { emailSuggestion: "{{email}} demek mi istediniz?", emailInvalid: "E-posta adresiniz geçerli değil", cardExpiryInvalid: "Kartınızın son kullanma tarihi geçmiş", cardExpiryFormat: "Kartınızın son kullanma tarihi eksik", cardSecurityFormat: "Kartınızın güvenlik kodu eksik", nameRequired: "Lütfen kart üzerindeki ismi girin", cardNumberInvalid: "Kart numaranız geçersiz" }, yt = {
   email: ct,
@@ -821,7 +821,7 @@ const A = [
   "it",
   "tr"
 ], Et = "en";
-function bt(n) {
+function bt(s) {
   const e = new vt(), a = (() => {
     const o = navigator?.language?.split("-")[0]?.toLowerCase();
     return A.includes(o) ? o : Et;
@@ -842,19 +842,19 @@ function bt(n) {
   };
 }
 const Ct = bt(), I = () => {
-  const { translate: n, getLocale: e, setLocale: t, subscribe: a } = Ct;
+  const { translate: s, getLocale: e, setLocale: t, subscribe: a } = Ct;
   return {
-    t: n,
-    translate: n,
+    t: s,
+    translate: s,
     locale: e(),
     setLocale: t,
     subscribe: a
   };
-}, St = ({ fontFamily: n }) => {
-  if (!n)
+}, St = ({ fontFamily: s }) => {
+  if (!s)
     return { cleanup: () => {
     } };
-  const e = n.replace(/\s+/g, "+"), t = `https://fonts.googleapis.com/css2?family=${e}:wght@400;700&display=swap`, a = [...document.head.querySelectorAll("link")].filter(
+  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;
@@ -874,17 +874,17 @@ const Ct = bt(), I = () => {
     document.head.contains(i) && document.head.removeChild(i);
   } };
 }, xt = ({
-  scriptSrc: n,
+  scriptSrc: s,
   async: e = !1
 }) => {
-  if (!n)
+  if (!s)
     return {
       cleanup: () => {
       },
       isLoaded: Promise.resolve(!1)
     };
   if ([...document.head.querySelectorAll("script")].filter(
-    (s) => s.src === n
+    (n) => n.src === s
   ).length > 0)
     return {
       cleanup: () => {
@@ -892,10 +892,10 @@ const Ct = bt(), I = () => {
       isLoaded: Promise.resolve(!0)
     };
   const a = document.createElement("script");
-  a.src = n, a.async = e;
-  const i = new Promise((s, o) => {
-    a.onload = () => s(!0), a.onerror = () => {
-      console.error(`Failed to load script: ${n}`), o(new Error(`Failed to load script: ${n}`));
+  a.src = s, a.async = e;
+  const i = 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}`));
     };
   });
   return document.head.appendChild(a), {
@@ -904,12 +904,12 @@ const Ct = bt(), I = () => {
     },
     isLoaded: i
   };
-}, w = (n) => Object.entries(n).map(([e, t]) => {
+}, 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}`;
 }).join("; ");
-function Ft(n) {
-  if (!n)
+function Ft(s) {
+  if (!s)
     return {
       formContainerStyle: {},
       baseStyles: {},
@@ -928,24 +928,24 @@ function Ft(n) {
     background: "#fff",
     border: "none",
     outline: "none",
-    fontSize: `${n.styles.fontSize}px`,
+    fontSize: `${s.styles.fontSize}px`,
     lineHeight: 30,
     boxSizing: "border-box",
     padding: "0px 12px",
     height: 36,
     width: "100%",
-    fontFamily: `${n.styles.fontFamily}, sans-serif`
+    fontFamily: `${s.styles.fontFamily}, sans-serif`
   }, t = {
     color: "#717173",
     opacity: "0.3",
-    fontFamily: `${n.styles.fontFamily}, sans-serif`
+    fontFamily: `${s.styles.fontFamily}, sans-serif`
   }, a = {
     color: "#dc2727"
   }, i = {
     outline: 0
   }, r = {
-    fontFamily: `${n.styles.fontFamily}, sans-serif`
-  }, s = {
+    fontFamily: `${s.styles.fontFamily}, sans-serif`
+  }, n = {
     base: w(e),
     error: w(a),
     focus: w(i),
@@ -957,7 +957,7 @@ function Ft(n) {
     placeholderStyles: t,
     errorStyles: a,
     focusStyles: i,
-    inputStyles: s
+    inputStyles: n
   };
 }
 class h {
@@ -1105,8 +1105,8 @@ class S {
    * Create a label element
    */
   static createLabel(e, t = "", a = [], i = {}) {
-    const r = t ? { for: t, ...i } : i, s = new h("label", a, r);
-    return s.setText(e), s;
+    const r = t ? { for: t, ...i } : i, n = new h("label", a, r);
+    return n.setText(e), n;
   }
   /**
    * Create a select element
@@ -1114,8 +1114,8 @@ class S {
   static createSelect(e, t = [], a = {}) {
     const i = new h("select", t, a);
     return e.forEach((r) => {
-      const s = document.createElement("option");
-      s.value = r.value, s.textContent = r.text, r.selected && (s.selected = !0), i.getElement().appendChild(s);
+      const n = document.createElement("option");
+      n.value = r.value, n.textContent = r.text, r.selected && (n.selected = !0), i.getElement().appendChild(n);
     }), i;
   }
   /**
@@ -1139,12 +1139,12 @@ class wt extends h {
     i.getElement().innerHTML = this.createAlertCircleSVG();
     const r = S.createDiv([
       "error-alert-text-container"
-    ]), s = new h("h4", [
+    ]), n = new h("h4", [
       "error-alert-title"
     ]);
-    s.setText("Checkout Error"), this.messageComponent = new h("p", [
+    n.setText("Checkout Error"), this.messageComponent = new h("p", [
       "error-alert-message"
-    ]), this.messageComponent.setText(e.message || "Bad request"), r.appendChild(s), r.appendChild(this.messageComponent), a.appendChild(i), a.appendChild(r), t.appendChild(a), this.appendChild(t);
+    ]), 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);
   }
   createAlertCircleSVG() {
     return `
@@ -1252,7 +1252,7 @@ class Mt {
       onChange: a,
       onBlur: i,
       error: r,
-      errorMsg: s,
+      errorMsg: n,
       checkoutProfile: o,
       translationFunc: l,
       autocomplete: c = "cc-name"
@@ -1261,7 +1261,7 @@ class Mt {
       name: "name",
       label: l("cardholderNameLabel"),
       error: r,
-      errorMsg: s,
+      errorMsg: n,
       styles: {
         color: o.styles.textColor,
         borderRadius: `${o.styles.borderRadius}px`,
@@ -1345,12 +1345,12 @@ class At extends h {
     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")
-      F.forEach((s) => {
-        r.appendChild(this.createCardIcon(s));
+      F.forEach((n) => {
+        r.appendChild(this.createCardIcon(n));
       });
     else {
-      const s = F.find((o) => o.type === e.cardType);
-      s && r.appendChild(this.createCardIcon(s));
+      const n = F.find((o) => o.type === e.cardType);
+      n && r.appendChild(this.createCardIcon(n));
     }
     i.appendChild(r), a.appendChild(i), this.getElement().appendChild(a);
   }
@@ -1404,7 +1404,7 @@ class Pt extends h {
       isLoading: a,
       isFocused: i,
       isCvvFocused: r,
-      isCcValid: s,
+      isCcValid: n,
       isCvvValid: o,
       cardType: l,
       cardExpiry: c,
@@ -1462,7 +1462,7 @@ class Pt extends h {
       },
       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 && !s) {
+    }), 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({
         text: m("validation.cardNumberInvalid")
       });
@@ -1528,7 +1528,7 @@ class Dt {
       onChange: a,
       onBlur: i,
       error: r,
-      errorMsg: s,
+      errorMsg: n,
       checkoutProfile: o,
       translationFunc: l,
       autocomplete: c = "email"
@@ -1537,7 +1537,7 @@ class Dt {
       name: "email",
       label: l("email"),
       error: r,
-      errorMsg: s,
+      errorMsg: n,
       styles: {
         color: o.styles.textColor,
         borderRadius: `${o.styles.borderRadius}px`,
@@ -1617,14 +1617,14 @@ class Vt extends h {
     }
     const r = Object.entries(
       t.additionalPaymentMethods
-    ).filter(([, s]) => s.enabled).sort((s, o) => s[1].order - o[1].order);
+    ).filter(([, n]) => n.enabled).sort((n, o) => n[1].order - o[1].order);
     if (r.length === 0) {
       super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), this.getElement().style.display = "none";
       return;
     }
     super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map();
-    for (const [s] of r)
-      switch (s) {
+    for (const [n] of r)
+      switch (n) {
         case "paypal": {
           if (i) {
             const o = new Rt({
@@ -1746,18 +1746,22 @@ class Ut extends h {
     if (!e.isLoading)
       if (this.setLoadingState(!1), e.checkoutProfile)
         try {
-          if (e.checkoutProfile.styles?.fontFamily) {
-            const { cleanup: t } = St({
-              fontFamily: e.checkoutProfile.styles.fontFamily
-            });
-            this.fontCleanup = t;
-          }
+          if (e.checkoutProfile.styles?.fontFamily)
+            try {
+              const { cleanup: t } = St({
+                fontFamily: e.checkoutProfile.styles.fontFamily
+              });
+              this.fontCleanup = t;
+            } catch (t) {
+              console.error("Error loading Google Font:", t);
+            }
           this.renderFormComponents(), this.initializeTokenExIframe().catch((t) => {
-            console.error("Error initializing TokenEx iframe:", t), this.setErrorMessage("Failed to initialize payment form");
+            console.error("Error initializing TokenEx iframe:", t);
           });
-        } catch {
-          const t = e.error || "Failed to load checkout profile data";
-          this.setErrorMessage(t);
+        } catch (t) {
+          console.error("Error in profile state change:", t);
+          const a = e.error || "Failed to load checkout profile data";
+          this.setErrorMessage(a);
         }
       else e.error && (console.error("NO profile found", e.error), this.setErrorMessage(e.error));
   };
@@ -1766,36 +1770,55 @@ class Ut extends h {
   }
   initializeTokenExIframe = async () => {
     const e = this.checkoutProfile.getState();
-    if (e.checkoutProfile && !this.iframeHook)
+    if (!e.checkoutProfile) {
+      console.error("Cannot initialize iframe: No checkout profile available");
+      return;
+    }
+    if (this.iframeHook) {
+      console.log("TokenEx iframe already initialized, skipping");
+      return;
+    }
+    try {
+      if (!("TokenEx" in globalThis))
+        return console.log("TokenEx not available yet, retrying..."), new Promise((n) => {
+          setTimeout(() => {
+            this.initializeTokenExIframe().then(n);
+          }, 500);
+        });
+      const { inputStyles: t, formContainerStyle: a } = Ft(
+        e.checkoutProfile
+      );
+      this.applyFormContainerStyles(a);
       try {
-        if (!("TokenEx" in globalThis)) {
-          setTimeout(() => this.initializeTokenExIframe(), 500);
-          return;
-        }
-        const { inputStyles: t, formContainerStyle: a } = Ft(
-          e.checkoutProfile
-        );
-        this.applyFormContainerStyles(a), this.cardSection || (this.createCardSection(e.checkoutProfile), console.log("✅ Card element check before iframe initialization:", {
+        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.iframeHook = Q({
-          apiKey: this.options.apiKey,
-          checkoutProfile: e.checkoutProfile,
-          inputStyles: t,
-          setFormData: (i) => {
-            this.formManager.setFormData(i);
-          },
-          environment: this.options.environment
-        }), this.iframeHook?.subscribe(this.handleIframeStateChange), await this.iframeHook?.initialize(), console.log("✅ TokenEx iframe initialized successfully:", {
-          timestamp: (/* @__PURE__ */ new Date()).toISOString()
-        });
-      } catch (t) {
-        console.error("Failed to initialize payment form:", t), this.setErrorMessage("Failed to initialize payment form");
+        }));
+      } catch (n) {
+        console.error("Failed to create card section:", n);
       }
-    else e.checkoutProfile || this.setErrorMessage(
-      "Cannot initialize iframe: No checkout profile available"
-    );
+      const i = document.getElementById("card-element"), r = document.getElementById("card-cvv-element");
+      if (!i || !r) {
+        console.error(
+          "Card elements not found, cannot initialize TokenEx iframe"
+        );
+        return;
+      }
+      this.iframeHook = Q({
+        apiKey: this.options.apiKey,
+        checkoutProfile: e.checkoutProfile,
+        inputStyles: t,
+        setFormData: (n) => {
+          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()
+      });
+    } catch (t) {
+      throw console.error("Failed to initialize payment form:", t), t;
+    }
   };
   handleIframeStateChange = (e) => {
     this.cardSection && (this.cardSection.updateCardNumberValidation(
@@ -1840,10 +1863,10 @@ class Ut extends h {
             this.cardholderSection.getElement()
           );
         else if (this.emailField) {
-          const s = this.emailField.getElement().nextSibling;
-          s ? this.element.insertBefore(
+          const n = this.emailField.getElement().nextSibling;
+          n ? this.element.insertBefore(
             this.cardSection.getElement(),
-            s
+            n
           ) : this.element.appendChild(this.cardSection.getElement());
         } else
           this.element.appendChild(this.cardSection.getElement()), console.warn(
@@ -1867,68 +1890,114 @@ class Ut extends h {
     });
   }
   renderFormComponents() {
-    if (!this.emailField) {
-      console.log("🏗️ Starting form components rendering:", {
-        timestamp: (/* @__PURE__ */ new Date()).toISOString()
-      });
-      try {
-        const e = this.checkoutProfile.getState();
-        if (!e.checkoutProfile) {
-          this.setErrorMessage("Failed to load checkout configuration");
-          return;
-        }
-        this.createPaymentMethods(e.checkoutProfile), this.createEmailField(e.checkoutProfile), this.createCardholderSection(e.checkoutProfile), this.createSubmitButton(e.checkoutProfile), console.log("✅ Form components rendered successfully:", {
-          timestamp: (/* @__PURE__ */ new Date()).toISOString()
-        });
-      } catch (e) {
-        console.error("Failed to render form components:", e), this.setErrorMessage("Failed to render checkout form components");
-      }
+    if (this.emailField)
+      return;
+    console.log("🏗️ Starting form components rendering:", {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    const e = this.checkoutProfile.getState();
+    if (!e.checkoutProfile) {
+      this.setErrorMessage("Failed to load checkout configuration");
+      return;
+    }
+    try {
+      this.createPaymentMethods(e.checkoutProfile);
+    } catch (t) {
+      console.error("Failed to create payment methods:", t);
     }
+    try {
+      this.createEmailField(e.checkoutProfile);
+    } catch (t) {
+      console.error("Failed to create email field:", t);
+    }
+    try {
+      this.createCardholderSection(e.checkoutProfile);
+    } catch (t) {
+      console.error("Failed to create cardholder section:", t);
+    }
+    try {
+      this.createSubmitButton(e.checkoutProfile);
+    } catch (t) {
+      console.error("Failed to create submit button:", t);
+    }
+    console.log("✅ Form components rendered successfully:", {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      components: {
+        paymentMethods: !!this.paymentMethods,
+        emailField: !!this.emailField,
+        cardholderSection: !!this.cardholderSection,
+        submitButton: !!this.submitButton
+      }
+    });
   }
   createPaymentMethods(e) {
-    if (!e?.additionalPaymentMethods || Object.entries(
-      e.additionalPaymentMethods
-    ).filter(([, i]) => i.enabled).length === 0)
-      return;
-    const { formData: a } = this._getFormStateData();
-    this.paymentMethods = new Vt({
-      checkoutProfile: e,
-      formData: a,
-      onPaypalSubmit: async () => {
-        await this.handlePaypalSubmit();
+    try {
+      if (!e?.additionalPaymentMethods) {
+        console.log(
+          "No additional payment methods configured, skipping component"
+        );
+        return;
       }
-    }), this.appendChild(this.paymentMethods);
+      if (Object.entries(
+        e.additionalPaymentMethods
+      ).filter(([, i]) => i.enabled).length === 0) {
+        console.log("No enabled payment methods found, skipping component");
+        return;
+      }
+      const { formData: a } = this._getFormStateData();
+      this.paymentMethods = new Vt({
+        checkoutProfile: e,
+        formData: a,
+        onPaypalSubmit: async () => {
+          await this.handlePaypalSubmit();
+        }
+      }), this.appendChild(this.paymentMethods), console.log("✅ Payment methods created successfully");
+    } catch (t) {
+      throw console.error("Error creating payment methods:", t), t;
+    }
   }
   createEmailField(e) {
-    const { formData: t, errors: a, touched: i } = this._getFormStateData();
-    this.emailField = new Dt({
-      value: t.email,
-      onChange: this.handleChange,
-      onBlur: this.handleBlur,
-      error: !!(a.email && i.email),
-      errorMsg: a.email,
-      checkoutProfile: e,
-      translationFunc: this.translation.t
-    }), this.element.appendChild(this.emailField.getElement());
+    try {
+      const { formData: t, errors: a, touched: i } = this._getFormStateData();
+      this.emailField = new Dt({
+        value: t.email,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        error: !!(a.email && i.email),
+        errorMsg: a.email,
+        checkoutProfile: e,
+        translationFunc: this.translation.t
+      }), this.element.appendChild(this.emailField.getElement()), console.log("✅ Email field created successfully");
+    } catch (t) {
+      throw console.error("Error creating email field:", t), t;
+    }
   }
   createCardholderSection(e) {
-    const { formData: t, errors: a, touched: i } = this._getFormStateData();
-    this.cardholderSection = new Mt({
-      value: t.name,
-      onChange: this.handleChange,
-      onBlur: this.handleBlur,
-      error: !!(a.name && i.name),
-      errorMsg: a.name,
-      checkoutProfile: e,
-      translationFunc: this.translation.t
-    }), this.element.appendChild(this.cardholderSection.getElement());
+    try {
+      const { formData: t, errors: a, touched: i } = this._getFormStateData();
+      this.cardholderSection = new Mt({
+        value: t.name,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        error: !!(a.name && i.name),
+        errorMsg: a.name,
+        checkoutProfile: e,
+        translationFunc: this.translation.t
+      }), this.element.appendChild(this.cardholderSection.getElement()), console.log("✅ Cardholder section created successfully");
+    } catch (t) {
+      throw console.error("Error creating cardholder section:", t), t;
+    }
   }
   createSubmitButton(e) {
-    this.submitButton = new Ht({
-      disabled: this.isFormDisabled(),
-      checkoutProfile: e,
-      translationFunc: this.translation.t
-    }), this.element.appendChild(this.submitButton.getElement());
+    try {
+      this.submitButton = new Ht({
+        disabled: this.isFormDisabled(),
+        checkoutProfile: e,
+        translationFunc: this.translation.t
+      }), this.element.appendChild(this.submitButton.getElement()), console.log("✅ Submit button created successfully");
+    } catch (t) {
+      throw console.error("Error creating submit button:", t), t;
+    }
   }
   handleChange = (e) => {
     const t = e.target, { name: a, value: i } = t;

package/dist/package.json

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

package/package.json

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