@odus/checkout 0.1.2 → 0.2.0

package/dist/checkout.es.js

@@ -1,30 +1,30 @@
-const M = (n) => n === "test" ? "https://sandbox-api.odus.com" : n === "live" ? "https://api.odus.com" : "http://localhost:3000", D = ({ name: n }) => {
-  const [e, ...t] = n?.split(" ") || [], [i] = t.reverse();
-  return { firstName: e, lastName: i };
+const L = (n) => n === "test" ? "https://sandbox-api.odus.com" : n === "live" ? "https://api.odus.com" : "http://localhost:3000", A = ({ name: n }) => {
+  const [e, ...t] = n?.split(" ") || [], [a] = t.reverse();
+  return { firstName: e, lastName: a };
 };
 class V {
   apiKey;
   baseUrl;
   browserInfo;
-  constructor(e, t, i) {
-    this.apiKey = e, this.baseUrl = M(t), this.browserInfo = i || { userAgent: navigator.userAgent };
+  constructor(e, t, a) {
+    this.apiKey = e, this.baseUrl = L(t), this.browserInfo = a || { userAgent: navigator.userAgent };
   }
   async fetchApi({
     endpoint: e,
     method: t = "POST",
-    body: i,
-    customHeaders: a = {}
+    body: a,
+    customHeaders: i = {}
   }) {
     const s = {
       Authorization: `Bearer ${this.apiKey}`,
       "Content-Type": "application/json",
-      ...a
+      ...i
     };
     try {
       const r = await fetch(`${this.baseUrl}${e}`, {
         method: t,
         headers: s,
-        body: i ? JSON.stringify(i) : void 0
+        body: a ? JSON.stringify(a) : void 0
       });
       if (!r.ok) {
         let o;
@@ -54,25 +54,25 @@ class V {
   async authorizePayment({
     paymentId: e,
     checkoutKey: t,
-    formData: i,
-    token: a,
+    formData: a,
+    token: i,
     returnUrl: s
   }) {
     let r = {};
-    if (a && i) {
-      const o = i.cardExpiry.replace(/\s+/g, "").split("/"), l = o[0], c = o[1], { firstName: h, lastName: m } = D({ name: i.name });
+    if (i && a) {
+      const o = a.cardExpiry.replace(/\s+/g, "").split("/"), l = o[0], c = o[1], { firstName: h, lastName: m } = A({ name: a.name });
       r = {
         paymentMethodData: {
           type: "card",
           card: {
-            token: a,
+            token: i,
             expMonth: l,
             expYear: `20${c}`,
-            cardholderName: i.name
+            cardholderName: a.name
           }
         },
         customerData: {
-          email: i.email,
+          email: a.email,
           firstName: h,
           lastName: m
         },
@@ -100,23 +100,23 @@ class V {
     });
   }
 }
-const A = async ({
+const $ = async ({
   id: n,
   apiKey: e,
   environment: t
 }) => {
-  const i = M(t), a = await fetch(`${i}/checkout-profiles/${n}`, {
+  const a = L(t), i = await fetch(`${a}/checkout-profiles/${n}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${e}`
     }
   });
-  if (!a.ok)
-    throw new Error(`HTTP error! Status: ${a.status}`);
-  return await a.json();
+  if (!i.ok)
+    throw new Error(`HTTP error! Status: ${i.status}`);
+  return await i.json();
 };
-class $ {
+class R {
   events = /* @__PURE__ */ new Map();
   /**
    * Subscribe to an event
@@ -126,8 +126,8 @@ class $ {
    */
   subscribe(e, t) {
     return this.events.has(e) || this.events.set(e, /* @__PURE__ */ new Set()), this.events.get(e)?.add(t), () => {
-      const i = this.events.get(e);
-      i && (i.delete(t), i.size === 0 && this.events.delete(e));
+      const a = this.events.get(e);
+      a && (a.delete(t), a.size === 0 && this.events.delete(e));
     };
   }
   /**
@@ -136,8 +136,8 @@ class $ {
    * @param data - The data to pass to subscribers
    */
   publish(e, t) {
-    const i = this.events.get(e);
-    i && i.forEach((a) => a(t));
+    const a = this.events.get(e);
+    a && a.forEach((i) => i(t));
   }
   /**
    * Clear all event subscriptions
@@ -154,13 +154,13 @@ class $ {
     return this.events.get(e)?.size || 0;
   }
 }
-const R = new $();
-class B {
+const B = new R();
+class O {
   state;
   initialState;
   eventBus;
   stateChangedEvent = "state-changed";
-  constructor(e, t = R) {
+  constructor(e, t = B) {
     this.initialState = { ...e }, this.state = { ...e }, this.eventBus = t;
   }
   /**
@@ -201,41 +201,41 @@ class B {
   }
 }
 function x(n) {
-  return new B(n);
+  return new O(n);
 }
-function O({
+function H({
   apiKey: n,
   profileId: e,
   environment: t
 }) {
-  const i = x({
+  const a = x({
     checkoutProfile: void 0,
     isLoading: !0,
     error: null
-  }), a = async () => {
+  }), i = async () => {
     try {
-      i.setState({ isLoading: !0 });
-      const s = await A({
+      a.setState({ isLoading: !0 });
+      const s = await $({
         apiKey: n,
         id: e,
         environment: t
       });
-      s && i.setState({
+      s && a.setState({
         checkoutProfile: s,
         isLoading: !1,
         error: null
       });
     } catch (s) {
-      i.setState({
+      a.setState({
         error: "Failed to load checkout profile",
         isLoading: !1
       }), console.error(s);
     }
   };
-  return a(), {
-    getState: i.getState.bind(i),
-    subscribe: i.subscribe.bind(i),
-    reload: a
+  return i(), {
+    getState: a.getState.bind(a),
+    subscribe: a.subscribe.bind(a),
+    reload: i
   };
 }
 const T = {
@@ -244,7 +244,7 @@ const T = {
     const t = n.replace(/\D/g, "").slice(0, 4);
     return t.length > 2 ? `${t.slice(0, 2)} / ${t.slice(2)}` : t;
   }
-}, N = {
+}, P = {
   "gmail.com": [
     "gmal.com",
     "gmil.com",
@@ -316,7 +316,7 @@ const T = {
   "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"]
-}, H = (n) => {
+}, j = (n) => {
   if (!n || n.includes("."))
     return null;
   const e = ["com", "net", "org", "edu", "gov", "io", "co"];
@@ -324,60 +324,60 @@ const T = {
     if (n === "companycok" && t === "co")
       return "company.co";
     if (n.endsWith(t) && !n.includes(".")) {
-      const i = n.length - t.length;
-      return `${n.substring(0, i)}.${t}`;
+      const a = n.length - t.length;
+      return `${n.substring(0, a)}.${t}`;
     }
   }
   return null;
-}, j = (n, e) => {
+}, K = (n, e) => {
   if (n.length === 0) return e.length;
   if (e.length === 0) return n.length;
-  const t = e.length + 1, i = n.length + 1, a = Array.from(
+  const t = e.length + 1, a = n.length + 1, i = Array.from(
     { length: t },
-    (s, r) => Array.from({ length: i }, (o, l) => r === 0 ? l : l === 0 ? r : 0)
+    (s, r) => Array.from({ length: a }, (o, l) => r === 0 ? l : l === 0 ? r : 0)
   );
   for (let s = 1; s < t; s++)
-    for (let r = 1; r < i; r++) {
+    for (let r = 1; r < a; r++) {
       const o = n[r - 1] === e[s - 1] ? 0 : 1;
-      a[s][r] = Math.min(
-        a[s - 1][r] + 1,
+      i[s][r] = Math.min(
+        i[s - 1][r] + 1,
         // deletion
-        a[s][r - 1] + 1,
+        i[s][r - 1] + 1,
         // insertion
-        a[s - 1][r - 1] + o
+        i[s - 1][r - 1] + o
         // substitution
       );
     }
-  return a[e.length][n.length];
-}, K = (n) => {
-  let t = null, i = 3;
-  const a = n.toLowerCase();
-  for (const s of Object.keys(N)) {
-    const r = j(a, s);
-    r <= 2 && r < i && (i = r, t = s);
+  return i[e.length][n.length];
+}, U = (n) => {
+  let t = null, a = 3;
+  const i = n.toLowerCase();
+  for (const s of Object.keys(P)) {
+    const r = K(i, s);
+    r <= 2 && r < a && (a = r, t = s);
   }
   return t;
-}, U = () => {
-  const { t: n } = L();
+}, q = () => {
+  const { t: n } = M();
   return {
     validateEmail: (t) => {
-      const i = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      const a = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       if (!t)
         return {
           isValid: !1,
           message: n("validation.emailInvalid"),
           suggestion: null
         };
-      const a = t.indexOf("@");
-      if (a === -1)
+      const i = t.indexOf("@");
+      if (i === -1)
         return {
           isValid: !1,
           message: n("validation.emailInvalid"),
           suggestion: null
         };
-      const s = t.substring(0, a), r = t.substring(a + 1);
+      const s = t.substring(0, i), r = t.substring(i + 1);
       if (!r.includes(".")) {
-        const l = H(r);
+        const l = j(r);
         if (l)
           return {
             isValid: !1,
@@ -386,7 +386,7 @@ const T = {
             }),
             suggestion: `${s}@${l}`
           };
-        for (const c of Object.keys(N))
+        for (const c of Object.keys(P))
           if (c.replace(/\./g, "") === r)
             return {
               isValid: !1,
@@ -396,13 +396,13 @@ const T = {
               suggestion: `${s}@${c}`
             };
       }
-      if (!i.test(t))
+      if (!a.test(t))
         return {
           isValid: !1,
           message: n("validation.emailInvalid"),
           suggestion: null
         };
-      const o = K(r);
+      const o = U(r);
       if (o && o !== r) {
         const l = `${s}@${o}`;
         return {
@@ -418,30 +418,30 @@ const T = {
       };
     }
   };
-}, q = () => {
-  const { t: n } = L(), { validateEmail: e } = U();
+}, _ = () => {
+  const { t: n } = M(), { validateEmail: e } = q();
   return {
     email: (t) => {
-      const i = e(t);
-      return i.isValid ? void 0 : i.message;
+      const a = e(t);
+      return a.isValid ? void 0 : a.message;
     },
     name: (t) => {
       if (!t.trim())
         return n("validation.nameRequired");
     },
     cardExpiry: (t) => {
-      const i = t.replace(/\s/g, ""), [a, s] = i.split("/").map((m) => m.trim());
-      if (!a || !s || a.length !== 2 || s.length !== 2)
+      const a = t.replace(/\s/g, ""), [i, s] = a.split("/").map((m) => m.trim());
+      if (!i || !s || i.length !== 2 || s.length !== 2)
         return n("validation.cardExpiryFormat");
-      const r = /* @__PURE__ */ new Date(), o = r.getFullYear() % 100, l = r.getMonth() + 1, c = parseInt(a, 10), h = parseInt(s, 10);
+      const r = /* @__PURE__ */ new Date(), o = r.getFullYear() % 100, l = r.getMonth() + 1, c = parseInt(i, 10), h = parseInt(s, 10);
       if (c < 1 || c > 12)
         return n("validation.cardExpiryFormat");
       if (h < o || h === o && c < l)
         return n("validation.cardExpiryInvalid");
     }
   };
-}, _ = () => {
-  const n = q(), e = x({
+}, G = () => {
+  const n = _(), e = x({
     formData: {
       name: "",
       email: "",
@@ -457,14 +457,14 @@ const T = {
   }), t = (l, c) => {
     const h = n[l];
     return h?.(c);
-  }, i = (l) => {
+  }, a = (l) => {
     const c = {};
     return Object.keys(l).forEach((h) => {
       const m = t(h, l[h]);
       m && (c[h] = m);
     }), c;
-  }, a = (l) => {
-    const c = i(l);
+  }, i = (l) => {
+    const c = a(l);
     return Object.keys(c).length === 0;
   }, s = (l, c) => {
     const h = e.getState();
@@ -481,7 +481,7 @@ const T = {
     e.setState({
       formData: u,
       errors: p,
-      isValid: a(u)
+      isValid: i(u)
     });
   }, r = (l, c) => {
     const h = e.getState(), m = {
@@ -499,7 +499,7 @@ const T = {
     };
     e.setState({
       formData: h,
-      isValid: a(h)
+      isValid: i(h)
     });
   };
   return {
@@ -510,13 +510,13 @@ const T = {
     setFormData: o,
     reset: e.resetState.bind(e)
   };
-}, G = async ({
+}, Z = async ({
   props: n,
   apiKey: e,
   environment: t
 }) => {
-  const i = M(t), a = await fetch(
-    `${i}/tokenization/generate-iframe-configuration`,
+  const a = L(t), i = await fetch(
+    `${a}/tokenization/generate-iframe-configuration`,
     {
       method: "POST",
       headers: {
@@ -526,17 +526,17 @@ const T = {
       body: JSON.stringify(n)
     }
   );
-  if (!a.ok)
-    throw new Error(`HTTP error! Status: ${a.status}`);
-  return await a.json();
+  if (!i.ok)
+    throw new Error(`HTTP error! Status: ${i.status}`);
+  return await i.json();
 };
-function Z({
+function Y({
   apiKey: n,
   // scriptLoaded,
   checkoutProfile: e,
   inputStyles: t,
-  setFormData: i,
-  environment: a
+  setFormData: a,
+  environment: i
 }) {
   const s = x({
     iframeConfig: void 0,
@@ -550,12 +550,12 @@ function Z({
   let r = null;
   const o = async () => {
     try {
-      const m = await G({
+      const m = await Z({
         props: {
           allowedOrigins: [globalThis.location.origin]
         },
         apiKey: n,
-        environment: a
+        environment: i
       });
       m && (s.setState({
         iframeConfig: {
@@ -601,7 +601,7 @@ function Z({
         s.setState({ loadingIframe: !1 });
       }), r.on("autoCompleteValues", function(u) {
         const { nameOnCard: p, cardExp: f } = u;
-        i({
+        a({
           name: p,
           cardExpiry: f
         });
@@ -642,70 +642,70 @@ function Z({
     cleanup: c
   };
 }
-const Y = "E-Mail", J = "Name des/der Karteninhaber/in", W = "Kartendaten", X = "Vollständiger Name", Q = "MM / JJ", ee = "Das Fenster nicht schließen", te = { pay: "ZAHLEN", submit: "ABSENDEN", getPlan: "MEINEN PLAN ERHALTEN", donate: "spenden", book: "jetzt buchen", order: "jetzt bestellen" }, ie = { 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" }, ae = {
-  email: Y,
-  cardholderNameLabel: J,
-  cardInformation: W,
-  cardholderNamePlaceholder: X,
-  cardExpiry: Q,
-  loading: ee,
-  buttonTexts: te,
+const J = "E-Mail", W = "Name des/der Karteninhaber/in", X = "Kartendaten", Q = "Vollständiger Name", ee = "MM / JJ", te = "Das Fenster nicht schließen", ae = { pay: "ZAHLEN", submit: "ABSENDEN", getPlan: "MEINEN PLAN ERHALTEN", donate: "spenden", book: "jetzt buchen", order: "jetzt bestellen" }, ie = { 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" }, se = {
+  email: J,
+  cardholderNameLabel: W,
+  cardInformation: X,
+  cardholderNamePlaceholder: Q,
+  cardExpiry: ee,
+  loading: te,
+  buttonTexts: ae,
   validation: ie
-}, se = "Email", re = "Cardholder name", ne = "Card information", oe = "Full name on card", le = "MM / YY", ce = "Do not close the window", de = { pay: "PAY", submit: "SUBMIT", getPlan: "GET MY PLAN", donate: "DONATE", book: "BOOK NOW", order: "ORDER NOW" }, he = { 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" }, me = {
-  email: se,
-  cardholderNameLabel: re,
-  cardInformation: ne,
-  cardholderNamePlaceholder: oe,
-  cardExpiry: le,
-  loading: ce,
-  buttonTexts: de,
-  validation: he
-}, ue = "Correo electrónico", pe = "Nombre del titular de la tarjeta", fe = "Información de la tarjeta", ge = "Nombre completo en la tarjeta", ye = "MM / AA", ve = "Por favor, no cierre esta ventana", Ee = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, be = { emailSuggestion: "¿Quisiste decir {{email}}?", emailInvalid: "Su correo electrónico no es válido", cardExpiryInvalid: "La fecha de vencimiento de la tarjeta ya pasó", cardExpiryFormat: "La fecha de vencimiento de su tarjeta está incompleta", cardSecurityFormat: "El código de seguridad de su tarjeta está incompleto", nameRequired: "Por favor, ingrese el nombre tal como aparece en su tarjeta", cardNumberInvalid: "Su número de tarjeta no es válido" }, Ce = {
-  email: ue,
-  cardholderNameLabel: pe,
-  cardInformation: fe,
-  cardholderNamePlaceholder: ge,
-  cardExpiry: ye,
-  loading: ve,
-  buttonTexts: Ee,
-  validation: be
-}, Se = "E-mail", xe = "Nom du titulaire de la carte", Fe = "Informations de la carte", we = "Nom complet figurant sur la carte", Me = "MM / AA", Le = "Veuillez ne pas fermer cette fenêtre", ke = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, Te = { emailSuggestion: "Vouliez-vous dire {{email}}?", emailInvalid: "Votre adresse e-mail n’est pas valide", cardExpiryInvalid: "La date d'expiration de votre carte est dans le passé", cardExpiryFormat: "La date d’expiration de votre carte est incomplète", cardSecurityFormat: "Le code de sécurité de votre carte est incomplet", nameRequired: "Veuillez saisir le nom tel qu’il figure sur votre carte", cardNumberInvalid: "Votre numéro de carte est invalide" }, Ie = {
-  email: Se,
-  cardholderNameLabel: xe,
-  cardInformation: Fe,
-  cardholderNamePlaceholder: we,
+}, re = "Email", ne = "Cardholder name", oe = "Card information", le = "Full name on card", ce = "MM / YY", de = "Do not close the window", he = { pay: "PAY", submit: "SUBMIT", getPlan: "GET MY PLAN", donate: "DONATE", book: "BOOK NOW", order: "ORDER NOW" }, me = { 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" }, ue = {
+  email: re,
+  cardholderNameLabel: ne,
+  cardInformation: oe,
+  cardholderNamePlaceholder: le,
+  cardExpiry: ce,
+  loading: de,
+  buttonTexts: he,
+  validation: me
+}, pe = "Correo electrónico", fe = "Nombre del titular de la tarjeta", ge = "Información de la tarjeta", ye = "Nombre completo en la tarjeta", ve = "MM / AA", Ee = "Por favor, no cierre esta ventana", be = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, Ce = { emailSuggestion: "¿Quisiste decir {{email}}?", emailInvalid: "Su correo electrónico no es válido", cardExpiryInvalid: "La fecha de vencimiento de la tarjeta ya pasó", cardExpiryFormat: "La fecha de vencimiento de su tarjeta está incompleta", cardSecurityFormat: "El código de seguridad de su tarjeta está incompleto", nameRequired: "Por favor, ingrese el nombre tal como aparece en su tarjeta", cardNumberInvalid: "Su número de tarjeta no es válido" }, Se = {
+  email: pe,
+  cardholderNameLabel: fe,
+  cardInformation: ge,
+  cardholderNamePlaceholder: ye,
+  cardExpiry: ve,
+  loading: Ee,
+  buttonTexts: be,
+  validation: Ce
+}, xe = "E-mail", Fe = "Nom du titulaire de la carte", we = "Informations de la carte", Le = "Nom complet figurant sur la carte", Me = "MM / AA", ke = "Veuillez ne pas fermer cette fenêtre", Te = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, Ie = { emailSuggestion: "Vouliez-vous dire {{email}}?", emailInvalid: "Votre adresse e-mail n’est pas valide", cardExpiryInvalid: "La date d'expiration de votre carte est dans le passé", cardExpiryFormat: "La date d’expiration de votre carte est incomplète", cardSecurityFormat: "Le code de sécurité de votre carte est incomplet", nameRequired: "Veuillez saisir le nom tel qu’il figure sur votre carte", cardNumberInvalid: "Votre numéro de carte est invalide" }, ze = {
+  email: xe,
+  cardholderNameLabel: Fe,
+  cardInformation: we,
+  cardholderNamePlaceholder: Le,
   cardExpiry: Me,
-  loading: Le,
-  buttonTexts: ke,
-  validation: Te
-}, ze = "Adres e-mail", Ne = "Imię i nazwisko posiadacza karty", Pe = "Informacje o karcie", De = "Imię i nazwisko na karcie", Ve = "MM / RR", Ae = "Proszę nie zamykać tego okna", $e = { pay: "ZAPŁAĆ", submit: "WYŚLIJ", getPlan: "POBIERZ MÓJ PLAN", donate: "PRZEKAŻ DAROWIZNĘ", book: "ZAREZERWUJ TERAZ", order: "ZAMÓW TERAZ" }, Re = { emailSuggestion: "Czy chodziło Ci o {{email}}?", emailInvalid: "Państwa adres e-mail jest nieprawidłowy", cardExpiryInvalid: "Data ważności Państwa karty jest w przeszłości", cardExpiryFormat: "Data ważności Państwa karty jest niekompletna", cardSecurityFormat: "Kod zabezpieczający Państwa karty jest niekompletny", nameRequired: "Proszę wpisać imię i nazwisko tak, jak widnieje na karcie", cardNumberInvalid: "Numer Państwa karty jest nieprawidłowy" }, Be = {
-  email: ze,
-  cardholderNameLabel: Ne,
-  cardInformation: Pe,
-  cardholderNamePlaceholder: De,
+  loading: ke,
+  buttonTexts: Te,
+  validation: Ie
+}, Ne = "Adres e-mail", Pe = "Imię i nazwisko posiadacza karty", De = "Informacje o karcie", Ae = "Imię i nazwisko na karcie", Ve = "MM / RR", $e = "Proszę nie zamykać tego okna", Re = { pay: "ZAPŁAĆ", submit: "WYŚLIJ", getPlan: "POBIERZ MÓJ PLAN", donate: "PRZEKAŻ DAROWIZNĘ", book: "ZAREZERWUJ TERAZ", order: "ZAMÓW TERAZ" }, Be = { emailSuggestion: "Czy chodziło Ci o {{email}}?", emailInvalid: "Państwa adres e-mail jest nieprawidłowy", cardExpiryInvalid: "Data ważności Państwa karty jest w przeszłości", cardExpiryFormat: "Data ważności Państwa karty jest niekompletna", cardSecurityFormat: "Kod zabezpieczający Państwa karty jest niekompletny", nameRequired: "Proszę wpisać imię i nazwisko tak, jak widnieje na karcie", cardNumberInvalid: "Numer Państwa karty jest nieprawidłowy" }, Oe = {
+  email: Ne,
+  cardholderNameLabel: Pe,
+  cardInformation: De,
+  cardholderNamePlaceholder: Ae,
   cardExpiry: Ve,
-  loading: Ae,
-  buttonTexts: $e,
-  validation: Re
-}, Oe = "E-mail", He = "Nome do titular do cartão", je = "Informações do cartão", Ke = "Nome completo no cartão", Ue = "MM / AA", qe = "Por favor, não feche esta janela", _e = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTER MEU PLANO", donate: "DOAR", book: "RESERVAR AGORA", order: "FAZER PEDIDO" }, Ge = { 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" }, Ze = {
-  email: Oe,
-  cardholderNameLabel: He,
-  cardInformation: je,
-  cardholderNamePlaceholder: Ke,
-  cardExpiry: Ue,
-  loading: qe,
-  buttonTexts: _e,
-  validation: Ge
+  loading: $e,
+  buttonTexts: Re,
+  validation: Be
+}, He = "E-mail", je = "Nome do titular do cartão", Ke = "Informações do cartão", Ue = "Nome completo no cartão", qe = "MM / AA", _e = "Por favor, não feche esta janela", Ge = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTER MEU PLANO", donate: "DOAR", book: "RESERVAR AGORA", order: "FAZER PEDIDO" }, Ze = { 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" }, Ye = {
+  email: He,
+  cardholderNameLabel: je,
+  cardInformation: Ke,
+  cardholderNamePlaceholder: Ue,
+  cardExpiry: qe,
+  loading: _e,
+  buttonTexts: Ge,
+  validation: Ze
 }, I = {
-  en: me,
-  de: ae,
-  es: Ce,
-  fr: Ie,
-  pl: Be,
-  pt: Ze
+  en: ue,
+  de: se,
+  es: Se,
+  fr: ze,
+  pl: Oe,
+  pt: Ye
   // Add other locales here
 };
-class Ye {
+class Je {
   locale;
   loadedLocales = /* @__PURE__ */ new Set();
   constructor(e = "en") {
@@ -718,85 +718,85 @@ class Ye {
     return this.locale;
   }
   translate(e, t) {
-    const i = this.getNestedTranslation(e);
-    return !t || i === e ? i : this.interpolate(i, t);
+    const a = this.getNestedTranslation(e);
+    return !t || a === e ? a : this.interpolate(a, t);
   }
   /* eslint-disable @typescript-eslint/no-explicit-any */
   getNestedTranslation(e) {
-    const t = this.locale in I ? I[this.locale] : {}, i = this.findNestedValue(t, e);
-    return i === void 0 ? e : i;
+    const t = this.locale in I ? I[this.locale] : {}, a = this.findNestedValue(t, e);
+    return a === void 0 ? e : a;
   }
   findNestedValue(e, t) {
-    const i = t.split(".");
-    let a = e;
-    for (const s of i) {
-      if (a == null || !Object.prototype.hasOwnProperty.call(a, s))
+    const a = t.split(".");
+    let i = e;
+    for (const s of a) {
+      if (i == null || !Object.prototype.hasOwnProperty.call(i, s))
         return;
-      a = a[s];
+      i = i[s];
     }
-    return typeof a == "string" ? a : void 0;
+    return typeof i == "string" ? i : void 0;
   }
   interpolate(e, t) {
-    return e.replace(/{{(\w+)}}/g, (i, a) => {
-      const s = t[a];
-      return s === void 0 ? i : String(s);
+    return e.replace(/{{(\w+)}}/g, (a, i) => {
+      const s = t[i];
+      return s === void 0 ? a : String(s);
     });
   }
 }
-const z = ["en", "de", "es", "fr", "pl", "pt"], Je = "en";
-function We(n) {
-  const e = new Ye(), i = (() => {
+const z = ["en", "de", "es", "fr", "pl", "pt"], We = "en";
+function Xe(n) {
+  const e = new Je(), a = (() => {
     const o = navigator?.language?.split("-")[0]?.toLowerCase();
-    return z.includes(o) ? o : Je;
+    return z.includes(o) ? o : We;
   })();
-  e.setLocale(i);
-  const a = x({
-    locale: i,
+  e.setLocale(a);
+  const i = x({
+    locale: a,
     translationService: e
   });
   return {
-    store: a,
-    translate: (o, l) => a.getState().translationService.translate(o, l),
+    store: i,
+    translate: (o, l) => i.getState().translationService.translate(o, l),
     setLocale: (o) => {
-      z.includes(o) && (a.getState().translationService.setLocale(o), a.setState({ locale: o }));
+      z.includes(o) && (i.getState().translationService.setLocale(o), i.setState({ locale: o }));
     },
-    getLocale: () => a.getValue("locale"),
-    subscribe: a.subscribe.bind(a)
+    getLocale: () => i.getValue("locale"),
+    subscribe: i.subscribe.bind(i)
   };
 }
-const Xe = We(), L = () => {
-  const { translate: n, getLocale: e, setLocale: t, subscribe: i } = Xe;
+const Qe = Xe(), M = () => {
+  const { translate: n, getLocale: e, setLocale: t, subscribe: a } = Qe;
   return {
     t: n,
     translate: n,
     locale: e(),
     setLocale: t,
-    subscribe: i
+    subscribe: a
   };
-}, Qe = ({ fontFamily: n }) => {
+}, et = ({ fontFamily: n }) => {
   if (!n)
     return { cleanup: () => {
     } };
-  const e = n.replace(/\s+/g, "+"), t = `https://fonts.googleapis.com/css2?family=${e}:wght@400;700&display=swap`, i = [...document.head.querySelectorAll("link")].filter(
+  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(
     (o) => o.href.includes("fonts.googleapis.com/css2") && o.rel === "stylesheet"
-  ), a = document.createElement("link");
-  a.rel = "stylesheet", a.href = t;
-  const s = i.find(
+  ), i = document.createElement("link");
+  i.rel = "stylesheet", i.href = t;
+  const s = a.find(
     (o) => o.href.includes(`family=${e}`)
   );
   if (s)
     s.href = t;
-  else if (i.length > 0) {
-    const o = i.at(
+  else if (a.length > 0) {
+    const o = a.at(
       -1
     );
-    o?.nextSibling ? document.head.insertBefore(a, o.nextSibling) : document.head.appendChild(a);
+    o?.nextSibling ? document.head.insertBefore(i, o.nextSibling) : document.head.appendChild(i);
   } else
-    document.head.appendChild(a);
+    document.head.appendChild(i);
   return { cleanup: () => {
-    document.head.contains(a) && document.head.removeChild(a);
+    document.head.contains(i) && document.head.removeChild(i);
   } };
-}, et = ({
+}, tt = ({
   scriptSrc: n,
   async: e = !1
 }) => {
@@ -814,24 +814,24 @@ const Xe = We(), L = () => {
       },
       isLoaded: Promise.resolve(!0)
     };
-  const i = document.createElement("script");
-  i.src = n, i.async = e;
-  const a = new Promise((r, o) => {
-    i.onload = () => r(!0), i.onerror = () => {
+  const a = document.createElement("script");
+  a.src = n, a.async = e;
+  const i = new Promise((r, o) => {
+    a.onload = () => r(!0), a.onerror = () => {
       console.error(`Failed to load script: ${n}`), o(new Error(`Failed to load script: ${n}`));
     };
   });
-  return document.head.appendChild(i), {
+  return document.head.appendChild(a), {
     cleanup: () => {
-      document.head.contains(i) && document.head.removeChild(i);
+      document.head.contains(a) && document.head.removeChild(a);
     },
-    isLoaded: a
+    isLoaded: i
   };
 }, S = (n) => Object.entries(n).map(([e, t]) => {
-  const i = e.replace(/([A-Z])/g, "-$1").toLowerCase(), a = typeof t == "number" ? `${t}px` : t;
-  return `${i}: ${a}`;
+  const a = e.replace(/([A-Z])/g, "-$1").toLowerCase(), i = typeof t == "number" ? `${t}px` : t;
+  return `${a}: ${i}`;
 }).join("; ");
-function tt(n) {
+function at(n) {
   if (!n)
     return {
       formContainerStyle: {},
@@ -855,31 +855,31 @@ function tt(n) {
     lineHeight: 30,
     boxSizing: "border-box",
     padding: "0px 12px",
-    height: 33,
+    height: 36,
     width: "100%",
     fontFamily: `${n.styles.fontFamily}, sans-serif`
   }, t = {
     color: "#717173",
     opacity: "0.3",
     fontFamily: `${n.styles.fontFamily}, sans-serif`
-  }, i = {
-    color: "#dc2727"
   }, a = {
+    color: "#dc2727"
+  }, i = {
     outline: 0
   }, s = {
     fontFamily: `${n.styles.fontFamily}, sans-serif`
   }, r = {
     base: S(e),
-    error: S(i),
-    focus: S(a),
+    error: S(a),
+    focus: S(i),
     placeholder: S(t)
   };
   return {
     formContainerStyle: s,
     baseStyles: e,
     placeholderStyles: t,
-    errorStyles: i,
-    focusStyles: a,
+    errorStyles: a,
+    focusStyles: i,
     inputStyles: r
   };
 }
@@ -893,9 +893,9 @@ class d {
    * @param classNames Optional CSS class names to add
    * @param attributes Optional attributes to set on the element
    */
-  constructor(e, t = [], i = {}) {
-    this.element = document.createElement(e), t.length > 0 && this.addClass(...t), Object.entries(i).forEach(([a, s]) => {
-      this.setAttribute(a, s);
+  constructor(e, t = [], a = {}) {
+    this.element = document.createElement(e), t.length > 0 && this.addClass(...t), Object.entries(a).forEach(([i, s]) => {
+      this.setAttribute(i, s);
     });
   }
   /**
@@ -950,14 +950,14 @@ class d {
   /**
    * Add an event listener to the element
    */
-  addEventListener(e, t, i) {
-    return this.element.addEventListener(e, t, i), this.eventListeners.push({ type: e, listener: t }), this;
+  addEventListener(e, t, a) {
+    return this.element.addEventListener(e, t, a), this.eventListeners.push({ type: e, listener: t }), this;
   }
   /**
    * Remove an event listener from the element
    */
-  removeEventListener(e, t, i) {
-    return this.element.removeEventListener(e, t, i), this;
+  removeEventListener(e, t, a) {
+    return this.element.removeEventListener(e, t, a), this;
   }
   /**
    * Hide this component
@@ -996,27 +996,27 @@ class y {
   /**
    * Create a button element
    */
-  static createButton(e, t = [], i = {}) {
-    const a = new d("button", t, i);
-    return a.setText(e), a;
+  static createButton(e, t = [], a = {}) {
+    const i = new d("button", t, a);
+    return i.setText(e), i;
   }
   /**
    * Create an input element
    */
-  static createInput(e, t = [], i = {}) {
-    const a = { type: e, ...i };
-    return new d("input", t, a);
+  static createInput(e, t = [], a = {}) {
+    const i = { type: e, ...a };
+    return new d("input", t, i);
   }
   /**
    * Create a text input
    */
-  static createTextInput(e = "", t = [], i = {}) {
-    const a = {
+  static createTextInput(e = "", t = [], a = {}) {
+    const i = {
       type: "text",
       placeholder: e,
-      ...i
+      ...a
     };
-    return new d("input", t, a);
+    return new d("input", t, i);
   }
   /**
    * Create a form element
@@ -1027,26 +1027,26 @@ class y {
   /**
    * Create a label element
    */
-  static createLabel(e, t = "", i = [], a = {}) {
-    const s = t ? { for: t, ...a } : a, r = new d("label", i, s);
+  static createLabel(e, t = "", a = [], i = {}) {
+    const s = t ? { for: t, ...i } : i, r = new d("label", a, s);
     return r.setText(e), r;
   }
   /**
    * Create a select element
    */
-  static createSelect(e, t = [], i = {}) {
-    const a = new d("select", t, i);
+  static createSelect(e, t = [], a = {}) {
+    const i = new d("select", t, a);
     return e.forEach((s) => {
       const r = document.createElement("option");
-      r.value = s.value, r.textContent = s.text, s.selected && (r.selected = !0), a.getElement().appendChild(r);
-    }), a;
+      r.value = s.value, r.textContent = s.text, s.selected && (r.selected = !0), i.getElement().appendChild(r);
+    }), i;
   }
   /**
    * Create an image element
    */
-  static createImage(e, t = "", i = [], a = {}) {
-    const s = { src: e, alt: t, ...a };
-    return new d("img", i, s);
+  static createImage(e, t = "", a = [], i = {}) {
+    const s = { src: e, alt: t, ...i };
+    return new d("img", a, s);
   }
 }
 class it extends d {
@@ -1056,10 +1056,10 @@ class it extends d {
     const t = y.createDiv(["error-alert"], {
       role: "alert",
       "aria-live": "polite"
-    }), i = y.createDiv(["error-alert-content"]), a = y.createDiv([
+    }), a = y.createDiv(["error-alert-content"]), i = y.createDiv([
       "error-alert-icon-container"
     ]);
-    a.getElement().innerHTML = this.createAlertCircleSVG();
+    i.getElement().innerHTML = this.createAlertCircleSVG();
     const s = y.createDiv([
       "error-alert-text-container"
     ]), r = new d("h4", [
@@ -1067,7 +1067,7 @@ class it extends d {
     ]);
     r.setText("Checkout Error"), this.messageComponent = new d("p", [
       "error-alert-message"
-    ]), this.messageComponent.setText(e.message || "Bad request"), s.appendChild(r), s.appendChild(this.messageComponent), i.appendChild(a), i.appendChild(s), t.appendChild(i), this.appendChild(t);
+    ]), this.messageComponent.setText(e.message || "Bad request"), s.appendChild(r), s.appendChild(this.messageComponent), a.appendChild(i), a.appendChild(s), t.appendChild(a), this.appendChild(t);
   }
   createAlertCircleSVG() {
     return `
@@ -1092,12 +1092,12 @@ class it extends d {
     return this.messageComponent.setText(e), this;
   }
 }
-class at extends d {
+class N extends d {
   titleElement;
-  constructor(e) {
+  constructor(e = {}) {
     super("div", ["blur-bg"]);
     const t = y.createDiv(["loader"]);
-    this.titleElement = new d("h3", ["title"]), this.titleElement.setText(e.text), this.appendChild(t), this.appendChild(this.titleElement);
+    this.titleElement = new d("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
   }
   setText(e) {
     return this.titleElement.setText(e), this;
@@ -1128,7 +1128,7 @@ class k extends d {
   helperText = null;
   constructor(e) {
     if (super("div", ["input-wrapper"]), e.label && e.styles) {
-      const i = new st({
+      const a = new st({
         styles: {
           color: e.styles.color,
           fontSize: e.styles.fontSize
@@ -1136,7 +1136,7 @@ class k extends d {
         label: e.label,
         id: e.name
       });
-      this.appendChild(i);
+      this.appendChild(a);
     }
     const t = {
       id: e.name,
@@ -1148,8 +1148,8 @@ class k extends d {
       [],
       t
     ), e.styles) {
-      const i = this.inputElement.getElement();
-      i.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, i.style.color = e.styles.color, i.style.fontSize = `${e.styles.fontSize}px`, i.style.borderRadius = e.styles.borderRadius;
+      const a = this.inputElement.getElement();
+      a.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.style.color = e.styles.color, a.style.fontSize = `${e.styles.fontSize}px`, a.style.borderRadius = e.styles.borderRadius;
     }
     e.onChange && this.inputElement.getElement().addEventListener("input", e.onChange), this.getElement().appendChild(this.inputElement.getElement()), e.error && (this.helperText = new v({ text: e.errorMsg }), this.appendChild(this.helperText));
   }
@@ -1160,11 +1160,11 @@ class k extends d {
     return this.inputElement.getElement().value = e, this;
   }
   setError(e, t) {
-    const i = this.inputElement.getElement();
-    return e ? (i.classList.add("form-input-error"), !this.helperText && t ? (this.helperText = new v({ text: t }), this.appendChild(this.helperText)) : this.helperText && t && this.helperText.setText(t)) : (i.classList.remove("form-input-error"), this.helperText && (this.helperText.getElement().remove(), this.helperText = null)), this;
+    const a = this.inputElement.getElement();
+    return e ? (a.classList.add("form-input-error"), !this.helperText && t ? (this.helperText = new v({ text: t }), this.appendChild(this.helperText)) : this.helperText && t && this.helperText.setText(t)) : (a.classList.remove("form-input-error"), this.helperText && (this.helperText.getElement().remove(), this.helperText = null)), this;
   }
-  addEventListener(e, t, i) {
-    return this.inputElement.getElement().addEventListener(e, t, i), this;
+  addEventListener(e, t, a) {
+    return this.inputElement.getElement().addEventListener(e, t, a), this;
   }
 }
 class rt {
@@ -1172,8 +1172,8 @@ class rt {
   constructor(e) {
     const {
       value: t,
-      onChange: i,
-      onBlur: a,
+      onChange: a,
+      onBlur: i,
       error: s,
       errorMsg: r,
       checkoutProfile: o,
@@ -1193,10 +1193,10 @@ class rt {
       placeholder: l("cardholderNamePlaceholder"),
       value: t,
       onChange: (c) => {
-        this.trim(), i(c);
+        this.trim(), a(c);
       }
     }), this.input.addEventListener("blur", (c) => {
-      a(c);
+      i(c);
     });
   }
   getValue() {
@@ -1224,8 +1224,8 @@ class nt extends d {
     super("div", []);
     const t = document.createElement("div");
     t.className = e.isLoading ? "loading" : "", t.style.borderRadius = `0px 0px ${e.styles.borderRadius}px 0px`;
-    const i = document.createElement("div");
-    i.id = "card-cvv-element", i.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, i.style.zIndex = e.isFocused ? "2" : "0", t.appendChild(i), this.getElement().appendChild(t);
+    const a = document.createElement("div");
+    a.id = "card-cvv-element", a.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, a.style.zIndex = e.isFocused ? "2" : "0", t.appendChild(a), this.getElement().appendChild(t);
   }
   setFocused(e) {
     const t = this.getElement().querySelector("#card-cvv-element");
@@ -1260,10 +1260,10 @@ class ht extends d {
     super("div", []), this.cardType = e.cardType;
     const t = document.createElement("label");
     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 i = document.createElement("div");
-    i.className = e.isLoading ? "loading" : "", i.style.borderRadius = `${e.styles.borderRadius}px ${e.styles.borderRadius}px 0px 0px`;
     const a = document.createElement("div");
-    a.id = "card-element", a.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, a.style.zIndex = e.isFocused ? "2" : "0";
+    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 s = document.createElement("div");
     if (s.className = "cards-position", e.cardType === "unknown")
       E.forEach((r) => {
@@ -1273,13 +1273,13 @@ class ht extends d {
       const r = E.find((o) => o.type === e.cardType);
       r && s.appendChild(this.createCardIcon(r));
     }
-    a.appendChild(s), i.appendChild(a), this.getElement().appendChild(i);
+    i.appendChild(s), a.appendChild(i), this.getElement().appendChild(a);
   }
   createCardIcon(e) {
     const t = document.createElement("div");
     t.className = "card-icon";
-    const i = document.createElement("img");
-    return i.src = e.imgSrc, t.appendChild(i), t;
+    const a = document.createElement("img");
+    return a.src = e.imgSrc, t.appendChild(a), t;
   }
   setFocused(e) {
     const t = this.getElement().querySelector(
@@ -1298,16 +1298,16 @@ class ht extends d {
     if (this.cardType === t)
       return this;
     this.cardType = t;
-    const i = this.getElement().querySelector(".cards-position");
-    if (i)
-      if (i.innerHTML = "", this.cardType === "unknown")
-        E.forEach((a) => {
-          i.appendChild(this.createCardIcon(a));
+    const a = this.getElement().querySelector(".cards-position");
+    if (a)
+      if (a.innerHTML = "", this.cardType === "unknown")
+        E.forEach((i) => {
+          a.appendChild(this.createCardIcon(i));
         });
       else {
-        const a = E.find((s) => s.type === this.cardType);
-        a ? i.appendChild(this.createCardIcon(a)) : E.forEach((s) => {
-          i.appendChild(this.createCardIcon(s));
+        const i = E.find((s) => s.type === this.cardType);
+        i ? a.appendChild(this.createCardIcon(i)) : E.forEach((s) => {
+          a.appendChild(this.createCardIcon(s));
         });
       }
     return this;
@@ -1322,8 +1322,8 @@ class mt extends d {
     super("div", []);
     const {
       checkoutProfile: t,
-      isLoading: i,
-      isFocused: a,
+      isLoading: a,
+      isFocused: i,
       isCvvFocused: s,
       isCcValid: r,
       isCvvValid: o,
@@ -1342,8 +1342,8 @@ class mt extends d {
         borderRadius: t.styles.borderRadius
       },
       label: f("cardInformation"),
-      isLoading: i,
-      isFocused: a,
+      isLoading: a,
+      isFocused: i,
       cardType: l
     }), b.appendChild(this.cardNumber.getElement());
     const C = document.createElement("div");
@@ -1372,16 +1372,16 @@ class mt extends d {
         "Tab"
       ].includes(w.key) && !/^\d$/.test(w.key) && w.preventDefault();
     });
-    const P = this.cardExpiry.getElement();
-    P.style.height = "100%";
+    const D = this.cardExpiry.getElement();
+    D.style.height = "100%";
     const F = document.createElement("div");
     if (F.className = "input-wrapper", this.cardCvv = new nt({
       styles: {
         borderRadius: typeof t.styles.borderRadius == "number" ? t.styles.borderRadius : 0
       },
-      isLoading: i,
+      isLoading: a,
       isFocused: s
-    }), F.appendChild(this.cardCvv.getElement()), C.appendChild(this.cardExpiry.getElement()), C.appendChild(F), b.appendChild(C), this.getElement().appendChild(b), a && !r) {
+    }), F.appendChild(this.cardCvv.getElement()), C.appendChild(this.cardExpiry.getElement()), C.appendChild(F), b.appendChild(C), this.getElement().appendChild(b), i && !r) {
       const g = new v({
         text: f("validation.cardNumberInvalid")
       });
@@ -1397,8 +1397,8 @@ class mt extends d {
   updateCardType(e) {
     return this.cardNumber.updateCardType(e), this;
   }
-  updateCardExpiry(e, t, i) {
-    return this.cardExpiry.setValue(e), t && i ? this.cardExpiry.setError(!0, t) : this.cardExpiry.setError(!1), this;
+  updateCardExpiry(e, t, a) {
+    return this.cardExpiry.setValue(e), t && a ? this.cardExpiry.setError(!0, t) : this.cardExpiry.setError(!1), this;
   }
   getCardExpiryValue() {
     return this.cardExpiry.getValue();
@@ -1407,31 +1407,31 @@ class mt extends d {
     const e = this.getCardExpiryValue().trim();
     return this.cardExpiry.setValue(e), this;
   }
-  updateCardNumberValidation(e, t, i) {
+  updateCardNumberValidation(e, t, a) {
     if (this.cardNumber.setFocused(e), e && !t) {
       if (!this.validationMessages.has("cardNumber")) {
-        const a = new v({
-          text: i("validation.cardNumberInvalid")
+        const i = new v({
+          text: a("validation.cardNumberInvalid")
         });
-        this.validationMessages.set("cardNumber", a), this.appendChild(a);
+        this.validationMessages.set("cardNumber", i), this.appendChild(i);
       }
     } else {
-      const a = this.validationMessages.get("cardNumber");
-      a && (a.getElement().remove(), this.validationMessages.delete("cardNumber"));
+      const i = this.validationMessages.get("cardNumber");
+      i && (i.getElement().remove(), this.validationMessages.delete("cardNumber"));
     }
     return this;
   }
-  updateCardCvvValidation(e, t, i) {
+  updateCardCvvValidation(e, t, a) {
     if (this.cardCvv.setFocused(e), e && !t) {
       if (!this.validationMessages.has("cardCvv")) {
-        const a = new v({
-          text: i("validation.cardSecurityFormat")
+        const i = new v({
+          text: a("validation.cardSecurityFormat")
         });
-        this.validationMessages.set("cardCvv", a), this.appendChild(a);
+        this.validationMessages.set("cardCvv", i), this.appendChild(i);
       }
     } else {
-      const a = this.validationMessages.get("cardCvv");
-      a && (a.getElement().remove(), this.validationMessages.delete("cardCvv"));
+      const i = this.validationMessages.get("cardCvv");
+      i && (i.getElement().remove(), this.validationMessages.delete("cardCvv"));
     }
     return this;
   }
@@ -1444,8 +1444,8 @@ class ut {
   constructor(e) {
     const {
       value: t,
-      onChange: i,
-      onBlur: a,
+      onChange: a,
+      onBlur: i,
       error: s,
       errorMsg: r,
       checkoutProfile: o,
@@ -1467,9 +1467,9 @@ class ut {
       value: t,
       // Wrap the original onChange to apply trim before calling it
       onChange: (c) => {
-        this.trim(), i(c);
+        this.trim(), a(c);
       }
-    }), this.input.addEventListener("blur", a);
+    }), this.input.addEventListener("blur", i);
   }
   getValue() {
     return this.input.getValue();
@@ -1498,12 +1498,12 @@ class ft extends d {
   isSubmitting = !1;
   constructor(e) {
     super("div", ["paypal"]);
-    const { formData: t, onSubmit: i } = e;
-    this.formData = t, this.onSubmit = i, this.getElement().style.cursor = i ? "pointer" : "default", this.getElement().style.opacity = "1";
-    const a = document.createElement("div");
-    a.className = "paypal-icon-container";
+    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 s = document.createElement("img");
-    s.src = pt, s.style.width = "69px", s.style.height = "22px", s.style.maxWidth = "100%", s.style.display = "block", s.style.height = "auto", a.appendChild(s), this.getElement().appendChild(a), i && this.getElement().addEventListener("click", () => this.handleSubmit());
+    s.src = pt, s.style.width = "69px", s.style.height = "22px", s.style.maxWidth = "100%", s.style.display = "block", s.style.height = "auto", i.appendChild(s), this.getElement().appendChild(i), a && this.getElement().addEventListener("click", () => this.handleSubmit());
   }
   async handleSubmit() {
     if (!(!this.onSubmit || this.isSubmitting)) {
@@ -1527,7 +1527,7 @@ class ft extends d {
 class gt extends d {
   paymentMethods;
   constructor(e) {
-    const { checkoutProfile: t, formData: i, onPaypalSubmit: a } = e;
+    const { checkoutProfile: t, formData: a, onPaypalSubmit: i } = e;
     if (!t?.additionalPaymentMethods) {
       super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), this.getElement().style.display = "none";
       return;
@@ -1543,11 +1543,11 @@ class gt extends d {
     for (const [r] of s)
       switch (r) {
         case "paypal": {
-          if (a) {
+          if (i) {
             const o = new ft({
               checkoutProfile: t,
-              formData: i,
-              onSubmit: a
+              formData: a,
+              onSubmit: i
             });
             this.paymentMethods.set("paypal", o), o.appendTo(this.getElement());
           }
@@ -1590,17 +1590,17 @@ class vt extends d {
 class Et {
   button;
   constructor(e) {
-    const { disabled: t, checkoutProfile: i, translationFunc: a } = e;
+    const { disabled: t, checkoutProfile: a, translationFunc: i } = e;
     this.button = new vt({
-      text: a(
-        `buttonTexts.${i?.layout.actionButton.translationKey}`
+      text: i(
+        `buttonTexts.${a?.layout.actionButton.translationKey}`
       ),
       styles: {
-        backgroundColor: i.styles.buttonColor,
-        color: i.styles.buttonTextColor,
-        fontFamily: i.styles.fontFamily,
-        borderRadius: i.styles.borderRadius,
-        fontSize: i.styles.buttonFontSize
+        backgroundColor: a.styles.buttonColor,
+        color: a.styles.buttonTextColor,
+        fontFamily: a.styles.fontFamily,
+        borderRadius: a.styles.borderRadius,
+        fontSize: a.styles.buttonFontSize
       },
       disabled: t
     });
@@ -1611,8 +1611,8 @@ class Et {
   setDisabled(e) {
     return this.button.setDisabled(e), this;
   }
-  addEventListener(e, t, i) {
-    return this.button.addEventListener(e, t, i), this;
+  addEventListener(e, t, a) {
+    return this.button.addEventListener(e, t, a), this;
   }
   appendTo(e) {
     return this.button.appendTo(e), this;
@@ -1633,16 +1633,16 @@ class St extends d {
   spinner;
   alert;
   // factories
-  formManager = _();
+  formManager = G();
   checkoutProfile;
-  translation = L();
+  translation = M();
   iframeHook;
   constructor(e) {
-    super("form", ["form-container"]), this.options = e, this.checkoutProfile = O({
+    super("form", ["form-container"]), this.options = e, this.checkoutProfile = H({
       apiKey: e.apiKey,
       profileId: e.profileId,
       environment: e.environment
-    }), e.locale && this.translation.setLocale(e.locale), this.getElement().style.opacity = "0", this.getElement().style.transition = "opacity 0.5s ease-in-out", this.getElement().addEventListener("submit", this.handleSubmit), this.getElement().addEventListener("keydown", this.handleKeyDown), this.formManager.subscribe(this.handleFormStateChange), this.checkoutProfile.subscribe(this.handleProfileStateChange), this.initializeForm(), this.appendTo(e.container);
+    }), e.locale && this.translation.setLocale(e.locale), this.getElement().addEventListener("submit", this.handleSubmit), this.getElement().addEventListener("keydown", this.handleKeyDown), this.formManager.subscribe(this.handleFormStateChange), this.checkoutProfile.subscribe(this.handleProfileStateChange), this.initializeForm(), this.appendTo(e.container);
   }
   _getFormStateData() {
     const e = this.formManager.getFormState();
@@ -1661,10 +1661,10 @@ class St extends d {
   };
   handleProfileStateChange = (e) => {
     if (!e.isLoading)
-      if (this.hideSpinner(), e.checkoutProfile)
+      if (this.setLoadingState(!1), e.checkoutProfile)
         try {
           if (e.checkoutProfile.styles?.fontFamily) {
-            const { cleanup: t } = Qe({
+            const { cleanup: t } = et({
               fontFamily: e.checkoutProfile.styles.fontFamily
             });
             this.fontCleanup = t;
@@ -1687,15 +1687,15 @@ class St extends d {
           setTimeout(() => this.initializeTokenExIframe(), 500);
           return;
         }
-        const { inputStyles: t, formContainerStyle: i } = tt(
+        const { inputStyles: t, formContainerStyle: a } = at(
           e.checkoutProfile
         );
-        this.applyFormContainerStyles(i), this.iframeHook = Z({
+        this.applyFormContainerStyles(a), this.iframeHook = Y({
           apiKey: this.options.apiKey,
           checkoutProfile: e.checkoutProfile,
           inputStyles: t,
-          setFormData: (a) => {
-            this.formManager.setFormData(a);
+          setFormData: (i) => {
+            this.formManager.setFormData(i);
           },
           environment: this.options.environment
         }), this.iframeHook?.subscribe(this.handleIframeStateChange), this.renderFormComponents();
@@ -1718,7 +1718,7 @@ class St extends d {
   createCardSection = (e) => {
     if (this.iframeHook && !this.cardSection)
       try {
-        const { formData: t, errors: i, touched: a } = this._getFormStateData(), s = this.iframeHook.getState();
+        const { formData: t, errors: a, touched: i } = this._getFormStateData(), s = this.iframeHook.getState();
         this.cardSection = new mt({
           checkoutProfile: e,
           isLoading: s.loadingIframe,
@@ -1728,24 +1728,24 @@ class St extends d {
           isCvvValid: s.isCvvValid,
           cardType: s.possibleCardType,
           cardExpiry: t.cardExpiry,
-          cardExpiryError: i.cardExpiry,
-          cardExpiryTouched: !!a.cardExpiry,
+          cardExpiryError: a.cardExpiry,
+          cardExpiryTouched: !!i.cardExpiry,
           onChange: this.handleChange,
           onBlur: this.handleBlur,
           translationFunc: this.translation.t
-        }), this.element.appendChild(this.cardSection.getElement()), this.updateFormUI(), this.cardSection && this.emailField && this.cardholderSection && this.submitButton && this.animateFormVisibility();
+        }), this.element.appendChild(this.cardSection.getElement()), this.updateFormUI(), this.cardSection && this.emailField && this.cardholderSection && this.submitButton;
       } catch {
         this.setErrorMessage("Card section temporarily unavailabl");
       }
   };
   initializeForm() {
-    this.showSpinner("Loading checkout form..."), this.options.errorMsg && this.setErrorMessage(this.options.errorMsg);
-    const e = this.options.environment === "test" ? bt : Ct, { cleanup: t, isLoaded: i } = et({
+    this.setLoadingState(!0), this.options.errorMsg && this.setErrorMessage(this.options.errorMsg);
+    const e = this.options.environment === "test" ? bt : Ct, { cleanup: t, isLoaded: a } = tt({
       scriptSrc: e
     });
-    this.scriptCleanup = t, i.then(() => {
+    this.scriptCleanup = t, a.then(() => {
     }).catch(() => {
-      this.setErrorMessage(
+      this.setLoadingState(!1), this.setErrorMessage(
         "Failed to load payment system. Please try again later."
       );
     });
@@ -1758,53 +1758,45 @@ class St extends d {
           this.setErrorMessage("Failed to load checkout configuration");
           return;
         }
-        this.createPaymentMethods(e.checkoutProfile), this.createEmailField(e.checkoutProfile), this.createCardSection(e.checkoutProfile), this.createCardholderSection(e.checkoutProfile), this.createSubmitButton(e.checkoutProfile), this.animateFormVisibility();
+        this.createPaymentMethods(e.checkoutProfile), this.createEmailField(e.checkoutProfile), this.createCardSection(e.checkoutProfile), this.createCardholderSection(e.checkoutProfile), this.createSubmitButton(e.checkoutProfile);
       } catch {
         this.setErrorMessage("Failed to render checkout form components");
       }
   }
-  /**
-   * Animate the form's visibility by transitioning opacity
-   */
-  animateFormVisibility() {
-    setTimeout(() => {
-      this.getElement().style.opacity = "1";
-    }, 100);
-  }
   createPaymentMethods(e) {
     if (!e?.additionalPaymentMethods || Object.entries(
       e.additionalPaymentMethods
-    ).filter(([, a]) => a.enabled).length === 0)
+    ).filter(([, i]) => i.enabled).length === 0)
       return;
-    const { formData: i } = this._getFormStateData();
+    const { formData: a } = this._getFormStateData();
     this.paymentMethods = new gt({
       checkoutProfile: e,
-      formData: i,
+      formData: a,
       onPaypalSubmit: async () => {
         await this.handlePaypalSubmit();
       }
     }), this.appendChild(this.paymentMethods);
   }
   createEmailField(e) {
-    const { formData: t, errors: i, touched: a } = this._getFormStateData();
+    const { formData: t, errors: a, touched: i } = this._getFormStateData();
     this.emailField = new ut({
       value: t.email,
       onChange: this.handleChange,
       onBlur: this.handleBlur,
-      error: !!(i.email && a.email),
-      errorMsg: i.email,
+      error: !!(a.email && i.email),
+      errorMsg: a.email,
       checkoutProfile: e,
       translationFunc: this.translation.t
     }), this.element.appendChild(this.emailField.getElement());
   }
   createCardholderSection(e) {
-    const { formData: t, errors: i, touched: a } = this._getFormStateData();
+    const { formData: t, errors: a, touched: i } = this._getFormStateData();
     this.cardholderSection = new rt({
       value: t.name,
       onChange: this.handleChange,
       onBlur: this.handleBlur,
-      error: !!(i.name && a.name),
-      errorMsg: i.name,
+      error: !!(a.name && i.name),
+      errorMsg: a.name,
       checkoutProfile: e,
       translationFunc: this.translation.t
     }), this.element.appendChild(this.cardholderSection.getElement());
@@ -1817,12 +1809,12 @@ class St extends d {
     }), this.element.appendChild(this.submitButton.getElement());
   }
   handleChange = (e) => {
-    const t = e.target, { name: i, value: a } = t;
-    this.formManager.handleChange(i, a);
+    const t = e.target, { name: a, value: i } = t;
+    this.formManager.handleChange(a, i);
   };
   handleBlur = (e) => {
-    const t = e.target, { name: i, value: a } = t;
-    this.formManager.handleBlur(i, a);
+    const t = e.target, { name: a, value: i } = t;
+    this.formManager.handleBlur(a, i);
   };
   updateFormUI() {
     const e = this.formManager.getFormState();
@@ -1845,15 +1837,22 @@ class St extends d {
       isCvvValid: !1
     };
     this.iframeHook && (t = this.iframeHook.getState());
-    const i = Object.keys(e.errors).length > 0, a = (
+    const a = Object.keys(e.errors).length > 0, i = (
       // 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 i || !a || this.isSubmitting;
+    return a || !i || this.isSubmitting;
+  }
+  setLoadingState(e) {
+    if (this.options.onLoadingStateChange) {
+      this.options.onLoadingStateChange(e);
+      return;
+    }
+    e ? (this.hideSpinner(), this.spinner = new N(), this.appendChild(this.spinner)) : this.hideSpinner();
   }
   showSpinner(e) {
-    this.hideSpinner(), this.spinner = new at({ text: e }), this.appendChild(this.spinner);
+    this.hideSpinner(), this.spinner = new N({ text: e }), this.appendChild(this.spinner);
   }
   hideSpinner() {
     this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
@@ -1901,7 +1900,7 @@ class St extends d {
    * Update the form error message
    */
   setErrorMessage(e) {
-    return this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new it({ message: e }), this.element.insertBefore(this.alert.getElement(), this.element.firstChild), this.getElement().style.opacity === "0" && this.animateFormVisibility(), this;
+    return this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new it({ message: e }), this.element.insertBefore(this.alert.getElement(), this.element.firstChild), this;
   }
   /**
    * Clean up resources when the form is destroyed
@@ -1935,7 +1934,8 @@ class xt {
       errorMsg: this.options.disableErrorMessages ? void 0 : e,
       profileId: this.options.profileId,
       container: this.container,
-      environment: this.options.environment
+      environment: this.options.environment,
+      onLoadingStateChange: this.options.onLoadingStateChange
     }));
   }
   unmount() {
@@ -1982,7 +1982,8 @@ class wt {
         apiKey: this.config.apiKey,
         profileId: this.config.profileId,
         disableErrorMessages: this.config.disableErrorMessages,
-        environment: this.config.environment
+        environment: this.config.environment,
+        onLoadingStateChange: this.config.callbacks.onLoadingStateChange
       },
       this.handleSubmit.bind(this)
     );
@@ -2005,7 +2006,8 @@ class wt {
       callbacks: {
         onPaymentSucceeded: e.callbacks?.onPaymentSucceeded || void 0,
         onPaymentFailed: e.callbacks?.onPaymentFailed || void 0,
-        onActionRequired: e.callbacks?.onActionRequired || void 0
+        onActionRequired: e.callbacks?.onActionRequired || void 0,
+        onLoadingStateChange: e.callbacks?.onLoadingStateChange || void 0
       }
     };
   }
@@ -2013,11 +2015,11 @@ class wt {
     const t = document.querySelector(e);
     if (!t)
       throw new Error(`Container ${e} not found`);
-    const i = document.createElement("div");
-    return t.appendChild(i), this.stateManager.updateState({
-      form: i,
+    const a = document.createElement("div");
+    return t.appendChild(a), this.stateManager.updateState({
+      form: a,
       mounted: !0
-    }), this.formManager.mount(i), this;
+    }), this.formManager.mount(a), this;
   }
   unmount() {
     const { mounted: e } = this.stateManager.getState();
@@ -2035,16 +2037,16 @@ class wt {
     formData: t
   }) {
     try {
-      const i = await this.apiService.authorizePayment({
+      const a = await this.apiService.authorizePayment({
         checkoutKey: this.config.checkoutKey,
         formData: t || null,
         token: e?.token || null,
         paymentId: this.config.paymentId,
         returnUrl: this.config.returnUrl
       });
-      this.handlePaymentResponse(i);
-    } catch (i) {
-      this.handleAuthorizationError(i);
+      this.handlePaymentResponse(a);
+    } catch (a) {
+      this.handleAuthorizationError(a);
     }
   }
   handlePaymentResponse(e) {
@@ -2064,11 +2066,11 @@ class wt {
 typeof globalThis < "u" && (globalThis.OdusCheckout = wt);
 export {
   wt as OdusCheckout,
-  ae as deLocale,
-  me as enLocale,
-  Ce as esLocale,
-  Ie as frLocale,
-  Be as plLocale,
-  Ze as ptLocale
+  se as deLocale,
+  ue as enLocale,
+  Se as esLocale,
+  ze as frLocale,
+  Oe as plLocale,
+  Ye as ptLocale
 };
 //# sourceMappingURL=checkout.es.js.map