@zahlen/checkout 0.1.2 → 0.2.1

package/index.cjs.js

@@ -494,6 +494,247 @@ class ZahlenModal {
         const closeBtn = formContainer.querySelector('[data-action="close"]');
         closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.addEventListener('click', ()=>this.close());
     }
+    /**
+     * Render OTP verification view
+     */ renderOTPView() {
+        var _a;
+        const formContainer = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#zahlen-form-container');
+        if (!formContainer) return;
+        this.state.isOtpStep = true;
+        this.state.otpTimer = 60;
+        this.state.canResendOtp = false;
+        const maskedPhone = this.options.customerEmail ? `****${this.options.customerEmail.slice(-4)}` : '****1234';
+        formContainer.innerHTML = `
+      <div class="zahlen-otp-view">
+        <div class="zahlen-otp-header">
+          <div class="zahlen-otp-icon">📱</div>
+          <h3 class="zahlen-otp-title">Verify Your Payment</h3>
+          <p class="zahlen-otp-subtitle">We've sent a 6-digit code to ${maskedPhone}</p>
+        </div>
+        
+        <div class="zahlen-otp-inputs-container">
+          <div class="zahlen-otp-inputs" id="zahlen-otp-inputs">
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="0" inputmode="numeric" autocomplete="one-time-code" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="1" inputmode="numeric" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="2" inputmode="numeric" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="3" inputmode="numeric" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="4" inputmode="numeric" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="5" inputmode="numeric" />
+          </div>
+          <div class="zahlen-error-message" id="zahlen-otp-error" style="display: none;"></div>
+        </div>
+
+        <div class="zahlen-otp-timer" id="zahlen-otp-timer">
+          Resend code in <span id="zahlen-timer-count">60</span>s
+        </div>
+        
+        <button class="zahlen-resend-btn" id="zahlen-resend-otp" disabled>
+          Resend OTP
+        </button>
+        
+        <button type="button" class="zahlen-submit-btn" id="zahlen-verify-otp">
+          <span>🔐 Verify & Pay</span>
+        </button>
+        
+        <button class="zahlen-back-btn" id="zahlen-back-to-card">
+          ← Back to card details
+        </button>
+      </div>
+    `;
+        this.attachOTPEventListeners();
+        this.startOTPTimer();
+    }
+    /**
+     * Attach OTP-specific event listeners
+     */ attachOTPEventListeners() {
+        var _a, _b, _c, _d, _e;
+        const otpInputs = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.zahlen-otp-digit');
+        otpInputs === null || otpInputs === void 0 ? void 0 : 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));
+        });
+        // Verify button
+        const verifyBtn = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#zahlen-verify-otp');
+        verifyBtn === null || verifyBtn === void 0 ? void 0 : verifyBtn.addEventListener('click', ()=>this.handleOTPSubmit());
+        // Resend button
+        const resendBtn = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#zahlen-resend-otp');
+        resendBtn === null || resendBtn === void 0 ? void 0 : resendBtn.addEventListener('click', ()=>this.handleResendOTP());
+        // Back button
+        const backBtn = (_d = this.container) === null || _d === void 0 ? void 0 : _d.querySelector('#zahlen-back-to-card');
+        backBtn === null || backBtn === void 0 ? void 0 : backBtn.addEventListener('click', ()=>this.handleBackToCard());
+        // Focus first input
+        (_e = otpInputs === null || otpInputs === void 0 ? void 0 : otpInputs[0]) === null || _e === void 0 ? void 0 : _e.focus();
+    }
+    /**
+     * Handle OTP digit input
+     */ handleOTPInput(e, index) {
+        var _a;
+        const input = e.target;
+        const value = input.value.replace(/\D/g, '');
+        input.value = value;
+        if (value && index < 5) {
+            const nextInput = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${index + 1}"]`);
+            nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
+        }
+        this.updateOTPState();
+        this.clearError('otp');
+    }
+    /**
+     * Handle OTP keydown for backspace navigation
+     */ handleOTPKeydown(e, index) {
+        var _a;
+        const input = e.target;
+        if (e.key === 'Backspace' && !input.value && index > 0) {
+            const prevInput = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${index - 1}"]`);
+            prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
+        }
+    }
+    /**
+     * Handle OTP paste
+     */ handleOTPPaste(e) {
+        var _a, _b;
+        e.preventDefault();
+        const pastedData = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text').replace(/\D/g, '').slice(0, 6);
+        if (pastedData) {
+            const inputs = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.zahlen-otp-digit');
+            pastedData.split('').forEach((digit, i)=>{
+                if (inputs[i]) {
+                    inputs[i].value = digit;
+                }
+            });
+            this.updateOTPState();
+        }
+    }
+    /**
+     * Update OTP state from inputs
+     */ updateOTPState() {
+        var _a;
+        const inputs = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.zahlen-otp-digit');
+        let otp = '';
+        inputs === null || inputs === void 0 ? void 0 : inputs.forEach((input)=>otp += input.value);
+        this.state.otp = otp;
+    }
+    /**
+     * Start OTP resend timer
+     */ startOTPTimer() {
+        var _a, _b, _c;
+        const timerEl = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#zahlen-timer-count');
+        const timerContainer = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#zahlen-otp-timer');
+        const resendBtn = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#zahlen-resend-otp');
+        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.style.display = 'none';
+                if (resendBtn) resendBtn.disabled = false;
+            }
+        }, 1000);
+    }
+    /**
+     * Handle OTP submission
+     */ handleOTPSubmit() {
+        return __awaiter(this, void 0, void 0, function*() {
+            if (this.state.otp.length !== 6) {
+                this.showError('otp', 'Please enter the complete 6-digit code');
+                return;
+            }
+            this.setOTPProcessing(true);
+            try {
+                // Simulate OTP verification
+                yield this.verifyOTP();
+                // Clear timer
+                if (this.state.otpTimerInterval) {
+                    clearInterval(this.state.otpTimerInterval);
+                }
+                // Process final payment
+                const result = yield this.processPayment();
+                this.state.isSuccess = true;
+                this.renderSuccessView();
+                this.options.onSuccess(result);
+            } catch (error) {
+                this.setOTPProcessing(false);
+                const paymentError = error;
+                this.showError('otp', paymentError.message || 'Invalid OTP. Please try again.');
+            }
+        });
+    }
+    /**
+     * Set OTP processing state
+     */ setOTPProcessing(isProcessing) {
+        var _a;
+        const verifyBtn = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#zahlen-verify-otp');
+        if (verifyBtn) {
+            verifyBtn.disabled = isProcessing;
+            verifyBtn.innerHTML = isProcessing ? '<div class="zahlen-spinner"></div><span>Verifying...</span>' : '<span>🔐 Verify & Pay</span>';
+        }
+    }
+    /**
+     * Verify OTP (placeholder - integrate with backend)
+     */ verifyOTP() {
+        return __awaiter(this, void 0, void 0, function*() {
+            yield new Promise((resolve)=>setTimeout(resolve, 1500));
+            // Simulated OTP validation - accept any 6 digits for demo
+            // In production, send to your API for verification
+            if (this.state.otp.length !== 6) {
+                throw {
+                    code: 'INVALID_OTP',
+                    message: 'Invalid OTP',
+                    recoverable: true
+                };
+            }
+        });
+    }
+    /**
+     * Handle resend OTP
+     */ handleResendOTP() {
+        var _a, _b, _c, _d;
+        const timerContainer = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#zahlen-otp-timer');
+        const resendBtn = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#zahlen-resend-otp');
+        // Reset timer
+        this.state.otpTimer = 60;
+        this.state.canResendOtp = false;
+        if (timerContainer) timerContainer.style.display = 'block';
+        if (resendBtn) resendBtn.disabled = true;
+        // Clear old inputs
+        const inputs = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.zahlen-otp-digit');
+        inputs === null || inputs === void 0 ? void 0 : inputs.forEach((input)=>input.value = '');
+        this.state.otp = '';
+        // Restart timer
+        this.startOTPTimer();
+        // Focus first input
+        (_d = inputs === null || inputs === void 0 ? void 0 : inputs[0]) === null || _d === void 0 ? void 0 : _d.focus();
+    }
+    /**
+     * Handle back to card details
+     */ handleBackToCard() {
+        var _a;
+        if (this.state.otpTimerInterval) {
+            clearInterval(this.state.otpTimerInterval);
+        }
+        this.state.isOtpStep = false;
+        this.state.otp = '';
+        // Re-render full modal
+        if (this.container) {
+            this.container.innerHTML = this.getModalHTML();
+            this.overlay = this.container.querySelector('.zahlen-overlay');
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.classList.add('zahlen-visible');
+            this.attachEventListeners();
+            // Restore previous card values
+            const cardInput = this.container.querySelector('#zahlen-card-number');
+            const expiryInput = this.container.querySelector('#zahlen-expiry');
+            const cvvInput = this.container.querySelector('#zahlen-cvv');
+            if (cardInput) cardInput.value = formatCardNumber(this.state.cardNumber);
+            if (expiryInput) expiryInput.value = this.state.expiry;
+            if (cvvInput) cvvInput.value = this.state.cvv;
+        }
+    }
     /**
      * Attach event listeners
      */ attachEventListeners() {
@@ -623,13 +864,12 @@ class ZahlenModal {
             // Show loading state
             this.setProcessing(true);
             try {
-                // Simulate API call (replace with actual API integration)
-                const result = yield this.processPayment();
-                // Show success
-                this.state.isSuccess = true;
-                this.renderSuccessView();
-                // Callback
-                this.options.onSuccess(result);
+                // Simulate sending OTP (in production, send to your API)
+                yield new Promise((resolve)=>setTimeout(resolve, 1000));
+                // Hide processing state
+                this.setProcessing(false);
+                // Show OTP verification view
+                this.renderOTPView();
             } catch (error) {
                 this.setProcessing(false);
                 const paymentError = error;
@@ -796,7 +1036,30 @@ class ZahlenModal {
       .zahlen-success-btn { padding: 12px 32px; background: var(--zahlen-surface); border: 1.5px solid var(--zahlen-border); border-radius: var(--zahlen-border-radius); color: var(--zahlen-text); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all var(--zahlen-transition-fast); }
       .zahlen-success-btn:hover { background: var(--zahlen-surface-hover); border-color: var(--zahlen-primary); color: var(--zahlen-primary); }
       
-      @media (max-width: 480px) { .zahlen-modal { max-width: 100%; max-height: 100%; border-radius: 0; height: 100%; } .zahlen-body { padding: 20px; } }
+      /* OTP View Styles */
+      .zahlen-otp-view { text-align: center; padding: 24px 16px; }
+      .zahlen-otp-header { margin-bottom: 24px; }
+      .zahlen-otp-icon { font-size: 3rem; margin-bottom: 12px; }
+      .zahlen-otp-title { font-size: 1.25rem; font-weight: 700; color: var(--zahlen-text); margin-bottom: 8px; }
+      .zahlen-otp-subtitle { font-size: 0.875rem; color: var(--zahlen-text-muted); }
+      
+      .zahlen-otp-inputs-container { margin-bottom: 16px; }
+      .zahlen-otp-inputs { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
+      .zahlen-otp-digit { width: 48px; height: 56px; text-align: center; font-size: 1.5rem; font-weight: 700; border: 2px solid var(--zahlen-border); border-radius: var(--zahlen-border-radius); background: var(--zahlen-input-bg); color: var(--zahlen-text); outline: none; transition: all var(--zahlen-transition-fast); }
+      .zahlen-otp-digit:focus { border-color: var(--zahlen-primary); box-shadow: 0 0 0 4px var(--zahlen-glow); }
+      .zahlen-otp-digit.filled { border-color: var(--zahlen-primary); background: var(--zahlen-surface); }
+      
+      .zahlen-otp-timer { font-size: 0.875rem; color: var(--zahlen-text-muted); margin-bottom: 12px; }
+      .zahlen-otp-timer span { font-weight: 700; color: var(--zahlen-primary); }
+      
+      .zahlen-resend-btn { padding: 8px 16px; background: transparent; border: 1px solid var(--zahlen-border); border-radius: var(--zahlen-border-radius); color: var(--zahlen-text-muted); font-size: 0.875rem; cursor: pointer; margin-bottom: 16px; transition: all var(--zahlen-transition-fast); }
+      .zahlen-resend-btn:hover:not(:disabled) { border-color: var(--zahlen-primary); color: var(--zahlen-primary); }
+      .zahlen-resend-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+      
+      .zahlen-back-btn { display: block; width: 100%; padding: 12px; background: transparent; border: none; color: var(--zahlen-text-muted); font-size: 0.875rem; cursor: pointer; margin-top: 12px; transition: color var(--zahlen-transition-fast); }
+      .zahlen-back-btn:hover { color: var(--zahlen-primary); }
+      
+      @media (max-width: 480px) { .zahlen-modal { max-width: 100%; max-height: 100%; border-radius: 0; height: 100%; } .zahlen-body { padding: 20px; } .zahlen-otp-digit { width: 42px; height: 50px; font-size: 1.25rem; } }
     `;
     }
     constructor(options){
@@ -813,9 +1076,14 @@ class ZahlenModal {
             cardNumber: '',
             expiry: '',
             cvv: '',
+            otp: '',
             errors: {},
             isProcessing: false,
-            isSuccess: false
+            isSuccess: false,
+            isOtpStep: false,
+            otpTimer: 60,
+            canResendOtp: false,
+            otpTimerInterval: null
         };
     }
 }

package/index.esm.js

@@ -490,6 +490,247 @@ class ZahlenModal {
         const closeBtn = formContainer.querySelector('[data-action="close"]');
         closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.addEventListener('click', ()=>this.close());
     }
+    /**
+     * Render OTP verification view
+     */ renderOTPView() {
+        var _a;
+        const formContainer = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#zahlen-form-container');
+        if (!formContainer) return;
+        this.state.isOtpStep = true;
+        this.state.otpTimer = 60;
+        this.state.canResendOtp = false;
+        const maskedPhone = this.options.customerEmail ? `****${this.options.customerEmail.slice(-4)}` : '****1234';
+        formContainer.innerHTML = `
+      <div class="zahlen-otp-view">
+        <div class="zahlen-otp-header">
+          <div class="zahlen-otp-icon">📱</div>
+          <h3 class="zahlen-otp-title">Verify Your Payment</h3>
+          <p class="zahlen-otp-subtitle">We've sent a 6-digit code to ${maskedPhone}</p>
+        </div>
+        
+        <div class="zahlen-otp-inputs-container">
+          <div class="zahlen-otp-inputs" id="zahlen-otp-inputs">
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="0" inputmode="numeric" autocomplete="one-time-code" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="1" inputmode="numeric" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="2" inputmode="numeric" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="3" inputmode="numeric" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="4" inputmode="numeric" />
+            <input type="text" maxlength="1" class="zahlen-otp-digit" data-index="5" inputmode="numeric" />
+          </div>
+          <div class="zahlen-error-message" id="zahlen-otp-error" style="display: none;"></div>
+        </div>
+
+        <div class="zahlen-otp-timer" id="zahlen-otp-timer">
+          Resend code in <span id="zahlen-timer-count">60</span>s
+        </div>
+        
+        <button class="zahlen-resend-btn" id="zahlen-resend-otp" disabled>
+          Resend OTP
+        </button>
+        
+        <button type="button" class="zahlen-submit-btn" id="zahlen-verify-otp">
+          <span>🔐 Verify & Pay</span>
+        </button>
+        
+        <button class="zahlen-back-btn" id="zahlen-back-to-card">
+          ← Back to card details
+        </button>
+      </div>
+    `;
+        this.attachOTPEventListeners();
+        this.startOTPTimer();
+    }
+    /**
+     * Attach OTP-specific event listeners
+     */ attachOTPEventListeners() {
+        var _a, _b, _c, _d, _e;
+        const otpInputs = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.zahlen-otp-digit');
+        otpInputs === null || otpInputs === void 0 ? void 0 : 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));
+        });
+        // Verify button
+        const verifyBtn = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#zahlen-verify-otp');
+        verifyBtn === null || verifyBtn === void 0 ? void 0 : verifyBtn.addEventListener('click', ()=>this.handleOTPSubmit());
+        // Resend button
+        const resendBtn = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#zahlen-resend-otp');
+        resendBtn === null || resendBtn === void 0 ? void 0 : resendBtn.addEventListener('click', ()=>this.handleResendOTP());
+        // Back button
+        const backBtn = (_d = this.container) === null || _d === void 0 ? void 0 : _d.querySelector('#zahlen-back-to-card');
+        backBtn === null || backBtn === void 0 ? void 0 : backBtn.addEventListener('click', ()=>this.handleBackToCard());
+        // Focus first input
+        (_e = otpInputs === null || otpInputs === void 0 ? void 0 : otpInputs[0]) === null || _e === void 0 ? void 0 : _e.focus();
+    }
+    /**
+     * Handle OTP digit input
+     */ handleOTPInput(e, index) {
+        var _a;
+        const input = e.target;
+        const value = input.value.replace(/\D/g, '');
+        input.value = value;
+        if (value && index < 5) {
+            const nextInput = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${index + 1}"]`);
+            nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
+        }
+        this.updateOTPState();
+        this.clearError('otp');
+    }
+    /**
+     * Handle OTP keydown for backspace navigation
+     */ handleOTPKeydown(e, index) {
+        var _a;
+        const input = e.target;
+        if (e.key === 'Backspace' && !input.value && index > 0) {
+            const prevInput = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${index - 1}"]`);
+            prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
+        }
+    }
+    /**
+     * Handle OTP paste
+     */ handleOTPPaste(e) {
+        var _a, _b;
+        e.preventDefault();
+        const pastedData = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text').replace(/\D/g, '').slice(0, 6);
+        if (pastedData) {
+            const inputs = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.zahlen-otp-digit');
+            pastedData.split('').forEach((digit, i)=>{
+                if (inputs[i]) {
+                    inputs[i].value = digit;
+                }
+            });
+            this.updateOTPState();
+        }
+    }
+    /**
+     * Update OTP state from inputs
+     */ updateOTPState() {
+        var _a;
+        const inputs = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.zahlen-otp-digit');
+        let otp = '';
+        inputs === null || inputs === void 0 ? void 0 : inputs.forEach((input)=>otp += input.value);
+        this.state.otp = otp;
+    }
+    /**
+     * Start OTP resend timer
+     */ startOTPTimer() {
+        var _a, _b, _c;
+        const timerEl = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#zahlen-timer-count');
+        const timerContainer = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#zahlen-otp-timer');
+        const resendBtn = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#zahlen-resend-otp');
+        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.style.display = 'none';
+                if (resendBtn) resendBtn.disabled = false;
+            }
+        }, 1000);
+    }
+    /**
+     * Handle OTP submission
+     */ handleOTPSubmit() {
+        return __awaiter(this, void 0, void 0, function*() {
+            if (this.state.otp.length !== 6) {
+                this.showError('otp', 'Please enter the complete 6-digit code');
+                return;
+            }
+            this.setOTPProcessing(true);
+            try {
+                // Simulate OTP verification
+                yield this.verifyOTP();
+                // Clear timer
+                if (this.state.otpTimerInterval) {
+                    clearInterval(this.state.otpTimerInterval);
+                }
+                // Process final payment
+                const result = yield this.processPayment();
+                this.state.isSuccess = true;
+                this.renderSuccessView();
+                this.options.onSuccess(result);
+            } catch (error) {
+                this.setOTPProcessing(false);
+                const paymentError = error;
+                this.showError('otp', paymentError.message || 'Invalid OTP. Please try again.');
+            }
+        });
+    }
+    /**
+     * Set OTP processing state
+     */ setOTPProcessing(isProcessing) {
+        var _a;
+        const verifyBtn = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#zahlen-verify-otp');
+        if (verifyBtn) {
+            verifyBtn.disabled = isProcessing;
+            verifyBtn.innerHTML = isProcessing ? '<div class="zahlen-spinner"></div><span>Verifying...</span>' : '<span>🔐 Verify & Pay</span>';
+        }
+    }
+    /**
+     * Verify OTP (placeholder - integrate with backend)
+     */ verifyOTP() {
+        return __awaiter(this, void 0, void 0, function*() {
+            yield new Promise((resolve)=>setTimeout(resolve, 1500));
+            // Simulated OTP validation - accept any 6 digits for demo
+            // In production, send to your API for verification
+            if (this.state.otp.length !== 6) {
+                throw {
+                    code: 'INVALID_OTP',
+                    message: 'Invalid OTP',
+                    recoverable: true
+                };
+            }
+        });
+    }
+    /**
+     * Handle resend OTP
+     */ handleResendOTP() {
+        var _a, _b, _c, _d;
+        const timerContainer = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#zahlen-otp-timer');
+        const resendBtn = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#zahlen-resend-otp');
+        // Reset timer
+        this.state.otpTimer = 60;
+        this.state.canResendOtp = false;
+        if (timerContainer) timerContainer.style.display = 'block';
+        if (resendBtn) resendBtn.disabled = true;
+        // Clear old inputs
+        const inputs = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.zahlen-otp-digit');
+        inputs === null || inputs === void 0 ? void 0 : inputs.forEach((input)=>input.value = '');
+        this.state.otp = '';
+        // Restart timer
+        this.startOTPTimer();
+        // Focus first input
+        (_d = inputs === null || inputs === void 0 ? void 0 : inputs[0]) === null || _d === void 0 ? void 0 : _d.focus();
+    }
+    /**
+     * Handle back to card details
+     */ handleBackToCard() {
+        var _a;
+        if (this.state.otpTimerInterval) {
+            clearInterval(this.state.otpTimerInterval);
+        }
+        this.state.isOtpStep = false;
+        this.state.otp = '';
+        // Re-render full modal
+        if (this.container) {
+            this.container.innerHTML = this.getModalHTML();
+            this.overlay = this.container.querySelector('.zahlen-overlay');
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.classList.add('zahlen-visible');
+            this.attachEventListeners();
+            // Restore previous card values
+            const cardInput = this.container.querySelector('#zahlen-card-number');
+            const expiryInput = this.container.querySelector('#zahlen-expiry');
+            const cvvInput = this.container.querySelector('#zahlen-cvv');
+            if (cardInput) cardInput.value = formatCardNumber(this.state.cardNumber);
+            if (expiryInput) expiryInput.value = this.state.expiry;
+            if (cvvInput) cvvInput.value = this.state.cvv;
+        }
+    }
     /**
      * Attach event listeners
      */ attachEventListeners() {
@@ -619,13 +860,12 @@ class ZahlenModal {
             // Show loading state
             this.setProcessing(true);
             try {
-                // Simulate API call (replace with actual API integration)
-                const result = yield this.processPayment();
-                // Show success
-                this.state.isSuccess = true;
-                this.renderSuccessView();
-                // Callback
-                this.options.onSuccess(result);
+                // Simulate sending OTP (in production, send to your API)
+                yield new Promise((resolve)=>setTimeout(resolve, 1000));
+                // Hide processing state
+                this.setProcessing(false);
+                // Show OTP verification view
+                this.renderOTPView();
             } catch (error) {
                 this.setProcessing(false);
                 const paymentError = error;
@@ -792,7 +1032,30 @@ class ZahlenModal {
       .zahlen-success-btn { padding: 12px 32px; background: var(--zahlen-surface); border: 1.5px solid var(--zahlen-border); border-radius: var(--zahlen-border-radius); color: var(--zahlen-text); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all var(--zahlen-transition-fast); }
       .zahlen-success-btn:hover { background: var(--zahlen-surface-hover); border-color: var(--zahlen-primary); color: var(--zahlen-primary); }
       
-      @media (max-width: 480px) { .zahlen-modal { max-width: 100%; max-height: 100%; border-radius: 0; height: 100%; } .zahlen-body { padding: 20px; } }
+      /* OTP View Styles */
+      .zahlen-otp-view { text-align: center; padding: 24px 16px; }
+      .zahlen-otp-header { margin-bottom: 24px; }
+      .zahlen-otp-icon { font-size: 3rem; margin-bottom: 12px; }
+      .zahlen-otp-title { font-size: 1.25rem; font-weight: 700; color: var(--zahlen-text); margin-bottom: 8px; }
+      .zahlen-otp-subtitle { font-size: 0.875rem; color: var(--zahlen-text-muted); }
+      
+      .zahlen-otp-inputs-container { margin-bottom: 16px; }
+      .zahlen-otp-inputs { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
+      .zahlen-otp-digit { width: 48px; height: 56px; text-align: center; font-size: 1.5rem; font-weight: 700; border: 2px solid var(--zahlen-border); border-radius: var(--zahlen-border-radius); background: var(--zahlen-input-bg); color: var(--zahlen-text); outline: none; transition: all var(--zahlen-transition-fast); }
+      .zahlen-otp-digit:focus { border-color: var(--zahlen-primary); box-shadow: 0 0 0 4px var(--zahlen-glow); }
+      .zahlen-otp-digit.filled { border-color: var(--zahlen-primary); background: var(--zahlen-surface); }
+      
+      .zahlen-otp-timer { font-size: 0.875rem; color: var(--zahlen-text-muted); margin-bottom: 12px; }
+      .zahlen-otp-timer span { font-weight: 700; color: var(--zahlen-primary); }
+      
+      .zahlen-resend-btn { padding: 8px 16px; background: transparent; border: 1px solid var(--zahlen-border); border-radius: var(--zahlen-border-radius); color: var(--zahlen-text-muted); font-size: 0.875rem; cursor: pointer; margin-bottom: 16px; transition: all var(--zahlen-transition-fast); }
+      .zahlen-resend-btn:hover:not(:disabled) { border-color: var(--zahlen-primary); color: var(--zahlen-primary); }
+      .zahlen-resend-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+      
+      .zahlen-back-btn { display: block; width: 100%; padding: 12px; background: transparent; border: none; color: var(--zahlen-text-muted); font-size: 0.875rem; cursor: pointer; margin-top: 12px; transition: color var(--zahlen-transition-fast); }
+      .zahlen-back-btn:hover { color: var(--zahlen-primary); }
+      
+      @media (max-width: 480px) { .zahlen-modal { max-width: 100%; max-height: 100%; border-radius: 0; height: 100%; } .zahlen-body { padding: 20px; } .zahlen-otp-digit { width: 42px; height: 50px; font-size: 1.25rem; } }
     `;
     }
     constructor(options){
@@ -809,9 +1072,14 @@ class ZahlenModal {
             cardNumber: '',
             expiry: '',
             cvv: '',
+            otp: '',
             errors: {},
             isProcessing: false,
-            isSuccess: false
+            isSuccess: false,
+            isOtpStep: false,
+            otpTimer: 60,
+            canResendOtp: false,
+            otpTimerInterval: null
         };
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zahlen/checkout",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Modern, Gen Z-friendly payment checkout modal for the web",
   "author": "Zahlen",
   "license": "MIT",

package/src/components/modal.d.ts

@@ -7,13 +7,19 @@ export interface ModalState {
     cardNumber: string;
     expiry: string;
     cvv: string;
+    otp: string;
     errors: {
         cardNumber?: string;
         expiry?: string;
         cvv?: string;
+        otp?: string;
     };
     isProcessing: boolean;
     isSuccess: boolean;
+    isOtpStep: boolean;
+    otpTimer: number;
+    canResendOtp: boolean;
+    otpTimerInterval: number | null;
 }
 export declare class ZahlenModal {
     private options;
@@ -45,6 +51,54 @@ export declare class ZahlenModal {
      * Render success view
      */
     private renderSuccessView;
+    /**
+     * Render OTP verification view
+     */
+    private renderOTPView;
+    /**
+     * Attach OTP-specific event listeners
+     */
+    private attachOTPEventListeners;
+    /**
+     * Handle OTP digit input
+     */
+    private handleOTPInput;
+    /**
+     * Handle OTP keydown for backspace navigation
+     */
+    private handleOTPKeydown;
+    /**
+     * Handle OTP paste
+     */
+    private handleOTPPaste;
+    /**
+     * Update OTP state from inputs
+     */
+    private updateOTPState;
+    /**
+     * Start OTP resend timer
+     */
+    private startOTPTimer;
+    /**
+     * Handle OTP submission
+     */
+    private handleOTPSubmit;
+    /**
+     * Set OTP processing state
+     */
+    private setOTPProcessing;
+    /**
+     * Verify OTP (placeholder - integrate with backend)
+     */
+    private verifyOTP;
+    /**
+     * Handle resend OTP
+     */
+    private handleResendOTP;
+    /**
+     * Handle back to card details
+     */
+    private handleBackToCard;
     /**
      * Attach event listeners
      */

package/README.md

@@ -1,257 +0,0 @@
-# @zahlen/checkout
-
-<p align="center">
-  <img src="https://img.shields.io/npm/v/@zahlen/checkout?style=flat-square" alt="npm version" />
-  <img src="https://img.shields.io/npm/l/@zahlen/checkout?style=flat-square" alt="license" />
-  <img src="https://img.shields.io/bundlephobia/minzip/@zahlen/checkout?style=flat-square" alt="bundle size" />
-</p>
-
-<p align="center">
-  <strong>A modern, Gen Z-friendly payment checkout modal for the web.</strong>
-  <br />
-  Beautiful • Fast • Easy to integrate
-</p>
-
----
-
-## ✨ Features
-
-- 🎨 **Modern UI** - Glassmorphism design with dark mode by default
-- ⚡ **Lightweight** - Under 10KB gzipped
-- 🔒 **Secure** - PCI-compliant, no card data touches your servers
-- 📱 **Responsive** - Works beautifully on all devices
-- 🌍 **Multi-currency** - Supports NGN, USD, EUR, GBP, and more
-- 🎭 **Customizable** - Theming via CSS variables
-- 💳 **Smart Detection** - Auto-detects card brands (Visa, Mastercard, Verve, etc.)
-
----
-
-## 🚀 Quick Start
-
-### CDN (Recommended for quick setup)
-
-```html
-<!-- Add the script -->
-<script src="https://unpkg.com/@zahlen/checkout"></script>
-
-<!-- Add a pay button -->
-<button id="pay-btn">Pay ₦4,999</button>
-
-<script>
-  // Initialize
-  Zahlen.init({ apiKey: 'pk_live_your_api_key' });
-
-  // Handle click
-  document.getElementById('pay-btn').onclick = () => {
-    Zahlen.checkout({
-      amount: 499900,          // Amount in kobo (₦4,999)
-      currency: 'NGN',
-      description: 'Premium Plan',
-      onSuccess: (result) => {
-        console.log('Payment successful!', result);
-        // Redirect to success page
-      },
-      onError: (error) => {
-        console.error('Payment failed:', error.message);
-      }
-    });
-  };
-</script>
-```
-
-### npm / yarn
-
-```bash
-npm install @zahlen/checkout
-# or
-yarn add @zahlen/checkout
-```
-
-```typescript
-import { Zahlen } from '@zahlen/checkout';
-
-Zahlen.init({ apiKey: 'pk_live_your_api_key' });
-
-function handlePayment() {
-  Zahlen.checkout({
-    amount: 499900,
-    currency: 'NGN',
-    description: 'Premium Plan',
-    customerEmail: 'user@example.com',
-    onSuccess: (result) => {
-      console.log('Paid!', result);
-    },
-    onError: (error) => {
-      console.error('Failed:', error);
-    },
-    onClose: () => {
-      console.log('Modal closed');
-    }
-  });
-}
-```
-
----
-
-## 📖 API Reference
-
-### `Zahlen.init(config)`
-
-Initialize the SDK. Call this once when your app loads.
-
-```typescript
-interface ZahlenConfig {
-  apiKey: string;                    // Required: Your API key
-  theme?: 'dark' | 'light' | 'auto'; // Default: 'dark'
-  locale?: string;                   // Default: 'en-US'
-  customStyles?: Partial<ZahlenTheme>;
-}
-```
-
-### `Zahlen.checkout(options)`
-
-Open the checkout modal.
-
-```typescript
-interface CheckoutOptions {
-  amount: number;           // Required: Amount in smallest unit (kobo/cents)
-  currency: string;         // Required: ISO currency code
-  description?: string;     // Optional: Payment description
-  customerEmail?: string;   // Optional: For receipts
-  metadata?: object;        // Optional: Custom data
-  onSuccess: (result: PaymentResult) => void;
-  onError: (error: PaymentError) => void;
-  onClose?: () => void;
-}
-```
-
-### `Zahlen.setTheme(theme)`
-
-Change the theme dynamically.
-
-```typescript
-Zahlen.setTheme('light');  // or 'dark' or 'auto'
-```
-
-### `Zahlen.closeModal()`
-
-Programmatically close the modal.
-
----
-
-## 🎨 Customization
-
-### Custom Colors
-
-```typescript
-Zahlen.init({
-  apiKey: 'pk_live_xxx',
-  customStyles: {
-    '--zahlen-primary': '#FF6B6B',
-    '--zahlen-secondary': '#4ECDC4',
-    '--zahlen-bg': '#1A1A2E',
-  }
-});
-```
-
-### Available CSS Variables
-
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--zahlen-primary` | `#7C3AED` | Primary brand color |
-| `--zahlen-secondary` | `#4F46E5` | Secondary/gradient color |
-| `--zahlen-bg` | `#0F0F23` | Modal background |
-| `--zahlen-surface` | `rgba(255,255,255,0.05)` | Input backgrounds |
-| `--zahlen-border` | `rgba(255,255,255,0.1)` | Border color |
-| `--zahlen-text` | `#FFFFFF` | Primary text |
-| `--zahlen-text-muted` | `#A0A0B0` | Muted text |
-| `--zahlen-border-radius` | `12px` | Border radius |
-
----
-
-## 📱 Framework Integrations
-
-### React
-
-```bash
-npm install @zahlen/checkout-react
-```
-
-```tsx
-import { ZahlenButton, ZahlenProvider } from '@zahlen/checkout-react';
-
-function App() {
-  return (
-    <ZahlenProvider apiKey="pk_live_xxx">
-      <ZahlenButton
-        amount={499900}
-        currency="NGN"
-        onSuccess={(result) => console.log('Paid!', result)}
-        onError={(error) => console.error(error)}
-      >
-        Pay ₦4,999
-      </ZahlenButton>
-    </ZahlenProvider>
-  );
-}
-```
-
-### Angular
-
-```bash
-npm install @zahlen/checkout-angular
-```
-
-```typescript
-// app.module.ts
-import { ZahlenModule } from '@zahlen/checkout-angular';
-
-@NgModule({
-  imports: [ZahlenModule.forRoot({ apiKey: 'pk_live_xxx' })]
-})
-export class AppModule {}
-```
-
-```html
-<!-- component.html -->
-<button zahlenCheckout
-  [amount]="499900"
-  [currency]="'NGN'"
-  (success)="onSuccess($event)"
-  (error)="onError($event)">
-  Pay ₦4,999
-</button>
-```
-
----
-
-## 💳 Supported Cards
-
-| Card Brand | Supported |
-|------------|-----------|
-| Visa | ✅ |
-| Mastercard | ✅ |
-| Verve | ✅ |
-| American Express | ✅ |
-| Discover | ✅ |
-
----
-
-## 🔒 Security
-
-- All card data is encrypted and processed securely
-- PCI DSS compliant
-- No sensitive data stored on your servers
-- Tokenized payments
-
----
-
-## 📄 License
-
-MIT © Zahlen
-
----
-
-<p align="center">
-  Made with 💜 by the Zahlen team
-</p>