@zendfi/sdk 0.6.0 → 0.7.0

package/dist/index.js

@@ -1041,6 +1041,7 @@ __export(index_exports, {
   WalletConnector: () => WalletConnector,
   WebhookError: () => WebhookError,
   ZendFiClient: () => ZendFiClient,
+  ZendFiEmbeddedCheckout: () => ZendFiEmbeddedCheckout,
   ZendFiError: () => ZendFiError2,
   ZendFiSessionKeyManager: () => ZendFiSessionKeyManager,
   asAgentKeyId: () => asAgentKeyId,
@@ -1525,7 +1526,7 @@ function createInterceptors() {
   };
 }
 
-// src/api/agent.ts
+// src/aip/agent.ts
 function normalizeArrayResponse(response, key) {
   if (Array.isArray(response)) {
     return response;
@@ -1793,7 +1794,7 @@ var AgentAPI = class {
   }
 };
 
-// src/api/intents.ts
+// src/aip/intents.ts
 var PaymentIntentsAPI = class {
   constructor(request) {
     this.request = request;
@@ -1956,7 +1957,7 @@ var PaymentIntentsAPI = class {
   }
 };
 
-// src/api/pricing.ts
+// src/aip/pricing.ts
 var PricingAPI = class {
   constructor(request) {
     this.request = request;
@@ -2093,7 +2094,7 @@ var PricingAPI = class {
   }
 };
 
-// src/api/autonomy.ts
+// src/aip/autonomy.ts
 var AutonomyAPI = class {
   constructor(request) {
     this.request = request;
@@ -2305,7 +2306,7 @@ var AutonomyAPI = class {
   }
 };
 
-// src/api/smart-payments.ts
+// src/aip/smart-payments.ts
 var SmartPaymentsAPI = class {
   constructor(request) {
     this.request = request;
@@ -2410,7 +2411,7 @@ var SmartPaymentsAPI = class {
   }
 };
 
-// src/api/session-keys.ts
+// src/aip/session-keys.ts
 var SessionKeysAPI = class {
   constructor(request) {
     this.request = request;
@@ -3490,6 +3491,677 @@ function verifyWebhookSignature(payload, signature, secret) {
   });
 }
 
+// src/embedded-checkout.ts
+var ZendFiEmbeddedCheckout = class {
+  config;
+  container = null;
+  checkoutData = null;
+  pollInterval = null;
+  mounted = false;
+  constructor(config) {
+    this.config = {
+      linkCode: config.linkCode || "",
+      paymentId: config.paymentId || "",
+      containerId: config.containerId,
+      mode: config.mode || "test",
+      apiUrl: config.apiUrl || this.getDefaultApiUrl(),
+      onSuccess: config.onSuccess || (() => {
+      }),
+      onError: config.onError || (() => {
+      }),
+      onLoad: config.onLoad || (() => {
+      }),
+      theme: config.theme || {},
+      allowCustomAmount: config.allowCustomAmount || false,
+      paymentMethods: config.paymentMethods || {
+        walletConnect: true,
+        qrCode: true,
+        solanaWallet: true
+      }
+    };
+    if (!this.config.linkCode && !this.config.paymentId) {
+      throw new Error("Either linkCode or paymentId must be provided");
+    }
+  }
+  getDefaultApiUrl() {
+    if (typeof window !== "undefined" && window.location.hostname === "localhost") {
+      return "http://localhost:8080";
+    }
+    return "https://api.zendfi.tech";
+  }
+  /**
+   * Mount the checkout to the DOM
+   */
+  async mount() {
+    if (this.mounted) {
+      console.warn("Checkout is already mounted");
+      return;
+    }
+    this.container = document.getElementById(this.config.containerId);
+    if (!this.container) {
+      throw new Error(`Container element #${this.config.containerId} not found`);
+    }
+    try {
+      this.renderLoading();
+      await this.loadDependencies();
+      await this.fetchCheckoutData();
+      this.render();
+      this.startPaymentPolling();
+      this.mounted = true;
+      this.config.onLoad();
+    } catch (error) {
+      const err = error;
+      this.config.onError({
+        code: "MOUNT_ERROR",
+        message: err.message,
+        details: error
+      });
+      this.renderError(err.message);
+    }
+  }
+  /**
+   * Unmount and cleanup
+   */
+  unmount() {
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+      this.pollInterval = null;
+    }
+    if (this.container) {
+      this.container.innerHTML = "";
+    }
+    this.mounted = false;
+  }
+  /**
+   * Fetch checkout data from API
+   */
+  async fetchCheckoutData() {
+    let endpoint;
+    let method;
+    if (this.config.linkCode) {
+      endpoint = `/api/v1/payment-links/${this.config.linkCode}/pay`;
+      method = "POST";
+    } else {
+      endpoint = `/api/v1/payments/${this.config.paymentId}/checkout-data`;
+      method = "GET";
+    }
+    const response = await fetch(`${this.config.apiUrl}${endpoint}`, {
+      method,
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch checkout data: ${response.statusText}`);
+    }
+    this.checkoutData = await response.json();
+  }
+  /**
+   * Poll for payment confirmation
+   */
+  startPaymentPolling() {
+    this.pollInterval = setInterval(async () => {
+      if (!this.checkoutData) return;
+      try {
+        const response = await fetch(
+          `${this.config.apiUrl}/api/v1/payments/${this.checkoutData.payment_id}/status`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json"
+            }
+          }
+        );
+        if (response.ok) {
+          const data = await response.json();
+          if (data.status === "confirmed") {
+            this.handlePaymentSuccess(data);
+          } else if (data.status === "failed") {
+            this.handlePaymentFailure(data);
+          } else if (data.status === "expired") {
+            this.handlePaymentExpired();
+          }
+        }
+      } catch (error) {
+        console.error("Payment status check failed:", error);
+      }
+    }, 3e3);
+  }
+  /**
+   * Handle successful payment
+   */
+  handlePaymentSuccess(data) {
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+      this.pollInterval = null;
+    }
+    this.config.onSuccess({
+      paymentId: data.id,
+      transactionSignature: data.transaction_signature,
+      amount: data.amount_usd || data.amount,
+      token: data.payment_token,
+      merchantName: this.checkoutData?.merchant_name || "Merchant"
+    });
+    this.renderSuccess();
+  }
+  /**
+   * Handle payment failure
+   */
+  handlePaymentFailure(data) {
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+      this.pollInterval = null;
+    }
+    this.config.onError({
+      code: "PAYMENT_FAILED",
+      message: "Payment failed",
+      details: data
+    });
+    this.renderError("Payment failed. Please try again.");
+  }
+  /**
+   * Handle payment expiration
+   */
+  handlePaymentExpired() {
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+      this.pollInterval = null;
+    }
+    this.config.onError({
+      code: "PAYMENT_EXPIRED",
+      message: "Payment link has expired"
+    });
+    this.renderError("This payment link has expired.");
+  }
+  /**
+   * Render loading state
+   */
+  renderLoading() {
+    if (!this.container) return;
+    this.container.innerHTML = `
+      <div class="zendfi-checkout-loading" style="${this.getLoadingStyles()}">
+        <div class="zendfi-spinner" style="${this.getSpinnerStyles()}"></div>
+        <p style="margin-top: 16px; color: #666;">Loading checkout...</p>
+      </div>
+    `;
+  }
+  /**
+   * Render the main checkout UI
+   */
+  render() {
+    if (!this.container || !this.checkoutData) return;
+    const theme = this.getComputedTheme();
+    this.container.innerHTML = `
+      <div class="zendfi-embedded-checkout" style="${this.getCheckoutContainerStyles(theme)}">
+        ${this.renderHeader()}
+        ${this.renderPaymentInfo()}
+        ${this.renderPaymentMethods()}
+        ${this.renderFooter()}
+      </div>
+    `;
+    this.attachEventListeners();
+    this.injectStyles();
+  }
+  /**
+   * Render header section
+   */
+  renderHeader() {
+    if (!this.checkoutData) return "";
+    return `
+      <div class="zendfi-checkout-header" style="padding: 24px; border-bottom: 1px solid #e5e7eb;">
+        <h2 style="margin: 0; font-size: 24px; font-weight: 600; color: ${this.config.theme.textColor || "#1f2937"};">
+          Pay ${this.checkoutData.merchant_name}
+        </h2>
+        ${this.checkoutData.description ? `
+          <p style="margin: 8px 0 0 0; color: #6b7280; font-size: 14px;">
+            ${this.checkoutData.description}
+          </p>
+        ` : ""}
+      </div>
+    `;
+  }
+  /**
+   * Render payment information
+   */
+  renderPaymentInfo() {
+    if (!this.checkoutData) return "";
+    return `
+      <div class="zendfi-payment-info" style="padding: 24px; background: #f9fafb;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+          <span style="font-size: 14px; color: #6b7280;">Amount</span>
+          <span style="font-size: 24px; font-weight: 700; color: #1f2937;">
+            $${this.checkoutData.amount_usd.toFixed(2)} ${this.checkoutData.token}
+          </span>
+        </div>
+        
+        ${this.checkoutData.allow_custom_amount ? this.renderCustomAmountInput() : ""}
+        
+        <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: white; border-radius: 8px; margin-top: 12px;">
+          <span style="font-size: 12px; color: #6b7280;">Network</span>
+          <span style="font-size: 12px; font-weight: 600; color: #1f2937; text-transform: uppercase;">
+            ${this.checkoutData.solana_network}
+          </span>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Render custom amount input (Pay What You Want)
+   */
+  renderCustomAmountInput() {
+    if (!this.checkoutData) return "";
+    return `
+      <div style="margin-top: 16px;">
+        <label style="display: block; font-size: 14px; color: #6b7280; margin-bottom: 8px;">
+          Custom Amount (Optional)
+        </label>
+        <input
+          type="number"
+          id="zendfi-custom-amount"
+          placeholder="${this.checkoutData.suggested_amount || this.checkoutData.amount_usd}"
+          min="${this.checkoutData.minimum_amount || 0}"
+          ${this.checkoutData.maximum_amount ? `max="${this.checkoutData.maximum_amount}"` : ""}
+          step="0.01"
+          style="width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 16px;"
+        />
+        ${this.checkoutData.minimum_amount ? `
+          <p style="font-size: 12px; color: #6b7280; margin-top: 4px;">
+            Minimum: $${this.checkoutData.minimum_amount}
+          </p>
+        ` : ""}
+      </div>
+    `;
+  }
+  /**
+   * Render payment methods
+   */
+  renderPaymentMethods() {
+    if (!this.checkoutData) return "";
+    return `
+      <div class="zendfi-payment-methods" style="padding: 24px;">
+        <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: #1f2937;">
+          Payment Methods
+        </h3>
+        
+        ${this.config.paymentMethods.qrCode ? this.renderQRCodeMethod() : ""}
+        ${this.config.paymentMethods.solanaWallet ? this.renderWalletMethod() : ""}
+        ${this.config.paymentMethods.walletConnect ? this.renderWalletConnectMethod() : ""}
+      </div>
+    `;
+  }
+  /**
+   * Render QR code payment method
+   */
+  renderQRCodeMethod() {
+    if (!this.checkoutData) return "";
+    return `
+      <div class="zendfi-payment-method" style="padding: 16px; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 16px;">
+        <div style="text-align: center;">
+          <p style="font-size: 14px; color: #6b7280; margin-bottom: 16px;">
+            Scan with Solana wallet
+          </p>
+          <div id="zendfi-qr-container" style="display: flex; justify-content: center; margin-bottom: 16px;">
+            <canvas id="zendfi-qr-code"></canvas>
+          </div>
+          <button
+            id="zendfi-copy-address"
+            style="padding: 10px 20px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; font-size: 14px; color: #374151; transition: all 0.2s;"
+            onmouseover="this.style.background='#e5e7eb'"
+            onmouseout="this.style.background='#f3f4f6'"
+          >
+            \u{1F4CB} Copy Address
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Render browser wallet method
+   */
+  renderWalletMethod() {
+    return `
+      <div class="zendfi-payment-method" style="margin-bottom: 16px;">
+        <button
+          id="zendfi-connect-wallet"
+          style="width: 100%; padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
+          onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 12px rgba(0, 0, 0, 0.15)';"
+          onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 6px rgba(0, 0, 0, 0.1)';"
+        >
+          \u{1F517} Connect Wallet
+        </button>
+      </div>
+    `;
+  }
+  /**
+   * Render WalletConnect method
+   */
+  renderWalletConnectMethod() {
+    return `
+      <div class="zendfi-payment-method">
+        <button
+          id="zendfi-wallet-connect"
+          style="width: 100%; padding: 16px; background: white; color: #1f2937; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s;"
+          onmouseover="this.style.borderColor='#667eea'; this.style.background='#f9fafb';"
+          onmouseout="this.style.borderColor='#e5e7eb'; this.style.background='white';"
+        >
+          \u{1F4F1} WalletConnect
+        </button>
+      </div>
+    `;
+  }
+  /**
+   * Render footer
+   */
+  renderFooter() {
+    return `
+      <div class="zendfi-checkout-footer" style="padding: 16px 24px; border-top: 1px solid #e5e7eb; text-align: center;">
+        <p style="margin: 0; font-size: 12px; color: #9ca3af;">
+          Powered by <a href="https://zendfi.tech" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 600;">ZendFi</a>
+        </p>
+      </div>
+    `;
+  }
+  /**
+   * Render success state
+   */
+  renderSuccess() {
+    if (!this.container) return;
+    this.container.innerHTML = `
+      <div class="zendfi-checkout-success" style="${this.getSuccessStyles()}">
+        <div style="font-size: 64px; margin-bottom: 16px;">\u2705</div>
+        <h3 style="margin: 0 0 8px 0; font-size: 24px; font-weight: 600; color: #059669;">
+          Payment Successful!
+        </h3>
+        <p style="margin: 0; color: #6b7280; font-size: 14px;">
+          Your payment has been confirmed on the blockchain.
+        </p>
+      </div>
+    `;
+  }
+  /**
+   * Render error state
+   */
+  renderError(message) {
+    if (!this.container) return;
+    this.container.innerHTML = `
+      <div class="zendfi-checkout-error" style="${this.getErrorStyles()}">
+        <div style="font-size: 64px; margin-bottom: 16px;">\u274C</div>
+        <h3 style="margin: 0 0 8px 0; font-size: 24px; font-weight: 600; color: #dc2626;">
+          Payment Failed
+        </h3>
+        <p style="margin: 0; color: #6b7280; font-size: 14px;">
+          ${message}
+        </p>
+      </div>
+    `;
+  }
+  /**
+   * Attach event listeners to interactive elements
+   */
+  attachEventListeners() {
+    const qrCanvas = document.getElementById("zendfi-qr-code");
+    if (qrCanvas && this.checkoutData) {
+      this.generateQRCode(qrCanvas, this.checkoutData.qr_code);
+    }
+    const copyBtn = document.getElementById("zendfi-copy-address");
+    if (copyBtn && this.checkoutData) {
+      copyBtn.addEventListener("click", () => {
+        navigator.clipboard.writeText(this.checkoutData.wallet_address);
+        copyBtn.textContent = "\u2713 Copied!";
+        setTimeout(() => {
+          copyBtn.textContent = "\u{1F4CB} Copy Address";
+        }, 2e3);
+      });
+    }
+    const connectBtn = document.getElementById("zendfi-connect-wallet");
+    if (connectBtn) {
+      connectBtn.addEventListener("click", () => this.handleWalletConnect());
+    }
+    const walletConnectBtn = document.getElementById("zendfi-wallet-connect");
+    if (walletConnectBtn) {
+      walletConnectBtn.addEventListener("click", () => this.handleWalletConnectScan());
+    }
+  }
+  /**
+   * Handle wallet connection and payment
+   */
+  async handleWalletConnect() {
+    try {
+      const provider = window.solana;
+      if (!provider) {
+        alert("No Solana wallet found. Please install Phantom, Solflare, or another Solana wallet.");
+        return;
+      }
+      const connectBtn = document.getElementById("zendfi-connect-wallet");
+      if (connectBtn) {
+        connectBtn.textContent = "\u{1F504} Connecting...";
+        connectBtn.disabled = true;
+      }
+      await provider.connect();
+      const publicKey = provider.publicKey.toString();
+      if (connectBtn) {
+        connectBtn.textContent = "\u{1F528} Building transaction...";
+      }
+      const response = await fetch(
+        `${this.config.apiUrl}/api/v1/payments/${this.checkoutData.payment_id}/build-transaction`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            payer_wallet: publicKey,
+            prefer_gasless: true
+          })
+        }
+      );
+      if (!response.ok) {
+        throw new Error("Failed to build transaction");
+      }
+      const { transaction: transactionBase64, is_gasless } = await response.json();
+      if (connectBtn) {
+        connectBtn.textContent = "\u270D\uFE0F Sign transaction...";
+      }
+      const solanaWeb3 = window.solanaWeb3;
+      const transactionBuffer = Uint8Array.from(atob(transactionBase64), (c) => c.charCodeAt(0));
+      const transaction = solanaWeb3.Transaction.from(transactionBuffer);
+      const signedTransaction = await provider.signTransaction(transaction);
+      if (connectBtn) {
+        connectBtn.textContent = "\u{1F4E1} Submitting...";
+      }
+      if (is_gasless) {
+        const serialized = signedTransaction.serialize();
+        const signedBase64 = btoa(String.fromCharCode(...serialized));
+        const submitResponse = await fetch(
+          `${this.config.apiUrl}/api/v1/payments/${this.checkoutData.payment_id}/submit-gasless-transaction`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              signed_transaction: signedBase64
+            })
+          }
+        );
+        if (!submitResponse.ok) {
+          const errorData = await submitResponse.json().catch(() => ({}));
+          throw new Error(errorData.error || "Failed to submit gasless transaction");
+        }
+      } else {
+        const signature = signedTransaction.signature?.toString();
+        if (!signature) {
+          throw new Error("Transaction signature missing");
+        }
+        const submitResponse = await fetch(
+          `${this.config.apiUrl}/api/v1/payments/${this.checkoutData.payment_id}/submit-transaction`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              transaction_signature: signature
+            })
+          }
+        );
+        if (!submitResponse.ok) {
+          const errorData = await submitResponse.json().catch(() => ({}));
+          throw new Error(errorData.error || "Failed to submit transaction");
+        }
+      }
+      if (connectBtn) {
+        connectBtn.textContent = "\u23F3 Confirming...";
+      }
+    } catch (error) {
+      console.error("Wallet connection error:", error);
+      const connectBtn = document.getElementById("zendfi-connect-wallet");
+      if (connectBtn) {
+        connectBtn.textContent = "\u{1F517} Connect Wallet";
+        connectBtn.disabled = false;
+      }
+      this.config.onError({
+        code: "WALLET_ERROR",
+        message: error instanceof Error ? error.message : "Wallet connection failed",
+        details: error
+      });
+      alert(`Payment failed: ${error instanceof Error ? error.message : "Unknown error"}`);
+    }
+  }
+  /**
+   * Handle mobile wallet connection via Solana Pay deep link
+   */
+  handleWalletConnectScan() {
+    if (!this.checkoutData) return;
+    const solanaPayUrl = `solana:${this.checkoutData.wallet_address}?amount=${this.checkoutData.amount_usd}&spl-token=${this.checkoutData.token}&reference=${this.checkoutData.payment_id}&label=${encodeURIComponent(this.checkoutData.merchant_name)}&message=${encodeURIComponent(this.checkoutData.description || "Payment")}`;
+    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+      window.location.href = solanaPayUrl;
+    } else {
+      navigator.clipboard.writeText(solanaPayUrl).then(() => {
+        alert("Solana Pay link copied! Open it on your mobile wallet or scan the QR code above.");
+      }).catch(() => {
+        alert("Solana Pay URL: " + solanaPayUrl);
+      });
+    }
+  }
+  /**
+   * Generate QR code on canvas using QRious library
+   */
+  generateQRCode(canvas, data) {
+    try {
+      const QRious = window.QRious;
+      if (!QRious) {
+        console.error("QRious library not loaded");
+        return;
+      }
+      new QRious({
+        element: canvas,
+        value: data,
+        size: 256,
+        level: "M"
+      });
+    } catch (error) {
+      console.error("Failed to generate QR code:", error);
+    }
+  }
+  /**
+   * Inject custom styles
+   */
+  injectStyles() {
+    const styleId = "zendfi-embedded-styles";
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      .zendfi-embedded-checkout * {
+        box-sizing: border-box;
+      }
+      
+      @keyframes zendfi-spin {
+        to { transform: rotate(360deg); }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  /**
+   * Load external dependencies (QR code library, Solana web3.js)
+   */
+  async loadDependencies() {
+    if (!window.QRious) {
+      await this.loadScript("https://cdn.jsdelivr.net/npm/qrious@4/dist/qrious.min.js");
+    }
+    if (!window.solanaWeb3) {
+      await this.loadScript("https://unpkg.com/@solana/web3.js@1.95.2/lib/index.iife.min.js");
+    }
+  }
+  /**
+   * Load external script
+   */
+  loadScript(src) {
+    return new Promise((resolve, reject) => {
+      if (document.querySelector(`script[src="${src}"]`)) {
+        resolve();
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = src;
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error(`Failed to load ${src}`));
+      document.head.appendChild(script);
+    });
+  }
+  /**
+   * Get computed theme with defaults
+   */
+  getComputedTheme() {
+    return {
+      primaryColor: this.config.theme.primaryColor || "#667eea",
+      backgroundColor: this.config.theme.backgroundColor || "#ffffff",
+      borderRadius: this.config.theme.borderRadius || "16px",
+      fontFamily: this.config.theme.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      textColor: this.config.theme.textColor || "#1f2937",
+      buttonStyle: this.config.theme.buttonStyle || "solid"
+    };
+  }
+  /**
+   * Style helpers
+   */
+  getCheckoutContainerStyles(theme) {
+    return `
+      font-family: ${theme.fontFamily};
+      background: ${theme.backgroundColor};
+      border-radius: ${theme.borderRadius};
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      max-width: 500px;
+      margin: 0 auto;
+    `.replace(/\s+/g, " ").trim();
+  }
+  getLoadingStyles() {
+    return `
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 80px 24px;
+      text-align: center;
+    `.replace(/\s+/g, " ").trim();
+  }
+  getSpinnerStyles() {
+    return `
+      width: 40px;
+      height: 40px;
+      border: 4px solid #f3f4f6;
+      border-top-color: #667eea;
+      border-radius: 50%;
+      animation: zendfi-spin 0.8s linear infinite;
+    `.replace(/\s+/g, " ").trim();
+  }
+  getSuccessStyles() {
+    return this.getLoadingStyles();
+  }
+  getErrorStyles() {
+    return this.getLoadingStyles();
+  }
+};
+if (typeof window !== "undefined") {
+  window.ZendFiEmbeddedCheckout = ZendFiEmbeddedCheckout;
+}
+
 // src/device-bound-session-keys.ts
 init_device_bound_crypto();
 var import_web32 = require("@solana/web3.js");
@@ -6267,6 +6939,7 @@ var PerformanceMonitor = class {
   WalletConnector,
   WebhookError,
   ZendFiClient,
+  ZendFiEmbeddedCheckout,
   ZendFiError,
   ZendFiSessionKeyManager,
   asAgentKeyId,