@voxepay/checkout 0.1.0 → 0.2.0

package/dist/index.esm.js

@@ -227,6 +227,18 @@ const ICONS = {
     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 = {
@@ -247,6 +259,7 @@ class VoxePayModal {
             }
         };
         this.options = options;
+        const methods = options.paymentMethods || ['card', 'bank_transfer'];
         this.state = {
             cardNumber: '',
             expiry: '',
@@ -259,6 +272,10 @@ class VoxePayModal {
             otpTimer: 60,
             canResendOtp: false,
             otpTimerInterval: null,
+            paymentMethod: methods[0],
+            transferTimer: 0,
+            transferTimerInterval: null,
+            bankTransferDetails: options.bankTransferDetails || null,
         };
     }
     /**
@@ -279,6 +296,7 @@ class VoxePayModal {
      */
     close() {
         var _a;
+        this.stopTransferTimer();
         (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.classList.remove('voxepay-visible');
         setTimeout(() => {
             var _a, _b, _c;
@@ -309,11 +327,20 @@ class VoxePayModal {
         document.body.appendChild(this.container);
         this.overlay = this.container.querySelector('.voxepay-overlay');
     }
+    /**
+     * Get available payment methods
+     */
+    getPaymentMethods() {
+        return this.options.paymentMethods || ['card', 'bank_transfer'];
+    }
     /**
      * Get modal HTML
      */
     getModalHTML() {
         const formattedAmount = formatAmount(this.options.amount, 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">
@@ -329,71 +356,21 @@ class VoxePayModal {
               ${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">
-            <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>
-              
-              <button type="submit" class="voxepay-submit-btn" id="voxepay-submit">
-                <span>Pay Now ${formattedAmount}</span>
-              </button>
-            </form>
+            ${isCard ? this.getCardFormHTML(formattedAmount) : this.getBankTransferHTML(formattedAmount)}
           </div>
           
           <div class="voxepay-footer">
@@ -406,6 +383,118 @@ class VoxePayModal {
       </div>
     `;
     }
+    /**
+     * Get card form HTML
+     */
+    getCardFormHTML(formattedAmount) {
+        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>
+        
+        <button type="submit" class="voxepay-submit-btn" id="voxepay-submit">
+          <span>Pay Now ${formattedAmount}</span>
+        </button>
+      </form>
+    `;
+    }
+    /**
+     * Get bank transfer HTML
+     */
+    getBankTransferHTML(formattedAmount) {
+        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>
+      `;
+        }
+        return `
+      <div class="voxepay-transfer-view">
+        <div class="voxepay-transfer-instruction">
+          <p>Transfer <strong>${formattedAmount}</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">Amount</span>
+            <span class="voxepay-transfer-value voxepay-transfer-amount">${formattedAmount}</span>
+          </div>
+
+          <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>
+
+        <button type="button" class="voxepay-submit-btn" id="voxepay-transfer-confirm">
+          <span>I've sent the money</span>
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * Format countdown seconds to MM:SS
+     */
+    formatCountdown(seconds) {
+        const m = Math.floor(seconds / 60);
+        const s = seconds % 60;
+        return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+    }
     /**
      * Render success view
      */
@@ -646,8 +735,8 @@ class VoxePayModal {
      * Attach event listeners
      */
     attachEventListeners() {
-        var _a, _b, _c, _d, _e, _f;
-        const closeBtn = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('[data-action="close"]');
+        var _a, _b, _c, _d, _e, _f, _g;
+        const closeBtn = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('[data-action=\"close\"]');
         closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.addEventListener('click', () => this.close());
         (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.addEventListener('click', (e) => {
             if (e.target === this.overlay) {
@@ -655,17 +744,221 @@ class VoxePayModal {
             }
         });
         document.addEventListener('keydown', this.handleEscape);
-        const cardInput = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#voxepay-card-number');
-        cardInput === null || cardInput === void 0 ? void 0 : cardInput.addEventListener('input', (e) => this.handleCardInput(e));
-        cardInput === null || cardInput === void 0 ? void 0 : cardInput.addEventListener('blur', () => this.validateField('cardNumber'));
-        const expiryInput = (_d = this.container) === null || _d === void 0 ? void 0 : _d.querySelector('#voxepay-expiry');
-        expiryInput === null || expiryInput === void 0 ? void 0 : expiryInput.addEventListener('input', (e) => this.handleExpiryInput(e));
-        expiryInput === null || expiryInput === void 0 ? void 0 : expiryInput.addEventListener('blur', () => this.validateField('expiry'));
-        const cvvInput = (_e = this.container) === null || _e === void 0 ? void 0 : _e.querySelector('#voxepay-cvv');
-        cvvInput === null || cvvInput === void 0 ? void 0 : cvvInput.addEventListener('input', (e) => this.handleCVVInput(e));
-        cvvInput === null || cvvInput === void 0 ? void 0 : cvvInput.addEventListener('blur', () => this.validateField('cvv'));
-        const form = (_f = this.container) === null || _f === void 0 ? void 0 : _f.querySelector('#voxepay-payment-form');
-        form === null || form === void 0 ? void 0 : form.addEventListener('submit', (e) => this.handleSubmit(e));
+        // Payment method tabs
+        const tabs = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.voxepay-method-tab');
+        tabs === null || tabs === void 0 ? void 0 : tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                const method = tab.dataset.method;
+                if (method && method !== this.state.paymentMethod) {
+                    this.switchPaymentMethod(method);
+                }
+            });
+        });
+        // Card-specific listeners
+        if (this.state.paymentMethod === 'card') {
+            const cardInput = (_d = this.container) === null || _d === void 0 ? void 0 : _d.querySelector('#voxepay-card-number');
+            cardInput === null || cardInput === void 0 ? void 0 : cardInput.addEventListener('input', (e) => this.handleCardInput(e));
+            cardInput === null || cardInput === void 0 ? void 0 : cardInput.addEventListener('blur', () => this.validateField('cardNumber'));
+            const expiryInput = (_e = this.container) === null || _e === void 0 ? void 0 : _e.querySelector('#voxepay-expiry');
+            expiryInput === null || expiryInput === void 0 ? void 0 : expiryInput.addEventListener('input', (e) => this.handleExpiryInput(e));
+            expiryInput === null || expiryInput === void 0 ? void 0 : expiryInput.addEventListener('blur', () => this.validateField('expiry'));
+            const cvvInput = (_f = this.container) === null || _f === void 0 ? void 0 : _f.querySelector('#voxepay-cvv');
+            cvvInput === null || cvvInput === void 0 ? void 0 : cvvInput.addEventListener('input', (e) => this.handleCVVInput(e));
+            cvvInput === null || cvvInput === void 0 ? void 0 : cvvInput.addEventListener('blur', () => this.validateField('cvv'));
+            const form = (_g = this.container) === null || _g === void 0 ? void 0 : _g.querySelector('#voxepay-payment-form');
+            form === null || form === void 0 ? void 0 : 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
+     */
+    attachBankTransferListeners() {
+        var _a, _b;
+        const copyBtn = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#voxepay-copy-btn');
+        copyBtn === null || copyBtn === void 0 ? void 0 : copyBtn.addEventListener('click', () => {
+            const accountNum = copyBtn.dataset.copy || '';
+            this.copyToClipboard(accountNum);
+        });
+        const confirmBtn = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#voxepay-transfer-confirm');
+        confirmBtn === null || confirmBtn === void 0 ? void 0 : confirmBtn.addEventListener('click', () => this.handleTransferConfirm());
+    }
+    /**
+     * Switch between payment methods
+     */
+    switchPaymentMethod(method) {
+        var _a;
+        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');
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.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');
+                const expiryInput = this.container.querySelector('#voxepay-expiry');
+                const cvvInput = this.container.querySelector('#voxepay-cvv');
+                if (cardInput)
+                    cardInput.value = formatCardNumber(this.state.cardNumber);
+                if (expiryInput)
+                    expiryInput.value = this.state.expiry;
+                if (cvvInput)
+                    cvvInput.value = this.state.cvv;
+            }
+        }
+    }
+    /**
+     * Load bank transfer details (from callback or generate mock)
+     */
+    async loadBankTransferDetails() {
+        var _a;
+        try {
+            let details;
+            if (this.options.onBankTransferRequested) {
+                details = await this.options.onBankTransferRequested();
+            }
+            else {
+                // Mock/default bank details for testing
+                await new Promise(resolve => setTimeout(resolve, 1500));
+                details = {
+                    accountNumber: '0123456789',
+                    bankName: 'VoxePay Bank',
+                    accountName: 'VoxePay Collections',
+                    reference: `VP-${Date.now().toString(36).toUpperCase()}`,
+                    expiresIn: 1800, // 30 minutes
+                };
+            }
+            this.state.bankTransferDetails = details;
+            // Re-render the bank transfer view
+            const formContainer = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#voxepay-form-container');
+            if (formContainer) {
+                const formattedAmount = formatAmount(this.options.amount, this.options.currency);
+                formContainer.innerHTML = this.getBankTransferHTML(formattedAmount);
+                this.attachBankTransferListeners();
+                this.startTransferTimer();
+            }
+        }
+        catch (error) {
+            this.options.onError({
+                code: 'BANK_TRANSFER_INIT_FAILED',
+                message: 'Could not generate bank transfer details. Please try again.',
+                recoverable: true,
+            });
+        }
+    }
+    /**
+     * Copy text to clipboard with visual feedback
+     */
+    async copyToClipboard(text) {
+        var _a;
+        try {
+            await navigator.clipboard.writeText(text);
+            const copyBtn = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#voxepay-copy-btn');
+            if (copyBtn) {
+                copyBtn.innerHTML = `${ICONS.check}`;
+                copyBtn.classList.add('voxepay-copied');
+                setTimeout(() => {
+                    copyBtn.innerHTML = `${ICONS.copy}`;
+                    copyBtn.classList.remove('voxepay-copied');
+                }, 2000);
+            }
+        }
+        catch (_b) {
+            // 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);
+        }
+    }
+    /**
+     * Handle "I've sent the money" confirmation
+     */
+    async handleTransferConfirm() {
+        var _a, _b;
+        const confirmBtn = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#voxepay-transfer-confirm');
+        if (confirmBtn) {
+            confirmBtn.disabled = true;
+            confirmBtn.innerHTML = '<div class="voxepay-spinner"></div><span>Confirming transfer...</span>';
+        }
+        this.stopTransferTimer();
+        try {
+            // Simulate transfer verification
+            await new Promise(resolve => setTimeout(resolve, 3000));
+            const result = {
+                id: `pay_transfer_${Date.now()}`,
+                status: 'pending',
+                amount: this.options.amount,
+                currency: this.options.currency,
+                timestamp: new Date().toISOString(),
+                reference: (_b = this.state.bankTransferDetails) === null || _b === void 0 ? void 0 : _b.reference,
+                paymentMethod: 'bank_transfer',
+            };
+            this.state.isSuccess = true;
+            this.renderSuccessView();
+            this.options.onSuccess(result);
+        }
+        catch (error) {
+            if (confirmBtn) {
+                confirmBtn.disabled = false;
+                confirmBtn.innerHTML = "<span>I've sent the money</span>";
+            }
+            const paymentError = error;
+            this.options.onError(paymentError);
+        }
+    }
+    /**
+     * Start the transfer countdown timer
+     */
+    startTransferTimer() {
+        if (!this.state.bankTransferDetails)
+            return;
+        this.state.transferTimer = this.state.bankTransferDetails.expiresIn;
+        this.state.transferTimerInterval = window.setInterval(() => {
+            var _a, _b, _c;
+            this.state.transferTimer--;
+            const countdownEl = (_a = this.container) === null || _a === void 0 ? void 0 : _a.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 = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#voxepay-transfer-timer');
+                if (timerEl) {
+                    timerEl.innerHTML = `${ICONS.clock} <span style="color: var(--voxepay-error);">Account expired. Please try again.</span>`;
+                }
+                const confirmBtn = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#voxepay-transfer-confirm');
+                if (confirmBtn)
+                    confirmBtn.disabled = true;
+            }
+        }, 1000);
+    }
+    /**
+     * Stop the transfer countdown timer
+     */
+    stopTransferTimer() {
+        if (this.state.transferTimerInterval) {
+            clearInterval(this.state.transferTimerInterval);
+            this.state.transferTimerInterval = null;
+        }
     }
     handleCardInput(e) {
         var _a;
@@ -918,8 +1211,40 @@ class VoxePayModal {
       
       .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: 8px; padding: 14px 16px; border: none; background: transparent; color: var(--voxepay-text-muted); font-size: 0.875rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: all var(--voxepay-transition-fast); border-bottom: 2px solid transparent; }
+      .voxepay-method-tab svg { width: 18px; height: 18px; }
+      .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; } }
+      @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; } }
     `;
     }
 }