@voxepay/checkout 0.0.1-security → 0.5.19

package/src/components/modal.ts

@@ -0,0 +1,1783 @@
+/**
+ * VoxePay Checkout Modal Component
+ * A modern, glassmorphism payment modal
+ */
+
+import {
+  detectCardBrand,
+  validateCardNumber,
+  validateExpiry,
+  validateCVV,
+  validatePIN
+} from '../utils/card-validator';
+import {
+  formatCardNumber,
+  formatExpiry,
+  formatCVV,
+  formatPIN,
+  formatAmount,
+  formatMainUnitAmount
+} from '../utils/formatter';
+import { generateAuthData, formatExpiryForApi, cleanPan } from '../utils/encryption';
+import { VoxePayApiClient } from '../api/client';
+import type { CheckoutOptions, PaymentResult, PaymentError, BankTransferDetails, PaymentMethod } from '../types';
+
+// SVG Icons
+const ICONS = {
+  close: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>`,
+  lock: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+  </svg>`,
+  check: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+  </svg>`,
+  error: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" />
+  </svg>`,
+  copy: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+  </svg>`,
+  bank: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M3 21h18M3 10h18M5 6l7-3 7 3M4 10v11M20 10v11M8 14v3M12 14v3M16 14v3" />
+  </svg>`,
+  card: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+  </svg>`,
+  clock: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>`,
+};
+
+// Card brand logos
+const CARD_BRAND_DISPLAY: Record<string, string> = {
+  visa: 'VISA',
+  mastercard: 'MC',
+  amex: 'AMEX',
+  verve: 'VERVE',
+  discover: 'DISC',
+};
+
+export interface ModalState {
+  cardNumber: string;
+  expiry: string;
+  cvv: string;
+  pin: string;
+  otp: string;
+  errors: {
+    cardNumber?: string;
+    expiry?: string;
+    cvv?: string;
+    pin?: string;
+    otp?: string;
+  };
+  isProcessing: boolean;
+  isSuccess: boolean;
+  isOtpStep: boolean;
+  otpTimer: number;
+  canResendOtp: boolean;
+  otpTimerInterval: number | null;
+  paymentMethod: PaymentMethod;
+  transferTimer: number;
+  transferTimerInterval: number | null;
+  bankTransferDetails: BankTransferDetails | null;
+  // API response fields
+  paymentId: string | null;
+  transactionId: string | null;
+  transactionRef: string | null;
+  eciFlag: string | null;
+  otpDeliveryMessage: string | null;
+  feeDetails?: {
+    transactionFee: number;
+    transactionFeeVat: number;
+    totalFees: number;
+    grossAmount: number;
+    currency: string;
+  };
+}
+
+export class VoxePayModal {
+  private options: CheckoutOptions;
+  private state: ModalState;
+  private container: HTMLDivElement | null = null;
+  private overlay: HTMLDivElement | null = null;
+  private apiClient: VoxePayApiClient | null = null;
+
+  constructor(options: CheckoutOptions) {
+    this.options = options;
+    const methods = options.paymentMethods || ['card', 'bank_transfer'];
+
+    // Initialize API client from SDK config
+    if (options._sdkConfig) {
+      this.apiClient = new VoxePayApiClient(
+        options._sdkConfig.apiKey,
+        options._sdkConfig.baseUrl
+      );
+    }
+
+    this.state = {
+      cardNumber: '',
+      expiry: '',
+      cvv: '',
+      pin: '',
+      otp: '',
+      errors: {},
+      isProcessing: false,
+      isSuccess: false,
+      isOtpStep: false,
+      otpTimer: 60,
+      canResendOtp: false,
+      otpTimerInterval: null,
+      paymentMethod: methods[0],
+      transferTimer: 0,
+      transferTimerInterval: null,
+      bankTransferDetails: options.bankTransferDetails || null,
+      paymentId: null,
+      transactionId: null,
+      transactionRef: null,
+      eciFlag: null,
+      otpDeliveryMessage: null,
+    };
+  }
+
+  /**
+   * Open the checkout modal
+   */
+  open(): void {
+    this.injectStyles();
+    this.render();
+    this.attachEventListeners();
+
+    // Trigger open animation
+    requestAnimationFrame(() => {
+      this.overlay?.classList.add('voxepay-visible');
+    });
+  }
+
+  /**
+   * Close the checkout modal
+   */
+  close(): void {
+    this.stopTransferTimer();
+    this.stopStatusPolling();
+    this.overlay?.classList.remove('voxepay-visible');
+
+    setTimeout(() => {
+      this.container?.remove();
+      this.container = null;
+      this.overlay = null;
+      this.options.onClose?.();
+    }, 300);
+  }
+
+  /**
+   * Inject styles if not already present
+   */
+  private injectStyles(): void {
+    if (document.getElementById('voxepay-checkout-styles')) return;
+
+    const style = document.createElement('style');
+    style.id = 'voxepay-checkout-styles';
+    style.textContent = this.getStyles();
+    document.head.appendChild(style);
+  }
+
+  /**
+   * Render the modal HTML
+   */
+  private render(): void {
+    this.container = document.createElement('div');
+    this.container.className = 'voxepay-checkout';
+    this.container.innerHTML = this.getModalHTML();
+    document.body.appendChild(this.container);
+
+    this.overlay = this.container.querySelector('.voxepay-overlay');
+  }
+
+  /**
+   * Get available payment methods
+   */
+  private getPaymentMethods(): PaymentMethod[] {
+    return this.options.paymentMethods || ['card', 'bank_transfer'];
+  }
+
+  /**
+   * Get modal HTML
+   */
+  private getModalHTML(): string {
+    const totalPayableKobo = this.options.feeDetails 
+      ? Math.round((this.options.feeDetails.grossAmount + this.options.feeDetails.totalFees) * 100)
+      : this.options.amount;
+    const formattedAmount = formatAmount(totalPayableKobo, this.options.currency);
+    const methods = this.getPaymentMethods();
+    const showTabs = methods.length > 1;
+    const isCard = this.state.paymentMethod === 'card';
+
+    return `
+      <div class="voxepay-overlay">
+        <div class="voxepay-modal" role="dialog" aria-modal="true" aria-labelledby="voxepay-title">
+          <div class="voxepay-header">
+            <div class="voxepay-header-left">
+              <div class="voxepay-logo">V</div>
+              <div>
+                <div class="voxepay-amount" id="voxepay-title">Pay ${formattedAmount}</div>
+                ${this.options.description ? `<div style="font-size: 0.875rem; color: var(--voxepay-text-muted);">${this.options.description}</div>` : ''}
+              </div>
+            </div>
+            <button class="voxepay-close" aria-label="Close" data-action="close">
+              ${ICONS.close}
+            </button>
+          </div>
+
+          ${showTabs ? `
+          <div class="voxepay-method-tabs">
+            ${methods.includes('card') ? `
+            <button class="voxepay-method-tab ${isCard ? 'active' : ''}" data-method="card">
+              ${ICONS.card} <span>Card</span>
+            </button>` : ''}
+            ${methods.includes('bank_transfer') ? `
+            <button class="voxepay-method-tab ${!isCard ? 'active' : ''}" data-method="bank_transfer">
+              ${ICONS.bank} <span>Bank Transfer</span>
+            </button>` : ''}
+          </div>` : ''}
+          
+          <div class="voxepay-body" id="voxepay-form-container">
+            ${isCard ? this.getCardFormHTML(formattedAmount) : this.getBankTransferHTML(formattedAmount)}
+          </div>
+          
+          <div class="voxepay-footer">
+            <div class="voxepay-powered-by">
+              ${ICONS.lock}
+              <span>Secured by <strong>VoxePay</strong></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Get card form HTML
+   */
+  private getCardFormHTML(formattedAmount: string): string {
+    return `
+      <form id="voxepay-payment-form" novalidate>
+        <div class="voxepay-form-group">
+          <label class="voxepay-label">
+            <span class="voxepay-label-icon">💳</span>
+            Card Number
+          </label>
+          <div class="voxepay-card-input-wrapper">
+            <input type="text" class="voxepay-input" id="voxepay-card-number" name="cardNumber"
+              placeholder="1234 5678 9012 3456" autocomplete="cc-number" inputmode="numeric" />
+            <div class="voxepay-card-brand" id="voxepay-card-brand"></div>
+          </div>
+          <div class="voxepay-error-message" id="voxepay-card-error" style="display: none;"></div>
+        </div>
+        
+        <div class="voxepay-row">
+          <div class="voxepay-form-group">
+            <label class="voxepay-label"><span class="voxepay-label-icon">📅</span> Expiry</label>
+            <input type="text" class="voxepay-input" id="voxepay-expiry" name="expiry"
+              placeholder="MM/YY" autocomplete="cc-exp" inputmode="numeric" maxlength="5" />
+            <div class="voxepay-error-message" id="voxepay-expiry-error" style="display: none;"></div>
+          </div>
+          <div class="voxepay-form-group">
+            <label class="voxepay-label"><span class="voxepay-label-icon">🔒</span> CVV</label>
+            <input type="text" class="voxepay-input" id="voxepay-cvv" name="cvv"
+              placeholder="•••" autocomplete="cc-csc" inputmode="numeric" maxlength="4" />
+            <div class="voxepay-error-message" id="voxepay-cvv-error" style="display: none;"></div>
+          </div>
+          <div class="voxepay-form-group">
+            <label class="voxepay-label"><span class="voxepay-label-icon">🔑</span> PIN</label>
+            <input type="password" class="voxepay-input" id="voxepay-pin" name="pin"
+              placeholder="••••" autocomplete="current-password" inputmode="numeric" maxlength="4" />
+            <div class="voxepay-error-message" id="voxepay-pin-error" style="display: none;"></div>
+          </div>
+        </div>
+        <div class="voxepay-sticky-actions">
+          <button type="submit" class="voxepay-submit-btn" id="voxepay-submit">
+            <span>Pay Now ${formattedAmount}</span>
+          </button>
+        </div>
+      </form>
+    `;
+  }
+
+  /**
+   * Get bank transfer HTML
+   */
+  private getBankTransferHTML(formattedAmount: string): string {
+    const details = this.state.bankTransferDetails;
+
+    if (!details) {
+      return `
+        <div class="voxepay-transfer-view">
+          <div class="voxepay-transfer-loading">
+            <div class="voxepay-spinner"></div>
+            <p style="margin-top: 16px; color: var(--voxepay-text-muted);">Generating account details...</p>
+          </div>
+        </div>
+      `;
+    }
+
+    let displayAmount = formattedAmount;
+    let feeBreakdown = '';
+
+    if (details.feeDetails && details.totalPayableAmount !== undefined) {
+      displayAmount = formatMainUnitAmount(details.totalPayableAmount, details.feeDetails.currency);
+      feeBreakdown = `
+        <div style="border-top: 1px dashed var(--voxepay-border); padding-top: 8px; margin-top: 8px; display: flex; flex-direction: column; gap: 4px;">
+          <div style="display: flex; justify-content: space-between; width: 100%; font-size: 0.85rem; color: var(--voxepay-text-muted);">
+            <span>Amount</span>
+            <span>${formatMainUnitAmount(details.feeDetails.grossAmount, details.feeDetails.currency)}</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; width: 100%; font-size: 0.85rem; color: var(--voxepay-text-muted);">
+            <span>Fee</span>
+            <span>${formatMainUnitAmount(details.feeDetails.totalFees, details.feeDetails.currency)}</span>
+          </div>
+        </div>
+      `;
+    }
+
+    return `
+      <div class="voxepay-transfer-view">
+        <div class="voxepay-transfer-instruction">
+          <p>Transfer <strong>${displayAmount}</strong> to the account below</p>
+        </div>
+
+        <div class="voxepay-transfer-details">
+          <div class="voxepay-transfer-detail">
+            <span class="voxepay-transfer-label">Account Number</span>
+            <div class="voxepay-transfer-value-row">
+              <span class="voxepay-transfer-value voxepay-transfer-account" id="voxepay-account-number">${details.accountNumber}</span>
+              <button class="voxepay-copy-btn" id="voxepay-copy-btn" data-copy="${details.accountNumber}" title="Copy">
+                ${ICONS.copy}
+              </button>
+            </div>
+          </div>
+
+          <div class="voxepay-transfer-detail">
+            <span class="voxepay-transfer-label">Bank Name</span>
+            <span class="voxepay-transfer-value">${details.bankName}</span>
+          </div>
+
+          <div class="voxepay-transfer-detail">
+            <span class="voxepay-transfer-label">Account Name</span>
+            <span class="voxepay-transfer-value">${details.accountName}</span>
+          </div>
+
+          <div class="voxepay-transfer-detail">
+            <span class="voxepay-transfer-label">Total Amount</span>
+            <span class="voxepay-transfer-value voxepay-transfer-amount">${displayAmount}</span>
+          </div>
+          ${feeBreakdown}
+
+          <div class="voxepay-transfer-detail">
+            <span class="voxepay-transfer-label">Reference</span>
+            <span class="voxepay-transfer-value" style="font-family: monospace; letter-spacing: 1px;">${details.reference}</span>
+          </div>
+        </div>
+
+        <div class="voxepay-transfer-timer" id="voxepay-transfer-timer">
+          ${ICONS.clock}
+          <span>Account expires in <strong id="voxepay-transfer-countdown">${this.formatCountdown(details.expiresIn)}</strong></span>
+        </div>
+
+        <div style="margin: 16px 0; padding: 12px; background: rgba(0, 97, 255, 0.05); border: 1px solid var(--voxepay-primary); border-radius: 8px; display: flex; gap: 12px; align-items: flex-start;">
+          <div style="color: var(--voxepay-primary); flex-shrink: 0; margin-top: 2px;">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <p style="font-size: 0.85rem; color: var(--voxepay-text); margin: 0; line-height: 1.4;">
+            <strong>Important Note:</strong> Please include <strong>${details.reference}</strong> as the narration or remark on your bank app to ensure your payment is confirmed instantly.
+          </p>
+        </div>
+        <div class="voxepay-sticky-actions">
+          <button type="button" class="voxepay-submit-btn" id="voxepay-transfer-confirm">
+            <span>🔐 Verify &amp; Pay</span>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Format countdown seconds to MM:SS
+   */
+  private formatCountdown(seconds: number): string {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+  }
+
+  /**
+   * Render success view
+   */
+  private renderSuccessView(): void {
+    const formContainer = this.container?.querySelector('#voxepay-form-container');
+    if (!formContainer) return;
+
+    const formattedAmount = formatAmount(this.options.amount, this.options.currency);
+
+    formContainer.innerHTML = `
+      <div class="voxepay-success-view">
+        <div class="voxepay-success-icon">
+          ${ICONS.check}
+        </div>
+        <h2 class="voxepay-success-title">Payment Successful!</h2>
+        <p class="voxepay-success-message">Your payment of ${formattedAmount} has been processed.</p>
+        <button class="voxepay-success-btn" data-action="close">Done</button>
+      </div>
+    `;
+
+    // Re-attach close listener
+    const closeBtn = formContainer.querySelector('[data-action="close"]');
+    closeBtn?.addEventListener('click', () => this.close());
+  }
+
+  /**
+   * Render error modal view
+   */
+  private renderErrorModal(code: string, message: string, recoverable: boolean): void {
+    const formContainer = this.container?.querySelector('#voxepay-form-container');
+    if (!formContainer) return;
+
+    const isRetryable = recoverable && this.state.paymentMethod === 'card';
+
+    formContainer.innerHTML = `
+      <div class="voxepay-error-view">
+        <div class="voxepay-error-icon-large">
+          ${ICONS.error}
+        </div>
+        <h2 class="voxepay-error-title">Payment Failed</h2>
+        <p class="voxepay-error-message">${message}</p>
+        ${code ? `<p class="voxepay-error-code">Error code: ${code}</p>` : ''}
+        <div class="voxepay-error-actions">
+          ${isRetryable ? `
+            <button class="voxepay-submit-btn" id="voxepay-retry-btn">
+              <span>Try Again</span>
+            </button>
+          ` : ''}
+          <button class="voxepay-back-btn" id="voxepay-error-close-btn">
+            ${isRetryable ? 'Cancel' : 'Close'}
+          </button>
+        </div>
+      </div>
+    `;
+
+    // Attach listeners
+    const retryBtn = formContainer.querySelector('#voxepay-retry-btn');
+    retryBtn?.addEventListener('click', () => this.handleBackToCard());
+
+    const closeBtn = formContainer.querySelector('#voxepay-error-close-btn');
+    closeBtn?.addEventListener('click', () => this.close());
+  }
+
+  /**
+   * Show error — inline for field errors, modal for fatal errors
+   */
+  private showErrorModal(code: string, message: string, recoverable: boolean): void {
+    this.renderErrorModal(code, message, recoverable);
+    this.options.onError({ code, message, recoverable });
+  }
+
+  /**
+   * Render OTP verification view
+   */
+  private renderOTPView(): void {
+    const formContainer = this.container?.querySelector('#voxepay-form-container');
+    if (!formContainer) return;
+
+    this.state.isOtpStep = true;
+    this.state.otpTimer = 60;
+    this.state.canResendOtp = false;
+
+    // Use backend message if available (e.g. "Kindly enter the OTP sent to **********2888")
+    const subtitle = this.state.otpDeliveryMessage
+      ? this.state.otpDeliveryMessage
+      : (() => {
+          const sentToPhone = this.options.customerPhone && (
+            !this.state.otpDeliveryMessage || this.state.otpDeliveryMessage.toLowerCase().includes('phone')
+          );
+          const maskedDestination = sentToPhone
+            ? `****${(this.options.customerPhone ?? '').slice(-4)}`
+            : this.options.customerEmail
+              ? `****${this.options.customerEmail.slice(-4)}`
+              : '****';
+          const destinationLabel = sentToPhone ? 'phone number' : 'email';
+          return `We've sent a 6-digit code to your ${destinationLabel} ending in <strong>${maskedDestination}</strong>`;
+        })();
+
+    let feeBreakdownHTML = '';
+    if (this.state.feeDetails) {
+      const totalAmount = this.state.feeDetails.grossAmount + this.state.feeDetails.totalFees;
+      
+      const titleEl = this.container?.querySelector('#voxepay-title');
+      if (titleEl) {
+        titleEl.textContent = `Pay ${formatMainUnitAmount(totalAmount, this.state.feeDetails.currency)}`;
+      }
+
+      feeBreakdownHTML = `
+        <div style="margin: 16px 0; padding: 12px; background: var(--voxepay-surface); border-radius: 8px; border: 1px solid var(--voxepay-border);">
+          <div style="display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 0.85rem; color: var(--voxepay-text-muted);">
+            <span>Amount</span>
+            <span>${formatMainUnitAmount(this.state.feeDetails.grossAmount, this.state.feeDetails.currency)}</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.85rem; color: var(--voxepay-text-muted);">
+            <span>Fee</span>
+            <span>${formatMainUnitAmount(this.state.feeDetails.totalFees, this.state.feeDetails.currency)}</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; border-top: 1px solid var(--voxepay-border); padding-top: 8px; font-weight: 600;">
+            <span>Total Payable</span>
+            <span>${formatMainUnitAmount(totalAmount, this.state.feeDetails.currency)}</span>
+          </div>
+        </div>
+      `;
+    }
+
+    formContainer.innerHTML = `
+      <div class="voxepay-otp-view">
+        <div class="voxepay-otp-header">
+          <div class="voxepay-otp-icon">📱</div>
+          <h3 class="voxepay-otp-title">Verify Your Payment</h3>
+          <p class="voxepay-otp-subtitle">${subtitle}</p>
+        </div>
+        ${feeBreakdownHTML}
+
+        
+        <div class="voxepay-otp-inputs-container">
+          <div class="voxepay-otp-inputs" id="voxepay-otp-inputs">
+            <input type="text" maxlength="1" class="voxepay-otp-digit" data-index="0" inputmode="numeric" autocomplete="one-time-code" />
+            <input type="text" maxlength="1" class="voxepay-otp-digit" data-index="1" inputmode="numeric" />
+            <input type="text" maxlength="1" class="voxepay-otp-digit" data-index="2" inputmode="numeric" />
+            <input type="text" maxlength="1" class="voxepay-otp-digit" data-index="3" inputmode="numeric" />
+            <input type="text" maxlength="1" class="voxepay-otp-digit" data-index="4" inputmode="numeric" />
+            <input type="text" maxlength="1" class="voxepay-otp-digit" data-index="5" inputmode="numeric" />
+          </div>
+          <div class="voxepay-error-message" id="voxepay-otp-error" style="display: none;"></div>
+        </div>
+
+        <div class="voxepay-otp-timer" id="voxepay-otp-timer">
+          Resend code in <span id="voxepay-timer-count">60</span>s
+        </div>
+        <div class="voxepay-sticky-actions">
+          <button class="voxepay-resend-btn" id="voxepay-resend-otp" disabled>
+            Resend OTP
+          </button>
+          
+          <button type="button" class="voxepay-submit-btn" id="voxepay-verify-otp">
+            <span>✓ Confirm OTP</span>
+          </button>
+          
+          <button class="voxepay-back-btn" id="voxepay-back-to-card">
+            ← Back to card details
+          </button>
+        </div>
+      </div>
+    `;
+
+    this.attachOTPEventListeners();
+    this.startOTPTimer();
+  }
+
+  /**
+   * Attach OTP-specific event listeners
+   */
+  private attachOTPEventListeners(): void {
+    const otpInputs = this.container?.querySelectorAll('.voxepay-otp-digit') as NodeListOf<HTMLInputElement>;
+
+    otpInputs?.forEach((input, index) => {
+      input.addEventListener('input', (e) => this.handleOTPInput(e, index));
+      input.addEventListener('keydown', (e) => this.handleOTPKeydown(e, index));
+      input.addEventListener('paste', (e) => this.handleOTPPaste(e));
+    });
+
+    const verifyBtn = this.container?.querySelector('#voxepay-verify-otp');
+    verifyBtn?.addEventListener('click', () => this.handleOTPSubmit());
+
+    const resendBtn = this.container?.querySelector('#voxepay-resend-otp');
+    resendBtn?.addEventListener('click', () => this.handleResendOTP());
+
+    const backBtn = this.container?.querySelector('#voxepay-back-to-card');
+    backBtn?.addEventListener('click', () => this.handleBackToCard());
+
+    (otpInputs?.[0] as HTMLInputElement)?.focus();
+  }
+
+  private handleOTPInput(e: Event, index: number): void {
+    const input = e.target as HTMLInputElement;
+    const value = input.value.replace(/\D/g, '');
+    input.value = value;
+
+    if (value && index < 5) {
+      const nextInput = this.container?.querySelector(`[data-index="${index + 1}"]`) as HTMLInputElement;
+      nextInput?.focus();
+    }
+
+    this.updateOTPState();
+    this.clearError('otp');
+  }
+
+  private handleOTPKeydown(e: KeyboardEvent, index: number): void {
+    const input = e.target as HTMLInputElement;
+
+    if (e.key === 'Backspace' && !input.value && index > 0) {
+      const prevInput = this.container?.querySelector(`[data-index="${index - 1}"]`) as HTMLInputElement;
+      prevInput?.focus();
+    }
+  }
+
+  private handleOTPPaste(e: ClipboardEvent): void {
+    e.preventDefault();
+    const pastedData = e.clipboardData?.getData('text').replace(/\D/g, '').slice(0, 6);
+
+    if (pastedData) {
+      const inputs = this.container?.querySelectorAll('.voxepay-otp-digit') as NodeListOf<HTMLInputElement>;
+      pastedData.split('').forEach((digit, i) => {
+        if (inputs[i]) {
+          inputs[i].value = digit;
+        }
+      });
+      this.updateOTPState();
+    }
+  }
+
+  private updateOTPState(): void {
+    const inputs = this.container?.querySelectorAll('.voxepay-otp-digit') as NodeListOf<HTMLInputElement>;
+    let otp = '';
+    inputs?.forEach(input => otp += input.value);
+    this.state.otp = otp;
+  }
+
+  private startOTPTimer(): void {
+    const timerEl = this.container?.querySelector('#voxepay-timer-count');
+    const timerContainer = this.container?.querySelector('#voxepay-otp-timer');
+    const resendBtn = this.container?.querySelector('#voxepay-resend-otp') as HTMLButtonElement;
+
+    this.state.otpTimerInterval = window.setInterval(() => {
+      this.state.otpTimer--;
+
+      if (timerEl) {
+        timerEl.textContent = String(this.state.otpTimer);
+      }
+
+      if (this.state.otpTimer <= 0) {
+        if (this.state.otpTimerInterval) {
+          clearInterval(this.state.otpTimerInterval);
+        }
+        this.state.canResendOtp = true;
+        if (timerContainer) (timerContainer as HTMLElement).style.display = 'none';
+        if (resendBtn) resendBtn.disabled = false;
+      }
+    }, 1000);
+  }
+
+  private async handleOTPSubmit(): Promise<void> {
+    if (this.state.otp.length !== 6) {
+      this.showError('otp', 'Please enter the complete 6-digit code');
+      return;
+    }
+
+    this.setOTPProcessing(true);
+
+    try {
+      await this.verifyOTP();
+
+      if (this.state.otpTimerInterval) {
+        clearInterval(this.state.otpTimerInterval);
+      }
+
+      const result = await this.processPayment();
+
+      this.state.isSuccess = true;
+      this.renderSuccessView();
+      this.options.onSuccess(result);
+    } catch (error) {
+      this.setOTPProcessing(false);
+      const paymentError = error as PaymentError;
+      const code = paymentError.code || 'OTP_VALIDATION_FAILED';
+      const message = paymentError.message || 'Invalid OTP. Please try again.';
+      const recoverable = paymentError.recoverable !== false;
+      if (recoverable) {
+        this.showError('otp', message);
+      } else {
+        this.showErrorModal(code, message, false);
+      }
+    }
+  }
+
+  private setOTPProcessing(isProcessing: boolean): void {
+    const verifyBtn = this.container?.querySelector('#voxepay-verify-otp') as HTMLButtonElement;
+
+    if (verifyBtn) {
+      verifyBtn.disabled = isProcessing;
+      verifyBtn.innerHTML = isProcessing
+        ? '<div class="voxepay-spinner"></div><span>Verifying...</span>'
+        : '<span>✓ Confirm OTP</span>';
+    }
+  }
+
+  private async verifyOTP(): Promise<void> {
+    if (!this.apiClient || !this.options._sdkConfig) {
+      throw { code: 'SDK_ERROR', message: 'SDK not properly initialized', recoverable: false };
+    }
+
+    if (this.state.otp.length !== 6) {
+      throw { code: 'INVALID_OTP', message: 'Please enter the complete 6-digit code', recoverable: true };
+    }
+
+    if (!this.state.paymentId || !this.state.transactionRef) {
+      throw { code: 'MISSING_PAYMENT_DATA', message: 'Payment session expired. Please try again.', recoverable: false };
+    }
+
+    await this.apiClient.validateOTP(this.options._sdkConfig.paymentLinkSlug!, {
+      paymentId: this.state.paymentId,          // data.id UUID from /pay response
+      otp: this.state.otp,
+      transactionId: this.state.transactionRef, // same as transactionRef
+      transactionRef: this.state.transactionRef,
+      eciFlag: this.state.eciFlag || undefined,
+      organizationId: this.options._sdkConfig.organizationId,
+    });
+  }
+
+  private async handleResendOTP(): Promise<void> {
+    const timerContainer = this.container?.querySelector('#voxepay-otp-timer') as HTMLElement;
+    const resendBtn = this.container?.querySelector('#voxepay-resend-otp') as HTMLButtonElement;
+
+    // Call resend OTP API
+    if (this.apiClient && this.options._sdkConfig && this.state.transactionRef) {
+      try {
+        if (resendBtn) resendBtn.disabled = true;
+        await this.apiClient.resendOTP(this.options._sdkConfig.paymentLinkSlug!, {
+          transactionRef: this.state.transactionRef,
+          organizationId: this.options._sdkConfig.organizationId,
+        });
+      } catch (error: any) {
+        console.error('[VoxePay] Failed to resend OTP:', error);
+        // Continue with timer reset even if API fails
+      }
+    }
+
+    this.state.otpTimer = 60;
+    this.state.canResendOtp = false;
+
+    if (timerContainer) timerContainer.style.display = 'block';
+    if (resendBtn) resendBtn.disabled = true;
+
+    const inputs = this.container?.querySelectorAll('.voxepay-otp-digit') as NodeListOf<HTMLInputElement>;
+    inputs?.forEach(input => input.value = '');
+    this.state.otp = '';
+
+    this.startOTPTimer();
+    (inputs?.[0] as HTMLInputElement)?.focus();
+  }
+
+  private handleBackToCard(): void {
+    if (this.state.otpTimerInterval) {
+      clearInterval(this.state.otpTimerInterval);
+    }
+
+    this.state.isOtpStep = false;
+    this.state.otp = '';
+
+    if (this.container) {
+      this.container.innerHTML = this.getModalHTML();
+      this.overlay = this.container.querySelector('.voxepay-overlay');
+      this.overlay?.classList.add('voxepay-visible');
+      this.attachEventListeners();
+
+      const cardInput = this.container.querySelector('#voxepay-card-number') as HTMLInputElement;
+      const expiryInput = this.container.querySelector('#voxepay-expiry') as HTMLInputElement;
+      const cvvInput = this.container.querySelector('#voxepay-cvv') as HTMLInputElement;
+      const pinInput = this.container.querySelector('#voxepay-pin') as HTMLInputElement;
+
+      if (cardInput) cardInput.value = formatCardNumber(this.state.cardNumber);
+      if (expiryInput) expiryInput.value = this.state.expiry;
+      if (cvvInput) cvvInput.value = this.state.cvv;
+      if (pinInput) pinInput.value = this.state.pin;
+    }
+  }
+
+  /**
+   * Attach event listeners
+   */
+  private attachEventListeners(): void {
+    const closeBtn = this.container?.querySelector('[data-action="close"]');
+    closeBtn?.addEventListener('click', () => this.close());
+
+    this.overlay?.addEventListener('click', (e) => {
+      if (e.target === this.overlay) {
+        this.close();
+      }
+    });
+
+    document.addEventListener('keydown', this.handleEscape);
+
+    // Payment method tabs
+    const tabs = this.container?.querySelectorAll('.voxepay-method-tab');
+    tabs?.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const method = (tab as HTMLElement).dataset.method as PaymentMethod;
+        if (method && method !== this.state.paymentMethod) {
+          this.switchPaymentMethod(method);
+        }
+      });
+    });
+
+    // Card-specific listeners
+    if (this.state.paymentMethod === 'card') {
+      const cardInput = this.container?.querySelector('#voxepay-card-number') as HTMLInputElement;
+      cardInput?.addEventListener('input', (e) => this.handleCardInput(e));
+      cardInput?.addEventListener('blur', () => this.validateField('cardNumber'));
+
+      const expiryInput = this.container?.querySelector('#voxepay-expiry') as HTMLInputElement;
+      expiryInput?.addEventListener('input', (e) => this.handleExpiryInput(e));
+      expiryInput?.addEventListener('blur', () => this.validateField('expiry'));
+
+      const cvvInput = this.container?.querySelector('#voxepay-cvv') as HTMLInputElement;
+      cvvInput?.addEventListener('input', (e) => this.handleCVVInput(e));
+      cvvInput?.addEventListener('blur', () => this.validateField('cvv'));
+
+      const pinInput = this.container?.querySelector('#voxepay-pin') as HTMLInputElement;
+      pinInput?.addEventListener('input', (e) => this.handlePinInput(e));
+      pinInput?.addEventListener('blur', () => this.validateField('pin'));
+
+      const form = this.container?.querySelector('#voxepay-payment-form') as HTMLFormElement;
+      form?.addEventListener('submit', (e) => this.handleSubmit(e));
+    }
+
+    // Bank transfer-specific listeners
+    if (this.state.paymentMethod === 'bank_transfer') {
+      this.attachBankTransferListeners();
+
+      // If no details yet, load them
+      if (!this.state.bankTransferDetails) {
+        this.loadBankTransferDetails();
+      } else {
+        this.startTransferTimer();
+      }
+    }
+  }
+
+  /**
+   * Attach bank transfer specific event listeners
+   */
+  private attachBankTransferListeners(): void {
+    const copyBtn = this.container?.querySelector('#voxepay-copy-btn');
+    copyBtn?.addEventListener('click', () => {
+      const accountNum = (copyBtn as HTMLElement).dataset.copy || '';
+      this.copyToClipboard(accountNum);
+    });
+
+    const confirmBtn = this.container?.querySelector('#voxepay-transfer-confirm');
+    confirmBtn?.addEventListener('click', () => this.handleTransferConfirm());
+  }
+
+  /**
+   * Switch between payment methods
+   */
+  private switchPaymentMethod(method: PaymentMethod): void {
+    this.stopTransferTimer();
+    this.state.paymentMethod = method;
+
+    // Re-render the whole modal
+    if (this.container) {
+      this.container.innerHTML = this.getModalHTML();
+      this.overlay = this.container.querySelector('.voxepay-overlay');
+      this.overlay?.classList.add('voxepay-visible');
+      this.attachEventListeners();
+
+      // Restore card values if switching back to card
+      if (method === 'card' && this.state.cardNumber) {
+        const cardInput = this.container.querySelector('#voxepay-card-number') as HTMLInputElement;
+        const expiryInput = this.container.querySelector('#voxepay-expiry') as HTMLInputElement;
+        const cvvInput = this.container.querySelector('#voxepay-cvv') as HTMLInputElement;
+        const pinInput = this.container.querySelector('#voxepay-pin') as HTMLInputElement;
+        if (cardInput) cardInput.value = formatCardNumber(this.state.cardNumber);
+        if (expiryInput) expiryInput.value = this.state.expiry;
+        if (cvvInput) cvvInput.value = this.state.cvv;
+        if (pinInput) pinInput.value = this.state.pin;
+      }
+    }
+  }
+
+  /**
+   * Load bank transfer details (from callback or via API)
+   */
+  private async loadBankTransferDetails(): Promise<void> {
+    try {
+      let details: BankTransferDetails;
+
+      if (this.options.onBankTransferRequested) {
+        // Use merchant-provided callback
+        details = await this.options.onBankTransferRequested();
+      } else if (this.apiClient && this.options._sdkConfig) {
+        if (!this.options._sdkConfig.paymentLinkSlug) {
+          throw {
+            code: 'MISSING_PAYMENT_LINK_SLUG',
+            message: 'paymentLinkSlug is required in VoxePay.init() for bank transfer.',
+          };
+        }
+
+        // Call real DVA API
+        const transactionRef = `VP-${Date.now().toString(36).toUpperCase()}-${Math.random().toString(36).substring(2, 8).toUpperCase()}`;
+
+        const response = await this.apiClient.initiateTransferPayment(
+          this.options._sdkConfig.paymentLinkSlug,
+          {
+            organizationId: this.options._sdkConfig.organizationId,
+            transactionRef,
+            customerId: this.options.customerEmail || '',
+            customerEmail: this.options.customerEmail,
+            customerPhone: this.options.customerPhone,
+            customerName: this.options.customerName,
+            amount: this.options.amount / 100,
+            currency: this.options.currency,
+            paymentMethod: 'BANK_TRANSFER',
+            authData: btoa(JSON.stringify({ source: 'web', method: 'bank_transfer' })),
+            narration: this.options.description,
+            durationMinutes: 30,
+          }
+        );
+
+        // Store transaction ref for status polling
+        // API may return 'id' (DVA) or 'paymentId' (card) depending on payment method
+        this.state.transactionRef = response.transactionRef || transactionRef;
+        this.state.paymentId = response.paymentId || (response as any).id || null;
+
+        const va = response.virtualAccount;
+        if (!va) {
+          throw { code: 'MISSING_VIRTUAL_ACCOUNT', message: 'No virtual account returned from server.' };
+        }
+
+        // Compute expiresIn from the ISO timestamp
+        const expiresAtDate = new Date(va.expires_at);
+        const nowMs = Date.now();
+        const expiresInSeconds = Math.max(0, Math.floor((expiresAtDate.getTime() - nowMs) / 1000));
+
+        details = {
+          accountNumber: va.account_number,
+          bankName: va.bank_name,
+          accountName: va.account_name,
+          reference: this.state.transactionRef!,
+          expiresIn: expiresInSeconds,
+          expiresAt: va.expires_at,
+          feeDetails: response.feeDetails,
+          totalPayableAmount: response.feeDetails ? (response.feeDetails.grossAmount + response.feeDetails.totalFees) : undefined,
+        };
+      } else {
+        throw { code: 'SDK_ERROR', message: 'SDK not properly initialized. Missing required organizationId.' };
+      }
+
+      this.state.bankTransferDetails = details;
+
+      // Re-render the bank transfer view
+      const formContainer = this.container?.querySelector('#voxepay-form-container');
+      if (formContainer) {
+        const formattedAmount = formatAmount(this.options.amount, this.options.currency);
+        formContainer.innerHTML = this.getBankTransferHTML(formattedAmount);
+        this.attachBankTransferListeners();
+        this.startTransferTimer();
+        
+        const titleEl = this.container?.querySelector('#voxepay-title');
+        if (titleEl && details.totalPayableAmount) {
+          titleEl.textContent = `Pay ${formatMainUnitAmount(details.totalPayableAmount, details.feeDetails!.currency)}`;
+        }
+      }
+    } catch (error: any) {
+      const errorCode = error?.code || 'BANK_TRANSFER_INIT_FAILED';
+      const errorMessage = error?.message || 'Could not generate bank transfer details. Please try again.';
+
+      // Show error in the loading area
+      const formContainer = this.container?.querySelector('#voxepay-form-container');
+      if (formContainer) {
+        formContainer.innerHTML = `
+          <div class="voxepay-transfer-view">
+            <div style="text-align: center; padding: 40px 16px;">
+              <div style="font-size: 2.5rem; margin-bottom: 16px;">⚠️</div>
+              <h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; color: var(--voxepay-text);">${this.getDVAErrorTitle(errorCode)}</h3>
+              <p style="font-size: 0.875rem; color: var(--voxepay-text-muted); margin-bottom: 24px;">${errorMessage}</p>
+              <button class="voxepay-submit-btn" id="voxepay-retry-transfer"><span>Try Again</span></button>
+            </div>
+          </div>
+        `;
+        const retryBtn = formContainer.querySelector('#voxepay-retry-transfer');
+        retryBtn?.addEventListener('click', () => {
+          formContainer.innerHTML = `
+            <div class="voxepay-transfer-view">
+              <div class="voxepay-transfer-loading">
+                <div class="voxepay-spinner"></div>
+                <p style="margin-top: 16px; color: var(--voxepay-text-muted);">Generating account details...</p>
+              </div>
+            </div>
+          `;
+          this.loadBankTransferDetails();
+        });
+      }
+
+      this.options.onError({
+        code: errorCode,
+        message: errorMessage,
+        recoverable: true,
+        details: error?.data,
+      });
+    }
+  }
+
+  /**
+   * Get user-friendly error title for DVA error codes
+   */
+  private getDVAErrorTitle(code: string): string {
+    const titles: Record<string, string> = {
+      'ACCOUNT_CREATION_FAILED': 'Account Generation Failed',
+      'ACCOUNT_EXPIRED': 'Account Expired',
+      'INVALID_AMOUNT': 'Invalid Amount',
+      'UNAUTHORIZED': 'Authentication Failed',
+      'ORGANIZATION_NOT_FOUND': 'Configuration Error',
+      'MISSING_VIRTUAL_ACCOUNT': 'Account Generation Failed',
+      'SDK_ERROR': 'Configuration Error',
+    };
+    return titles[code] || 'Something Went Wrong';
+  }
+
+  /**
+   * Copy text to clipboard with visual feedback
+   */
+  private async copyToClipboard(text: string): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(text);
+      const copyBtn = this.container?.querySelector('#voxepay-copy-btn') as HTMLElement;
+      if (copyBtn) {
+        copyBtn.innerHTML = `${ICONS.check}`;
+        copyBtn.classList.add('voxepay-copied');
+        setTimeout(() => {
+          copyBtn.innerHTML = `${ICONS.copy}`;
+          copyBtn.classList.remove('voxepay-copied');
+        }, 2000);
+      }
+    } catch {
+      // Fallback for older browsers
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+    }
+  }
+
+  /** Polling interval ID for DVA status checks */
+  private statusPollingInterval: number | null = null;
+  /** Polling timeout (auto-stop after 30 minutes) */
+  private statusPollingTimeout: number | null = null;
+
+  /**
+   * Handle "I've sent the money" confirmation — starts polling for payment status
+   */
+  private async handleTransferConfirm(): Promise<void> {
+    const confirmBtn = this.container?.querySelector('#voxepay-transfer-confirm') as HTMLButtonElement;
+    if (confirmBtn) {
+      confirmBtn.disabled = true;
+      confirmBtn.innerHTML = '<div class="voxepay-spinner"></div><span>Confirming transfer...</span>';
+    }
+
+    // If no API client or no transaction ref, fall back to pending result
+    if (!this.apiClient || !this.state.transactionRef) {
+      this.stopTransferTimer();
+      const result: PaymentResult = {
+        id: this.state.paymentId || `pay_transfer_${Date.now()}`,
+        status: 'pending',
+        amount: this.options.amount,
+        currency: this.options.currency,
+        timestamp: new Date().toISOString(),
+        reference: this.state.bankTransferDetails?.reference,
+        paymentMethod: 'bank_transfer',
+      };
+      this.state.isSuccess = true;
+      this.renderSuccessView();
+      this.options.onSuccess(result);
+      return;
+    }
+
+    // Show polling UI
+    this.renderPollingView();
+    this.startStatusPolling();
+  }
+
+  /**
+   * Render the "waiting for payment confirmation" polling view
+   */
+  private renderPollingView(): void {
+    const formContainer = this.container?.querySelector('#voxepay-form-container');
+    if (!formContainer) return;
+
+    const formattedAmount = formatAmount(this.options.amount, this.options.currency);
+
+    formContainer.innerHTML = `
+      <div class="voxepay-transfer-view">
+        <div style="text-align: center; padding: 32px 16px;">
+          <div class="voxepay-spinner" style="width: 40px; height: 40px; margin: 0 auto 20px; border-width: 3px;"></div>
+          <h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; color: var(--voxepay-text);">Waiting for Payment</h3>
+          <p style="font-size: 0.875rem; color: var(--voxepay-text-muted); margin-bottom: 4px;">
+            We're checking for your transfer of <strong>${formattedAmount}</strong>
+          </p>
+          <p style="font-size: 0.813rem; color: var(--voxepay-text-subtle); margin-bottom: 24px;" id="voxepay-polling-status">
+            This usually takes a few seconds...
+          </p>
+          <button class="voxepay-submit-btn" id="voxepay-cancel-polling" style="background: var(--voxepay-surface); border: 1px solid var(--voxepay-border); color: var(--voxepay-text-muted); box-shadow: none;">
+            <span>Cancel</span>
+          </button>
+        </div>
+      </div>
+    `;
+
+    const cancelBtn = formContainer.querySelector('#voxepay-cancel-polling');
+    cancelBtn?.addEventListener('click', () => {
+      this.stopStatusPolling();
+      // Re-render bank transfer view so user can try again
+      if (this.state.bankTransferDetails) {
+        const amt = formatAmount(this.options.amount, this.options.currency);
+        formContainer.innerHTML = this.getBankTransferHTML(amt);
+        this.attachBankTransferListeners();
+        this.startTransferTimer();
+      }
+    });
+  }
+
+  /**
+   * Start polling payment status every 5 seconds
+   */
+  private startStatusPolling(): void {
+    this.stopStatusPolling(); // clear any existing poll
+
+    const poll = async () => {
+      if (!this.apiClient || !this.state.transactionRef) return;
+
+      try {
+        const statusData = await this.apiClient.getPaymentStatus(
+          this.state.transactionRef,
+          {
+            simulateWebhook: this.options._sdkConfig?.simulateWebhook,
+            bypassKey: this.options._sdkConfig?.bypassKey,
+          }
+        );
+        this.handlePollingStatusUpdate(statusData.status, statusData);
+      } catch (error: any) {
+        console.error('[VoxePay] Status polling error:', error);
+        // Don't stop polling on transient errors — let it retry
+        const statusEl = this.container?.querySelector('#voxepay-polling-status');
+        if (statusEl) {
+          statusEl.textContent = 'Still checking... Please wait.';
+        }
+      }
+    };
+
+    // Initial check immediately
+    poll();
+
+    // Then poll every 5 seconds
+    this.statusPollingInterval = window.setInterval(poll, 5000);
+
+    // Auto-stop after 30 minutes
+    this.statusPollingTimeout = window.setTimeout(() => {
+      this.stopStatusPolling();
+      this.handlePollingStatusUpdate('EXPIRED', null);
+    }, 30 * 60 * 1000);
+  }
+
+  /**
+   * Stop payment status polling
+   */
+  private stopStatusPolling(): void {
+    if (this.statusPollingInterval) {
+      clearInterval(this.statusPollingInterval);
+      this.statusPollingInterval = null;
+    }
+    if (this.statusPollingTimeout) {
+      clearTimeout(this.statusPollingTimeout);
+      this.statusPollingTimeout = null;
+    }
+  }
+
+  /**
+   * Handle status updates from polling
+   */
+  private handlePollingStatusUpdate(status: string, data: any): void {
+    const terminalStatuses = ['COMPLETED', 'FAILED', 'EXPIRED', 'CANCELLED'];
+
+    if (terminalStatuses.includes(status)) {
+      this.stopStatusPolling();
+      this.stopTransferTimer();
+    }
+
+    switch (status) {
+      case 'COMPLETED': {
+        const result: PaymentResult = {
+          id: data?.id || this.state.paymentId || `pay_transfer_${Date.now()}`,
+          status: 'success',
+          amount: this.options.amount,
+          currency: this.options.currency,
+          timestamp: data?.completedAt || new Date().toISOString(),
+          reference: this.state.transactionRef || undefined,
+          paymentMethod: 'bank_transfer',
+          data: data || undefined,
+        };
+        this.state.isSuccess = true;
+        this.renderSuccessView();
+        this.options.onSuccess(result);
+        break;
+      }
+
+      case 'PAYMENT_RECEIVED': {
+        // Almost done — update the polling UI message
+        const statusEl = this.container?.querySelector('#voxepay-polling-status');
+        if (statusEl) {
+          statusEl.textContent = 'Payment received! Processing...';
+        }
+        break;
+      }
+
+      case 'PARTIAL_PAYMENT': {
+        this.stopStatusPolling();
+        this.renderTransferErrorView(
+          'Partial Payment Received',
+          'The amount transferred is less than the required amount. Please transfer the remaining balance or contact support.'
+        );
+        break;
+      }
+
+      case 'OVERPAID': {
+        // Overpayment is still successful — show success but note the overpayment
+        const result: PaymentResult = {
+          id: data?.id || this.state.paymentId || `pay_transfer_${Date.now()}`,
+          status: 'success',
+          amount: this.options.amount,
+          currency: this.options.currency,
+          timestamp: data?.completedAt || new Date().toISOString(),
+          reference: this.state.transactionRef || undefined,
+          paymentMethod: 'bank_transfer',
+          data: { ...data, overpaid: true },
+        };
+        this.state.isSuccess = true;
+        this.renderSuccessView();
+        this.options.onSuccess(result);
+        break;
+      }
+
+      case 'EXPIRED': {
+        this.renderTransferErrorView(
+          'Payment Expired',
+          'The virtual account has expired. Please try again to generate a new account.'
+        );
+        this.options.onError({
+          code: 'ACCOUNT_EXPIRED',
+          message: 'Virtual account expired before payment was received.',
+          recoverable: true,
+        });
+        break;
+      }
+
+      case 'FAILED': {
+        this.renderTransferErrorView(
+          'Payment Failed',
+          data?.message || 'The payment could not be processed. Please try again.'
+        );
+        this.options.onError({
+          code: 'PAYMENT_FAILED',
+          message: data?.message || 'Payment failed.',
+          recoverable: true,
+        });
+        break;
+      }
+
+      case 'CANCELLED': {
+        this.renderTransferErrorView(
+          'Payment Cancelled',
+          'This payment has been cancelled.'
+        );
+        this.options.onError({
+          code: 'PAYMENT_CANCELLED',
+          message: 'Payment was cancelled.',
+          recoverable: false,
+        });
+        break;
+      }
+
+      default:
+        // INITIATED, PENDING_PAYMENT — keep polling
+        break;
+    }
+  }
+
+  /**
+   * Render error view for transfer issues with retry option
+   */
+  private renderTransferErrorView(title: string, message: string): void {
+    const formContainer = this.container?.querySelector('#voxepay-form-container');
+    if (!formContainer) return;
+
+    formContainer.innerHTML = `
+      <div class="voxepay-transfer-view">
+        <div style="text-align: center; padding: 40px 16px;">
+          <div style="font-size: 2.5rem; margin-bottom: 16px;">❌</div>
+          <h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; color: var(--voxepay-text);">${title}</h3>
+          <p style="font-size: 0.875rem; color: var(--voxepay-text-muted); margin-bottom: 24px;">${message}</p>
+          <button class="voxepay-submit-btn" id="voxepay-retry-transfer"><span>Try Again</span></button>
+        </div>
+      </div>
+    `;
+
+    const retryBtn = formContainer.querySelector('#voxepay-retry-transfer');
+    retryBtn?.addEventListener('click', () => {
+      // Reset state for new attempt
+      this.state.bankTransferDetails = null;
+      this.state.transactionRef = null;
+      this.state.paymentId = null;
+      formContainer.innerHTML = `
+        <div class="voxepay-transfer-view">
+          <div class="voxepay-transfer-loading">
+            <div class="voxepay-spinner"></div>
+            <p style="margin-top: 16px; color: var(--voxepay-text-muted);">Generating account details...</p>
+          </div>
+        </div>
+      `;
+      this.loadBankTransferDetails();
+    });
+  }
+
+  /**
+   * Start the transfer countdown timer
+   */
+  private startTransferTimer(): void {
+    if (!this.state.bankTransferDetails) return;
+
+    this.state.transferTimer = this.state.bankTransferDetails.expiresIn;
+
+    this.state.transferTimerInterval = window.setInterval(() => {
+      this.state.transferTimer--;
+
+      const countdownEl = this.container?.querySelector('#voxepay-transfer-countdown');
+      if (countdownEl) {
+        countdownEl.textContent = this.formatCountdown(this.state.transferTimer);
+      }
+
+      if (this.state.transferTimer <= 0) {
+        this.stopTransferTimer();
+        // Show expired state
+        const timerEl = this.container?.querySelector('#voxepay-transfer-timer') as HTMLElement;
+        if (timerEl) {
+          timerEl.innerHTML = `${ICONS.clock} <span style="color: var(--voxepay-error);">Account expired. Please try again.</span>`;
+        }
+        const confirmBtn = this.container?.querySelector('#voxepay-transfer-confirm') as HTMLButtonElement;
+        if (confirmBtn) confirmBtn.disabled = true;
+      }
+    }, 1000);
+  }
+
+  /**
+   * Stop the transfer countdown timer
+   */
+  private stopTransferTimer(): void {
+    if (this.state.transferTimerInterval) {
+      clearInterval(this.state.transferTimerInterval);
+      this.state.transferTimerInterval = null;
+    }
+  }
+
+  private handleEscape = (e: KeyboardEvent): void => {
+    if (e.key === 'Escape') {
+      this.close();
+      document.removeEventListener('keydown', this.handleEscape);
+    }
+  };
+
+  private handleCardInput(e: Event): void {
+    const input = e.target as HTMLInputElement;
+    const formatted = formatCardNumber(input.value);
+    input.value = formatted;
+    this.state.cardNumber = formatted.replace(/\s/g, '');
+
+    const brandEl = this.container?.querySelector('#voxepay-card-brand') as HTMLElement;
+    const brand = detectCardBrand(this.state.cardNumber);
+    if (brandEl) {
+      brandEl.textContent = brand ? CARD_BRAND_DISPLAY[brand.code] || '' : '';
+      brandEl.style.opacity = brand ? '1' : '0';
+    }
+
+    this.clearError('cardNumber');
+  }
+
+  private handleExpiryInput(e: Event): void {
+    const input = e.target as HTMLInputElement;
+    const formatted = formatExpiry(input.value);
+    input.value = formatted;
+    this.state.expiry = formatted;
+    this.clearError('expiry');
+  }
+
+  private handleCVVInput(e: Event): void {
+    const input = e.target as HTMLInputElement;
+    const formatted = formatCVV(input.value);
+    input.value = formatted;
+    this.state.cvv = formatted;
+    this.clearError('cvv');
+  }
+
+  private handlePinInput(e: Event): void {
+    const input = e.target as HTMLInputElement;
+    const formatted = formatPIN(input.value);
+    input.value = formatted;
+    this.state.pin = formatted;
+    this.clearError('pin');
+  }
+
+  private validateField(field: keyof ModalState['errors']): boolean {
+    let result: { valid: boolean; error?: string };
+
+    switch (field) {
+      case 'cardNumber':
+        result = validateCardNumber(this.state.cardNumber);
+        break;
+      case 'expiry':
+        result = validateExpiry(this.state.expiry);
+        break;
+      case 'cvv':
+        result = validateCVV(this.state.cvv, this.state.cardNumber);
+        break;
+      case 'pin':
+        result = validatePIN(this.state.pin);
+        break;
+      default:
+        return true;
+    }
+
+    if (!result.valid) {
+      this.showError(field, result.error || 'Invalid');
+      return false;
+    }
+
+    this.clearError(field);
+    return true;
+  }
+
+  private showError(field: string, message: string): void {
+    const errorEl = this.container?.querySelector(`#voxepay-${field === 'cardNumber' ? 'card' : field}-error`) as HTMLElement;
+    const inputEl = this.container?.querySelector(`#voxepay-${field === 'cardNumber' ? 'card-number' : field}`) as HTMLElement;
+
+    if (errorEl) {
+      errorEl.innerHTML = `${ICONS.error} ${message}`;
+      errorEl.style.display = 'flex';
+    }
+    inputEl?.classList.add('voxepay-error');
+  }
+
+  private clearError(field: string): void {
+    const errorEl = this.container?.querySelector(`#voxepay-${field === 'cardNumber' ? 'card' : field}-error`) as HTMLElement;
+    const inputEl = this.container?.querySelector(`#voxepay-${field === 'cardNumber' ? 'card-number' : field}`) as HTMLElement;
+
+    if (errorEl) {
+      errorEl.style.display = 'none';
+    }
+    inputEl?.classList.remove('voxepay-error');
+  }
+
+  private async handleSubmit(e: Event): Promise<void> {
+    e.preventDefault();
+
+    const isCardValid = this.validateField('cardNumber');
+    const isExpiryValid = this.validateField('expiry');
+    const isCVVValid = this.validateField('cvv');
+    const isPinValid = this.validateField('pin');
+
+    if (!isCardValid || !isExpiryValid || !isCVVValid || !isPinValid) {
+      return;
+    }
+
+    if (!this.apiClient || !this.options._sdkConfig) {
+      this.showError('cardNumber', 'SDK not properly initialized. Missing API key or organization ID.');
+      return;
+    }
+
+    if (!this.options._sdkConfig.paymentLinkSlug) {
+      this.showError('cardNumber', 'Payment link not configured. Please provide a paymentLinkSlug.');
+      return;
+    }
+
+    const { paymentLinkSlug } = this.options._sdkConfig;
+    this.setProcessing(true);
+
+    try {
+      // Encrypt card data
+      const pan = cleanPan(this.state.cardNumber);
+      const expiryDate = formatExpiryForApi(this.state.expiry);
+      const payload = {
+        version: '1',
+        pan,
+        pin: this.state.pin,
+        expiryDate,
+        cvv: this.state.cvv,
+      };
+      console.log('Before encryption:', payload);
+
+      const authData = await generateAuthData(payload);
+
+      // Generate a unique transaction reference
+      const transactionRef = `VP-${Date.now().toString(36).toUpperCase()}-${Math.random().toString(36).substring(2, 8).toUpperCase()}`;
+
+      // Call initiate payment API via public payment-link endpoint
+      const response = await this.apiClient.initiatePayment(
+        paymentLinkSlug,
+        {
+          organizationId: this.options._sdkConfig.organizationId,
+          transactionRef,
+          customerId: this.options.customerEmail,
+          customerEmail: this.options.customerEmail,
+          customerPhone: this.options.customerPhone,
+          customerName: this.options.customerName,
+          amount: this.options.amount / 100, // Convert from kobo/cents to main unit
+          currency: this.options.currency,
+          paymentMethod: 'CARD',
+          authData,
+          narration: this.options.description,
+        }
+      );
+
+      // Store response data for OTP verification
+      // `paymentId` in the response is the gateway's payment ID — this is what validate-otp expects
+      // `id` is the internal payment record UUID (not used for OTP)
+      this.state.paymentId = response.paymentId || null;
+      // transactionId and transactionRef are the same value — both sent to validate-otp
+      this.state.transactionId = response.transactionRef || transactionRef;
+      this.state.transactionRef = response.transactionRef || transactionRef;
+      this.state.eciFlag = response.eciFlag || null;
+      this.state.otpDeliveryMessage = response.message || null;
+      this.state.feeDetails = response.feeDetails;
+
+      this.setProcessing(false);
+      this.renderOTPView();
+    } catch (error: any) {
+      this.setProcessing(false);
+      const code = error?.code || 'PAYMENT_INITIATE_FAILED';
+      const message = error?.message || 'Payment failed. Please try again.';
+      const recoverable = error?.recoverable !== false;
+      this.showErrorModal(code, message, recoverable);
+    }
+  }
+
+  private setProcessing(isProcessing: boolean): void {
+    this.state.isProcessing = isProcessing;
+    const submitBtn = this.container?.querySelector('#voxepay-submit') as HTMLButtonElement;
+
+    if (submitBtn) {
+      submitBtn.disabled = isProcessing;
+      submitBtn.innerHTML = isProcessing
+        ? '<div class="voxepay-spinner"></div><span>Processing...</span>'
+        : `<span>Pay Now ${formatAmount(this.options.amount, this.options.currency)}</span>`;
+    }
+  }
+
+  private async processPayment(): Promise<PaymentResult> {
+    return {
+      id: this.state.paymentId || `pay_${Date.now()}`,
+      status: 'success',
+      amount: this.options.amount,
+      currency: this.options.currency,
+      timestamp: new Date().toISOString(),
+      reference: this.state.transactionRef || undefined,
+      paymentMethod: 'card',
+    };
+  }
+
+  /**
+   * Get VoxePay branded styles
+   */
+  private getStyles(): string {
+    return `
+      :root {
+        /* VoxePay Blue Color Palette */
+        --voxepay-primary: #0061FF;
+        --voxepay-primary-hover: #0056E0;
+        --voxepay-secondary: #0047CC;
+        --voxepay-accent: #60A5FA;
+        --voxepay-glow: rgba(0, 97, 255, 0.35);
+        --voxepay-success: #10B981;
+        --voxepay-success-bg: rgba(16, 185, 129, 0.1);
+        --voxepay-error: #EF4444;
+        
+        /* Dark Mode (Default) */
+        --voxepay-bg: #0C0C1D;
+        --voxepay-surface: rgba(255, 255, 255, 0.04);
+        --voxepay-surface-hover: rgba(255, 255, 255, 0.08);
+        --voxepay-border: rgba(255, 255, 255, 0.08);
+        --voxepay-text: #FFFFFF;
+        --voxepay-text-muted: #B4B4C7;
+        --voxepay-text-subtle: #6B7280;
+        --voxepay-input-bg: rgba(255, 255, 255, 0.06);
+        
+        /* Effects */
+        --voxepay-backdrop-blur: blur(24px);
+        --voxepay-border-radius: 12px;
+        --voxepay-border-radius-lg: 16px;
+        --voxepay-border-radius-xl: 24px;
+        --voxepay-glow-shadow: 0 0 60px var(--voxepay-glow);
+        --voxepay-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6);
+        --voxepay-transition-fast: 150ms ease;
+        --voxepay-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      /* Light Mode */
+      html.voxepay-light {
+        --voxepay-primary: #0061FF;
+        --voxepay-primary-hover: #0056E0;
+        --voxepay-secondary: #0047CC;
+        --voxepay-glow: rgba(0, 97, 255, 0.2);
+        
+        --voxepay-bg: #FFFFFF;
+        --voxepay-surface: #F8FAFC;
+        --voxepay-surface-hover: #F1F5F9;
+        --voxepay-border: #E2E8F0;
+        --voxepay-text: #0F172A;
+        --voxepay-text-muted: #475569;
+        --voxepay-text-subtle: #94A3B8;
+        --voxepay-input-bg: #F8FAFC;
+        
+        --voxepay-glow-shadow: 0 0 40px rgba(0, 97, 255, 0.12);
+        --voxepay-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+      }
+      
+      .voxepay-checkout * { box-sizing: border-box; margin: 0; padding: 0; }
+      .voxepay-checkout { font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; color: var(--voxepay-text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
+      
+      .voxepay-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: var(--voxepay-backdrop-blur); -webkit-backdrop-filter: var(--voxepay-backdrop-blur); display: flex; align-items: center; justify-content: center; z-index: 999999; opacity: 0; visibility: hidden; transition: opacity var(--voxepay-transition), visibility var(--voxepay-transition); }
+      html.voxepay-light .voxepay-overlay { background: rgba(15, 23, 42, 0.4); }
+      .voxepay-overlay.voxepay-visible { opacity: 1; visibility: visible; }
+      
+      .voxepay-modal { background: var(--voxepay-bg); border: 1px solid var(--voxepay-border); border-radius: var(--voxepay-border-radius-xl); width: 100%; max-width: 420px; max-height: 90vh; overflow: hidden; box-shadow: var(--voxepay-shadow), var(--voxepay-glow-shadow); transform: scale(0.95) translateY(20px); opacity: 0; transition: transform var(--voxepay-transition), opacity var(--voxepay-transition); }
+      .voxepay-overlay.voxepay-visible .voxepay-modal { transform: scale(1) translateY(0); opacity: 1; }
+      
+      .voxepay-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--voxepay-border); background: var(--voxepay-surface); }
+      .voxepay-header-left { display: flex; align-items: center; gap: 12px; }
+      .voxepay-logo { width: 36px; height: 36px; border-radius: var(--voxepay-border-radius); background: linear-gradient(135deg, var(--voxepay-primary), var(--voxepay-secondary)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; color: white; box-shadow: 0 4px 12px rgba(0, 97, 255, 0.3); }
+      .voxepay-amount { font-size: 1.25rem; font-weight: 600; }
+      .voxepay-close { width: 36px; height: 36px; border: none; background: var(--voxepay-surface-hover); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--voxepay-text-muted); transition: all var(--voxepay-transition-fast); }
+      .voxepay-close:hover { background: var(--voxepay-border); color: var(--voxepay-text); transform: rotate(90deg); }
+      .voxepay-close svg { width: 18px; height: 18px; }
+      
+      .voxepay-body { padding: 24px; background: var(--voxepay-bg); overflow-y: auto; max-height: calc(90vh - 140px); }
+      .voxepay-sticky-actions { position: sticky; bottom: -24px; padding: 16px 24px 24px 24px; margin: 16px -24px -24px -24px; background: var(--voxepay-bg); border-top: 1px solid var(--voxepay-border); z-index: 10; display: flex; flex-direction: column; gap: 12px; }
+      .voxepay-form-group { margin-bottom: 20px; }
+      .voxepay-label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: var(--voxepay-text-muted); margin-bottom: 8px; }
+      .voxepay-label-icon { font-size: 1rem; }
+      
+      .voxepay-input { width: 100%; padding: 14px 16px; background: var(--voxepay-input-bg); border: 1.5px solid var(--voxepay-border); border-radius: var(--voxepay-border-radius); color: var(--voxepay-text); font-size: 1rem; font-family: inherit; outline: none; transition: border-color var(--voxepay-transition-fast), box-shadow var(--voxepay-transition-fast), background var(--voxepay-transition-fast); }
+      .voxepay-input::placeholder { color: var(--voxepay-text-subtle); }
+      .voxepay-input:hover { border-color: var(--voxepay-text-subtle); }
+      .voxepay-input:focus { border-color: var(--voxepay-primary); box-shadow: 0 0 0 4px var(--voxepay-glow); background: var(--voxepay-bg); }
+      .voxepay-input.voxepay-error { border-color: var(--voxepay-error); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
+      
+      .voxepay-card-input-wrapper { position: relative; }
+      .voxepay-card-brand { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 4px 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--voxepay-primary), var(--voxepay-secondary)); border-radius: 6px; font-size: 0.7rem; font-weight: 700; color: white; opacity: 0; transition: opacity var(--voxepay-transition-fast); letter-spacing: 0.5px; }
+      .voxepay-card-input-wrapper .voxepay-input { padding-right: 70px; }
+      
+      .voxepay-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
+      
+      .voxepay-error-message { display: flex; align-items: center; gap: 6px; font-size: 0.813rem; color: var(--voxepay-error); margin-top: 8px; animation: voxepay-shake 0.4s ease; }
+      .voxepay-error-message svg { width: 16px; height: 16px; flex-shrink: 0; }
+      @keyframes voxepay-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
+      
+      .voxepay-submit-btn { width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--voxepay-primary), var(--voxepay-secondary)); border: none; border-radius: var(--voxepay-border-radius); color: white; font-size: 1.063rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all var(--voxepay-transition-fast); position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 97, 255, 0.35); }
+      .voxepay-submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 97, 255, 0.45); }
+      .voxepay-submit-btn:active:not(:disabled) { transform: translateY(0); }
+      .voxepay-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
+      .voxepay-submit-btn span { position: relative; z-index: 1; }
+      
+      .voxepay-spinner { width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: voxepay-spin 0.8s linear infinite; }
+      @keyframes voxepay-spin { to { transform: rotate(360deg); } }
+      
+      .voxepay-footer { text-align: center; padding: 16px 24px 20px; border-top: 1px solid var(--voxepay-border); background: var(--voxepay-surface); }
+      .voxepay-powered-by { font-size: 0.75rem; color: var(--voxepay-text-subtle); display: flex; align-items: center; justify-content: center; gap: 6px; }
+      .voxepay-powered-by svg { width: 14px; height: 14px; color: var(--voxepay-primary); }
+      .voxepay-powered-by strong { color: var(--voxepay-primary); font-weight: 600; }
+      
+      .voxepay-success-view { text-align: center; padding: 40px 24px; }
+      .voxepay-success-icon { width: 80px; height: 80px; margin: 0 auto 24px; background: linear-gradient(135deg, var(--voxepay-success), #059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: voxepay-success-pop 0.5s ease; box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35); }
+      @keyframes voxepay-success-pop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
+      .voxepay-success-icon svg { width: 40px; height: 40px; color: white; }
+      .voxepay-success-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; color: var(--voxepay-text); }
+      .voxepay-success-message { font-size: 1rem; color: var(--voxepay-text-muted); margin-bottom: 24px; }
+      .voxepay-success-btn { padding: 12px 32px; background: var(--voxepay-surface); border: 1.5px solid var(--voxepay-border); border-radius: var(--voxepay-border-radius); color: var(--voxepay-text); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all var(--voxepay-transition-fast); }
+      .voxepay-success-btn:hover { background: var(--voxepay-surface-hover); border-color: var(--voxepay-primary); color: var(--voxepay-primary); }
+
+      /* Error View */
+      .voxepay-error-view { text-align: center; padding: 40px 24px; }
+      .voxepay-error-icon-large { width: 80px; height: 80px; margin: 0 auto 24px; background: linear-gradient(135deg, #ef4444, #dc2626); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: voxepay-error-pop 0.5s ease; box-shadow: 0 8px 25px rgba(239, 68, 68, 0.35); }
+      @keyframes voxepay-error-pop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
+      .voxepay-error-icon-large svg { width: 40px; height: 40px; color: white; }
+      .voxepay-error-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; color: var(--voxepay-text); }
+      .voxepay-error-message { font-size: 1rem; color: var(--voxepay-text-muted); margin-bottom: 8px; line-height: 1.5; }
+      .voxepay-error-code { font-size: 0.75rem; color: var(--voxepay-text-subtle); font-family: monospace; margin-bottom: 24px; }
+      .voxepay-error-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
+
+      /* OTP View */
+      .voxepay-otp-view { text-align: center; padding: 24px 16px; }
+      .voxepay-otp-header { margin-bottom: 24px; }
+      .voxepay-otp-icon { font-size: 3rem; margin-bottom: 12px; }
+      .voxepay-otp-title { font-size: 1.25rem; font-weight: 700; color: var(--voxepay-text); margin-bottom: 8px; }
+      .voxepay-otp-subtitle { font-size: 0.875rem; color: var(--voxepay-text-muted); }
+      
+      .voxepay-otp-inputs-container { margin-bottom: 16px; }
+      .voxepay-otp-inputs { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
+      .voxepay-otp-digit { width: 48px; height: 56px; text-align: center; font-size: 1.5rem; font-weight: 700; border: 2px solid var(--voxepay-border); border-radius: var(--voxepay-border-radius); background: var(--voxepay-input-bg); color: var(--voxepay-text); outline: none; transition: all var(--voxepay-transition-fast); }
+      .voxepay-otp-digit:focus { border-color: var(--voxepay-primary); box-shadow: 0 0 0 4px var(--voxepay-glow); }
+      
+      .voxepay-otp-timer { font-size: 0.875rem; color: var(--voxepay-text-muted); margin-bottom: 12px; }
+      .voxepay-otp-timer span { font-weight: 700; color: var(--voxepay-primary); }
+      
+      .voxepay-resend-btn { padding: 8px 16px; background: transparent; border: 1px solid var(--voxepay-border); border-radius: var(--voxepay-border-radius); color: var(--voxepay-text-muted); font-size: 0.875rem; cursor: pointer; margin-bottom: 16px; transition: all var(--voxepay-transition-fast); }
+      .voxepay-resend-btn:hover:not(:disabled) { border-color: var(--voxepay-primary); color: var(--voxepay-primary); }
+      .voxepay-resend-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+      
+      .voxepay-back-btn { display: block; width: 100%; padding: 12px; background: transparent; border: none; color: var(--voxepay-text-muted); font-size: 0.875rem; cursor: pointer; margin-top: 12px; transition: color var(--voxepay-transition-fast); }
+      .voxepay-back-btn:hover { color: var(--voxepay-primary); }
+
+      /* Payment Method Tabs */
+      .voxepay-method-tabs { display: flex; border-bottom: 1px solid var(--voxepay-border); background: var(--voxepay-surface); }
+      .voxepay-method-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 12px; border: none; background: transparent; color: var(--voxepay-text-muted); font-size: 0.813rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: all var(--voxepay-transition-fast); border-bottom: 2px solid transparent; white-space: nowrap; }
+      .voxepay-method-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
+      .voxepay-method-tab:hover { color: var(--voxepay-text); background: var(--voxepay-surface-hover); }
+      .voxepay-method-tab.active { color: var(--voxepay-primary); border-bottom-color: var(--voxepay-primary); background: var(--voxepay-bg); }
+
+      /* Bank Transfer View */
+      .voxepay-transfer-view { padding: 4px 0; }
+      .voxepay-transfer-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; }
+      .voxepay-transfer-instruction { text-align: center; margin-bottom: 20px; font-size: 0.938rem; color: var(--voxepay-text-muted); }
+      .voxepay-transfer-instruction strong { color: var(--voxepay-text); font-size: 1.063rem; }
+      .voxepay-transfer-details { background: var(--voxepay-surface); border: 1px solid var(--voxepay-border); border-radius: var(--voxepay-border-radius); overflow: hidden; margin-bottom: 16px; }
+      .voxepay-transfer-detail { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--voxepay-border); }
+      .voxepay-transfer-detail:last-child { border-bottom: none; }
+      .voxepay-transfer-label { font-size: 0.813rem; color: var(--voxepay-text-muted); font-weight: 500; }
+      .voxepay-transfer-value { font-size: 0.938rem; font-weight: 600; color: var(--voxepay-text); }
+      .voxepay-transfer-value-row { display: flex; align-items: center; gap: 8px; }
+      .voxepay-transfer-account { font-size: 1.125rem; font-weight: 700; color: var(--voxepay-primary); letter-spacing: 1.5px; font-family: 'DM Sans', monospace; }
+      .voxepay-transfer-amount { color: var(--voxepay-primary); }
+
+      /* Copy Button */
+      .voxepay-copy-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--voxepay-border); border-radius: 8px; background: var(--voxepay-surface-hover); color: var(--voxepay-text-muted); cursor: pointer; transition: all var(--voxepay-transition-fast); flex-shrink: 0; }
+      .voxepay-copy-btn svg { width: 16px; height: 16px; }
+      .voxepay-copy-btn:hover { border-color: var(--voxepay-primary); color: var(--voxepay-primary); background: rgba(0, 97, 255, 0.1); }
+      .voxepay-copy-btn.voxepay-copied { border-color: var(--voxepay-success); color: var(--voxepay-success); background: var(--voxepay-success-bg); }
+
+      /* Transfer Timer */
+      .voxepay-transfer-timer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--voxepay-surface); border: 1px solid var(--voxepay-border); border-radius: var(--voxepay-border-radius); margin-bottom: 16px; font-size: 0.875rem; color: var(--voxepay-text-muted); }
+      .voxepay-transfer-timer svg { width: 16px; height: 16px; color: var(--voxepay-primary); flex-shrink: 0; }
+      .voxepay-transfer-timer strong { color: var(--voxepay-primary); font-weight: 700; font-family: monospace; font-size: 0.938rem; }
+      
+      @media (max-width: 480px) { .voxepay-modal { max-width: 100%; max-height: 100%; border-radius: 0; height: 100%; } .voxepay-body { padding: 20px; } .voxepay-otp-digit { width: 42px; height: 50px; font-size: 1.25rem; } .voxepay-transfer-detail { flex-direction: column; align-items: flex-start; gap: 4px; } }
+    `;
+  }
+}