recur-tw 0.0.3-beta.5 → 0.0.4-beta.2

package/dist/index.cjs

@@ -606,6 +606,523 @@ var init_skeleton_loader = __esm({
   }
 });
 
+// src/components/base/payment-form-skeleton.ts
+var payment_form_skeleton_exports = {};
+__export(payment_form_skeleton_exports, {
+  RecurPaymentFormSkeleton: () => RecurPaymentFormSkeleton
+});
+var RecurPaymentFormSkeleton;
+var init_payment_form_skeleton = __esm({
+  "src/components/base/payment-form-skeleton.ts"() {
+    RecurPaymentFormSkeleton = class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+      }
+      connectedCallback() {
+        this.render();
+      }
+      render() {
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        .payment-form-wrapper {
+          max-width: 500px;
+          margin: 0 auto;
+          padding: 24px;
+          background: white;
+          border-radius: 12px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .form-header {
+          margin-bottom: 24px;
+        }
+
+        .form-section {
+          margin-bottom: 24px;
+        }
+
+        .section-title {
+          margin: 0 0 12px 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: #2d3748;
+        }
+
+        .label {
+          font-size: 14px;
+          color: #4a5568;
+          margin-bottom: 4px;
+        }
+
+        /* Skeleton base styles */
+        .skeleton {
+          background: linear-gradient(
+            90deg,
+            #f0f0f0 0%,
+            #f8f8f8 50%,
+            #f0f0f0 100%
+          );
+          background-size: 200% 100%;
+          animation: skeleton-loading 1.5s ease-in-out infinite;
+          border-radius: 4px;
+        }
+
+        @keyframes skeleton-loading {
+          0% {
+            background-position: 200% 0;
+          }
+          100% {
+            background-position: -200% 0;
+          }
+        }
+
+        .skeleton-title {
+          height: 28px;
+          width: 200px;
+          margin-bottom: 8px;
+        }
+
+        .skeleton-subtitle {
+          height: 18px;
+          width: 320px;
+        }
+
+        .skeleton-order-summary {
+          padding: 16px;
+          background: #f7fafc;
+          border-radius: 6px;
+          margin-bottom: 24px;
+        }
+
+        .skeleton-order-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 12px;
+        }
+
+        .skeleton-order-row:last-child {
+          margin-bottom: 0;
+          padding-top: 12px;
+          border-top: 1px solid #e2e8f0;
+          font-weight: 600;
+        }
+
+        .skeleton-order-value {
+          height: 20px;
+          width: 120px;
+        }
+
+        .input-group {
+          margin-bottom: 16px;
+        }
+
+        .input-group:last-child {
+          margin-bottom: 0;
+        }
+
+        .skeleton-input {
+          height: 44px;
+          width: 100%;
+        }
+
+        .card-fields-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 12px;
+        }
+
+        .skeleton-button {
+          height: 44px;
+          width: 100%;
+          border-radius: 6px;
+        }
+
+        .security-note {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 12px;
+          background: #f7fafc;
+          border-radius: 6px;
+          margin-top: 16px;
+        }
+
+        .security-icon {
+          color: #48bb78;
+        }
+
+        .security-text {
+          font-size: 13px;
+          color: #4a5568;
+          margin: 0;
+        }
+      </style>
+
+      <div class="payment-form-wrapper">
+        <!-- Header Skeleton -->
+        <div class="form-header">
+          <div class="skeleton skeleton-title"></div>
+          <div class="skeleton skeleton-subtitle"></div>
+        </div>
+
+        <!-- Order Summary - Static labels, skeleton values -->
+        <div class="skeleton-order-summary">
+          <h3 class="section-title">\u8A02\u55AE\u6458\u8981</h3>
+          <div class="skeleton-order-row">
+            <span class="label">\u65B9\u6848</span>
+            <div class="skeleton skeleton-order-value"></div>
+          </div>
+          <div class="skeleton-order-row">
+            <span class="label">\u91D1\u984D</span>
+            <div class="skeleton skeleton-order-value"></div>
+          </div>
+          <div class="skeleton-order-row">
+            <span class="label">\u9031\u671F</span>
+            <div class="skeleton skeleton-order-value"></div>
+          </div>
+          <div class="skeleton-order-row">
+            <span class="label">\u7E3D\u8A08</span>
+            <div class="skeleton skeleton-order-value"></div>
+          </div>
+        </div>
+
+        <!-- Customer Info Section - Static labels, skeleton inputs -->
+        <div class="form-section">
+          <h3 class="section-title">\u5BA2\u6236\u8CC7\u8A0A</h3>
+          <div class="input-group">
+            <div class="label">\u59D3\u540D</div>
+            <div class="skeleton skeleton-input"></div>
+          </div>
+          <div class="input-group">
+            <div class="label">Email</div>
+            <div class="skeleton skeleton-input"></div>
+          </div>
+          <div class="input-group">
+            <div class="label">\u96FB\u8A71\uFF08\u9078\u586B\uFF09</div>
+            <div class="skeleton skeleton-input"></div>
+          </div>
+        </div>
+
+        <!-- Card Fields Section - Static labels, skeleton inputs -->
+        <div class="form-section">
+          <h3 class="section-title">\u4FE1\u7528\u5361\u8CC7\u8A0A</h3>
+          <div class="input-group">
+            <div class="label">\u4FE1\u7528\u5361\u865F</div>
+            <div class="skeleton skeleton-input"></div>
+          </div>
+          <div class="card-fields-grid">
+            <div class="input-group">
+              <div class="label">\u6709\u6548\u671F\u9650</div>
+              <div class="skeleton skeleton-input"></div>
+            </div>
+            <div class="input-group">
+              <div class="label">\u5B89\u5168\u78BC</div>
+              <div class="skeleton skeleton-input"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Submit Button Skeleton -->
+        <div class="skeleton skeleton-button"></div>
+
+        <!-- Security Note -->
+        <div class="security-note">
+          <svg class="security-icon" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+          <p class="security-text">\u60A8\u7684\u4ED8\u6B3E\u8CC7\u8A0A\u7D93\u904E\u52A0\u5BC6\u4FDD\u8B77</p>
+        </div>
+      </div>
+    `;
+      }
+    };
+    if (typeof window !== "undefined" && !customElements.get("recur-payment-form-skeleton")) {
+      customElements.define("recur-payment-form-skeleton", RecurPaymentFormSkeleton);
+    }
+  }
+});
+
+// src/components/base/toast.ts
+var toast_exports = {};
+__export(toast_exports, {
+  RecurToast: () => RecurToast,
+  RecurToastContainer: () => RecurToastContainer
+});
+var RecurToast, _RecurToastContainer, RecurToastContainer;
+var init_toast = __esm({
+  "src/components/base/toast.ts"() {
+    RecurToast = class extends HTMLElement {
+      static get observedAttributes() {
+        return ["message", "type", "duration"];
+      }
+      constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+      }
+      connectedCallback() {
+        this.render();
+        this.setupAutoDismiss();
+      }
+      get message() {
+        return this.getAttribute("message") || "Notification";
+      }
+      get type() {
+        const typeAttr = this.getAttribute("type");
+        if (typeAttr === "success" || typeAttr === "error") return typeAttr;
+        return "info";
+      }
+      get duration() {
+        const durationAttr = this.getAttribute("duration");
+        return durationAttr ? parseInt(durationAttr, 10) : 5e3;
+      }
+      setupAutoDismiss() {
+        const duration = this.duration;
+        if (duration > 0) {
+          setTimeout(() => this.dismiss(), duration);
+        }
+      }
+      dismiss() {
+        this.style.animation = "recur-toast-slide-out 0.3s ease-in-out";
+        setTimeout(() => this.remove(), 300);
+      }
+      getTypeIcon() {
+        switch (this.type) {
+          case "success":
+            return `<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>`;
+          case "error":
+            return `<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>`;
+          case "info":
+          default:
+            return `<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>`;
+        }
+      }
+      getTypeColor() {
+        switch (this.type) {
+          case "success":
+            return "#10b981";
+          // green-500
+          case "error":
+            return "#ef4444";
+          // red-500
+          case "info":
+          default:
+            return "#3b82f6";
+        }
+      }
+      render() {
+        const color = this.getTypeColor();
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin-bottom: 12px;
+          animation: recur-toast-slide-in 0.3s ease-out;
+        }
+
+        @keyframes recur-toast-slide-in {
+          from {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+
+        @keyframes recur-toast-slide-out {
+          from {
+            transform: translateX(0);
+            opacity: 1;
+          }
+          to {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+        }
+
+        .toast {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 12px 16px;
+          background: white;
+          border-left: 4px solid ${color};
+          border-radius: 8px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          min-width: 280px;
+          max-width: 420px;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          cursor: pointer;
+          transition: transform 0.2s ease;
+        }
+
+        .toast:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+        }
+
+        .toast-icon {
+          flex-shrink: 0;
+          color: ${color};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .toast-message {
+          flex: 1;
+          color: #374151;
+          font-size: 14px;
+          line-height: 1.5;
+          margin: 0;
+        }
+
+        .toast-close {
+          flex-shrink: 0;
+          color: #9ca3af;
+          cursor: pointer;
+          padding: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+          transition: all 0.2s;
+        }
+
+        .toast-close:hover {
+          color: #6b7280;
+          background: #f3f4f6;
+        }
+
+        /* Dark mode support */
+        :host([theme="dark"]) .toast {
+          background: #1f2937;
+        }
+
+        :host([theme="dark"]) .toast-message {
+          color: #e5e7eb;
+        }
+
+        :host([theme="dark"]) .toast-close {
+          color: #6b7280;
+        }
+
+        :host([theme="dark"]) .toast-close:hover {
+          color: #9ca3af;
+          background: #374151;
+        }
+      </style>
+
+      <div class="toast" role="alert">
+        <div class="toast-icon">
+          ${this.getTypeIcon()}
+        </div>
+        <p class="toast-message">${this.message}</p>
+        <button class="toast-close" aria-label="Close">
+          <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    `;
+        const closeBtn = this.shadowRoot.querySelector(".toast-close");
+        closeBtn?.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.dismiss();
+        });
+        const toast = this.shadowRoot.querySelector(".toast");
+        toast?.addEventListener("click", () => this.dismiss());
+      }
+      /**
+       * Static helper method to show toast
+       */
+      static show(message, type = "info", duration = 5e3) {
+        const container = RecurToastContainer.getInstance();
+        const toast = document.createElement("recur-toast");
+        toast.setAttribute("message", message);
+        toast.setAttribute("type", type);
+        toast.setAttribute("duration", duration.toString());
+        container.appendChild(toast);
+        return toast;
+      }
+    };
+    _RecurToastContainer = class _RecurToastContainer extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+      }
+      connectedCallback() {
+        this.render();
+      }
+      render() {
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          top: 24px;
+          right: 24px;
+          z-index: 9999;
+          display: flex;
+          flex-direction: column;
+          pointer-events: none;
+        }
+
+        ::slotted(*) {
+          pointer-events: auto;
+        }
+
+        /* Mobile responsive */
+        @media (max-width: 640px) {
+          :host {
+            top: 16px;
+            right: 16px;
+            left: 16px;
+          }
+        }
+      </style>
+
+      <slot></slot>
+    `;
+      }
+      /**
+       * Get or create singleton instance
+       */
+      static getInstance() {
+        if (!_RecurToastContainer.instance) {
+          _RecurToastContainer.instance = document.querySelector("recur-toast-container");
+          if (!_RecurToastContainer.instance) {
+            _RecurToastContainer.instance = document.createElement("recur-toast-container");
+            document.body.appendChild(_RecurToastContainer.instance);
+          }
+        }
+        return _RecurToastContainer.instance;
+      }
+    };
+    __publicField(_RecurToastContainer, "instance", null);
+    RecurToastContainer = _RecurToastContainer;
+    if (typeof window !== "undefined" && !customElements.get("recur-toast")) {
+      customElements.define("recur-toast", RecurToast);
+    }
+    if (typeof window !== "undefined" && !customElements.get("recur-toast-container")) {
+      customElements.define("recur-toast-container", RecurToastContainer);
+    }
+  }
+});
+
 // src/components/payment-form.ts
 var payment_form_exports = {};
 __export(payment_form_exports, {
@@ -619,6 +1136,8 @@ var init_payment_form = __esm({
         super();
         __publicField(this, "containerId");
         __publicField(this, "customStyles");
+        __publicField(this, "_isInitializing", false);
+        __publicField(this, "_initializationAborted", false);
         this.containerId = this.getAttribute("container-id") || `recur-${Date.now()}`;
         this.customStyles = this.getAttribute("custom-styles") || "";
         this.attachShadow({ mode: "open" });
@@ -626,6 +1145,16 @@ var init_payment_form = __esm({
       connectedCallback() {
         this.render();
       }
+      disconnectedCallback() {
+        console.log("[PaymentForm] Component disconnected, cleaning up...");
+        this._initializationAborted = true;
+        this._paymentSession = null;
+        const submitBtn = document.getElementById(`${this.containerId}-submit-btn`);
+        if (submitBtn) {
+          const newBtn = submitBtn.cloneNode(true);
+          submitBtn.parentNode?.replaceChild(newBtn, submitBtn);
+        }
+      }
       // 監聽 attribute 變化
       static get observedAttributes() {
         return ["custom-styles", "customer-name", "customer-email", "plan-name", "amount", "billing-period"];
@@ -1120,11 +1649,35 @@ var init_payment_form = __esm({
        * 這個方法會在外部調用，傳入 SDK token
        */
       async initializePayment(sdkToken, environment) {
+        if (this._initializationAborted) {
+          console.log("[PaymentForm] Initialization aborted before start");
+          return null;
+        }
+        this._isInitializing = true;
         await this.updateComplete();
+        if (this._initializationAborted) {
+          console.log("[PaymentForm] Initialization aborted after updateComplete");
+          this._isInitializing = false;
+          return null;
+        }
         if (!window.UniPayment) {
+          this._isInitializing = false;
           throw new Error("PAYUNi SDK not loaded");
         }
         try {
+          const cardNoEl = document.getElementById(`${this.containerId}-card-no`);
+          const cardExpEl = document.getElementById(`${this.containerId}-card-exp`);
+          const cardCvcEl = document.getElementById(`${this.containerId}-card-cvc`);
+          if (!cardNoEl || !cardExpEl || !cardCvcEl) {
+            console.log("[PaymentForm] DOM elements not found, likely disconnected");
+            this._isInitializing = false;
+            return null;
+          }
+          if (this._initializationAborted) {
+            console.log("[PaymentForm] Initialization aborted before createSession");
+            this._isInitializing = false;
+            return null;
+          }
           const paymentSession = window.UniPayment.createSession(sdkToken, {
             env: environment === "SANDBOX" ? "S" : "P",
             elements: {
@@ -1134,8 +1687,32 @@ var init_payment_form = __esm({
               CardCvc: `${this.containerId}-card-cvc`
             }
           });
-          await paymentSession.start();
+          if (this._initializationAborted) {
+            console.log("[PaymentForm] Initialization aborted before paymentSession.start()");
+            this._isInitializing = false;
+            return null;
+          }
+          try {
+            await paymentSession.start();
+          } catch (startError) {
+            const is1008Error = startError?.message?.includes("1008") || startError?.message?.includes("timeout") || startError?.code === 1008;
+            if (is1008Error && this._initializationAborted) {
+              console.log("[PaymentForm] Caught 1008 timeout error after component disconnect - ignoring");
+              this._isInitializing = false;
+              return null;
+            }
+            throw startError;
+          }
+          if (this._initializationAborted) {
+            console.log("[PaymentForm] Initialization aborted after paymentSession.start()");
+            this._isInitializing = false;
+            return null;
+          }
           paymentSession.onUpdate?.((data) => {
+            if (this._initializationAborted) {
+              console.log("[PaymentForm] Ignoring onUpdate event - component disconnected");
+              return;
+            }
             console.log("[PaymentForm] PAYUNi update:", data);
             const allFieldsComplete = data.status && data.status.CardNo === true && data.status.CardExp === true && data.status.CardCvc === true;
             const submitBtn = document.getElementById(`${this.containerId}-submit-btn`);
@@ -1144,10 +1721,17 @@ var init_payment_form = __esm({
               console.log("[PaymentForm] Submit button disabled:", !allFieldsComplete);
             }
           });
+          if (this._initializationAborted) {
+            console.log("[PaymentForm] Initialization aborted before saving session");
+            this._isInitializing = false;
+            return null;
+          }
           this._paymentSession = paymentSession;
           this.setupFormSubmission();
+          this._isInitializing = false;
           return paymentSession;
         } catch (error) {
+          this._isInitializing = false;
           console.error("[PaymentForm] Failed to initialize payment:", error);
           throw error;
         }
@@ -1171,17 +1755,18 @@ var init_payment_form = __esm({
             name = nameInput.value;
             phone = phoneInput?.value;
             if (!email || !name) {
-              alert("\u8ACB\u586B\u5BEB\u59D3\u540D\u548C\u96FB\u5B50\u90F5\u4EF6");
+              this.showError("\u8ACB\u586B\u5BEB\u59D3\u540D\u548C\u96FB\u5B50\u90F5\u4EF6");
               return;
             }
           } else {
             email = this.getAttribute("customer-email") || void 0;
             name = this.getAttribute("customer-name") || void 0;
             if (!email || !name) {
-              alert("\u5BA2\u6236\u8CC7\u8A0A\u4E0D\u5B8C\u6574");
+              this.showError("\u5BA2\u6236\u8CC7\u8A0A\u4E0D\u5B8C\u6574");
               return;
             }
           }
+          this.clearError();
           this.setButtonLoading(true);
           this.dispatchEvent(new CustomEvent("submit", {
             detail: {
@@ -1221,6 +1806,33 @@ var init_payment_form = __esm({
       resetButton() {
         this.setButtonLoading(false);
       }
+      /**
+       * Show error message using RecurErrorDisplay component
+       */
+      showError(message) {
+        let errorContainer = this.querySelector(".recur-sdk__error-container");
+        if (!errorContainer) {
+          errorContainer = document.createElement("div");
+          errorContainer.className = "recur-sdk__error-container";
+          errorContainer.style.cssText = "margin-bottom: 16px;";
+          this.insertBefore(errorContainer, this.firstChild);
+        }
+        const errorDisplay = document.createElement("recur-error-display");
+        errorDisplay.setAttribute("error", message);
+        errorDisplay.setAttribute("dismissible", "true");
+        errorContainer.innerHTML = "";
+        errorContainer.appendChild(errorDisplay);
+        errorDisplay.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+      /**
+       * Clear any displayed errors
+       */
+      clearError() {
+        const errorContainer = this.querySelector(".recur-sdk__error-container");
+        if (errorContainer) {
+          errorContainer.innerHTML = "";
+        }
+      }
       /**
        * 等待組件完全連接到 DOM
        */
@@ -1284,6 +1896,8 @@ async function registerComponents() {
     Promise.resolve().then(() => (init_success_message(), success_message_exports)),
     Promise.resolve().then(() => (init_error_display(), error_display_exports)),
     Promise.resolve().then(() => (init_skeleton_loader(), skeleton_loader_exports)),
+    Promise.resolve().then(() => (init_payment_form_skeleton(), payment_form_skeleton_exports)),
+    Promise.resolve().then(() => (init_toast(), toast_exports)),
     Promise.resolve().then(() => (init_payment_form(), payment_form_exports))
   ]);
   const components = [
@@ -1291,6 +1905,9 @@ async function registerComponents() {
     "recur-success-message",
     "recur-error-display",
     "recur-skeleton-loader",
+    "recur-payment-form-skeleton",
+    "recur-toast",
+    "recur-toast-container",
     "recur-payment-form"
   ];
   const unregistered = components.filter((name) => !customElements.get(name));
@@ -1444,10 +2061,9 @@ function RecurProvider({ children, config: initialConfig = {} }) {
           loadingContainer = document.createElement("div");
           loadingContainer.id = "recur-modal-loading";
           loadingContainer.className = "recur-sdk__loading-container";
-          loadingContainer.style.cssText = "text-align: center; padding: 40px 0;";
-          const spinner = document.createElement("recur-loading-spinner");
-          spinner.setAttribute("message", "\u6B63\u5728\u8655\u7406\u8A02\u95B1...");
-          loadingContainer.appendChild(spinner);
+          loadingContainer.style.cssText = "padding: 0;";
+          const skeleton = document.createElement("recur-payment-form-skeleton");
+          loadingContainer.appendChild(skeleton);
           modalContent.appendChild(closeButton);
           modalContent.appendChild(title);
           modalContent.appendChild(loadingContainer);
@@ -1476,10 +2092,9 @@ function RecurProvider({ children, config: initialConfig = {} }) {
               loadingContainer = document.createElement("div");
               loadingContainer.id = "recur-embedded-loading";
               loadingContainer.className = "recur-sdk__loading-container";
-              loadingContainer.style.cssText = "text-align: center; padding: 40px 0;";
-              const embeddedSpinner = document.createElement("recur-loading-spinner");
-              embeddedSpinner.setAttribute("message", "\u6B63\u5728\u8655\u7406\u8A02\u95B1...");
-              loadingContainer.appendChild(embeddedSpinner);
+              loadingContainer.style.cssText = "padding: 0;";
+              const embeddedSkeleton = document.createElement("recur-payment-form-skeleton");
+              loadingContainer.appendChild(embeddedSkeleton);
               embeddedContainer.appendChild(loadingContainer);
             } else {
               console.log("[Recur SDK] Container not found after polling, will continue without early loading state");
@@ -1607,10 +2222,14 @@ function RecurProvider({ children, config: initialConfig = {} }) {
         container.appendChild(paymentForm);
         await new Promise((resolve) => setTimeout(resolve, 100));
         console.log("[Recur SDK] Initializing PAYUNi SDK via Web Component...");
-        await paymentForm.initializePayment(
+        const initResult = await paymentForm.initializePayment(
           tokenResult.sdkToken,
           tokenResult.environment
         );
+        if (initResult === null) {
+          console.log("[Recur SDK] Initialization aborted - component was unmounted");
+          return;
+        }
         console.log("[Recur SDK] PAYUNi SDK initialized successfully");
         console.log("[Recur SDK] Step 7: Setting up submit handler...");
         paymentForm.addEventListener("submit", (async (event) => {