@odus/checkout 0.3.0 → 0.5.1

package/dist/checkout.es.js

@@ -1,7 +1,4 @@
-const L = (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(" ") || [], [a] = t.reverse();
-  return { firstName: e, lastName: a };
-};
+const L = (n) => n === "test" ? "https://sandbox-api.odus.com" : n === "live" ? "https://api.odus.com" : "http://localhost:3000";
 class $ {
   apiKey;
   baseUrl;
@@ -60,7 +57,7 @@ class $ {
   }) {
     let r = {};
     if (i && a) {
-      const o = a.cardExpiry.replace(/\s+/g, "").split("/"), l = o[0], c = o[1], { firstName: h, lastName: m } = D({ name: a.name });
+      const o = a.cardExpiry.replace(/\s+/g, "").split("/"), l = o[0], c = o[1];
       r = {
         paymentMethodData: {
           type: "card",
@@ -73,8 +70,7 @@ class $ {
         },
         customerData: {
           email: a.email,
-          firstName: h,
-          lastName: m
+          name: a.name
         },
         context: {
           returnUrl: s,
@@ -238,7 +234,7 @@ function H({
     reload: i
   };
 }
-const T = {
+const I = {
   cardNumber: (n) => (n.replace(/\s/g, "").match(/.{1,4}/g) || []).join(" "),
   cardExpiry: (n) => {
     const t = n.replace(/\D/g, "").slice(0, 4);
@@ -433,10 +429,10 @@ const T = {
       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(i, 10), h = parseInt(s, 10);
+      const r = /* @__PURE__ */ new Date(), o = r.getFullYear() % 100, l = r.getMonth() + 1, c = parseInt(i, 10), d = parseInt(s, 10);
       if (c < 1 || c > 12)
         return n("validation.cardExpiryFormat");
-      if (h < o || h === o && c < l)
+      if (d < o || d === o && c < l)
         return n("validation.cardExpiryInvalid");
     }
   };
@@ -455,26 +451,26 @@ const T = {
     },
     isValid: !1
   }), t = (l, c) => {
-    const h = n[l];
-    return h?.(c);
+    const d = n[l];
+    return d?.(c);
   }, a = (l) => {
     const c = {};
-    return Object.keys(l).forEach((h) => {
-      const m = t(h, l[h]);
-      m && (c[h] = m);
+    return Object.keys(l).forEach((d) => {
+      const m = t(d, l[d]);
+      m && (c[d] = m);
     }), c;
   }, i = (l) => {
     const c = a(l);
     return Object.keys(c).length === 0;
   }, s = (l, c) => {
-    const h = e.getState();
+    const d = e.getState();
     let m = c;
-    l in T && (m = T[l](c));
+    l in I && (m = I[l](c));
     const u = {
-      ...h.formData,
+      ...d.formData,
       [l]: m
-    }, p = { ...h.errors };
-    if (h.touched[l]) {
+    }, p = { ...d.errors };
+    if (d.touched[l]) {
       const f = t(l, m);
       f ? p[l] = f : delete p[l];
     }
@@ -484,22 +480,22 @@ const T = {
       isValid: i(u)
     });
   }, r = (l, c) => {
-    const h = e.getState(), m = {
-      ...h.touched,
+    const d = e.getState(), m = {
+      ...d.touched,
       [l]: !0
-    }, u = t(l, c), p = { ...h.errors };
+    }, u = t(l, c), p = { ...d.errors };
     u ? p[l] = u : delete p[l], e.setState({
       touched: m,
       errors: p
     });
   }, o = (l) => {
-    const h = {
+    const d = {
       ...e.getState().formData,
       ...l
     };
     e.setState({
-      formData: h,
-      isValid: i(h)
+      formData: d,
+      isValid: i(d)
     });
   };
   return {
@@ -630,7 +626,7 @@ function Z({
   n && o();
   const c = () => {
     r && (r.remove(), r = null);
-  }, h = async (m) => {
+  }, d = async (m) => {
     r && (r.on("tokenize", async function(u) {
       await m(u);
     }), r.tokenize());
@@ -638,7 +634,7 @@ function Z({
   return {
     getState: s.getState.bind(s),
     subscribe: s.subscribe.bind(s),
-    tokenize: h,
+    tokenize: d,
     cleanup: c
   };
 }
@@ -669,15 +665,15 @@ const J = "E-Mail", W = "Name des/der Karteninhaber/in", X = "Kartendaten", Q =
   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" }, Ne = {
+}, 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", Ie = { 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" }, Ne = {
   email: xe,
   cardholderNameLabel: Fe,
   cardInformation: we,
   cardholderNamePlaceholder: Le,
   cardExpiry: Me,
   loading: ke,
-  buttonTexts: Te,
-  validation: Ie
+  buttonTexts: Ie,
+  validation: Te
 }, ze = "Email", Pe = "Nome del titolare della carta", Ae = "Informazioni sulla carta", De = "Nome completo sulla carta", $e = "MM / AA", Ve = "Non chiudere la finestra", Re = { pay: "PAGA", submit: "INVIA", getPlan: "OTTIENI IL MIO PIANO", donate: "DONARE", book: "PRENOTA ORA", order: "ORDINA ORA" }, Be = { emailSuggestion: "Intendevi {{email}}?", emailInvalid: "La tua email non è corretta", cardExpiryInvalid: "La data di scadenza della tua carta è nel passato", cardExpiryFormat: "La data di scadenza della tua carta è incompleta", cardSecurityFormat: "Il codice di sicurezza della tua carta è incompleto", nameRequired: "Inserisci il nome come appare sulla tua carta", cardNumberInvalid: "Il numero della tua carta non è valido" }, Oe = {
   email: ze,
   cardholderNameLabel: Pe,
@@ -714,7 +710,7 @@ const J = "E-Mail", W = "Name des/der Karteninhaber/in", X = "Kartendaten", Q =
   loading: dt,
   buttonTexts: ht,
   validation: mt
-}, I = {
+}, T = {
   en: ue,
   de: se,
   es: Se,
@@ -743,7 +739,7 @@ class pt {
   }
   /* eslint-disable @typescript-eslint/no-explicit-any */
   getNestedTranslation(e) {
-    const t = this.locale in I ? I[this.locale] : {}, a = this.findNestedValue(t, e);
+    const t = this.locale in T ? T[this.locale] : {}, a = this.findNestedValue(t, e);
     return a === void 0 ? e : a;
   }
   findNestedValue(e, t) {
@@ -912,7 +908,7 @@ function bt(n) {
     inputStyles: r
   };
 }
-class d {
+class h {
   element;
   children = [];
   eventListeners = [];
@@ -974,7 +970,7 @@ class d {
    * Append this component to a parent element
    */
   appendTo(e) {
-    return e instanceof d ? e.appendChild(this) : e.appendChild(this.element), this;
+    return e instanceof h ? e.appendChild(this) : e.appendChild(this.element), this;
   }
   /**
    * Add an event listener to the element
@@ -1014,19 +1010,19 @@ class y {
    * Create a div element
    */
   static createDiv(e = [], t = {}) {
-    return new d("div", e, t);
+    return new h("div", e, t);
   }
   /**
    * Create a span element
    */
   static createSpan(e = [], t = {}) {
-    return new d("span", e, t);
+    return new h("span", e, t);
   }
   /**
    * Create a button element
    */
   static createButton(e, t = [], a = {}) {
-    const i = new d("button", t, a);
+    const i = new h("button", t, a);
     return i.setText(e), i;
   }
   /**
@@ -1034,7 +1030,7 @@ class y {
    */
   static createInput(e, t = [], a = {}) {
     const i = { type: e, ...a };
-    return new d("input", t, i);
+    return new h("input", t, i);
   }
   /**
    * Create a text input
@@ -1045,26 +1041,26 @@ class y {
       placeholder: e,
       ...a
     };
-    return new d("input", t, i);
+    return new h("input", t, i);
   }
   /**
    * Create a form element
    */
   static createForm(e = [], t = {}) {
-    return new d("form", e, t);
+    return new h("form", e, t);
   }
   /**
    * Create a label element
    */
   static createLabel(e, t = "", a = [], i = {}) {
-    const s = t ? { for: t, ...i } : i, r = new d("label", a, s);
+    const s = t ? { for: t, ...i } : i, r = new h("label", a, s);
     return r.setText(e), r;
   }
   /**
    * Create a select element
    */
   static createSelect(e, t = [], a = {}) {
-    const i = new d("select", t, a);
+    const i = new h("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), i.getElement().appendChild(r);
@@ -1075,10 +1071,10 @@ class y {
    */
   static createImage(e, t = "", a = [], i = {}) {
     const s = { src: e, alt: t, ...i };
-    return new d("img", a, s);
+    return new h("img", a, s);
   }
 }
-class Ct extends d {
+class Ct extends h {
   messageComponent;
   constructor(e) {
     super("div", []);
@@ -1091,10 +1087,10 @@ class Ct extends d {
     i.getElement().innerHTML = this.createAlertCircleSVG();
     const s = y.createDiv([
       "error-alert-text-container"
-    ]), r = new d("h4", [
+    ]), r = new h("h4", [
       "error-alert-title"
     ]);
-    r.setText("Checkout Error"), this.messageComponent = new d("p", [
+    r.setText("Checkout Error"), this.messageComponent = new h("p", [
       "error-alert-message"
     ]), 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);
   }
@@ -1121,18 +1117,18 @@ class Ct extends d {
     return this.messageComponent.setText(e), this;
   }
 }
-class z extends d {
+class z extends h {
   titleElement;
   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 h("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
   }
   setText(e) {
     return this.titleElement.setText(e), this;
   }
 }
-class v extends d {
+class v extends h {
   constructor(e) {
     super("div", []);
     const t = document.createElement("span");
@@ -1143,7 +1139,7 @@ class v extends d {
     return t && (t.textContent = e), this;
   }
 }
-class St extends d {
+class St extends h {
   constructor(e) {
     super("label", ["input-label"], {
       for: e.id
@@ -1152,7 +1148,7 @@ class St extends d {
     t.style.fontFamily = "inherit", t.style.color = e.styles.color, t.style.fontSize = `${e.styles.fontSize}px`;
   }
 }
-class k extends d {
+class k extends h {
   inputElement;
   helperText = null;
   constructor(e) {
@@ -1172,7 +1168,7 @@ class k extends d {
       name: e.name,
       class: `form-input ${e.error ? "form-input-error" : ""}`
     };
-    if (e.placeholder && (t.placeholder = e.placeholder), e.value && (t.value = e.value), e.required && (t.required = String(e.required)), e.disabled && (t.disabled = String(e.disabled)), this.inputElement = y.createInput(
+    if (e.placeholder && (t.placeholder = e.placeholder), e.value && (t.value = e.value), e.required && (t.required = String(e.required)), e.disabled && (t.disabled = String(e.disabled)), e.autocomplete && (t.autocomplete = e.autocomplete), this.inputElement = y.createInput(
       e.type || "text",
       [],
       t
@@ -1206,7 +1202,8 @@ class xt {
       error: s,
       errorMsg: r,
       checkoutProfile: o,
-      translationFunc: l
+      translationFunc: l,
+      autocomplete: c = "cc-name"
     } = e;
     this.input = new k({
       name: "name",
@@ -1221,11 +1218,12 @@ class xt {
       },
       placeholder: l("cardholderNamePlaceholder"),
       value: t,
-      onChange: (c) => {
-        this.trim(), a(c);
+      autocomplete: c,
+      onChange: (d) => {
+        this.trim(), a(d);
       }
-    }), this.input.addEventListener("blur", (c) => {
-      i(c);
+    }), this.input.addEventListener("blur", (d) => {
+      i(d);
     });
   }
   getValue() {
@@ -1248,7 +1246,7 @@ class xt {
     return this.input.appendTo(e), this;
   }
 }
-class Ft extends d {
+class Ft extends h {
   constructor(e) {
     super("div", []);
     const t = document.createElement("div");
@@ -1283,7 +1281,7 @@ const wt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%
     imgSrc: Lt
   }
 ];
-class Tt extends d {
+class It extends h {
   cardType;
   constructor(e) {
     super("div", []), this.cardType = e.cardType;
@@ -1342,7 +1340,7 @@ class Tt extends d {
     return this;
   }
 }
-class It extends d {
+class Tt extends h {
   cardNumber;
   cardExpiry;
   cardCvv;
@@ -1358,13 +1356,14 @@ class It extends d {
       isCvvValid: o,
       cardType: l,
       cardExpiry: c,
-      cardExpiryError: h,
+      cardExpiryError: d,
       cardExpiryTouched: m,
       onChange: u,
       onBlur: p,
-      translationFunc: f
+      translationFunc: f,
+      cardExpiryAutocomplete: A = "cc-exp"
     } = e, b = document.createElement("div");
-    b.className = "card-grid", this.cardNumber = new Tt({
+    b.className = "card-grid", this.cardNumber = new It({
       styles: {
         color: t.styles.textColor,
         fontSize: t.styles.fontSize,
@@ -1379,9 +1378,10 @@ class It extends d {
     C.className = "card-details", this.cardExpiry = new k({
       name: "cardExpiry",
       placeholder: f("cardExpiry"),
-      error: !!(h && m),
-      errorMsg: h,
+      error: !!(d && m),
+      errorMsg: d,
       value: c,
+      autocomplete: A,
       onChange: (g) => {
         this.trimCardExpiry(), u(g);
       },
@@ -1401,8 +1401,8 @@ class It extends d {
         "Tab"
       ].includes(w.key) && !/^\d$/.test(w.key) && w.preventDefault();
     });
-    const A = this.cardExpiry.getElement();
-    A.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 Ft({
       styles: {
@@ -1478,7 +1478,8 @@ class Nt {
       error: s,
       errorMsg: r,
       checkoutProfile: o,
-      translationFunc: l
+      translationFunc: l,
+      autocomplete: c = "email"
     } = e;
     this.input = new k({
       name: "email",
@@ -1494,9 +1495,10 @@ class Nt {
       placeholder: l("email"),
       type: "email",
       value: t,
+      autocomplete: c,
       // Wrap the original onChange to apply trim before calling it
-      onChange: (c) => {
-        this.trim(), a(c);
+      onChange: (d) => {
+        this.trim(), a(d);
       }
     }), this.input.addEventListener("blur", i);
   }
@@ -1521,7 +1523,7 @@ class Nt {
   }
 }
 const zt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='101px'%20height='32'%20viewBox='0%200%20101%2032'%20preserveAspectRatio='xMinYMin%20meet'%3e%3cpath%20fill='%23003087'%20d='M%2012.237%202.8%20L%204.437%202.8%20C%203.937%202.8%203.437%203.2%203.337%203.7%20L%200.237%2023.7%20C%200.137%2024.1%200.437%2024.4%200.837%2024.4%20L%204.537%2024.4%20C%205.037%2024.4%205.537%2024%205.637%2023.5%20L%206.437%2018.1%20C%206.537%2017.6%206.937%2017.2%207.537%2017.2%20L%2010.037%2017.2%20C%2015.137%2017.2%2018.137%2014.7%2018.937%209.8%20C%2019.237%207.7%2018.937%206%2017.937%204.8%20C%2016.837%203.5%2014.837%202.8%2012.237%202.8%20Z%20M%2013.137%2010.1%20C%2012.737%2012.9%2010.537%2012.9%208.537%2012.9%20L%207.337%2012.9%20L%208.137%207.7%20C%208.137%207.4%208.437%207.2%208.737%207.2%20L%209.237%207.2%20C%2010.637%207.2%2011.937%207.2%2012.637%208%20C%2013.137%208.4%2013.337%209.1%2013.137%2010.1%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2035.437%2010%20L%2031.737%2010%20C%2031.437%2010%2031.137%2010.2%2031.137%2010.5%20L%2030.937%2011.5%20L%2030.637%2011.1%20C%2029.837%209.9%2028.037%209.5%2026.237%209.5%20C%2022.137%209.5%2018.637%2012.6%2017.937%2017%20C%2017.537%2019.2%2018.037%2021.3%2019.337%2022.7%20C%2020.437%2024%2022.137%2024.6%2024.037%2024.6%20C%2027.337%2024.6%2029.237%2022.5%2029.237%2022.5%20L%2029.037%2023.5%20C%2028.937%2023.9%2029.237%2024.3%2029.637%2024.3%20L%2033.037%2024.3%20C%2033.537%2024.3%2034.037%2023.9%2034.137%2023.4%20L%2036.137%2010.6%20C%2036.237%2010.4%2035.837%2010%2035.437%2010%20Z%20M%2030.337%2017.2%20C%2029.937%2019.3%2028.337%2020.8%2026.137%2020.8%20C%2025.037%2020.8%2024.237%2020.5%2023.637%2019.8%20C%2023.037%2019.1%2022.837%2018.2%2023.037%2017.2%20C%2023.337%2015.1%2025.137%2013.6%2027.237%2013.6%20C%2028.337%2013.6%2029.137%2014%2029.737%2014.6%20C%2030.237%2015.3%2030.437%2016.2%2030.337%2017.2%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2055.337%2010%20L%2051.637%2010%20C%2051.237%2010%2050.937%2010.2%2050.737%2010.5%20L%2045.537%2018.1%20L%2043.337%2010.8%20C%2043.237%2010.3%2042.737%2010%2042.337%2010%20L%2038.637%2010%20C%2038.237%2010%2037.837%2010.4%2038.037%2010.9%20L%2042.137%2023%20L%2038.237%2028.4%20C%2037.937%2028.8%2038.237%2029.4%2038.737%2029.4%20L%2042.437%2029.4%20C%2042.837%2029.4%2043.137%2029.2%2043.337%2028.9%20L%2055.837%2010.9%20C%2056.137%2010.6%2055.837%2010%2055.337%2010%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2067.737%202.8%20L%2059.937%202.8%20C%2059.437%202.8%2058.937%203.2%2058.837%203.7%20L%2055.737%2023.6%20C%2055.637%2024%2055.937%2024.3%2056.337%2024.3%20L%2060.337%2024.3%20C%2060.737%2024.3%2061.037%2024%2061.037%2023.7%20L%2061.937%2018%20C%2062.037%2017.5%2062.437%2017.1%2063.037%2017.1%20L%2065.537%2017.1%20C%2070.637%2017.1%2073.637%2014.6%2074.437%209.7%20C%2074.737%207.6%2074.437%205.9%2073.437%204.7%20C%2072.237%203.5%2070.337%202.8%2067.737%202.8%20Z%20M%2068.637%2010.1%20C%2068.237%2012.9%2066.037%2012.9%2064.037%2012.9%20L%2062.837%2012.9%20L%2063.637%207.7%20C%2063.637%207.4%2063.937%207.2%2064.237%207.2%20L%2064.737%207.2%20C%2066.137%207.2%2067.437%207.2%2068.137%208%20C%2068.637%208.4%2068.737%209.1%2068.637%2010.1%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2090.937%2010%20L%2087.237%2010%20C%2086.937%2010%2086.637%2010.2%2086.637%2010.5%20L%2086.437%2011.5%20L%2086.137%2011.1%20C%2085.337%209.9%2083.537%209.5%2081.737%209.5%20C%2077.637%209.5%2074.137%2012.6%2073.437%2017%20C%2073.037%2019.2%2073.537%2021.3%2074.837%2022.7%20C%2075.937%2024%2077.637%2024.6%2079.537%2024.6%20C%2082.837%2024.6%2084.737%2022.5%2084.737%2022.5%20L%2084.537%2023.5%20C%2084.437%2023.9%2084.737%2024.3%2085.137%2024.3%20L%2088.537%2024.3%20C%2089.037%2024.3%2089.537%2023.9%2089.637%2023.4%20L%2091.637%2010.6%20C%2091.637%2010.4%2091.337%2010%2090.937%2010%20Z%20M%2085.737%2017.2%20C%2085.337%2019.3%2083.737%2020.8%2081.537%2020.8%20C%2080.437%2020.8%2079.637%2020.5%2079.037%2019.8%20C%2078.437%2019.1%2078.237%2018.2%2078.437%2017.2%20C%2078.737%2015.1%2080.537%2013.6%2082.637%2013.6%20C%2083.737%2013.6%2084.537%2014%2085.137%2014.6%20C%2085.737%2015.3%2085.937%2016.2%2085.737%2017.2%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2095.337%203.3%20L%2092.137%2023.6%20C%2092.037%2024%2092.337%2024.3%2092.737%2024.3%20L%2095.937%2024.3%20C%2096.437%2024.3%2096.937%2023.9%2097.037%2023.4%20L%20100.237%203.5%20C%20100.337%203.1%20100.037%202.8%2099.637%202.8%20L%2096.037%202.8%20C%2095.637%202.8%2095.437%203%2095.337%203.3%20Z'/%3e%3c/svg%3e";
-class Pt extends d {
+class Pt extends h {
   formData;
   onSubmit;
   isSubmitting = !1;
@@ -1553,7 +1555,7 @@ class Pt extends d {
     return this.isSubmitting = e, this.getElement().style.opacity = e ? "0.7" : "1", this;
   }
 }
-class At extends d {
+class At extends h {
   paymentMethods;
   constructor(e) {
     const { checkoutProfile: t, formData: a, onPaypalSubmit: i } = e;
@@ -1593,7 +1595,7 @@ class At extends d {
   }
 }
 const Dt = 17;
-class $t extends d {
+class $t extends h {
   styles;
   isHovered = !1;
   constructor(e) {
@@ -1648,7 +1650,7 @@ class Vt {
   }
 }
 const Rt = "https://test-htp.tokenex.com/Iframe/Iframe-v3.min.js", Bt = "https://htp.tokenex.com/iframe/iframe-v3.min.js";
-class Ot extends d {
+class Ot extends h {
   options;
   isSubmitting = !1;
   scriptCleanup;
@@ -1731,7 +1733,9 @@ class Ot extends d {
       } catch {
         this.setErrorMessage("Failed to initialize payment form");
       }
-    else e.checkoutProfile ? this.iframeHook && console.log("TokenEx iframe already initialized") : console.error("Cannot initialize iframe: No checkout profile available");
+    else e.checkoutProfile || this.setErrorMessage(
+      "Cannot initialize iframe: No checkout profile available"
+    );
   };
   handleIframeStateChange = (e) => {
     this.cardSection && (this.cardSection.updateCardNumberValidation(
@@ -1748,7 +1752,7 @@ class Ot extends d {
     if (this.iframeHook && !this.cardSection)
       try {
         const { formData: t, errors: a, touched: i } = this._getFormStateData(), s = this.iframeHook.getState();
-        this.cardSection = new It({
+        this.cardSection = new Tt({
           checkoutProfile: e,
           isLoading: s.loadingIframe,
           isFocused: s.isFocused,

package/dist/package.json

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

package/package.json

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