@odus/checkout 0.5.3 → 0.5.4

package/dist/checkout.es.js

@@ -469,24 +469,24 @@ const z = {
     const E = {
       ...d.formData,
       [l]: u
-    }, v = { ...d.errors };
+    }, y = { ...d.errors };
     if (d.touched[l]) {
       const m = t(l, u);
-      m ? v[l] = m : delete v[l];
+      m ? y[l] = m : delete y[l];
     }
     e.setState({
       formData: E,
-      errors: v,
+      errors: y,
       isValid: i(E)
     });
   }, s = (l, c) => {
     const d = e.getState(), u = {
       ...d.touched,
       [l]: !0
-    }, E = t(l, c), v = { ...d.errors };
-    E ? v[l] = E : delete v[l], e.setState({
+    }, E = t(l, c), y = { ...d.errors };
+    E ? y[l] = E : delete y[l], e.setState({
       touched: u,
-      errors: v
+      errors: y
     });
   }, o = (l) => {
     const d = {
@@ -645,8 +645,8 @@ function Q({
         if (C && b)
           try {
             l();
-          } catch (y) {
-            console.error("Failed to create TokenEx iframe:", y);
+          } catch (v) {
+            console.error("Failed to create TokenEx iframe:", v);
           }
         else m < g && f();
       }, p);
@@ -677,7 +677,7 @@ function Q({
     n && await o();
   }, E = () => {
     s && (s.remove(), s = null);
-  }, v = async (m) => {
+  }, y = async (m) => {
     s && (s.on("tokenize", async function(g) {
       await m(g);
     }), s.tokenize());
@@ -685,7 +685,7 @@ function Q({
   return {
     getState: r.getState.bind(r),
     subscribe: r.subscribe.bind(r),
-    tokenize: v,
+    tokenize: y,
     cleanup: E,
     initialize: u
   };
@@ -699,7 +699,7 @@ const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ae = "Kartendaten", i
   loading: se,
   buttonTexts: ne,
   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" }, ve = {
+}, 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,
   cardholderNameLabel: de,
   cardInformation: he,
@@ -708,8 +708,8 @@ const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ae = "Kartendaten", i
   loading: pe,
   buttonTexts: fe,
   validation: ge
-}, ye = "Correo electrónico", Ee = "Nombre del titular de la tarjeta", be = "Información de la tarjeta", Ce = "Nombre completo en la tarjeta", Se = "MM / AA", xe = "Por favor, no cierre esta ventana", Fe = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, we = { 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" }, Le = {
-  email: ye,
+}, ve = "Correo electrónico", Ee = "Nombre del titular de la tarjeta", be = "Información de la tarjeta", Ce = "Nombre completo en la tarjeta", Se = "MM / AA", xe = "Por favor, no cierre esta ventana", Fe = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, we = { 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" }, Le = {
+  email: ve,
   cardholderNameLabel: Ee,
   cardInformation: be,
   cardholderNamePlaceholder: Ce,
@@ -753,7 +753,7 @@ const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ae = "Kartendaten", i
   loading: st,
   buttonTexts: nt,
   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" }, vt = {
+}, 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,
   cardholderNameLabel: dt,
   cardInformation: ht,
@@ -763,17 +763,17 @@ const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ae = "Kartendaten", i
   buttonTexts: ft,
   validation: gt
 }, N = {
-  en: ve,
+  en: ye,
   de: le,
   es: Le,
   fr: De,
   pl: Qe,
   pt: lt,
-  tr: vt,
+  tr: yt,
   it: Ue
   // Add other locales here
 };
-class yt {
+class vt {
   locale;
   loadedLocales = /* @__PURE__ */ new Set();
   constructor(e = "en") {
@@ -822,7 +822,7 @@ const A = [
   "tr"
 ], Et = "en";
 function bt(n) {
-  const e = new yt(), a = (() => {
+  const e = new vt(), a = (() => {
     const o = navigator?.language?.split("-")[0]?.toLowerCase();
     return A.includes(o) ? o : Et;
   })();
@@ -1411,7 +1411,7 @@ class Pt extends h {
       cardExpiryError: d,
       cardExpiryTouched: u,
       onChange: E,
-      onBlur: v,
+      onBlur: y,
       translationFunc: m,
       cardExpiryAutocomplete: g = "cc-exp"
     } = e, f = document.createElement("div");
@@ -1434,8 +1434,8 @@ class Pt extends h {
       errorMsg: d,
       value: c,
       autocomplete: g,
-      onChange: (y) => {
-        this.trimCardExpiry(), E(y);
+      onChange: (v) => {
+        this.trimCardExpiry(), E(v);
       },
       styles: {
         color: t.styles.textColor,
@@ -1443,8 +1443,8 @@ class Pt extends h {
         fontSize: t.styles.fontSize,
         fontFamily: t.styles.fontFamily
       }
-    }), this.cardExpiry.addEventListener("blur", v), this.cardExpiry.addEventListener("keydown", (y) => {
-      const M = y;
+    }), this.cardExpiry.addEventListener("blur", y), this.cardExpiry.addEventListener("keydown", (v) => {
+      const M = v;
       ![
         "Backspace",
         "Delete",
@@ -1463,16 +1463,16 @@ 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) {
-      const y = new x({
+      const v = new x({
         text: m("validation.cardNumberInvalid")
       });
-      this.validationMessages.set("cardNumber", y), this.appendChild(y);
+      this.validationMessages.set("cardNumber", v), this.appendChild(v);
     }
     if (r && !o) {
-      const y = new x({
+      const v = new x({
         text: m("validation.cardSecurityFormat")
       });
-      this.validationMessages.set("cardCvv", y), this.appendChild(y);
+      this.validationMessages.set("cardCvv", v), this.appendChild(v);
     }
   }
   updateCardType(e) {
@@ -1775,7 +1775,11 @@ class Ut extends h {
         const { inputStyles: t, formContainerStyle: a } = Ft(
           e.checkoutProfile
         );
-        this.applyFormContainerStyles(a), this.iframeHook = Q({
+        this.applyFormContainerStyles(a), 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,
@@ -1783,9 +1787,11 @@ class Ut extends h {
             this.formManager.setFormData(i);
           },
           environment: this.options.environment
-        }), this.iframeHook?.subscribe(this.handleIframeStateChange), await this.iframeHook?.initialize();
-      } catch {
-        this.setErrorMessage("Failed to initialize payment form");
+        }), 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");
       }
     else e.checkoutProfile || this.setErrorMessage(
       "Cannot initialize iframe: No checkout profile available"
@@ -1814,7 +1820,7 @@ class Ut extends h {
           isCvvValid: !1,
           possibleCardType: "unknown"
         };
-        this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new Pt({
+        if (this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new Pt({
           checkoutProfile: e,
           isLoading: r.loadingIframe,
           isFocused: r.isFocused,
@@ -1828,9 +1834,24 @@ class Ut extends h {
           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;
-      } catch {
-        this.setErrorMessage("Card section temporarily unavailabl");
+        }), this.emailField && this.cardholderSection)
+          this.element.insertBefore(
+            this.cardSection.getElement(),
+            this.cardholderSection.getElement()
+          );
+        else if (this.emailField) {
+          const s = this.emailField.getElement().nextSibling;
+          s ? this.element.insertBefore(
+            this.cardSection.getElement(),
+            s
+          ) : this.element.appendChild(this.cardSection.getElement());
+        } else
+          this.element.appendChild(this.cardSection.getElement()), console.warn(
+            "Card section inserted at end of form - component order may be incorrect"
+          );
+        this.updateFormUI(), this.cardSection && this.emailField && this.cardholderSection && this.submitButton;
+      } catch (t) {
+        console.error("Error creating card section:", t), this.setErrorMessage("Card section temporarily unavailable");
       }
   };
   initializeForm() {
@@ -1856,13 +1877,11 @@ class Ut extends h {
           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), console.log("✅ Form components rendered successfully:", {
-          cardElementExists: !!document.getElementById("card-element"),
-          cvvElementExists: !!document.getElementById("card-cvv-element"),
+        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 {
-        this.setErrorMessage("Failed to render checkout form components");
+      } catch (e) {
+        console.error("Failed to render form components:", e), this.setErrorMessage("Failed to render checkout form components");
       }
     }
   }
@@ -2170,11 +2189,11 @@ typeof globalThis < "u" && (globalThis.OdusCheckout = Yt);
 export {
   Yt as OdusCheckout,
   le as deLocale,
-  ve as enLocale,
+  ye as enLocale,
   Le as esLocale,
   De as frLocale,
   Ue as itLocale,
   Qe as plLocale,
   lt as ptLocale,
-  vt as trLocale
+  yt as trLocale
 };

package/dist/package.json

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

package/package.json

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