@zendfi/sdk 1.0.2 → 1.0.3

package/dist/index.js

@@ -200,12 +200,12 @@ var ConfigLoader = class {
     const env = this.detectEnvironment();
     if (mode === "live" && env === "development") {
       console.warn(
-        "\u26A0\uFE0F  Warning: Using a live API key (zfi_live_) in development environment. This will create real mainnet transactions. Use a test key (zfi_test_) for devnet testing."
+        "Warning: Using a live API key (zfi_live_) in development environment. This will create real mainnet transactions. Use a test key (zfi_test_) for devnet testing."
       );
     }
     if (mode === "test" && env === "production") {
       console.warn(
-        "\u26A0\uFE0F  Warning: Using a test API key (zfi_test_) in production environment. This will create devnet transactions only. Use a live key (zfi_live_) for mainnet."
+        "Warning: Using a test API key (zfi_test_) in production environment. This will create devnet transactions only. Use a live key (zfi_live_) for mainnet."
       );
     }
   }
@@ -307,10 +307,10 @@ var ZendFiError2 = class _ZendFiError extends Error {
     let message = `[${this.code}] ${this.message}`;
     if (this.suggestion) {
       message += `
-\u{1F4A1} Suggestion: ${this.suggestion}`;
+Suggestion: ${this.suggestion}`;
     }
     message += `
-\u{1F4DA} Docs: ${this.docs_url}`;
+Docs: ${this.docs_url}`;
     return message;
   }
   /**
@@ -334,7 +334,7 @@ var AuthenticationError2 = class extends ZendFiError2 {
       code,
       message,
       type: "authentication_error",
-      suggestion: suggestion || "Check your API key in the dashboard at https://app.zendfi.com/settings/api-keys",
+      suggestion: suggestion || "Check your API key in the dashboard at https://dashboard.zendfi.tech",
       statusCode: 401
     });
     this.name = "AuthenticationError";
@@ -442,25 +442,19 @@ function createZendFiError(statusCode, responseBody, message) {
   return new ApiError(errorMessage, errorCode, statusCode, responseBody);
 }
 var ERROR_CODES = {
-  // Authentication
   INVALID_API_KEY: "invalid_api_key",
   API_KEY_EXPIRED: "api_key_expired",
   API_KEY_REVOKED: "api_key_revoked",
-  // Payment
   INSUFFICIENT_BALANCE: "insufficient_balance",
   PAYMENT_DECLINED: "payment_declined",
   PAYMENT_EXPIRED: "payment_expired",
   INVALID_AMOUNT: "invalid_amount",
   INVALID_CURRENCY: "invalid_currency",
-  // Validation
   MISSING_REQUIRED_FIELD: "missing_required_field",
   INVALID_PARAMETER: "invalid_parameter",
-  // Network
   NETWORK_ERROR: "network_error",
   TIMEOUT: "timeout",
-  // Rate limiting
   RATE_LIMIT_EXCEEDED: "rate_limit_exceeded",
-  // Webhook
   WEBHOOK_SIGNATURE_INVALID: "webhook_signature_invalid",
   WEBHOOK_TIMESTAMP_TOO_OLD: "webhook_timestamp_too_old"
 };
@@ -987,6 +981,18 @@ function verifyWebhookSignature(payload, signature, secret) {
 }
 
 // src/embedded-checkout.ts
+var Icons = {
+  clipboard: `<svg class="icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>`,
+  checkCircle: `<svg class="icon icon-lg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>`,
+  xCircle: `<svg class="icon icon-lg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>`,
+  check: `<svg class="icon icon-sm" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>`,
+  refresh: `<svg class="icon icon-sm" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>`,
+  clock: `<svg class="icon icon-sm" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>`,
+  loader: `<svg class="icon icon-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>`,
+  bank: `<svg class="icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z" /></svg>`,
+  clocklg: `<svg class="icon icon-lg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>`,
+  hammer: `<svg class="icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" /></svg>`
+};
 var ZendFiEmbeddedCheckout = class {
   config;
   container = null;
@@ -994,8 +1000,6 @@ var ZendFiEmbeddedCheckout = class {
   pollInterval = null;
   mounted = false;
   paymentProcessed = false;
-  // Prevent duplicate success callbacks
-  // Bank payment state
   bankPaymentState = {};
   constructor(config) {
     this.config = {
@@ -1209,13 +1213,28 @@ var ZendFiEmbeddedCheckout = class {
    */
   renderHeader() {
     if (!this.checkoutData) return "";
+    const testnetBadge = this.checkoutData.solana_network === "devnet" || this.checkoutData.solana_network === "testnet" ? `<span style="font-size: 9px; font-weight: 500; color: #d97706; background: #fef3c7; padding: 2px 6px; border-radius: 4px; margin-left: 6px;">Testnet</span>` : "";
     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>
+      <div class="zendfi-checkout-header" style="padding: 24px; text-align: center; border-bottom: 1px solid #e5e7eb;">
+        <!-- Merchant Badge -->
+        <div style="display: inline-flex; items-center; gap: 8px; padding: 6px 12px; background: white; border: 1px solid #e5e7eb; border-radius: 20px; margin-bottom: 16px;">
+          <div style="width: 20px; height: 20px; border-radius: 50%; background: #1f2937; display: flex; align-items: center; justify-content: center;">
+            <span style="font-size: 10px; font-weight: 600; color: white;">
+              ${this.checkoutData.merchant_name.charAt(0).toUpperCase()}
+            </span>
+          </div>
+          <span style="font-size: 12px; font-weight: 500; color: #374151;">${this.checkoutData.merchant_name}</span>
+          ${testnetBadge}
+        </div>
+        
+        <!-- Amount -->
+        <div style="font-size: 40px; font-weight: 600; color: #1f2937; margin-bottom: 4px;">
+          $${this.checkoutData.amount_usd.toFixed(2)}
+        </div>
+        <p style="margin: 0; font-size: 13px; color: #6b7280;">${this.checkoutData.token} on Solana</p>
+        
         ${this.checkoutData.description ? `
-          <p style="margin: 8px 0 0 0; color: #6b7280; font-size: 14px;">
+          <p style="margin: 12px auto 0; color: #9ca3af; font-size: 13px; max-width: 280px;">
             ${this.checkoutData.description}
           </p>
         ` : ""}
@@ -1299,21 +1318,22 @@ var ZendFiEmbeddedCheckout = class {
   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 class="zendfi-payment-method" style="padding: 20px; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 16px; background: white; transition: all 0.2s;" onmouseover="this.style.borderColor='#d1d5db'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.05)';" onmouseout="this.style.borderColor='#e5e7eb'; this.style.boxShadow='none';">
         <div style="text-align: center;">
-          <p style="font-size: 14px; color: #6b7280; margin-bottom: 16px;">
-            Scan with Solana wallet
+          <h4 style="margin: 0 0 12px 0; font-size: 15px; font-weight: 600; color: #374151;">Scan QR Code</h4>
+          <p style="font-size: 13px; color: #6b7280; margin-bottom: 16px;">
+            Use any Solana wallet app
           </p>
-          <div id="zendfi-qr-container" style="display: flex; justify-content: center; margin-bottom: 16px;">
+          <div id="zendfi-qr-container" style="display: flex; justify-content: center; margin-bottom: 16px; padding: 12px; background: #fafbfc; border-radius: 8px;">
             <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;"
+            style="padding: 10px 20px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; font-size: 14px; color: #374151; font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px;"
             onmouseover="this.style.background='#e5e7eb'"
             onmouseout="this.style.background='#f3f4f6'"
           >
-            \u{1F4CB} Copy Address
+            ${Icons.clipboard} Copy Address
           </button>
         </div>
       </div>
@@ -1323,15 +1343,16 @@ var ZendFiEmbeddedCheckout = class {
    * Render browser wallet method
    */
   renderWalletMethod() {
+    const walletIcon = `<svg style="width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 8px;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3" /></svg>`;
     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)';"
+          style="width: 100%; padding: 16px; background: #1f2937; color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center;"
+          onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 4px 12px rgba(0, 0, 0, 0.15)'; this.style.background='#111827';"
+          onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 6px rgba(0, 0, 0, 0.1)'; this.style.background='#1f2937';"
         >
-          \u{1F517} Connect Wallet
+          ${walletIcon} Connect Wallet
         </button>
       </div>
     `;
@@ -1340,15 +1361,16 @@ var ZendFiEmbeddedCheckout = class {
    * Render WalletConnect method
    */
   renderWalletConnectMethod() {
+    const qrIcon = `<svg style="width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 8px;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" /></svg>`;
     return `
-      <div class="zendfi-payment-method">
+      <div class="zendfi-payment-method" style="margin-bottom: 16px;">
         <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';"
+          style="width: 100%; padding: 16px; background: white; color: #1f2937; border: 2px solid #d1d5db; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center;"
+          onmouseover="this.style.borderColor='#9ca3af'; this.style.background='#f9fafb';"
+          onmouseout="this.style.borderColor='#d1d5db'; this.style.background='white';"
         >
-          \u{1F4F1} WalletConnect
+          ${qrIcon} WalletConnect
         </button>
       </div>
     `;
@@ -1361,13 +1383,13 @@ var ZendFiEmbeddedCheckout = class {
     const isEmailStep = !this.bankPaymentState.orderId;
     const isBankDetailsStep = !!this.bankPaymentState.bankDetails;
     return `
-      <div class="zendfi-payment-method" style="padding: 16px; border: 2px solid #10b981; border-radius: 12px; margin-bottom: 16px; background: #f0fdf4;">
+      <div class="zendfi-payment-method" style="padding: 20px; border: 2px solid #10b981; border-radius: 12px; margin-bottom: 16px; background: #f0fdf4; transition: all 0.2s;" onmouseover="this.style.boxShadow='0 2px 8px rgba(16,185,129,0.15)';" onmouseout="this.style.boxShadow='none';">
         <div style="margin-bottom: 12px;">
-          <h4 style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #065f46; display: flex; align-items: center;">
-            \u{1F3E6} Pay with Bank Transfer (Nigeria)
+          <h4 style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #065f46; display: flex; align-items: center; gap: 8px;">
+            ${Icons.bank} Pay with Bank Transfer
           </h4>
-          <p style="margin: 0; font-size: 12px; color: #047857;">
-            Pay with your Nigerian bank account \u2022 Instant confirmation
+          <p style="margin: 0; font-size: 13px; color: #047857;">
+            Nigerian bank account \u2022 Instant confirmation
           </p>
         </div>
         
@@ -1432,8 +1454,8 @@ var ZendFiEmbeddedCheckout = class {
     return `
       <div id="zendfi-bank-details-step">
         <div style="background: white; border: 1px solid #d1d5db; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
-          <h5 style="margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: #374151;">
-            \u{1F4CB} Transfer to this account:
+          <h5 style="margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: #374151; display: flex; align-items: center; gap: 6px;">
+            ${Icons.bank} Transfer to this account:
           </h5>
           
           <div style="margin-bottom: 8px;">
@@ -1476,14 +1498,14 @@ var ZendFiEmbeddedCheckout = class {
           <div style="color: #6b7280; font-size: 14px;" id="zendfi-bank-status-text">
             Waiting for bank transfer... (<span id="zendfi-bank-timer">0:00</span>)
           </div>
-          <div style="font-size: 12px; color: #9ca3af; margin-top: 4px;">
-            \u23F1\uFE0F Usually takes 10-30 seconds
+          <div style="font-size: 12px; color: #9ca3af; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px;">
+            ${Icons.clock} Usually takes 10-30 seconds
           </div>
           <button
             id="zendfi-refresh-status"
-            style="margin-top: 12px; padding: 8px 16px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; color: #6b7280; font-size: 14px;"
+            style="margin-top: 12px; padding: 8px 16px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; color: #6b7280; font-size: 14px; display: inline-flex; align-items: center; gap: 6px;"
           >
-            \u{1F504} Refresh Status
+            ${Icons.refresh} Refresh Status
           </button>
         </div>
       </div>
@@ -1493,10 +1515,13 @@ var ZendFiEmbeddedCheckout = class {
    * Render footer
    */
   renderFooter() {
+    const lockIcon = `<svg style="width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 4px;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>`;
     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 style="margin: 0; font-size: 12px; color: #9ca3af; display: flex; align-items: center; justify-content: center; gap: 4px;">
+          ${lockIcon}
+          <span>Secured by</span>
+          <a href="https://zendfi.tech" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 600; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">ZendFi</a>
         </p>
       </div>
     `;
@@ -1508,7 +1533,7 @@ var ZendFiEmbeddedCheckout = class {
     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>
+        <div style="color: #10b981; margin-bottom: 16px;">${Icons.checkCircle}</div>
         <h3 style="margin: 0 0 8px 0; font-size: 24px; font-weight: 600; color: #059669;">
           Payment Successful!
         </h3>
@@ -1518,6 +1543,91 @@ var ZendFiEmbeddedCheckout = class {
       </div>
     `;
   }
+  /**
+   * Render payment under review state
+   */
+  renderUnderReview() {
+    if (!this.container) return;
+    const customerEmail = this.bankPaymentState.customerEmail || "unknown";
+    const orderId = this.bankPaymentState.orderId || "N/A";
+    this.container.innerHTML = `
+      <div class="zendfi-checkout-under-review" style="padding: 32px 24px; text-align: center;">
+        <div style="width: 64px; height: 64px; background: #fef3c7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: #d97706;">
+          ${Icons.clock}
+        </div>
+        
+        <h3 style="margin: 0 0 8px 0; font-size: 20px; font-weight: 600; color: #1f2937;">
+          Payment Under Review
+        </h3>
+        <p style="margin: 0 0 24px 0; color: #6b7280; font-size: 14px; line-height: 1.5;">
+          We're still processing your bank transfer. This is taking longer than usual.
+        </p>
+
+        <!-- What's Happening -->
+        <div style="background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 16px; margin-bottom: 16px; text-align: left;">
+          <h4 style="margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: #1e3a8a;">What's happening?</h4>
+          <ul style="margin: 0; padding: 0 0 0 20px; font-size: 13px; color: #1e40af; line-height: 1.6;">
+            <li style="margin-bottom: 8px;">Our team has been notified and is investigating</li>
+            <li style="margin-bottom: 8px;">We're coordinating with our payment partner</li>
+            <li>You'll receive an update via email within 24 hours</li>
+          </ul>
+        </div>
+
+        <!-- Guarantee -->
+        <div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 16px; margin-bottom: 16px; text-align: left;">
+          <div style="display: flex; align-items: start; gap: 12px;">
+            <div style="color: #16a34a; flex-shrink: 0;">${Icons.checkCircle}</div>
+            <div>
+              <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #15803d;">You're Protected</h4>
+              <p style="margin: 0; font-size: 13px; color: #166534; line-height: 1.5;">
+                If we can't deliver your USDC, you'll receive a <strong>full refund</strong> to your bank account within 3-5 business days.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Contact Support -->
+        <div style="background: #f9fafb; border-radius: 12px; padding: 16px; text-align: left;">
+          <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600; color: #1f2937;">Need help?</h4>
+          <p style="margin: 0 0 12px 0; font-size: 13px; color: #6b7280;">
+            Contact our support team if you have questions:
+          </p>
+          <a 
+            href="mailto:tosinoyinboblessed@gmail.com?subject=Payment%20Review%20-%20${orderId}&body=Order%20ID:%20${orderId}%0AEmail:%20${customerEmail}"
+            style="display: block; width: 100%; padding: 12px; background: #1f2937; color: white; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 600; text-align: center; transition: background 0.2s;"
+            onmouseover="this.style.background='#111827'"
+            onmouseout="this.style.background='#1f2937'"
+          >
+            Email Support
+          </a>
+          <p style="margin: 12px 0 0 0; font-size: 12px; color: #9ca3af; text-align: center;">
+            Reference: ${orderId.slice(0, 8)}
+          </p>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Handle payment timeout (15 minutes)
+   */
+  handlePaymentTimeout() {
+    if (this.bankPaymentState.pollingInterval) {
+      clearInterval(this.bankPaymentState.pollingInterval);
+      this.bankPaymentState.pollingInterval = void 0;
+    }
+    if (this.bankPaymentState.timerInterval) {
+      clearInterval(this.bankPaymentState.timerInterval);
+    }
+    this.renderUnderReview();
+    this.config.onError({
+      code: "PAYMENT_TIMEOUT",
+      message: "Payment is taking longer than expected and is now under review",
+      details: {
+        orderId: this.bankPaymentState.orderId,
+        customerEmail: this.bankPaymentState.customerEmail
+      }
+    });
+  }
   /**
    * Render error state
    */
@@ -1525,7 +1635,7 @@ var ZendFiEmbeddedCheckout = class {
     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>
+        <div style="color: #ef4444; margin-bottom: 16px;">${Icons.xCircle}</div>
         <h3 style="margin: 0 0 8px 0; font-size: 24px; font-weight: 600; color: #dc2626;">
           Payment Failed
         </h3>
@@ -1547,9 +1657,9 @@ var ZendFiEmbeddedCheckout = class {
     if (copyBtn && this.checkoutData) {
       copyBtn.addEventListener("click", () => {
         navigator.clipboard.writeText(this.checkoutData.wallet_address);
-        copyBtn.textContent = "\u2713 Copied!";
+        copyBtn.innerHTML = `${Icons.check} Copied!`;
         setTimeout(() => {
-          copyBtn.textContent = "\u{1F4CB} Copy Address";
+          copyBtn.innerHTML = `${Icons.clipboard} Copy Address`;
         }, 2e3);
       });
     }
@@ -1597,13 +1707,13 @@ var ZendFiEmbeddedCheckout = class {
       }
       const connectBtn = document.getElementById("zendfi-connect-wallet");
       if (connectBtn) {
-        connectBtn.textContent = "\u{1F504} Connecting...";
+        connectBtn.innerHTML = `${Icons.loader} Connecting...`;
         connectBtn.disabled = true;
       }
       await provider.connect();
       const publicKey = provider.publicKey.toString();
       if (connectBtn) {
-        connectBtn.textContent = "\u{1F528} Building transaction...";
+        connectBtn.innerHTML = `${Icons.hammer} Building transaction...`;
       }
       const response = await fetch(
         `${this.config.apiUrl}/api/v1/payments/${this.checkoutData.payment_id}/build-transaction`,
@@ -1621,14 +1731,14 @@ var ZendFiEmbeddedCheckout = class {
       }
       const { transaction: transactionBase64, is_gasless } = await response.json();
       if (connectBtn) {
-        connectBtn.textContent = "\u270D\uFE0F Sign transaction...";
+        connectBtn.innerHTML = `${Icons.loader} Signing...`;
       }
       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...";
+        connectBtn.innerHTML = `${Icons.loader} Submitting...`;
       }
       if (is_gasless) {
         const serialized = signedTransaction.serialize();
@@ -1668,13 +1778,13 @@ var ZendFiEmbeddedCheckout = class {
         }
       }
       if (connectBtn) {
-        connectBtn.textContent = "\u23F3 Confirming...";
+        connectBtn.innerHTML = `${Icons.loader} 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.textContent = "Connect Wallet";
         connectBtn.disabled = false;
       }
       this.config.onError({
@@ -1737,6 +1847,38 @@ var ZendFiEmbeddedCheckout = class {
       @keyframes zendfi-spin {
         to { transform: rotate(360deg); }
       }
+      
+      .zendfi-embedded-checkout .icon {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        vertical-align: middle;
+      }
+      
+      .zendfi-embedded-checkout .icon-sm {
+        width: 16px;
+        height: 16px;
+      }
+      
+      .zendfi-embedded-checkout .icon-lg {
+        width: 64px;
+        height: 64px;
+      }
+      
+      .zendfi-embedded-checkout .icon-spin {
+        animation: zendfi-spin 0.8s linear infinite;
+        width: 40px;
+        height: 40px;
+      }
+      
+      .zendfi-spinner {
+        width: 40px;
+        height: 40px;
+        border: 4px solid #f3f4f6;
+        border-top-color: #667eea;
+        border-radius: 50%;
+        animation: zendfi-spin 0.8s linear infinite;
+      }
     `;
     document.head.appendChild(style);
   }
@@ -1788,9 +1930,10 @@ var ZendFiEmbeddedCheckout = class {
       font-family: ${theme.fontFamily};
       background: ${theme.backgroundColor};
       border-radius: ${theme.borderRadius};
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+      border: 1px solid #e5e7eb;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       overflow: hidden;
-      max-width: 500px;
+      max-width: 480px;
       margin: 0 auto;
     `.replace(/\s+/g, " ").trim();
   }
@@ -1847,7 +1990,9 @@ var ZendFiEmbeddedCheckout = class {
             otp,
             fiat_amount: this.checkoutData.amount_usd,
             currency: this.checkoutData.currency,
-            payment_link_id: this.checkoutData.payment_link_id
+            payment_link_id: this.checkoutData.payment_link_id,
+            amount_ngn: this.checkoutData.amount_ngn,
+            payer_service_charge: this.checkoutData.payer_service_charge
           })
         });
         if (!response.ok) {
@@ -1877,7 +2022,8 @@ var ZendFiEmbeddedCheckout = class {
           body: JSON.stringify({
             customer_email: email,
             fiat_amount: this.checkoutData.amount_usd,
-            payment_link_id: this.checkoutData.payment_link_id
+            payment_link_id: this.checkoutData.payment_link_id,
+            amount_ngn: this.checkoutData.amount_ngn
           })
         });
         if (!response.ok) {
@@ -1903,6 +2049,7 @@ var ZendFiEmbeddedCheckout = class {
   startBankStatusPolling() {
     if (!this.bankPaymentState.orderId) return;
     let startTime = Date.now();
+    const TIMEOUT_MS = 15 * 60 * 1e3;
     const timerInterval = setInterval(() => {
       const elapsed = Math.floor((Date.now() - startTime) / 1e3);
       const minutes = Math.floor(elapsed / 60);
@@ -1911,6 +2058,9 @@ var ZendFiEmbeddedCheckout = class {
       if (timerEl) {
         timerEl.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
       }
+      if (Date.now() - startTime > TIMEOUT_MS) {
+        this.handlePaymentTimeout();
+      }
     }, 1e3);
     const pollInterval = setInterval(async () => {
       await this.checkBankPaymentStatus();
@@ -2102,7 +2252,6 @@ async function processWebhook(a, b, c) {
       isProcessed: cfg.isProcessed,
       onProcessed: cfg.onProcessed,
       onError: cfg.onError,
-      // Forward compatibility for alternate names and flags
       enableDeduplication: cfg.enableDeduplication,
       checkDuplicate: cfg.checkDuplicate,
       markProcessed: cfg.markProcessed
@@ -2509,7 +2658,6 @@ var TransactionPoller = class {
     switch (commitment) {
       case "processed":
         return true;
-      // Any status means processed
       case "confirmed":
         return status.confirmationStatus === "confirmed" || status.confirmationStatus === "finalized";
       case "finalized":
@@ -2630,7 +2778,6 @@ var TransactionMonitor = class {
         const status = await TransactionPoller.waitForConfirmation(signature, {
           ...options,
           maxAttempts: 1
-          // Single check per interval
         });
         if (status.confirmed) {
           this.stopMonitoring(signature);
@@ -2758,7 +2905,6 @@ var DevTools = class {
       sessionWallet: keypair.publicKey.toString(),
       privateKey: keypair.secretKey,
       budget: 10
-      // $10 test budget
     };
   }
   /**
@@ -2770,14 +2916,13 @@ var DevTools = class {
       address: mockAddress,
       publicKey: { toString: () => mockAddress },
       signTransaction: async (tx) => {
-        console.log("\u{1F527} Mock wallet: Signing transaction");
+        console.log("Mock wallet: Signing transaction");
         return tx;
       },
       signMessage: async (_msg) => {
-        console.log("\u{1F527} Mock wallet: Signing message");
+        console.log("Mock wallet: Signing message");
         return {
           signature: new Uint8Array(64)
-          // Mock signature
         };
       },
       isConnected: () => true,
@@ -2792,26 +2937,26 @@ var DevTools = class {
   static logTransactionFlow(paymentId) {
     console.log(`
 \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557
-\u2551                    TRANSACTION FLOW                            \u2551
+\u2551                    TRANSACTION FLOW                           \u2551
 \u2560\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2563
-\u2551                                                                \u2551
-\u2551  Payment ID: ${paymentId}                                      \u2551
-\u2551                                                                \u2551
-\u2551  1. \u{1F3D7}\uFE0F  Create Payment Intent                                 \u2551
+\u2551                                                               \u2551
+\u2551  Payment ID: ${paymentId}                                     \u2551
+\u2551                                                               \u2551
+\u2551  1. Create Payment Intent                                     \u2551
 \u2551      \u2514\u2500> POST /api/v1/ai/smart-payment                        \u2551
-\u2551                                                                \u2551
-\u2551  2. \u{1F510} Sign Transaction (Device-Bound)                        \u2551
-\u2551      \u2514\u2500> Client-side signing with cached keypair             \u2551
-\u2551                                                                \u2551
-\u2551  3. \u{1F4E4} Submit Signed Transaction                              \u2551
-\u2551      \u2514\u2500> POST /api/v1/ai/payments/{id}/submit-signed         \u2551
-\u2551                                                                \u2551
-\u2551  4. \u23F3 Wait for Blockchain Confirmation                       \u2551
-\u2551      \u2514\u2500> Poll Solana RPC (~30-60 seconds)                    \u2551
-\u2551                                                                \u2551
-\u2551  5. \u2705 Payment Confirmed                                      \u2551
-\u2551      \u2514\u2500> Webhook fired: payment.confirmed                    \u2551
-\u2551                                                                \u2551
+\u2551                                                               \u2551
+\u2551  2. Sign Transaction (Device-Bound)                           \u2551
+\u2551      \u2514\u2500> Client-side signing with cached keypair              \u2551
+\u2551                                                               \u2551
+\u2551  3. Submit Signed Transaction                                 \u2551
+\u2551      \u2514\u2500> POST /api/v1/ai/payments/{id}/submit-signed          \u2551
+\u2551                                                               \u2551
+\u2551  4. Wait for Blockchain Confirmation                          \u2551
+\u2551      \u2514\u2500> Poll Solana RPC (~30-60 seconds)                     \u2551
+\u2551                                                               \u2551
+\u2551  5. Payment Confirmed                                         \u2551
+\u2551      \u2514\u2500> Webhook fired: payment.confirmed                     \u2551
+\u2551                                                               \u2551
 \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D
     `);
   }