@kwespay/widget 1.0.6 → 1.0.8

package/dist/esm/index.js

@@ -8,7 +8,7 @@ const SUPPORTED_CURRENCIES = {
 const STABLECOIN_SYMBOLS = ["USDT", "USDC", "DAI", "BUSD", "USDc"];
 
 const DEFAULT_CONFIG = {
-  graphqlEndpoint: "https://8284-154-161-98-26.ngrok-free.app",
+  graphqlEndpoint: "https://api.kwespay.xyz/",
   currency: SUPPORTED_CURRENCIES.USD,
 };
 
@@ -1006,6 +1006,84 @@ class PaymentService {
   }
 }
 
+function isMobileDevice() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+}
+
+function dispatchWidgetEvent(eventName, detail = {}) {
+  const event = new CustomEvent(`kwespay:${eventName}`, {
+    detail,
+    bubbles: true,
+    cancelable: true,
+  });
+  window.dispatchEvent(event);
+}
+
+function truncateHash(hash, startChars = 10, endChars = 8) {
+  if (!hash) return "";
+  return `${hash.slice(0, startChars)}...${hash.slice(-endChars)}`;
+}
+
+function getErrorType(error) {
+  const msg = error?.message ?? "";
+  if (
+    error?.code === 4001 ||
+    error?.code === "ACTION_REJECTED" ||
+    msg.includes("rejected") ||
+    msg.includes("denied") ||
+    msg.includes("cancelled")
+  )
+    return "USER_REJECTED";
+  if (msg.toLowerCase().includes("insufficient")) return "INSUFFICIENT_BALANCE";
+  if (
+    msg.includes("User rejected") ||
+    msg.includes("User closed modal") ||
+    msg.includes("Connection request reset")
+  )
+    return "CONNECTION_REJECTED";
+  if (msg.includes("timeout")) return "TIMEOUT";
+  return "UNKNOWN";
+}
+
+function getErrorMessage(error, context = {}) {
+  const type = getErrorType(error);
+
+  console.error("[KwesPay] Payment error breakdown:", {
+    errorType: type,
+    message: error?.message,
+    code: error?.code,
+    data: error?.data,
+    reason: error?.reason,
+    stack: error?.stack,
+    raw: error,
+    context,
+  });
+
+  if (error?.data) console.error("[KwesPay] Contract revert data:", error.data);
+  if (error?.transaction)
+    console.error("[KwesPay] Failed tx details:", error.transaction);
+  if (error?.receipt) console.error("[KwesPay] Tx receipt:", error.receipt);
+
+  switch (type) {
+    case "USER_REJECTED":
+      return "You cancelled the transaction in your wallet.";
+    case "INSUFFICIENT_BALANCE":
+      return `Not enough ${context.token || "funds"} to complete this payment.`;
+    case "CONNECTION_REJECTED":
+      return "Wallet connection was cancelled.";
+    case "TIMEOUT":
+      return "Connection timed out. Please try again.";
+    default:
+      return (
+        error?.reason ||
+        error?.message ||
+        "Something went wrong while processing your payment."
+      );
+  }
+}
+
 const WIDGET_STYLES = `
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
@@ -2195,180 +2273,12 @@ function getStepTemplates(fiatAmount, currency) {
   `;
 }
 
-function dispatchWidgetEvent(eventName, detail = {}) {
-  const event = new CustomEvent(`kwespay:${eventName}`, {
-    detail,
-    bubbles: true,
-    cancelable: true,
-  });
-  window.dispatchEvent(event);
-}
-
-function truncateHash(hash, startChars = 10, endChars = 8) {
-  if (!hash) return "";
-  return `${hash.slice(0, startChars)}...${hash.slice(-endChars)}`;
-}
-
-function getErrorType(error) {
-  const msg = error?.message ?? "";
-  if (
-    error?.code === 4001 ||
-    error?.code === "ACTION_REJECTED" ||
-    msg.includes("rejected") ||
-    msg.includes("denied") ||
-    msg.includes("cancelled")
-  )
-    return "USER_REJECTED";
-  if (msg.toLowerCase().includes("insufficient")) return "INSUFFICIENT_BALANCE";
-  if (
-    msg.includes("User rejected") ||
-    msg.includes("User closed modal") ||
-    msg.includes("Connection request reset")
-  )
-    return "CONNECTION_REJECTED";
-  if (msg.includes("timeout")) return "TIMEOUT";
-  return "UNKNOWN";
-}
-
-function getErrorMessage(error, context = {}) {
-  const type = getErrorType(error);
-
-  console.error("[KwesPay] Payment error breakdown:", {
-    errorType: type,
-    message: error?.message,
-    code: error?.code,
-    data: error?.data,
-    reason: error?.reason,
-    stack: error?.stack,
-    raw: error,
-    context,
-  });
-
-  if (error?.data) console.error("[KwesPay] Contract revert data:", error.data);
-  if (error?.transaction)
-    console.error("[KwesPay] Failed tx details:", error.transaction);
-  if (error?.receipt) console.error("[KwesPay] Tx receipt:", error.receipt);
-
-  switch (type) {
-    case "USER_REJECTED":
-      return "You cancelled the transaction in your wallet.";
-    case "INSUFFICIENT_BALANCE":
-      return `Not enough ${context.token || "funds"} to complete this payment.`;
-    case "CONNECTION_REJECTED":
-      return "Wallet connection was cancelled.";
-    case "TIMEOUT":
-      return "Connection timed out. Please try again.";
-    default:
-      return (
-        error?.reason ||
-        error?.message ||
-        "Something went wrong while processing your payment."
-      );
-  }
-}
-
-const PLATFORM_FEE_BPS = 25;
-
-// ── Utilities ─────────────────────────────────────────────────────────────────
-
-function formatUnits(rawBigInt, decimals) {
-  const divisor = BigInt(10 ** decimals);
-  const whole = rawBigInt / divisor;
-  const remainder = rawBigInt % divisor;
-
-  if (remainder === 0n) return `${whole}`;
-
-  const fracFull = remainder.toString().padStart(decimals, "0");
-
-  if (whole > 0n) {
-    const frac = fracFull.slice(0, 4).replace(/0+$/, "");
-    return frac ? `${whole}.${frac}` : `${whole}`;
-  }
-
-  let firstSig = -1;
-  for (let i = 0; i < fracFull.length; i++) {
-    if (fracFull[i] !== "0") {
-      firstSig = i;
-      break;
-    }
-  }
-  if (firstSig === -1) return `${whole}`;
-
-  const sigSlice = fracFull.slice(firstSig, firstSig + 4).replace(/0+$/, "");
-  return `0.${fracFull.slice(0, firstSig) + sigSlice}`;
-}
-
-function resolveAcceptedTokens(input) {
-  if (!input) return null;
-  if (input === "stablecoins") return STABLECOIN_SYMBOLS;
-  if (Array.isArray(input) && input.length)
-    return input.map((t) => t.toUpperCase());
-  return null;
-}
-
-function isMobileDevice() {
-  return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-}
-
-// ── Widget ────────────────────────────────────────────────────────────────────
-
-class KwesPayWidget {
-  constructor(config) {
-    if (!config.apiKey) throw new Error("[KwesPayWidget] apiKey is required");
-    if (!config.vendorId)
-      throw new Error("[KwesPayWidget] vendorId is required");
-    if (!config.amount || parseFloat(config.amount) <= 0)
-      throw new Error("[KwesPayWidget] Valid amount is required");
-
-    this.config = {
-      apiKey: config.apiKey,
-      vendorId: config.vendorId,
-      amount: parseFloat(config.amount),
-      currency: config.currency || DEFAULT_CONFIG.currency,
-      graphqlEndpoint: DEFAULT_CONFIG.graphqlEndpoint,
-      acceptedTokens: resolveAcceptedTokens(config.acceptedTokens),
-    };
-
-    if (!Object.values(SUPPORTED_CURRENCIES).includes(this.config.currency)) {
-      throw new Error(
-        `[KwesPayWidget] Unsupported currency: ${this.config.currency}`
-      );
-    }
-
-    this.walletService = new WalletService();
-    this.paymentService = new PaymentService(
-      this.config.apiKey,
-      this.config.graphqlEndpoint
-    );
-
-    this.state = {
-      isOpen: false,
-      currentStep: 0,
-      selectedNetwork: null,
-      selectedNetworkName: "",
-      selectedChainId: null,
-      selectedRpcUrl: null,
-      selectedContractAddress: null,
-      selectedToken: null,
-      selectedTokenConfig: null,
-      vendorInfo: null,
-      keyAllowedNetworks: null,
-      keyAllowedTokens: null,
-      currentPayload: null,
-      quoteTimerInterval: null,
-      wcUri: null,
-    };
-
-    this._init();
-  }
-
-  // ── Bootstrap ───────────────────────────────────────────────────────────────
-
+const DomMethods = {
   _init() {
     this._injectFonts();
     this._injectStyles();
     this._createWidgetDOM();
-  }
+  },
 
   _injectFonts() {
     if (
@@ -2382,7 +2292,7 @@ class KwesPayWidget {
       link.rel = "stylesheet";
       document.head.appendChild(link);
     }
-  }
+  },
 
   _injectStyles() {
     if (!document.getElementById("kwespay-widget-styles")) {
@@ -2391,7 +2301,7 @@ class KwesPayWidget {
       style.textContent = WIDGET_STYLES;
       document.head.appendChild(style);
     }
-  }
+  },
 
   _createWidgetDOM() {
     document.getElementById("kwespay-widget-overlay")?.remove();
@@ -2418,15 +2328,16 @@ class KwesPayWidget {
     document.body.appendChild(overlay);
 
     this._setupEventListeners();
+    this._setupSwipeToClose(container);
 
-    overlay.addEventListener("click", (e) => {
-      if (e.target === overlay) this.close();
-    });
+    // Clicking outside the container does NOT close the widget (intentional)
+  },
 
-    // Swipe-down to close on mobile
+  _setupSwipeToClose(container) {
     let _touchStartY = 0,
       _touchCurrentY = 0,
       _isDragging = false;
+
     container.addEventListener(
       "touchstart",
       (e) => {
@@ -2441,6 +2352,7 @@ class KwesPayWidget {
       },
       { passive: true }
     );
+
     container.addEventListener(
       "touchmove",
       (e) => {
@@ -2451,6 +2363,7 @@ class KwesPayWidget {
       },
       { passive: true }
     );
+
     container.addEventListener("touchend", () => {
       if (!_isDragging) return;
       _isDragging = false;
@@ -2459,7 +2372,7 @@ class KwesPayWidget {
       if (delta > 120) this.close();
       else container.style.transform = "translateY(0)";
     });
-  }
+  },
 
   _setupEventListeners() {
     document
@@ -2568,10 +2481,83 @@ class KwesPayWidget {
           });
       });
     }
-  }
+  },
+};
 
-  // ── Network / token list rendering ──────────────────────────────────────────
+const NavMethods = {
+  _goToStep(stepNumber) {
+    document
+      .querySelectorAll(".kwespay-container .step")
+      .forEach((s) => s.classList.remove("active", "exiting"));
+    this._activateStep(stepNumber);
+    this.state.currentStep = stepNumber;
+  },
+
+  _activateStep(stepNumber) {
+    let targetStep;
+    if (stepNumber === 0.5)
+      targetStep = document.getElementById("kwespay-step0-invalid");
+    else if (typeof stepNumber === "string")
+      targetStep = document.getElementById(`kwespay-step-${stepNumber}`);
+    else targetStep = document.getElementById(`kwespay-step${stepNumber}`);
+
+    if (targetStep) targetStep.classList.add("active");
+    else console.warn(`[KwesPayWidget] Step not found: ${stepNumber}`);
+  },
+
+  _removeCustomStep(id) {
+    document.getElementById(id)?.remove();
+  },
 
+  _showError(title, message) {
+    const titleEl = document.getElementById("kwespay-errorTitle");
+    const msgEl = document.getElementById("kwespay-errorMessage");
+    if (titleEl) titleEl.textContent = title;
+    if (msgEl) msgEl.textContent = message;
+    this._goToStep(6);
+  },
+
+  _reset() {
+    this._clearQuoteTimer();
+    this._removeCustomStep("kwespay-step-wallet-picker");
+    this._removeCustomStep("kwespay-step-wc");
+    this.state.selectedNetwork = null;
+    this.state.selectedNetworkName = "";
+    this.state.selectedChainId = null;
+    this.state.selectedRpcUrl = null;
+    this.state.selectedContractAddress = null;
+    this.state.selectedToken = null;
+    this.state.selectedTokenConfig = null;
+    this.state.currentPayload = null;
+    this.state.wcUri = null;
+  },
+};
+
+const APIKeyMethods = {
+  async _validateAPIKey() {
+    try {
+      const validation = await this.paymentService.validateAPIKey();
+      if (validation.valid) {
+        this.state.vendorInfo = validation.vendorInfo;
+        this.state.keyAllowedNetworks = validation.allowedNetworks ?? null;
+        this.state.keyAllowedTokens = validation.allowedTokens ?? null;
+        this._goToStep(1);
+        dispatchWidgetEvent("apiKeyValidated", {
+          vendorInfo: this.state.vendorInfo,
+        });
+      } else {
+        this._goToStep(0.5);
+        dispatchWidgetEvent("apiKeyInvalid", {});
+      }
+    } catch (err) {
+      console.error("[KwesPayWidget] API key validation error:", err.message);
+      this._goToStep(0.5);
+      dispatchWidgetEvent("apiKeyError", { error: err.message });
+    }
+  },
+};
+
+const NetworkMethods = {
   _renderNetworkList() {
     const mainnetList = document.getElementById("kwespay-mainnetList");
     const testnetList = document.getElementById("kwespay-testnetList");
@@ -2633,7 +2619,7 @@ class KwesPayWidget {
 
     if (testnetSection)
       testnetSection.style.display = hasTestnet ? "block" : "none";
-  }
+  },
 
   _renderTokenList() {
     if (!this.state.selectedNetwork) return;
@@ -2672,7 +2658,7 @@ class KwesPayWidget {
       );
       tokenList.appendChild(tokenItem);
     });
-  }
+  },
 
   _effectiveAllowedTokens() {
     const keyTokens =
@@ -2682,17 +2668,64 @@ class KwesPayWidget {
     if (!keyTokens) return configTokens;
     if (!configTokens) return keyTokens;
     return keyTokens.filter((t) => configTokens.includes(t));
-  }
+  },
 
-  // ── Wallet connection flow ───────────────────────────────────────────────────
+  async _handleNetworkSelection(key, network) {
+    this.state.selectedNetwork = key;
+    this.state.selectedNetworkName = network.name;
+    this.state.selectedChainId = network.chainId;
+    this.state.selectedRpcUrl = network.rpcUrl;
+    this.state.selectedContractAddress = network.contractAddress;
+    this.state.selectedToken = null;
+    this.state.selectedTokenConfig = null;
 
+    const nameEl = document.getElementById("kwespay-selectedNetworkName");
+    if (nameEl)
+      nameEl.textContent = `${network.name} ${
+        network.type === "mainnet" ? "Mainnet" : "Testnet"
+      }`;
+
+    const iconEl = document.getElementById("kwespay-selectedNetworkIcon");
+    if (iconEl)
+      iconEl.innerHTML = `<img src="${network.logo}" alt="${network.name}" />`;
+
+    const continueBtn = document.getElementById(
+      "kwespay-continueToWalletConnect"
+    );
+    if (continueBtn) continueBtn.disabled = true;
+
+    this._renderTokenList();
+    this._goToStep(2);
+  },
+
+  _handleTokenSelection(token) {
+    document
+      .querySelectorAll("#kwespay-tokenList .token-item")
+      .forEach((item) => item.classList.remove("selected"));
+    document
+      .querySelector(
+        `#kwespay-tokenList .token-item[data-token-symbol="${token.symbol}"]`
+      )
+      ?.classList.add("selected");
+
+    this.state.selectedToken = token.symbol;
+    this.state.selectedTokenConfig = token;
+
+    const continueBtn = document.getElementById(
+      "kwespay-continueToWalletConnect"
+    );
+    if (continueBtn) continueBtn.disabled = false;
+  },
+};
+
+const WalletMethods = {
   async _handleWalletConnection() {
     if (!this.state.selectedToken || !this.state.selectedTokenConfig) {
       alert("Please select a token first");
       return;
     }
     this._renderWalletPickerStep();
-  }
+  },
 
   _renderWalletPickerStep() {
     this._removeCustomStep("kwespay-step-wallet-picker");
@@ -2790,7 +2823,7 @@ class KwesPayWidget {
         list.appendChild(item);
       });
     });
-  }
+  },
 
   async _connectInjectedProvider(index) {
     try {
@@ -2805,7 +2838,7 @@ class KwesPayWidget {
       );
       dispatchWidgetEvent("walletConnectionError", { error: err.message });
     }
-  }
+  },
 
   async _startWalletConnect() {
     this._renderWCStep();
@@ -2821,7 +2854,7 @@ class KwesPayWidget {
         this._renderWCMobileStep();
       }
 
-      // Pass the target chain so MetaMask starts the WC session on the right
+      // Pass the target chain so the wallet starts the WC session on the right
       // network — without this it defaults to its last-used WC chain (Mainnet).
       await this.walletService.connectWalletConnect(this.state.selectedChainId);
     } catch (err) {
@@ -2836,9 +2869,7 @@ class KwesPayWidget {
         err.message || "WalletConnect failed."
       );
     }
-  }
-
-  // ── WalletConnect UI ─────────────────────────────────────────────────────────
+  },
 
   _renderWCStep() {
     this._removeCustomStep("kwespay-step-wc");
@@ -2871,7 +2902,7 @@ class KwesPayWidget {
     });
 
     this._goToStep("wc");
-  }
+  },
 
   _wcDesktopHTML() {
     return `
@@ -2893,7 +2924,7 @@ class KwesPayWidget {
         <p style="font-size:11px;color:var(--kp-muted);font-family:var(--kp-mono);text-align:center">Waiting for wallet connection…</p>
       </div>
     `;
-  }
+  },
 
   _wcMobileHTML() {
     const wallets = this.walletService.getMobileWallets();
@@ -2941,7 +2972,7 @@ class KwesPayWidget {
         </p>
       </div>
     `;
-  }
+  },
 
   _renderWCMobileStep() {
     const list = document.getElementById("kwespay-mobile-wallet-list");
@@ -2965,7 +2996,7 @@ class KwesPayWidget {
         }
       });
     });
-  }
+  },
 
   _onWCUri(uri) {
     this.state.wcUri = uri;
@@ -2982,7 +3013,7 @@ class KwesPayWidget {
     } else {
       this._renderQRCode(uri);
     }
-  }
+  },
 
   _renderQRCode(uri) {
     const canvas = document.getElementById("kwespay-qr-canvas");
@@ -3017,18 +3048,18 @@ class KwesPayWidget {
         <p style="font-size:10px;color:#888;font-family:monospace">Use Copy URI button</p>
       </div>
     `;
-  }
+  },
 
   _onWCConnected() {
     const connection = this.walletService._connectionResult();
     this._removeCustomStep("kwespay-step-wc");
     this._onWalletConnected(connection);
-  }
+  },
 
   _onWCDisconnected() {
     this._removeCustomStep("kwespay-step-wc");
     this._goToStep(2);
-  }
+  },
 
   async _onWalletConnected(connection) {
     const addressEl = document.getElementById("kwespay-connectedWalletAddress");
@@ -3045,7 +3076,7 @@ class KwesPayWidget {
     const proceedBtn = document.getElementById("kwespay-proceedToPayment");
 
     if (cryptoLine) {
-      cryptoLine.textContent = "Getting the best rate for you…";
+      cryptoLine.textContent = "loading…";
       cryptoLine.classList.add("loading");
     }
     if (timerEl) timerEl.style.display = "none";
@@ -3067,83 +3098,39 @@ class KwesPayWidget {
     }
 
     dispatchWidgetEvent("walletConnected", { address: connection.address });
-  }
-
-  // ── API key validation ───────────────────────────────────────────────────────
-
-  async _validateAPIKey() {
-    try {
-      const validation = await this.paymentService.validateAPIKey();
-      if (validation.valid) {
-        this.state.vendorInfo = validation.vendorInfo;
-        this.state.keyAllowedNetworks = validation.allowedNetworks ?? null;
-        this.state.keyAllowedTokens = validation.allowedTokens ?? null;
-        this._goToStep(1);
-        dispatchWidgetEvent("apiKeyValidated", {
-          vendorInfo: this.state.vendorInfo,
-        });
-      } else {
-        this._goToStep(0.5);
-        dispatchWidgetEvent("apiKeyInvalid", {});
-      }
-    } catch (err) {
-      console.error("[KwesPayWidget] API key validation error:", err.message);
-      this._goToStep(0.5);
-      dispatchWidgetEvent("apiKeyError", { error: err.message });
-    }
-  }
-
-  // ── Network / token selection ────────────────────────────────────────────────
+  },
+};
 
-  async _handleNetworkSelection(key, network) {
-    this.state.selectedNetwork = key;
-    this.state.selectedNetworkName = network.name;
-    this.state.selectedChainId = network.chainId;
-    this.state.selectedRpcUrl = network.rpcUrl;
-    this.state.selectedContractAddress = network.contractAddress;
-    this.state.selectedToken = null;
-    this.state.selectedTokenConfig = null;
+const PLATFORM_FEE_BPS = 25;
 
-    const nameEl = document.getElementById("kwespay-selectedNetworkName");
-    if (nameEl)
-      nameEl.textContent = `${network.name} ${
-        network.type === "mainnet" ? "Mainnet" : "Testnet"
-      }`;
+function formatUnits(rawBigInt, decimals) {
+  const divisor = BigInt(10 ** decimals);
+  const whole = rawBigInt / divisor;
+  const remainder = rawBigInt % divisor;
 
-    const iconEl = document.getElementById("kwespay-selectedNetworkIcon");
-    if (iconEl)
-      iconEl.innerHTML = `<img src="${network.logo}" alt="${network.name}" />`;
+  if (remainder === 0n) return `${whole}`;
 
-    const continueBtn = document.getElementById(
-      "kwespay-continueToWalletConnect"
-    );
-    if (continueBtn) continueBtn.disabled = true;
+  const fracFull = remainder.toString().padStart(decimals, "0");
 
-    this._renderTokenList();
-    this._goToStep(2);
+  if (whole > 0n) {
+    const frac = fracFull.slice(0, 4).replace(/0+$/, "");
+    return frac ? `${whole}.${frac}` : `${whole}`;
   }
 
-  _handleTokenSelection(token) {
-    document
-      .querySelectorAll("#kwespay-tokenList .token-item")
-      .forEach((item) => item.classList.remove("selected"));
-    document
-      .querySelector(
-        `#kwespay-tokenList .token-item[data-token-symbol="${token.symbol}"]`
-      )
-      ?.classList.add("selected");
-
-    this.state.selectedToken = token.symbol;
-    this.state.selectedTokenConfig = token;
-
-    const continueBtn = document.getElementById(
-      "kwespay-continueToWalletConnect"
-    );
-    if (continueBtn) continueBtn.disabled = false;
+  let firstSig = -1;
+  for (let i = 0; i < fracFull.length; i++) {
+    if (fracFull[i] !== "0") {
+      firstSig = i;
+      break;
+    }
   }
+  if (firstSig === -1) return `${whole}`;
 
-  // ── Quote / review step ──────────────────────────────────────────────────────
+  const sigSlice = fracFull.slice(firstSig, firstSig + 4).replace(/0+$/, "");
+  return `0.${fracFull.slice(0, firstSig) + sigSlice}`;
+}
 
+const QuoteMethods = {
   async _loadReviewStep() {
     this._clearQuoteTimer();
 
@@ -3155,7 +3142,7 @@ class KwesPayWidget {
     const proceedBtn = document.getElementById("kwespay-proceedToPayment");
 
     if (cryptoLine) {
-      cryptoLine.textContent = "Getting the best rate for you…";
+      cryptoLine.textContent = "loading…";
       cryptoLine.classList.add("loading");
     }
     if (timerEl) timerEl.style.display = "none";
@@ -3195,12 +3182,12 @@ class KwesPayWidget {
     } catch (err) {
       console.error("[KwesPayWidget] Quote fetch failed:", err.message);
       if (cryptoLine) {
-        cryptoLine.textContent = "Could not load rate — please try again.";
+        cryptoLine.textContent = "Could not load please try again.";
         cryptoLine.classList.remove("loading");
       }
       if (proceedBtn) proceedBtn.disabled = true;
     }
-  }
+  },
 
   _startQuoteTimer(expiresAt) {
     const timerEl = document.getElementById("kwespay-quoteTimer");
@@ -3221,6 +3208,7 @@ class KwesPayWidget {
         "kp-quote-timer" +
         (secs <= 30 ? " urgent" : "") +
         (secs <= 0 ? " expired" : "");
+
       if (secs <= 0) {
         timerText.textContent = "Refreshing your rate…";
         const proceedBtn = document.getElementById("kwespay-proceedToPayment");
@@ -3229,19 +3217,20 @@ class KwesPayWidget {
         this._loadReviewStep();
       }
     };
+
     update();
     this.state.quoteTimerInterval = setInterval(update, 1000);
-  }
+  },
 
   _clearQuoteTimer() {
     if (this.state.quoteTimerInterval) {
       clearInterval(this.state.quoteTimerInterval);
       this.state.quoteTimerInterval = null;
     }
-  }
-
-  // ── Payment processing ───────────────────────────────────────────────────────
+  },
+};
 
+const PaymentMethods = {
   async _handlePaymentProcessing() {
     if (!this.state.currentPayload) {
       this._showError(
@@ -3270,9 +3259,7 @@ class KwesPayWidget {
 
       if (!provider) throw new Error("No wallet provider");
 
-      // ── Session liveness check ───────────────────────────────────────────────
-      // Must come first — a stale WC session throws on any RPC call, and we want
-      // a clean "reconnect" error rather than a cryptic provider error downstream.
+
       const alive = await this.walletService.isSessionAlive();
       if (!alive) {
         console.error(
@@ -3286,22 +3273,17 @@ class KwesPayWidget {
         throw err;
       }
 
-      // ── Show mobile helper banner ────────────────────────────────────────────
+     
       if (isMobile) {
         document
           .getElementById("kwespay-mobileTransactionInstruction")
           ?.style.setProperty("display", "flex");
       }
 
-      // ── Chain validation ─────────────────────────────────────────────────────
       if (strictMobile) {
-        // On mobile WC, eth_chainId goes to the wallet via the WC relay and
-        // reflects the wallet's actual active chain — always call it live.
-        // Never rely on session namespace account ordering (MetaMask puts
-        // Mainnet first regardless of which chain the user is on).
+
         await this._assertMobileChain(provider, targetChainId);
       } else {
-        // Desktop / injected — eth_chainId is reliable, switch if needed
         const rawChain = await provider.request({ method: "eth_chainId" });
         const currentChainId = parseInt(rawChain, 16);
 
@@ -3322,21 +3304,17 @@ class KwesPayWidget {
             this.state.selectedToken,
             this.state.selectedTokenConfig.decimals
           );
-          console.log("[KwesPay] Network switched ✅");
+          console.log("[KwesPay] Network switched");
         }
       }
 
-      // ── Open wallet BEFORE sending tx (mobile WC only) ──────────────────────
-      // We deep-link to the wallet before the JSON-RPC request lands so the
-      // approval prompt appears immediately without the user having to manually
-      // switch apps.
+   
       if (strictMobile) {
         setStatus(
           "Opening your wallet…",
           "Approve the payment in your wallet."
         );
         this.walletService._openWalletForApproval();
-        // Give the OS time to foreground the wallet app before the RPC lands
         await new Promise((r) => setTimeout(r, 700));
       } else {
         setStatus(
@@ -3345,19 +3323,18 @@ class KwesPayWidget {
         );
       }
 
-      // ── Send transaction ─────────────────────────────────────────────────────
       const receipt = await this.paymentService.createPayment({
         payload: this.state.currentPayload,
         walletProvider: provider,
         onStatusUpdate: setStatus,
       });
 
-      // ── Cleanup ──────────────────────────────────────────────────────────────
+  
       document
         .getElementById("kwespay-mobileTransactionInstruction")
         ?.style.setProperty("display", "none");
 
-      // ── Success UI ───────────────────────────────────────────────────────────
+     
       const decimals = this.state.selectedTokenConfig?.decimals ?? 6;
       const amountBig = BigInt(this.state.currentPayload.amountBaseUnits);
       const cryptoDisplay = `${formatUnits(amountBig, decimals)} ${
@@ -3420,7 +3397,7 @@ class KwesPayWidget {
       this._showError(title, message);
       dispatchWidgetEvent("paymentError", { error: message, errorType });
     }
-  }
+  },
 
   /**
    * Confirm the wallet is on the target chain before sending a transaction.
@@ -3428,9 +3405,6 @@ class KwesPayWidget {
    * Throws WRONG_NETWORK if the chain never matches.
    *
    * MOBILE WC ONLY — never call this on desktop/injected.
-   *
-   * @param {object} provider
-   * @param {number} targetChainId
    */
   async _assertMobileChain(provider, targetChainId) {
     const MAX_ATTEMPTS = 3;
@@ -3464,25 +3438,14 @@ class KwesPayWidget {
       }
     }
 
-    // All attempts failed — wallet is on wrong chain
     const err = new Error(
       `Please switch to ${this.state.selectedNetworkName} in your wallet and try again.`
     );
     err.code = "WRONG_NETWORK";
     throw err;
-  }
+  },
+
 
-  /**
-   * Switch network for desktop/injected providers and poll until confirmed.
-   * MUST NOT be called in strictMobile mode (mobile WC doesn't support
-   * wallet_switchEthereumChain reliably).
-   *
-   * @param {number} chainId
-   * @param {string} networkName
-   * @param {string} rpcUrl
-   * @param {string} tokenSymbol
-   * @param {number} tokenDecimals
-   */
   async _switchNetworkSafe(
     chainId,
     networkName,
@@ -3490,7 +3453,6 @@ class KwesPayWidget {
     tokenSymbol,
     tokenDecimals
   ) {
-    // Capture before any async boundary — prevents `this` loss in callbacks
     const switchNetwork = this.walletService.switchNetwork;
     const provider = this.walletService.getProvider();
 
@@ -3513,12 +3475,11 @@ class KwesPayWidget {
 
     const targetHex = toHex(chainId);
 
-    // Check current chain — skip if already correct
     try {
       const currentHex = toHex(
         await provider.request({ method: "eth_chainId" })
       );
-      if (currentHex && currentHex === targetHex) return; // already correct, silent return
+      if (currentHex && currentHex === targetHex) return;
     } catch (err) {
       console.warn(
         "[KwesPay] Could not read chainId before switch:",
@@ -3526,7 +3487,6 @@ class KwesPayWidget {
       );
     }
 
-    // Issue the switch
     try {
       await switchNetwork(
         chainId,
@@ -3572,43 +3532,66 @@ class KwesPayWidget {
       `Could not confirm network switch to ${networkName} after 15s. ` +
         `Please switch manually in your wallet and try again.`
     );
-  }
+  },
+};
 
-  // ── Step navigation ──────────────────────────────────────────────────────────
+function resolveAcceptedTokens(input) {
+  if (!input) return null;
+  if (input === "stablecoins") return STABLECOIN_SYMBOLS;
+  if (Array.isArray(input) && input.length)
+    return input.map((t) => t.toUpperCase());
+  return null;
+}
 
-  _goToStep(stepNumber) {
-    document
-      .querySelectorAll(".kwespay-container .step")
-      .forEach((s) => s.classList.remove("active", "exiting"));
-    this._activateStep(stepNumber);
-    this.state.currentStep = stepNumber;
-  }
+class KwesPayWidget {
+  constructor(config) {
+    if (!config.apiKey) throw new Error("[KwesPayWidget] apiKey is required");
+    if (!config.vendorId)
+      throw new Error("[KwesPayWidget] vendorId is required");
+    if (!config.amount || parseFloat(config.amount) <= 0)
+      throw new Error("[KwesPayWidget] Valid amount is required");
 
-  _activateStep(stepNumber) {
-    let targetStep;
-    if (stepNumber === 0.5)
-      targetStep = document.getElementById("kwespay-step0-invalid");
-    else if (typeof stepNumber === "string")
-      targetStep = document.getElementById(`kwespay-step-${stepNumber}`);
-    else targetStep = document.getElementById(`kwespay-step${stepNumber}`);
+    this.config = {
+      apiKey: config.apiKey,
+      vendorId: config.vendorId,
+      amount: parseFloat(config.amount),
+      currency: config.currency || DEFAULT_CONFIG.currency,
+      graphqlEndpoint: DEFAULT_CONFIG.graphqlEndpoint,
+      acceptedTokens: resolveAcceptedTokens(config.acceptedTokens),
+    };
 
-    if (targetStep) targetStep.classList.add("active");
-    else console.warn(`[KwesPayWidget] Step not found: ${stepNumber}`);
-  }
+    if (!Object.values(SUPPORTED_CURRENCIES).includes(this.config.currency)) {
+      throw new Error(
+        `[KwesPayWidget] Unsupported currency: ${this.config.currency}`
+      );
+    }
 
-  _removeCustomStep(id) {
-    document.getElementById(id)?.remove();
-  }
+    this.walletService = new WalletService();
+    this.paymentService = new PaymentService(
+      this.config.apiKey,
+      this.config.graphqlEndpoint
+    );
 
-  _showError(title, message) {
-    const titleEl = document.getElementById("kwespay-errorTitle");
-    const msgEl = document.getElementById("kwespay-errorMessage");
-    if (titleEl) titleEl.textContent = title;
-    if (msgEl) msgEl.textContent = message;
-    this._goToStep(6);
-  }
+    this.state = {
+      isOpen: false,
+      currentStep: 0,
+      selectedNetwork: null,
+      selectedNetworkName: "",
+      selectedChainId: null,
+      selectedRpcUrl: null,
+      selectedContractAddress: null,
+      selectedToken: null,
+      selectedTokenConfig: null,
+      vendorInfo: null,
+      keyAllowedNetworks: null,
+      keyAllowedTokens: null,
+      currentPayload: null,
+      quoteTimerInterval: null,
+      wcUri: null,
+    };
 
-  // ── Public API ───────────────────────────────────────────────────────────────
+    this._init();
+  }
 
   async open() {
     const overlay = document.getElementById("kwespay-widget-overlay");
@@ -3685,21 +3668,6 @@ class KwesPayWidget {
     return { ...this.state, config: { ...this.config } };
   }
 
-  _reset() {
-    this._clearQuoteTimer();
-    this._removeCustomStep("kwespay-step-wallet-picker");
-    this._removeCustomStep("kwespay-step-wc");
-    this.state.selectedNetwork = null;
-    this.state.selectedNetworkName = "";
-    this.state.selectedChainId = null;
-    this.state.selectedRpcUrl = null;
-    this.state.selectedContractAddress = null;
-    this.state.selectedToken = null;
-    this.state.selectedTokenConfig = null;
-    this.state.currentPayload = null;
-    this.state.wcUri = null;
-  }
-
   destroy() {
     this._clearQuoteTimer();
     document.body.classList.remove("kwespay-open");
@@ -3714,6 +3682,17 @@ class KwesPayWidget {
   }
 }
 
+Object.assign(
+  KwesPayWidget.prototype,
+  DomMethods,
+  NavMethods,
+  APIKeyMethods,
+  NetworkMethods,
+  WalletMethods,
+  QuoteMethods,
+  PaymentMethods
+);
+
 /**
  * KwesPay Widget - Main entry point
  * @module @kwespay/widget