@odus/checkout 0.5.5 → 0.5.7

package/dist/checkout.es.js

@@ -469,24 +469,24 @@ const z = {
     const E = {
       ...d.formData,
       [l]: u
-    }, y = { ...d.errors };
+    }, g = { ...d.errors };
     if (d.touched[l]) {
       const m = t(l, u);
-      m ? y[l] = m : delete y[l];
+      m ? g[l] = m : delete g[l];
     }
     e.setState({
       formData: E,
-      errors: y,
+      errors: g,
       isValid: i(E)
     });
   }, n = (l, c) => {
     const d = e.getState(), u = {
       ...d.touched,
       [l]: !0
-    }, E = t(l, c), y = { ...d.errors };
-    E ? y[l] = E : delete y[l], e.setState({
+    }, E = t(l, c), g = { ...d.errors };
+    E ? g[l] = E : delete g[l], e.setState({
       touched: u,
-      errors: y
+      errors: g
     });
   }, o = (l) => {
     const d = {
@@ -566,11 +566,11 @@ function Q({
     const m = r.getState();
     if (!m.iframeConfig || !e)
       return;
-    const g = document.getElementById("card-element"), f = document.getElementById("card-cvv-element");
-    if (!g || !f)
+    const y = document.getElementById("card-element"), f = document.getElementById("card-cvv-element");
+    if (!y || !f)
       throw new Error("Card elements not found in DOM");
     console.log("✅ TokenEx iframe initializing successfully:", {
-      cardElementId: g.id,
+      cardElementId: y.id,
       cvvElementId: f.id,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     }), n = new globalThis.TokenEx.Iframe("card-element", {
@@ -627,12 +627,12 @@ function Q({
     ), n.load();
   }, c = () => {
     let m = 0;
-    const g = X;
+    const y = X;
     console.warn(
       "Card elements not found in DOM, retrying iframe initialization..."
     );
     const f = () => {
-      if (m++, m > g) {
+      if (m++, m > y) {
         console.error("Failed to find card elements after maximum retries");
         return;
       }
@@ -648,7 +648,7 @@ function Q({
           } catch (v) {
             console.error("Failed to create TokenEx iframe:", v);
           }
-        else m < g && f();
+        else m < y && f();
       }, p);
     };
     f();
@@ -659,12 +659,8 @@ function Q({
       console.error("TokenEx script not loaded correctly");
       return;
     }
-    const g = document.getElementById("card-element"), f = document.getElementById("card-cvv-element");
-    if (console.log("🔍 TokenEx iframe initialization check:", {
-      cardElementExists: !!g,
-      cvvElementExists: !!f,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    }), !g || !f) {
+    const y = document.getElementById("card-element"), f = document.getElementById("card-cvv-element");
+    if (!y || !f) {
       c();
       return;
     }
@@ -677,15 +673,15 @@ function Q({
     s && await o();
   }, E = () => {
     n && (n.remove(), n = null);
-  }, y = async (m) => {
-    n && (n.on("tokenize", async function(g) {
-      await m(g);
+  }, g = async (m) => {
+    n && (n.on("tokenize", async function(y) {
+      await m(y);
     }), n.tokenize());
   };
   return {
     getState: r.getState.bind(r),
     subscribe: r.subscribe.bind(r),
-    tokenize: y,
+    tokenize: g,
     cleanup: E,
     initialize: u
   };
@@ -1411,9 +1407,9 @@ class Pt extends h {
       cardExpiryError: d,
       cardExpiryTouched: u,
       onChange: E,
-      onBlur: y,
+      onBlur: g,
       translationFunc: m,
-      cardExpiryAutocomplete: g = "cc-exp"
+      cardExpiryAutocomplete: y = "cc-exp"
     } = e, f = document.createElement("div");
     f.className = "card-grid", this.cardNumber = new At({
       styles: {
@@ -1433,7 +1429,7 @@ class Pt extends h {
       error: !!(d && u),
       errorMsg: d,
       value: c,
-      autocomplete: g,
+      autocomplete: y,
       onChange: (v) => {
         this.trimCardExpiry(), E(v);
       },
@@ -1443,7 +1439,7 @@ class Pt extends h {
         fontSize: t.styles.fontSize,
         fontFamily: t.styles.fontFamily
       }
-    }), this.cardExpiry.addEventListener("blur", y), this.cardExpiry.addEventListener("keydown", (v) => {
+    }), this.cardExpiry.addEventListener("blur", g), this.cardExpiry.addEventListener("keydown", (v) => {
       const M = v;
       ![
         "Backspace",
@@ -1611,18 +1607,17 @@ class Vt extends h {
   paymentMethods;
   constructor(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";
+    if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
+      this.getElement().style.display = "none";
       return;
     }
     const r = Object.entries(
       t.additionalPaymentMethods
     ).filter(([, n]) => n.enabled).sort((n, o) => n[1].order - o[1].order);
     if (r.length === 0) {
-      super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), this.getElement().style.display = "none";
+      this.getElement().style.display = "none";
       return;
     }
-    super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map();
     for (const [n] of r)
       switch (n) {
         case "paypal": {
@@ -1774,51 +1769,48 @@ class Ut extends h {
       console.error("Cannot initialize iframe: No checkout profile available");
       return;
     }
-    if (this.iframeHook) {
-      console.log("TokenEx iframe already initialized, skipping");
-      return;
-    }
-    try {
-      if (!("TokenEx" in globalThis))
-        return console.log("TokenEx not available yet, retrying..."), new Promise((n) => {
-          setTimeout(() => {
-            this.initializeTokenExIframe().then(n);
-          }, 500);
-        });
-      const { inputStyles: t, formContainerStyle: a } = Ft(
-        e.checkoutProfile
-      );
-      this.applyFormContainerStyles(a);
+    if (!this.iframeHook)
       try {
-        this.cardSection || (this.createCardSection(e.checkoutProfile), console.log("✅ Card element check before iframe initialization:", {
-          cardElementExists: !!document.getElementById("card-element"),
-          cvvElementExists: !!document.getElementById("card-cvv-element"),
-          timestamp: (/* @__PURE__ */ new Date()).toISOString()
-        }));
-      } catch (n) {
-        console.error("Failed to create card section:", n);
-      }
-      const i = document.getElementById("card-element"), r = document.getElementById("card-cvv-element");
-      if (!i || !r) {
-        console.error(
-          "Card elements not found, cannot initialize TokenEx iframe"
+        if (!("TokenEx" in globalThis))
+          return new Promise((n) => {
+            setTimeout(() => {
+              this.initializeTokenExIframe().then(n);
+            }, 500);
+          });
+        const { inputStyles: t, formContainerStyle: a } = Ft(
+          e.checkoutProfile
         );
-        return;
+        this.applyFormContainerStyles(a);
+        try {
+          this.cardSection || (this.createCardSection(e.checkoutProfile), console.log("✅ Card element check before iframe initialization:", {
+            cardElementExists: !!document.getElementById("card-element"),
+            cvvElementExists: !!document.getElementById("card-cvv-element"),
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          }));
+        } catch (n) {
+          console.error("Failed to create card section:", n);
+        }
+        const i = document.getElementById("card-element"), r = document.getElementById("card-cvv-element");
+        if (!i || !r) {
+          console.error(
+            "Card elements not found, cannot initialize TokenEx iframe"
+          );
+          return;
+        }
+        this.iframeHook = Q({
+          apiKey: this.options.apiKey,
+          checkoutProfile: e.checkoutProfile,
+          inputStyles: t,
+          setFormData: (n) => {
+            this.formManager.setFormData(n);
+          },
+          environment: this.options.environment
+        }), this.iframeHook?.subscribe(this.handleIframeStateChange), await this.iframeHook?.initialize(), console.log("✅ TokenEx iframe initialized successfully:", {
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        });
+      } catch (t) {
+        throw console.error("Failed to initialize payment form:", t), t;
       }
-      this.iframeHook = Q({
-        apiKey: this.options.apiKey,
-        checkoutProfile: e.checkoutProfile,
-        inputStyles: t,
-        setFormData: (n) => {
-          this.formManager.setFormData(n);
-        },
-        environment: this.options.environment
-      }), this.iframeHook?.subscribe(this.handleIframeStateChange), await this.iframeHook?.initialize(), console.log("✅ TokenEx iframe initialized successfully:", {
-        timestamp: (/* @__PURE__ */ new Date()).toISOString()
-      });
-    } catch (t) {
-      throw console.error("Failed to initialize payment form:", t), t;
-    }
   };
   handleIframeStateChange = (e) => {
     this.cardSection && (this.cardSection.updateCardNumberValidation(
@@ -1892,9 +1884,6 @@ class Ut extends h {
   renderFormComponents() {
     if (this.emailField)
       return;
-    console.log("🏗️ Starting form components rendering:", {
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
     const e = this.checkoutProfile.getState();
     if (!e.checkoutProfile) {
       this.setErrorMessage("Failed to load checkout configuration");
@@ -1920,15 +1909,6 @@ class Ut extends h {
     } catch (t) {
       console.error("Failed to create submit button:", t);
     }
-    console.log("✅ Form components rendered successfully:", {
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      components: {
-        paymentMethods: !!this.paymentMethods,
-        emailField: !!this.emailField,
-        cardholderSection: !!this.cardholderSection,
-        submitButton: !!this.submitButton
-      }
-    });
   }
   createPaymentMethods(e) {
     try {
@@ -1951,7 +1931,7 @@ class Ut extends h {
         onPaypalSubmit: async () => {
           await this.handlePaypalSubmit();
         }
-      }), this.appendChild(this.paymentMethods), console.log("✅ Payment methods created successfully");
+      }), this.element.appendChild(this.paymentMethods.getElement());
     } catch (t) {
       throw console.error("Error creating payment methods:", t), t;
     }
@@ -1967,7 +1947,7 @@ class Ut extends h {
         errorMsg: a.email,
         checkoutProfile: e,
         translationFunc: this.translation.t
-      }), this.element.appendChild(this.emailField.getElement()), console.log("✅ Email field created successfully");
+      }), this.element.appendChild(this.emailField.getElement());
     } catch (t) {
       throw console.error("Error creating email field:", t), t;
     }
@@ -1983,7 +1963,7 @@ class Ut extends h {
         errorMsg: a.name,
         checkoutProfile: e,
         translationFunc: this.translation.t
-      }), this.element.appendChild(this.cardholderSection.getElement()), console.log("✅ Cardholder section created successfully");
+      }), this.element.appendChild(this.cardholderSection.getElement());
     } catch (t) {
       throw console.error("Error creating cardholder section:", t), t;
     }
@@ -1994,7 +1974,7 @@ class Ut extends h {
         disabled: this.isFormDisabled(),
         checkoutProfile: e,
         translationFunc: this.translation.t
-      }), this.element.appendChild(this.submitButton.getElement()), console.log("✅ Submit button created successfully");
+      }), this.element.appendChild(this.submitButton.getElement());
     } catch (t) {
       throw console.error("Error creating submit button:", t), t;
     }
@@ -2040,10 +2020,10 @@ class Ut extends h {
       this.options.onLoadingStateChange(e);
       return;
     }
-    e ? (this.hideSpinner(), this.spinner = new P(), this.appendChild(this.spinner)) : this.hideSpinner();
+    e ? (this.hideSpinner(), this.spinner = new P(), this.element.appendChild(this.spinner.getElement())) : this.hideSpinner();
   }
   showSpinner(e) {
-    this.hideSpinner(), this.spinner = new P({ text: e }), this.appendChild(this.spinner);
+    this.hideSpinner(), this.spinner = new P({ text: e }), this.element.appendChild(this.spinner.getElement());
   }
   hideSpinner() {
     this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);

package/dist/index.css

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

package/dist/package.json

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

package/package.json

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