@bloonio/lokotro-pay 1.0.0 → 1.0.1

package/fesm2022/bloonio-lokotro-pay.mjs

@@ -1310,9 +1310,6 @@ class LokotroHttpClientService {
     get(path, queryParams) {
         const url = this.buildUrl(path);
         const headers = this.buildHeaders();
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Pay HTTP] GET', url, queryParams);
-        }
         return this.http.get(url, {
             headers,
             params: queryParams
@@ -1324,9 +1321,6 @@ class LokotroHttpClientService {
     post(path, data, queryParams) {
         const url = this.buildUrl(path);
         const headers = this.buildHeaders();
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Pay HTTP] POST', url, data);
-        }
         return this.http.post(url, data, {
             headers,
             params: queryParams
@@ -1338,9 +1332,6 @@ class LokotroHttpClientService {
     put(path, data, queryParams) {
         const url = this.buildUrl(path);
         const headers = this.buildHeaders();
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Pay HTTP] PUT', url, data);
-        }
         return this.http.put(url, data, {
             headers,
             params: queryParams
@@ -1352,9 +1343,6 @@ class LokotroHttpClientService {
     delete(path, queryParams) {
         const url = this.buildUrl(path);
         const headers = this.buildHeaders();
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Pay HTTP] DELETE', url);
-        }
         return this.http.delete(url, {
             headers,
             params: queryParams
@@ -2564,945 +2552,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 /**
- * Lokotro Pay - Payment Service
- * Main payment service that follows the Lokotro Gateway API flow
- */
-/**
- * Initial payment state
+ * Lokotro Pay - OTP Verification Component
  */
-const initialState = {
-    isLoading: false,
-    currentScreen: LokotroPayScreenNavigation.LoadingScreen
-};
-class LokotroPaymentService {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
-        this.stateSubject = new BehaviorSubject(initialState);
-        this.state$ = this.stateSubject.asObservable();
-    }
-    /**
-     * Get current state
-     */
-    get currentState() {
-        return this.stateSubject.value;
+class LokotroOtpVerificationComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.otpLength = 6;
+        this.otpVerified = new EventEmitter();
+        this.resendOtp = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.otpDigits = [];
+        this.resendTimer = 60;
     }
-    /**
-     * Update state
-     */
-    updateState(partialState) {
-        this.stateSubject.next({
-            ...this.currentState,
-            ...partialState
-        });
+    ngOnInit() {
+        this.otpDigits = new Array(this.otpLength).fill('');
+        this.startResendTimer();
     }
-    /**
-     * Reset state to initial
-     */
-    resetState() {
-        this.stateSubject.next(initialState);
+    ngOnDestroy() {
+        if (this.timerInterval) {
+            clearInterval(this.timerInterval);
+        }
     }
-    /**
-     * Set app-key for authentication
-     */
-    setAppKey(appKey) {
-        this.httpClient.setAppKey(appKey);
+    get isOtpComplete() {
+        return this.otpDigits.every(digit => digit !== '');
     }
-    /**
-     * Set accept language
-     */
-    setAcceptLanguage(language) {
-        this.httpClient.setAcceptLanguage(language);
+    get otpValue() {
+        return this.otpDigits.join('');
     }
-    /**
-     * Step 1: Create payment transaction
-     * POST /payments/collect
-     */
-    createPayment(paymentBody) {
-        this.updateState({ isLoading: true });
-        const requestData = this.convertPaymentBodyToRequest(paymentBody);
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Payment] Creating payment:', requestData);
-        }
-        return this.httpClient.post(LokotroPayEnv.endpoints.collect, requestData).pipe(tap(response => {
-            if (response.isSuccess && response.data) {
-                const paymentInfo = this.parsePaymentInfo(response.data);
-                this.updateState({
-                    isLoading: false,
-                    transactionId: response.data.transaction_id,
-                    paymentInfo,
-                    currentScreen: paymentInfo.showPaymentMethodForm
-                        ? LokotroPayScreenNavigation.PaymentMethodSelectionScreen
-                        : LokotroPayScreenNavigation.PaymentFormScreen
-                });
-            }
-            else {
-                this.updateState({
-                    isLoading: false,
-                    error: {
-                        message: response.message,
-                        title: 'Payment Creation Failed',
-                        errorCode: response.apiResponseCode,
-                        timestamp: new Date()
-                    },
-                    currentScreen: LokotroPayScreenNavigation.ErrorScreen
-                });
+    startResendTimer() {
+        this.resendTimer = 60;
+        this.timerInterval = setInterval(() => {
+            this.resendTimer--;
+            if (this.resendTimer <= 0) {
+                clearInterval(this.timerInterval);
             }
-        }), catchError(error => {
-            this.updateState({
-                isLoading: false,
-                error: {
-                    message: error.message || 'Failed to create payment',
-                    title: 'Error',
-                    timestamp: new Date()
-                },
-                currentScreen: LokotroPayScreenNavigation.ErrorScreen
-            });
-            return throwError(() => error);
-        }));
+        }, 1000);
     }
-    /**
-     * Step 2: Get transaction details
-     * GET /payments/transaction/{transaction_id}
-     */
-    getTransactionDetails(transactionId) {
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Payment] Getting transaction details:', transactionId);
-        }
-        return this.httpClient.get(`${LokotroPayEnv.endpoints.transaction}/${transactionId}`).pipe(tap(response => {
-            if (response.isSuccess && response.data) {
-                if (LokotroPayEnv.debugMode) {
-                    console.log('[Lokotro Payment] Transaction details:', response.data);
-                }
+    onOtpInput(event, index) {
+        const input = event.target;
+        const value = input.value.replace(/\D/g, '');
+        if (value) {
+            this.otpDigits[index] = value[0];
+            input.value = value[0];
+            // Focus next input
+            if (index < this.otpLength - 1) {
+                const inputs = document.querySelectorAll('.lokotro-otp-input');
+                inputs[index + 1]?.focus();
             }
-        }));
-    }
-    /**
-     * Step 3: Submit payment details
-     * POST /payments/submit
-     */
-    submitPaymentDetails(request) {
-        this.updateState({
-            isLoading: true,
-            currentScreen: LokotroPayScreenNavigation.ProcessingScreen
-        });
-        const requestData = this.convertSubmitRequestToData(request);
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Payment] Submitting payment details:', requestData);
         }
-        return this.httpClient.post(LokotroPayEnv.endpoints.submit, requestData).pipe(tap(response => {
-            if (response.isSuccess && response.data) {
-                const submitResponse = this.parseSubmitResponse(response.data);
-                if (submitResponse.requiresOtp) {
-                    this.updateState({
-                        isLoading: false,
-                        currentScreen: LokotroPayScreenNavigation.EWalletOtpScreen
-                    });
-                }
-                else if (submitResponse.redirectUrl) {
-                    // Handle redirect for hosted checkout
-                    window.location.href = submitResponse.redirectUrl;
-                }
-                else if (LokotroPaymentStatusInfo.isSuccess(submitResponse.status)) {
-                    this.handlePaymentSuccess(response.data);
-                }
-                else if (LokotroPaymentStatusInfo.isPending(submitResponse.status)) {
-                    this.updateState({
-                        isLoading: false,
-                        currentScreen: LokotroPayScreenNavigation.MobileMoneyProcessingScreen
-                    });
-                }
-                else {
-                    this.handlePaymentFailure(response.message, response.apiResponseCode);
-                }
-            }
-            else {
-                this.handlePaymentFailure(response.message, response.apiResponseCode);
-            }
-        }), catchError(error => {
-            this.handlePaymentFailure(error.message);
-            return throwError(() => error);
-        }));
+        else {
+            this.otpDigits[index] = '';
+        }
     }
-    /**
-     * Step 4: Verify OTP (for e-wallet and flash payments)
-     * POST /payments/verify-otp
-     */
-    verifyOtp(request) {
-        this.updateState({ isLoading: true });
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Payment] Verifying OTP:', request.transactionId);
+    onOtpKeydown(event, index) {
+        if (event.key === 'Backspace' && !this.otpDigits[index] && index > 0) {
+            const inputs = document.querySelectorAll('.lokotro-otp-input');
+            inputs[index - 1]?.focus();
         }
-        return this.httpClient.post(LokotroPayEnv.endpoints.verifyOtp, {
-            transaction_id: request.transactionId,
-            otp: request.otp
-        }).pipe(tap(response => {
-            if (response.isSuccess && response.data) {
-                const status = LokotroPaymentStatusInfo.fromString(response.data.status || '');
-                if (LokotroPaymentStatusInfo.isSuccess(status)) {
-                    this.handlePaymentSuccess(response.data);
-                }
-                else {
-                    this.handlePaymentFailure(response.message, response.apiResponseCode);
-                }
-            }
-            else {
-                this.updateState({
-                    isLoading: false,
-                    error: {
-                        message: response.message || 'OTP verification failed',
-                        title: 'Verification Failed',
-                        errorCode: response.apiResponseCode,
-                        timestamp: new Date()
-                    }
-                });
+    }
+    onOtpPaste(event) {
+        event.preventDefault();
+        const pastedData = event.clipboardData?.getData('text').replace(/\D/g, '');
+        if (pastedData) {
+            for (let i = 0; i < Math.min(pastedData.length, this.otpLength); i++) {
+                this.otpDigits[i] = pastedData[i];
             }
-        }), catchError(error => {
-            this.updateState({
-                isLoading: false,
-                error: {
-                    message: error.message || 'OTP verification failed',
-                    title: 'Error',
-                    timestamp: new Date()
-                }
+            const inputs = document.querySelectorAll('.lokotro-otp-input');
+            inputs.forEach((input, i) => {
+                input.value = this.otpDigits[i] || '';
             });
-            return throwError(() => error);
-        }));
-    }
-    /**
-     * Step 5: Resend OTP (if needed)
-     * POST /payments/resend-otp
-     */
-    resendOtp(request) {
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Payment] Resending OTP:', request.transactionId);
-        }
-        return this.httpClient.post(LokotroPayEnv.endpoints.resendOtp, { transaction_id: request.transactionId });
-    }
-    /**
-     * Fetch available banks configuration
-     * GET /payments/get-config-bank
-     */
-    fetchAvailableBanks() {
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Payment] Fetching available banks');
-        }
-        return this.httpClient.get('/payments/get-config-bank').pipe(map(response => {
-            const banksData = response.data?.['data'] || [];
-            const banks = banksData.map(b => this.parseBank(b));
-            return {
-                ...response,
-                data: banks
-            };
-        }), tap(response => {
-            if (LokotroPayEnv.debugMode) {
-                console.log('[Lokotro Payment] Banks fetched:', response.data?.length);
-            }
-        }));
-    }
-    /**
-     * Select payment method
-     */
-    selectPaymentMethod(method) {
-        this.updateState({
-            selectedPaymentMethod: method,
-            currentScreen: this.getFormScreenForChannel(method.channel)
-        });
-    }
-    /**
-     * Navigate to screen
-     */
-    navigateToScreen(screen) {
-        this.updateState({ currentScreen: screen });
-    }
-    /**
-     * Handle payment success
-     */
-    handlePaymentSuccess(data) {
-        const response = {
-            message: data['message'] || 'Payment successful',
-            title: data['title'] || 'Success',
-            customRef: data['custom_ref'] || data['customer_reference'] || '',
-            amount: parseFloat(data['amount'] || '0'),
-            apiResponseCode: LokotroPayApiResponseCode.LOK000,
-            currency: data['currency'] || '',
-            paymentStatus: LokotroPaymentStatus.Approved,
-            systemRef: data['system_ref'] || data['transaction_id'] || '',
-            transactionId: data['transaction_id'],
-            timestamp: new Date()
-        };
-        this.updateState({
-            isLoading: false,
-            response,
-            currentScreen: LokotroPayScreenNavigation.SuccessScreen
-        });
-    }
-    /**
-     * Handle payment failure
-     */
-    handlePaymentFailure(message, errorCode) {
-        this.updateState({
-            isLoading: false,
-            error: {
-                message: message || 'Payment failed',
-                title: 'Payment Failed',
-                errorCode,
-                timestamp: new Date()
-            },
-            currentScreen: LokotroPayScreenNavigation.ErrorScreen
-        });
-    }
-    /**
-     * Get form screen for payment channel
-     */
-    getFormScreenForChannel(channel) {
-        switch (channel) {
-            case LokotroPayChannel.EWallet:
-            case LokotroPayChannel.LokotroWallet:
-                return LokotroPayScreenNavigation.EWalletFormScreen;
-            case LokotroPayChannel.MobileMoney:
-                return LokotroPayScreenNavigation.MobileMoneyFormScreen;
-            case LokotroPayChannel.Card:
-            case LokotroPayChannel.VirtualCard:
-                return LokotroPayScreenNavigation.CardFormScreen;
-            case LokotroPayChannel.EFlash:
-                return LokotroPayScreenNavigation.FlashFormScreen;
-            case LokotroPayChannel.BankTransfer:
-                return LokotroPayScreenNavigation.BankTransferFormScreen;
-            default:
-                return LokotroPayScreenNavigation.PaymentFormScreen;
-        }
-    }
-    /**
-     * Convert payment body to API request format
-     */
-    convertPaymentBodyToRequest(body) {
-        const request = {
-            customer_reference: body.customerReference,
-            amount: body.amount,
-            currency: body.currency.toLowerCase(),
-            payment_method: body.paymentMethod || 'wallet',
-            user_info: body.userInfo || 'full',
-            payment_method_info: body.paymentMethodInfo || 'full',
-            fee_covered_by: body.feeCoveredBy || 'buyer',
-            delivery_behaviour: body.deliveryBehaviour || 'direct_delivery'
-        };
-        // Add optional URLs
-        if (body.notifyUrl)
-            request['notify_url'] = body.notifyUrl;
-        if (body.successRedirectUrl)
-            request['success_redirect_url'] = body.successRedirectUrl;
-        if (body.failRedirectUrl)
-            request['fail_redirect_url'] = body.failRedirectUrl;
-        // Add user information
-        if (body.userInfo === 'full') {
-            if (body.firstName)
-                request['first_name'] = body.firstName;
-            if (body.lastName)
-                request['last_name'] = body.lastName;
-            if (body.phoneNumber)
-                request['phone_number'] = body.phoneNumber;
-            if (body.email)
-                request['email'] = body.email;
-        }
-        // Add payment method specific fields
-        if (body.paymentMethodInfo === 'full') {
-            if (body.walletNumber)
-                request['wallet_number'] = body.walletNumber;
-            if (body.walletPin)
-                request['wallet_pin'] = body.walletPin;
-            if (body.mobileMoneyPhoneNumber)
-                request['mobile_money_phone_number'] = body.mobileMoneyPhoneNumber;
-            if (body.flashNumber)
-                request['flash_number'] = body.flashNumber;
-            if (body.flashPin)
-                request['flash_pin'] = body.flashPin;
-            if (body.cardNumber)
-                request['card_number'] = body.cardNumber;
-            if (body.cardExpiryDate)
-                request['card_expiry_date'] = body.cardExpiryDate;
-            if (body.cardCvv)
-                request['card_cvv'] = body.cardCvv;
-            if (body.cardHolderName)
-                request['card_holder_name'] = body.cardHolderName;
-        }
-        // Add merchant information
-        if (body.merchant) {
-            request['merchant'] = {
-                id: body.merchant.id,
-                name: body.merchant.name,
-                logo_url: body.merchant.logoUrl,
-                website: body.merchant.website,
-                description: body.merchant.description
-            };
-        }
-        // Add mastercard payment method
-        if (body.mastercardPaymentMethod) {
-            request['mastercard_payment_method'] = body.mastercardPaymentMethod;
-        }
-        // Add metadata
-        if (body.metadata) {
-            request['metadata'] = body.metadata;
-        }
-        return request;
-    }
-    /**
-     * Convert submit request to API format
-     */
-    convertSubmitRequestToData(request) {
-        const data = {
-            transaction_id: request.transactionId,
-            payment_method: request.paymentMethod
-        };
-        if (request.walletNumber)
-            data['wallet_number'] = request.walletNumber;
-        if (request.walletPin)
-            data['wallet_pin'] = request.walletPin;
-        if (request.mobileMoneyPhoneNumber)
-            data['mobile_money_phone_number'] = request.mobileMoneyPhoneNumber;
-        if (request.flashNumber)
-            data['flash_number'] = request.flashNumber;
-        if (request.flashPin)
-            data['flash_pin'] = request.flashPin;
-        if (request.cardNumber)
-            data['card_number'] = request.cardNumber;
-        if (request.cardExpiryDate)
-            data['card_expiry_date'] = request.cardExpiryDate;
-        if (request.cardCvv)
-            data['card_cvv'] = request.cardCvv;
-        if (request.cardHolderName)
-            data['card_holder_name'] = request.cardHolderName;
-        if (request.bankTransferAccountId)
-            data['bank_transfer_account_id'] = request.bankTransferAccountId;
-        return data;
-    }
-    /**
-     * Parse payment info from API response
-     */
-    parsePaymentInfo(data) {
-        return {
-            id: data.transaction_id || '',
-            amount: parseFloat(data.amount || '0'),
-            currency: data.currency || 'USD',
-            description: data.description || '',
-            merchantName: data.merchant_name || '',
-            merchantId: data.merchant_id || '',
-            availablePaymentMethods: (data.available_payment_methods || []).map(this.parsePaymentMethod),
-            createdAt: new Date(data.created_at || Date.now()),
-            expiresAt: data.expires_at ? new Date(data.expires_at) : undefined,
-            metadata: data.metadata,
-            paymentUrl: data.payment_url,
-            showUserInfoForm: data.show_user_info_form || false,
-            showPaymentMethodForm: data.show_payment_method_form || false,
-            fillingInfo: data.filling_info
-        };
-    }
-    /**
-     * Parse payment method from API response
-     */
-    parsePaymentMethod(data) {
-        return {
-            id: data['id'] || '',
-            name: data['name'] || '',
-            displayName: data['display_name'] || '',
-            channel: data['channel'] || LokotroPayChannel.None,
-            iconUrl: data['icon_url'] || data['icon'] || '',
-            isEnabled: data['is_enabled'] ?? true,
-            configuration: data['configuration'],
-            supportedCurrencies: data['supported_currencies']
-        };
-    }
-    /**
-     * Parse submit response from API
-     */
-    parseSubmitResponse(data) {
-        return {
-            success: data.success || false,
-            message: data.message || '',
-            transactionId: data.transaction_id || '',
-            status: LokotroPaymentStatusInfo.fromString(data.status || ''),
-            requiresOtp: data.requires_otp || false,
-            otpDestination: data.otp_destination,
-            redirectUrl: data.redirect_url
-        };
-    }
-    /**
-     * Parse bank from API response
-     */
-    parseBank(data) {
-        return {
-            id: data['id'] || '',
-            name: data['name'] || '',
-            abreviation: data['abreviation'] || '',
-            bankLogoUrl: data['bank_logo_url'] || '',
-            hasRibNomenclatureConstraint: data['has_rib_nomenclature_constraint'] || false,
-            ribAccountNumberFormatStr: data['rib_account_number_format_str'] || '',
-            bankAccounts: (data['bank_accounts'] || []).map(a => this.parseBankAccount(a)),
-            entityAvailables: (data['entity_availables'] || []).map(e => this.parseBankEntity(e))
-        };
-    }
-    /**
-     * Parse bank account
-     */
-    parseBankAccount(data) {
-        return {
-            id: data['id'] || '',
-            identifier: data['identifier'] || '',
-            accountNumber: data['account_number'] || '',
-            accountLabel: data['account_label'] || '',
-            // createdAt: (data['created_at'] as string), // Removed undefined field
-            refBank: data['ref_bank'] ? this.parseBank(data['ref_bank']) : undefined,
-            refCurrency: data['ref_currency'] ? this.parseBankCurrency(data['ref_currency']) : undefined
-        };
-    }
-    /**
-     * Parse bank entity
-     */
-    parseBankEntity(data) {
-        return {
-            id: data['id'] || '',
-            name: data['name'] || '',
-            countryFlag: data['country_flag']
-        };
-    }
-    /**
-     * Parse bank currency
-     */
-    parseBankCurrency(data) {
-        return {
-            id: data['id'] || '',
-            name: data['name'] || '',
-            code: data['code'] || '',
-            symbol: data['symbol']
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPaymentService, deps: [{ token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPaymentService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPaymentService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: LokotroHttpClientService }] });
-
-/**
- * Lokotro Pay - Bank Transfer Form Component
- */
-class LokotroBankTransferFormComponent {
-    constructor(fb, localization, paymentService) {
-        this.fb = fb;
-        this.localization = localization;
-        this.paymentService = paymentService;
-        this.showUserInfoForm = false;
-        this.formSubmitted = new EventEmitter();
-        this.cancel = new EventEmitter();
-        this.isLoading = true;
-        this.allBanks = [];
-        this.cities = [];
-        this.filteredBanks = [];
-        this.accounts = [];
-        this.selectedCity = null;
-        this.selectedBank = null;
-        this.selectedAccount = null;
-    }
-    ngOnInit() {
-        this.initForm();
-        this.fetchBanks();
-    }
-    initForm() {
-        const config = {
-            city: ['', Validators.required],
-            bank: [{ value: '', disabled: true }, Validators.required],
-            account: [{ value: '', disabled: true }, Validators.required]
-        };
-        if (this.showUserInfoForm) {
-            config['firstName'] = ['', Validators.required];
-            config['lastName'] = ['', Validators.required];
-            config['email'] = ['', [Validators.required, Validators.email]];
-            config['personalPhone'] = ['', Validators.required];
-        }
-        this.bankTransferForm = this.fb.group(config);
-    }
-    fetchBanks() {
-        this.isLoading = true;
-        this.paymentService.fetchAvailableBanks().subscribe({
-            next: (response) => {
-                if (response.isSuccess && response.data) {
-                    this.allBanks = response.data;
-                    this.extractCities();
-                }
-                this.isLoading = false;
-            },
-            error: (err) => {
-                console.error('Failed to fetch banks', err);
-                this.isLoading = false;
-            }
-        });
-    }
-    extractCities() {
-        const cityMap = new Map();
-        this.allBanks.forEach(bank => {
-            bank.entityAvailables.forEach(city => {
-                if (!cityMap.has(city.id)) {
-                    cityMap.set(city.id, city);
-                }
-            });
-        });
-        this.cities = Array.from(cityMap.values());
-    }
-    onCityChange() {
-        const cityId = this.bankTransferForm.get('city')?.value;
-        const bankControl = this.bankTransferForm.get('bank');
-        const accountControl = this.bankTransferForm.get('account');
-        bankControl?.reset('');
-        bankControl?.disable();
-        accountControl?.reset('');
-        accountControl?.disable();
-        this.filteredBanks = [];
-        this.accounts = [];
-        this.selectedAccount = null;
-        if (cityId) {
-            this.selectedCity = this.cities.find(c => c.id === cityId) || null;
-            this.filteredBanks = this.allBanks.filter(bank => bank.entityAvailables.some(e => e.id === cityId));
-            bankControl?.enable();
-        }
-    }
-    onBankChange() {
-        const bankId = this.bankTransferForm.get('bank')?.value;
-        const accountControl = this.bankTransferForm.get('account');
-        accountControl?.reset('');
-        accountControl?.disable();
-        this.accounts = [];
-        this.selectedAccount = null;
-        if (bankId) {
-            this.selectedBank = this.filteredBanks.find(b => b.id === bankId) || null;
-            if (this.selectedBank) {
-                this.accounts = this.selectedBank.bankAccounts;
-                accountControl?.enable();
-            }
-        }
-    }
-    onAccountChange() {
-        const accountId = this.bankTransferForm.get('account')?.value;
-        if (accountId) {
-            this.selectedAccount = this.accounts.find(a => a.id === accountId) || null;
-        }
-        else {
-            this.selectedAccount = null;
-        }
-    }
-    onSubmit() {
-        if (this.bankTransferForm.valid && this.selectedAccount) {
-            const submitData = {
-                bankTransferAccountId: this.selectedAccount.id
-            };
-            if (this.showUserInfoForm) {
-                submitData['firstName'] = this.bankTransferForm.value.firstName;
-                submitData['lastName'] = this.bankTransferForm.value.lastName;
-                submitData['email'] = this.bankTransferForm.value.email;
-                submitData['phoneNumber'] = this.bankTransferForm.value.personalPhone;
-            }
-            this.formSubmitted.emit(submitData);
-        }
-    }
-    onCancel() {
-        this.cancel.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroBankTransferFormComponent, deps: [{ token: i1$1.FormBuilder }, { token: LokotroLocalizationService }, { token: LokotroPaymentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LokotroBankTransferFormComponent, isStandalone: true, selector: "lokotro-bank-transfer-form", inputs: { showUserInfoForm: "showUserInfoForm" }, outputs: { formSubmitted: "formSubmitted", cancel: "cancel" }, ngImport: i0, template: `
-    <div class="lokotro-bank-transfer-form">
-      <form [formGroup]="bankTransferForm" (ngSubmit)="onSubmit()">
-        <h3 class="lokotro-form-title">{{ localization.translate('bankTransfer') || 'Bank Transfer' }}</h3>
-
-        <!-- Personal Information Section -->
-        <div class="lokotro-user-info-section" *ngIf="showUserInfoForm">
-          <h4 class="lokotro-section-subtitle">{{ localization.translate('personalInfo') }}</h4>
-          
-          <div class="lokotro-form-row">
-            <div class="lokotro-form-group">
-              <label class="lokotro-label">{{ localization.translate('firstName') }}</label>
-              <input type="text" class="lokotro-input" formControlName="firstName" placeholder="John">
-              <span class="lokotro-error" *ngIf="bankTransferForm.get('firstName')?.touched && bankTransferForm.get('firstName')?.invalid">
-                {{ localization.translate('required') }}
-              </span>
-            </div>
-            
-            <div class="lokotro-form-group">
-              <label class="lokotro-label">{{ localization.translate('lastName') }}</label>
-              <input type="text" class="lokotro-input" formControlName="lastName" placeholder="Doe">
-              <span class="lokotro-error" *ngIf="bankTransferForm.get('lastName')?.touched && bankTransferForm.get('lastName')?.invalid">
-                {{ localization.translate('required') }}
-              </span>
-            </div>
-          </div>
-          
-          <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('email') }}</label>
-            <input type="email" class="lokotro-input" formControlName="email" placeholder="john.doe@example.com">
-            <span class="lokotro-error" *ngIf="bankTransferForm.get('email')?.touched && bankTransferForm.get('email')?.invalid">
-              {{ localization.translate('invalidEmail') }}
-            </span>
-          </div>
-          
-          <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('phoneNumber') }}</label>
-            <input type="tel" class="lokotro-input" formControlName="personalPhone" placeholder="+243 XXX XXX XXX">
-            <span class="lokotro-error" *ngIf="bankTransferForm.get('personalPhone')?.touched && bankTransferForm.get('personalPhone')?.invalid">
-              {{ localization.translate('invalidPhoneNumber') }}
-            </span>
-          </div>
-          
-          <hr class="lokotro-divider">
-        </div>
-
-        <!-- Bank Selection Section -->
-        <h4 class="lokotro-section-subtitle" *ngIf="showUserInfoForm">{{ localization.translate('bankDetails') || 'Bank Details' }}</h4>
-        
-        <!-- Loading State -->
-        <div *ngIf="isLoading" class="lokotro-loading-text">
-          {{ localization.translate('loading') || 'Loading...' }}
-        </div>
-
-        <div *ngIf="!isLoading">
-            <!-- City Selection -->
-            <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('selectCity') || 'Select City' }}</label>
-            <select class="lokotro-input" formControlName="city" (change)="onCityChange()">
-                <option value="">{{ localization.translate('selectCity') || 'Select City' }}</option>
-                <option *ngFor="let city of cities" [value]="city.id">{{ city.name }}</option>
-            </select>
-            </div>
-
-            <!-- Bank Selection -->
-            <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('selectBank') || 'Select Bank' }}</label>
-            <select class="lokotro-input" formControlName="bank" (change)="onBankChange()">
-                <option value="">{{ localization.translate('selectBank') || 'Select Bank' }}</option>
-                <option *ngFor="let bank of filteredBanks" [value]="bank.id">{{ bank.name }}</option>
-            </select>
-            </div>
-
-            <!-- Account Selection -->
-            <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('selectBankAccount') || 'Select Account' }}</label>
-            <select class="lokotro-input" formControlName="account" (change)="onAccountChange()">
-                <option value="">{{ localization.translate('selectBankAccount') || 'Select Account' }}</option>
-                <option *ngFor="let account of accounts" [value]="account.id">{{ account.accountLabel }} ({{ account.accountNumber }})</option>
-            </select>
-            </div>
-        </div>
-
-        <!-- Selected Account Summary -->
-        <div class="lokotro-account-summary" *ngIf="selectedAccount">
-             <div class="lokotro-info-box">
-                <p><strong>{{ localization.translate('bankAccountSummary') || 'Account Number' }}:</strong> {{ selectedAccount.accountNumber }}</p>
-                <p><strong>{{ localization.translate('accountLabel') || 'Label' }}:</strong> {{ selectedAccount.accountLabel }}</p>
-                <p class="lokotro-info-text">
-                    {{ localization.translate('bankTransferProofInstructions') || 'A payment link will be sent to your email to upload the proof of transfer.' }}
-                </p>
-             </div>
-        </div>
-
-        <div class="lokotro-form-actions">
-          <button type="button" class="lokotro-btn-secondary" (click)="onCancel()">
-            {{ localization.translate('cancel') }}
-          </button>
-          <button type="submit" class="lokotro-btn-primary" [disabled]="bankTransferForm.invalid || isLoading">
-            {{ localization.translate('confirmBankTransfer') || 'Confirm Transfer' }}
-          </button>
-        </div>
-      </form>
-    </div>
-  `, isInline: true, styles: [".lokotro-bank-transfer-form{width:100%}.lokotro-form-title{font-size:20px;font-weight:600;margin:0 0 24px;color:var(--lokotro-text-primary, #F2F0D5);text-align:center}.lokotro-form-group{margin-bottom:20px}.lokotro-form-row{display:flex;gap:16px}.lokotro-form-row .lokotro-form-group{flex:1}.lokotro-label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-input{width:100%;padding:14px 16px;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);font-size:16px;transition:border-color .2s;box-sizing:border-box}.lokotro-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-error{display:block;margin-top:6px;font-size:12px;color:var(--lokotro-error, #D97652)}.lokotro-user-info-section{margin-bottom:24px}.lokotro-section-subtitle{font-size:16px;font-weight:600;margin:0 0 16px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-divider{border:none;border-top:1px solid var(--lokotro-border, #3A473F);margin:24px 0}.lokotro-form-actions{display:flex;gap:12px;margin-top:32px}.lokotro-btn-primary,.lokotro-btn-secondary{flex:1;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.lokotro-btn-primary{background:linear-gradient(135deg,var(--lokotro-primary, #5A5E39),var(--lokotro-secondary, #6E7346));color:var(--lokotro-text-primary, #F2F0D5);border:none}.lokotro-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0003}.lokotro-btn-primary:disabled{opacity:.5;cursor:not-allowed}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #F2F0D5);border:2px solid var(--lokotro-border, #3A473F)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-loading-text{text-align:center;color:var(--lokotro-text-secondary, #D5D3B8);padding:20px}.lokotro-account-summary{margin-top:20px;padding:16px;background:#3a484080;border-radius:12px;border:1px solid var(--lokotro-border, #3A473F)}.lokotro-info-box p{margin:8px 0;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-info-text{font-style:italic;color:var(--lokotro-text-secondary, #D5D3B8);font-size:14px;margin-top:12px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroBankTransferFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lokotro-bank-transfer-form', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: `
-    <div class="lokotro-bank-transfer-form">
-      <form [formGroup]="bankTransferForm" (ngSubmit)="onSubmit()">
-        <h3 class="lokotro-form-title">{{ localization.translate('bankTransfer') || 'Bank Transfer' }}</h3>
-
-        <!-- Personal Information Section -->
-        <div class="lokotro-user-info-section" *ngIf="showUserInfoForm">
-          <h4 class="lokotro-section-subtitle">{{ localization.translate('personalInfo') }}</h4>
-          
-          <div class="lokotro-form-row">
-            <div class="lokotro-form-group">
-              <label class="lokotro-label">{{ localization.translate('firstName') }}</label>
-              <input type="text" class="lokotro-input" formControlName="firstName" placeholder="John">
-              <span class="lokotro-error" *ngIf="bankTransferForm.get('firstName')?.touched && bankTransferForm.get('firstName')?.invalid">
-                {{ localization.translate('required') }}
-              </span>
-            </div>
-            
-            <div class="lokotro-form-group">
-              <label class="lokotro-label">{{ localization.translate('lastName') }}</label>
-              <input type="text" class="lokotro-input" formControlName="lastName" placeholder="Doe">
-              <span class="lokotro-error" *ngIf="bankTransferForm.get('lastName')?.touched && bankTransferForm.get('lastName')?.invalid">
-                {{ localization.translate('required') }}
-              </span>
-            </div>
-          </div>
-          
-          <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('email') }}</label>
-            <input type="email" class="lokotro-input" formControlName="email" placeholder="john.doe@example.com">
-            <span class="lokotro-error" *ngIf="bankTransferForm.get('email')?.touched && bankTransferForm.get('email')?.invalid">
-              {{ localization.translate('invalidEmail') }}
-            </span>
-          </div>
-          
-          <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('phoneNumber') }}</label>
-            <input type="tel" class="lokotro-input" formControlName="personalPhone" placeholder="+243 XXX XXX XXX">
-            <span class="lokotro-error" *ngIf="bankTransferForm.get('personalPhone')?.touched && bankTransferForm.get('personalPhone')?.invalid">
-              {{ localization.translate('invalidPhoneNumber') }}
-            </span>
-          </div>
-          
-          <hr class="lokotro-divider">
-        </div>
-
-        <!-- Bank Selection Section -->
-        <h4 class="lokotro-section-subtitle" *ngIf="showUserInfoForm">{{ localization.translate('bankDetails') || 'Bank Details' }}</h4>
-        
-        <!-- Loading State -->
-        <div *ngIf="isLoading" class="lokotro-loading-text">
-          {{ localization.translate('loading') || 'Loading...' }}
-        </div>
-
-        <div *ngIf="!isLoading">
-            <!-- City Selection -->
-            <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('selectCity') || 'Select City' }}</label>
-            <select class="lokotro-input" formControlName="city" (change)="onCityChange()">
-                <option value="">{{ localization.translate('selectCity') || 'Select City' }}</option>
-                <option *ngFor="let city of cities" [value]="city.id">{{ city.name }}</option>
-            </select>
-            </div>
-
-            <!-- Bank Selection -->
-            <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('selectBank') || 'Select Bank' }}</label>
-            <select class="lokotro-input" formControlName="bank" (change)="onBankChange()">
-                <option value="">{{ localization.translate('selectBank') || 'Select Bank' }}</option>
-                <option *ngFor="let bank of filteredBanks" [value]="bank.id">{{ bank.name }}</option>
-            </select>
-            </div>
-
-            <!-- Account Selection -->
-            <div class="lokotro-form-group">
-            <label class="lokotro-label">{{ localization.translate('selectBankAccount') || 'Select Account' }}</label>
-            <select class="lokotro-input" formControlName="account" (change)="onAccountChange()">
-                <option value="">{{ localization.translate('selectBankAccount') || 'Select Account' }}</option>
-                <option *ngFor="let account of accounts" [value]="account.id">{{ account.accountLabel }} ({{ account.accountNumber }})</option>
-            </select>
-            </div>
-        </div>
-
-        <!-- Selected Account Summary -->
-        <div class="lokotro-account-summary" *ngIf="selectedAccount">
-             <div class="lokotro-info-box">
-                <p><strong>{{ localization.translate('bankAccountSummary') || 'Account Number' }}:</strong> {{ selectedAccount.accountNumber }}</p>
-                <p><strong>{{ localization.translate('accountLabel') || 'Label' }}:</strong> {{ selectedAccount.accountLabel }}</p>
-                <p class="lokotro-info-text">
-                    {{ localization.translate('bankTransferProofInstructions') || 'A payment link will be sent to your email to upload the proof of transfer.' }}
-                </p>
-             </div>
-        </div>
-
-        <div class="lokotro-form-actions">
-          <button type="button" class="lokotro-btn-secondary" (click)="onCancel()">
-            {{ localization.translate('cancel') }}
-          </button>
-          <button type="submit" class="lokotro-btn-primary" [disabled]="bankTransferForm.invalid || isLoading">
-            {{ localization.translate('confirmBankTransfer') || 'Confirm Transfer' }}
-          </button>
-        </div>
-      </form>
-    </div>
-  `, styles: [".lokotro-bank-transfer-form{width:100%}.lokotro-form-title{font-size:20px;font-weight:600;margin:0 0 24px;color:var(--lokotro-text-primary, #F2F0D5);text-align:center}.lokotro-form-group{margin-bottom:20px}.lokotro-form-row{display:flex;gap:16px}.lokotro-form-row .lokotro-form-group{flex:1}.lokotro-label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-input{width:100%;padding:14px 16px;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);font-size:16px;transition:border-color .2s;box-sizing:border-box}.lokotro-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-error{display:block;margin-top:6px;font-size:12px;color:var(--lokotro-error, #D97652)}.lokotro-user-info-section{margin-bottom:24px}.lokotro-section-subtitle{font-size:16px;font-weight:600;margin:0 0 16px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-divider{border:none;border-top:1px solid var(--lokotro-border, #3A473F);margin:24px 0}.lokotro-form-actions{display:flex;gap:12px;margin-top:32px}.lokotro-btn-primary,.lokotro-btn-secondary{flex:1;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.lokotro-btn-primary{background:linear-gradient(135deg,var(--lokotro-primary, #5A5E39),var(--lokotro-secondary, #6E7346));color:var(--lokotro-text-primary, #F2F0D5);border:none}.lokotro-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0003}.lokotro-btn-primary:disabled{opacity:.5;cursor:not-allowed}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #F2F0D5);border:2px solid var(--lokotro-border, #3A473F)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-loading-text{text-align:center;color:var(--lokotro-text-secondary, #D5D3B8);padding:20px}.lokotro-account-summary{margin-top:20px;padding:16px;background:#3a484080;border-radius:12px;border:1px solid var(--lokotro-border, #3A473F)}.lokotro-info-box p{margin:8px 0;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-info-text{font-style:italic;color:var(--lokotro-text-secondary, #D5D3B8);font-size:14px;margin-top:12px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: LokotroLocalizationService }, { type: LokotroPaymentService }], propDecorators: { showUserInfoForm: [{
-                type: Input
-            }], formSubmitted: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }] } });
-
-/**
- * Lokotro Pay - OTP Verification Component
- */
-class LokotroOtpVerificationComponent {
-    constructor(localization) {
-        this.localization = localization;
-        this.otpLength = 6;
-        this.otpVerified = new EventEmitter();
-        this.resendOtp = new EventEmitter();
-        this.cancel = new EventEmitter();
-        this.otpDigits = [];
-        this.resendTimer = 60;
-    }
-    ngOnInit() {
-        this.otpDigits = new Array(this.otpLength).fill('');
-        this.startResendTimer();
-    }
-    ngOnDestroy() {
-        if (this.timerInterval) {
-            clearInterval(this.timerInterval);
-        }
-    }
-    get isOtpComplete() {
-        return this.otpDigits.every(digit => digit !== '');
-    }
-    get otpValue() {
-        return this.otpDigits.join('');
-    }
-    startResendTimer() {
-        this.resendTimer = 60;
-        this.timerInterval = setInterval(() => {
-            this.resendTimer--;
-            if (this.resendTimer <= 0) {
-                clearInterval(this.timerInterval);
-            }
-        }, 1000);
-    }
-    onOtpInput(event, index) {
-        const input = event.target;
-        const value = input.value.replace(/\D/g, '');
-        if (value) {
-            this.otpDigits[index] = value[0];
-            input.value = value[0];
-            // Focus next input
-            if (index < this.otpLength - 1) {
-                const inputs = document.querySelectorAll('.lokotro-otp-input');
-                inputs[index + 1]?.focus();
-            }
-        }
-        else {
-            this.otpDigits[index] = '';
-        }
-    }
-    onOtpKeydown(event, index) {
-        if (event.key === 'Backspace' && !this.otpDigits[index] && index > 0) {
-            const inputs = document.querySelectorAll('.lokotro-otp-input');
-            inputs[index - 1]?.focus();
-        }
-    }
-    onOtpPaste(event) {
-        event.preventDefault();
-        const pastedData = event.clipboardData?.getData('text').replace(/\D/g, '');
-        if (pastedData) {
-            for (let i = 0; i < Math.min(pastedData.length, this.otpLength); i++) {
-                this.otpDigits[i] = pastedData[i];
-            }
-            const inputs = document.querySelectorAll('.lokotro-otp-input');
-            inputs.forEach((input, i) => {
-                input.value = this.otpDigits[i] || '';
-            });
-            // Focus last filled input or first empty
-            const focusIndex = Math.min(pastedData.length, this.otpLength - 1);
-            inputs[focusIndex]?.focus();
+            // Focus last filled input or first empty
+            const focusIndex = Math.min(pastedData.length, this.otpLength - 1);
+            inputs[focusIndex]?.focus();
         }
     }
     onVerify() {
@@ -3918,23 +3039,448 @@ class LokotroLoadingComponent {
       </div>
       <p class="lokotro-loading-message" *ngIf="message">{{ message }}</p>
     </div>
-  `, isInline: true, styles: [".lokotro-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:24px}.lokotro-loading-spinner{position:relative;width:60px;height:60px;margin-bottom:24px}.lokotro-pulse-ring{position:absolute;width:100%;height:100%;border:3px solid var(--lokotro-accent, #3BFBDA);border-radius:50%;opacity:0;animation:lokotro-pulse 2s cubic-bezier(.215,.61,.355,1) infinite}.lokotro-pulse-ring:nth-child(2){animation-delay:.5s}.lokotro-pulse-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--lokotro-accent, #3BFBDA);border-radius:50%;animation:lokotro-dot-pulse 2s ease-in-out infinite}@keyframes lokotro-pulse{0%{transform:scale(.5);opacity:.8}to{transform:scale(1.5);opacity:0}}@keyframes lokotro-dot-pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}.lokotro-loading-message{font-size:16px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true, styles: [".lokotro-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:24px}.lokotro-loading-spinner{position:relative;width:60px;height:60px;margin-bottom:24px}.lokotro-pulse-ring{position:absolute;width:100%;height:100%;border:3px solid var(--lokotro-accent, #3BFBDA);border-radius:50%;opacity:0;animation:lokotro-pulse 2s cubic-bezier(.215,.61,.355,1) infinite}.lokotro-pulse-ring:nth-child(2){animation-delay:.5s}.lokotro-pulse-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--lokotro-accent, #3BFBDA);border-radius:50%;animation:lokotro-dot-pulse 2s ease-in-out infinite}@keyframes lokotro-pulse{0%{transform:scale(.5);opacity:.8}to{transform:scale(1.5);opacity:0}}@keyframes lokotro-dot-pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}.lokotro-loading-message{font-size:16px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroLoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lokotro-loading', standalone: true, imports: [CommonModule], template: `
+    <div class="lokotro-loading">
+      <div class="lokotro-loading-spinner">
+        <div class="lokotro-pulse-ring"></div>
+        <div class="lokotro-pulse-ring"></div>
+        <div class="lokotro-pulse-dot"></div>
+      </div>
+      <p class="lokotro-loading-message" *ngIf="message">{{ message }}</p>
+    </div>
+  `, styles: [".lokotro-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:24px}.lokotro-loading-spinner{position:relative;width:60px;height:60px;margin-bottom:24px}.lokotro-pulse-ring{position:absolute;width:100%;height:100%;border:3px solid var(--lokotro-accent, #3BFBDA);border-radius:50%;opacity:0;animation:lokotro-pulse 2s cubic-bezier(.215,.61,.355,1) infinite}.lokotro-pulse-ring:nth-child(2){animation-delay:.5s}.lokotro-pulse-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--lokotro-accent, #3BFBDA);border-radius:50%;animation:lokotro-dot-pulse 2s ease-in-out infinite}@keyframes lokotro-pulse{0%{transform:scale(.5);opacity:.8}to{transform:scale(1.5);opacity:0}}@keyframes lokotro-dot-pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}.lokotro-loading-message{font-size:16px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0}\n"] }]
+        }], propDecorators: { message: [{
+                type: Input
+            }] } });
+
+/**
+ * Lokotro Pay - Payment Service
+ * Main payment service that follows the Lokotro Gateway API flow
+ */
+/**
+ * Initial payment state
+ */
+const initialState = {
+    isLoading: false,
+    currentScreen: LokotroPayScreenNavigation.LoadingScreen
+};
+class LokotroPaymentService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.stateSubject = new BehaviorSubject(initialState);
+        this.state$ = this.stateSubject.asObservable();
+    }
+    /**
+     * Get current state
+     */
+    get currentState() {
+        return this.stateSubject.value;
+    }
+    /**
+     * Update state
+     */
+    updateState(partialState) {
+        this.stateSubject.next({
+            ...this.currentState,
+            ...partialState
+        });
+    }
+    /**
+     * Reset state to initial
+     */
+    resetState() {
+        this.stateSubject.next(initialState);
+    }
+    /**
+     * Set app-key for authentication
+     */
+    setAppKey(appKey) {
+        this.httpClient.setAppKey(appKey);
+    }
+    /**
+     * Set accept language
+     */
+    setAcceptLanguage(language) {
+        this.httpClient.setAcceptLanguage(language);
+    }
+    /**
+     * Step 1: Create payment transaction
+     * POST /payments/collect
+     */
+    createPayment(paymentBody) {
+        this.updateState({ isLoading: true });
+        const requestData = this.convertPaymentBodyToRequest(paymentBody);
+        return this.httpClient.post(LokotroPayEnv.endpoints.collect, requestData).pipe(tap(response => {
+            if (response.isSuccess && response.data) {
+                const paymentInfo = this.parsePaymentInfo(response.data);
+                this.updateState({
+                    isLoading: false,
+                    transactionId: response.data.transaction_id,
+                    paymentInfo,
+                    currentScreen: paymentInfo.showPaymentMethodForm
+                        ? LokotroPayScreenNavigation.PaymentMethodSelectionScreen
+                        : LokotroPayScreenNavigation.PaymentFormScreen
+                });
+            }
+            else {
+                this.updateState({
+                    isLoading: false,
+                    error: {
+                        message: response.message,
+                        title: 'Payment Creation Failed',
+                        errorCode: response.apiResponseCode,
+                        timestamp: new Date()
+                    },
+                    currentScreen: LokotroPayScreenNavigation.ErrorScreen
+                });
+            }
+        }), catchError(error => {
+            this.updateState({
+                isLoading: false,
+                error: {
+                    message: error.message || 'Failed to create payment',
+                    title: 'Error',
+                    timestamp: new Date()
+                },
+                currentScreen: LokotroPayScreenNavigation.ErrorScreen
+            });
+            return throwError(() => error);
+        }));
+    }
+    /**
+     * Step 2: Get transaction details
+     * GET /payments/transaction/{transaction_id}
+     */
+    getTransactionDetails(transactionId) {
+        return this.httpClient.get(`${LokotroPayEnv.endpoints.transaction}/${transactionId}`).pipe();
+    }
+    /**
+     * Step 3: Submit payment details
+     * POST /payments/submit
+     */
+    submitPaymentDetails(request) {
+        this.updateState({
+            isLoading: true,
+            currentScreen: LokotroPayScreenNavigation.ProcessingScreen
+        });
+        const requestData = this.convertSubmitRequestToData(request);
+        return this.httpClient.post(LokotroPayEnv.endpoints.submit, requestData).pipe(tap(response => {
+            if (response.isSuccess && response.data) {
+                const submitResponse = this.parseSubmitResponse(response.data);
+                if (submitResponse.requiresOtp) {
+                    this.updateState({
+                        isLoading: false,
+                        currentScreen: LokotroPayScreenNavigation.EWalletOtpScreen
+                    });
+                }
+                else if (submitResponse.redirectUrl) {
+                    // Handle redirect for hosted checkout
+                    window.location.href = submitResponse.redirectUrl;
+                }
+                else if (LokotroPaymentStatusInfo.isSuccess(submitResponse.status)) {
+                    this.handlePaymentSuccess(response.data);
+                }
+                else if (LokotroPaymentStatusInfo.isPending(submitResponse.status)) {
+                    this.updateState({
+                        isLoading: false,
+                        currentScreen: LokotroPayScreenNavigation.MobileMoneyProcessingScreen
+                    });
+                }
+                else {
+                    this.handlePaymentFailure(response.message, response.apiResponseCode);
+                }
+            }
+            else {
+                this.handlePaymentFailure(response.message, response.apiResponseCode);
+            }
+        }), catchError(error => {
+            this.handlePaymentFailure(error.message);
+            return throwError(() => error);
+        }));
+    }
+    /**
+     * Step 4: Verify OTP (for e-wallet and flash payments)
+     * POST /payments/verify-otp
+     */
+    verifyOtp(request) {
+        this.updateState({ isLoading: true });
+        return this.httpClient.post(LokotroPayEnv.endpoints.verifyOtp, {
+            transaction_id: request.transactionId,
+            otp: request.otp
+        }).pipe(tap(response => {
+            if (response.isSuccess && response.data) {
+                const status = LokotroPaymentStatusInfo.fromString(response.data.status || '');
+                if (LokotroPaymentStatusInfo.isSuccess(status)) {
+                    this.handlePaymentSuccess(response.data);
+                }
+                else {
+                    this.handlePaymentFailure(response.message, response.apiResponseCode);
+                }
+            }
+            else {
+                this.updateState({
+                    isLoading: false,
+                    error: {
+                        message: response.message || 'OTP verification failed',
+                        title: 'Verification Failed',
+                        errorCode: response.apiResponseCode,
+                        timestamp: new Date()
+                    }
+                });
+            }
+        }), catchError(error => {
+            this.updateState({
+                isLoading: false,
+                error: {
+                    message: error.message || 'OTP verification failed',
+                    title: 'Error',
+                    timestamp: new Date()
+                }
+            });
+            return throwError(() => error);
+        }));
+    }
+    /**
+     * Step 5: Resend OTP (if needed)
+     * POST /payments/resend-otp
+     */
+    resendOtp(request) {
+        return this.httpClient.post(LokotroPayEnv.endpoints.resendOtp, { transaction_id: request.transactionId });
+    }
+    /**
+     * Select payment method
+     */
+    selectPaymentMethod(method) {
+        this.updateState({
+            selectedPaymentMethod: method,
+            currentScreen: this.getFormScreenForChannel(method.channel)
+        });
+    }
+    /**
+     * Navigate to screen
+     */
+    navigateToScreen(screen) {
+        this.updateState({ currentScreen: screen });
+    }
+    /**
+     * Handle payment success
+     */
+    handlePaymentSuccess(data) {
+        const response = {
+            message: data['message'] || 'Payment successful',
+            title: data['title'] || 'Success',
+            customRef: data['custom_ref'] || data['customer_reference'] || '',
+            amount: parseFloat(data['amount'] || '0'),
+            apiResponseCode: LokotroPayApiResponseCode.LOK000,
+            currency: data['currency'] || '',
+            paymentStatus: LokotroPaymentStatus.Approved,
+            systemRef: data['system_ref'] || data['transaction_id'] || '',
+            transactionId: data['transaction_id'],
+            timestamp: new Date()
+        };
+        this.updateState({
+            isLoading: false,
+            response,
+            currentScreen: LokotroPayScreenNavigation.SuccessScreen
+        });
+    }
+    /**
+     * Handle payment failure
+     */
+    handlePaymentFailure(message, errorCode) {
+        this.updateState({
+            isLoading: false,
+            error: {
+                message: message || 'Payment failed',
+                title: 'Payment Failed',
+                errorCode,
+                timestamp: new Date()
+            },
+            currentScreen: LokotroPayScreenNavigation.ErrorScreen
+        });
+    }
+    /**
+     * Get form screen for payment channel
+     */
+    getFormScreenForChannel(channel) {
+        switch (channel) {
+            case LokotroPayChannel.EWallet:
+            case LokotroPayChannel.LokotroWallet:
+                return LokotroPayScreenNavigation.EWalletFormScreen;
+            case LokotroPayChannel.MobileMoney:
+                return LokotroPayScreenNavigation.MobileMoneyFormScreen;
+            case LokotroPayChannel.Card:
+            case LokotroPayChannel.VirtualCard:
+                return LokotroPayScreenNavigation.CardFormScreen;
+            case LokotroPayChannel.EFlash:
+                return LokotroPayScreenNavigation.FlashFormScreen;
+            default:
+                return LokotroPayScreenNavigation.PaymentFormScreen;
+        }
+    }
+    /**
+     * Convert payment body to API request format
+     */
+    convertPaymentBodyToRequest(body) {
+        const request = {
+            customer_reference: body.customerReference,
+            amount: body.amount,
+            currency: body.currency.toLowerCase(),
+            payment_method: body.paymentMethod || 'wallet',
+            user_info: body.userInfo || 'full',
+            payment_method_info: body.paymentMethodInfo || 'full',
+            fee_covered_by: body.feeCoveredBy || 'buyer',
+            delivery_behaviour: body.deliveryBehaviour || 'direct_delivery'
+        };
+        // Add optional URLs
+        if (body.notifyUrl)
+            request['notify_url'] = body.notifyUrl;
+        if (body.successRedirectUrl)
+            request['success_redirect_url'] = body.successRedirectUrl;
+        if (body.failRedirectUrl)
+            request['fail_redirect_url'] = body.failRedirectUrl;
+        // Add user information
+        if (body.userInfo === 'full') {
+            if (body.firstName)
+                request['first_name'] = body.firstName;
+            if (body.lastName)
+                request['last_name'] = body.lastName;
+            if (body.phoneNumber)
+                request['phone_number'] = body.phoneNumber;
+            if (body.email)
+                request['email'] = body.email;
+        }
+        // Add payment method specific fields
+        if (body.paymentMethodInfo === 'full') {
+            if (body.walletNumber)
+                request['wallet_number'] = body.walletNumber;
+            if (body.walletPin)
+                request['wallet_pin'] = body.walletPin;
+            if (body.mobileMoneyPhoneNumber)
+                request['mobile_money_phone_number'] = body.mobileMoneyPhoneNumber;
+            if (body.flashNumber)
+                request['flash_number'] = body.flashNumber;
+            if (body.flashPin)
+                request['flash_pin'] = body.flashPin;
+            if (body.cardNumber)
+                request['card_number'] = body.cardNumber;
+            if (body.cardExpiryDate)
+                request['card_expiry_date'] = body.cardExpiryDate;
+            if (body.cardCvv)
+                request['card_cvv'] = body.cardCvv;
+            if (body.cardHolderName)
+                request['card_holder_name'] = body.cardHolderName;
+        }
+        // Add merchant information
+        if (body.merchant) {
+            request['merchant'] = {
+                id: body.merchant.id,
+                name: body.merchant.name,
+                logo_url: body.merchant.logoUrl,
+                website: body.merchant.website,
+                description: body.merchant.description
+            };
+        }
+        // Add mastercard payment method
+        if (body.mastercardPaymentMethod) {
+            request['mastercard_payment_method'] = body.mastercardPaymentMethod;
+        }
+        // Add metadata
+        if (body.metadata) {
+            request['metadata'] = body.metadata;
+        }
+        return request;
+    }
+    /**
+     * Convert submit request to API format
+     */
+    convertSubmitRequestToData(request) {
+        const data = {
+            transaction_id: request.transactionId,
+            payment_method: request.paymentMethod
+        };
+        if (request.walletNumber)
+            data['wallet_number'] = request.walletNumber;
+        if (request.walletPin)
+            data['wallet_pin'] = request.walletPin;
+        if (request.mobileMoneyPhoneNumber)
+            data['mobile_money_phone_number'] = request.mobileMoneyPhoneNumber;
+        if (request.flashNumber)
+            data['flash_number'] = request.flashNumber;
+        if (request.flashPin)
+            data['flash_pin'] = request.flashPin;
+        if (request.cardNumber)
+            data['card_number'] = request.cardNumber;
+        if (request.cardExpiryDate)
+            data['card_expiry_date'] = request.cardExpiryDate;
+        if (request.cardCvv)
+            data['card_cvv'] = request.cardCvv;
+        if (request.cardHolderName)
+            data['card_holder_name'] = request.cardHolderName;
+        return data;
+    }
+    /**
+     * Parse payment info from API response
+     */
+    parsePaymentInfo(data) {
+        return {
+            id: data.transaction_id || '',
+            amount: parseFloat(data.amount || '0'),
+            currency: data.currency || 'USD',
+            description: data.description || '',
+            merchantName: data.merchant_name || '',
+            merchantId: data.merchant_id || '',
+            availablePaymentMethods: (data.available_payment_methods || []).map(this.parsePaymentMethod),
+            createdAt: new Date(data.created_at || Date.now()),
+            expiresAt: data.expires_at ? new Date(data.expires_at) : undefined,
+            metadata: data.metadata,
+            paymentUrl: data.payment_url,
+            showUserInfoForm: data.show_user_info_form || false,
+            showPaymentMethodForm: data.show_payment_method_form || false
+        };
+    }
+    /**
+     * Parse payment method from API response
+     */
+    parsePaymentMethod(data) {
+        return {
+            id: data['id'] || '',
+            name: data['name'] || '',
+            displayName: data['display_name'] || '',
+            channel: data['channel'] || LokotroPayChannel.None,
+            iconUrl: data['icon_url'] || data['icon'] || '',
+            isEnabled: data['is_enabled'] ?? true,
+            configuration: data['configuration'],
+            supportedCurrencies: data['supported_currencies']
+        };
+    }
+    /**
+     * Parse submit response from API
+     */
+    parseSubmitResponse(data) {
+        return {
+            success: data.success || false,
+            message: data.message || '',
+            transactionId: data.transaction_id || '',
+            status: LokotroPaymentStatusInfo.fromString(data.status || ''),
+            requiresOtp: data.requires_otp || false,
+            otpDestination: data.otp_destination,
+            redirectUrl: data.redirect_url
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPaymentService, deps: [{ token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPaymentService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroLoadingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lokotro-loading', standalone: true, imports: [CommonModule], template: `
-    <div class="lokotro-loading">
-      <div class="lokotro-loading-spinner">
-        <div class="lokotro-pulse-ring"></div>
-        <div class="lokotro-pulse-ring"></div>
-        <div class="lokotro-pulse-dot"></div>
-      </div>
-      <p class="lokotro-loading-message" *ngIf="message">{{ message }}</p>
-    </div>
-  `, styles: [".lokotro-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:24px}.lokotro-loading-spinner{position:relative;width:60px;height:60px;margin-bottom:24px}.lokotro-pulse-ring{position:absolute;width:100%;height:100%;border:3px solid var(--lokotro-accent, #3BFBDA);border-radius:50%;opacity:0;animation:lokotro-pulse 2s cubic-bezier(.215,.61,.355,1) infinite}.lokotro-pulse-ring:nth-child(2){animation-delay:.5s}.lokotro-pulse-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--lokotro-accent, #3BFBDA);border-radius:50%;animation:lokotro-dot-pulse 2s ease-in-out infinite}@keyframes lokotro-pulse{0%{transform:scale(.5);opacity:.8}to{transform:scale(1.5);opacity:0}}@keyframes lokotro-dot-pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}.lokotro-loading-message{font-size:16px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0}\n"] }]
-        }], propDecorators: { message: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPaymentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: LokotroHttpClientService }] });
 
 /**
  * Lokotro Pay - Checkout Component
@@ -4102,7 +3648,7 @@ class LokotroPayCheckoutComponent {
     onBack() {
         const currentScreen = this.currentScreen;
         // Navigate back based on current screen
-        if (this.isPaymentFormScreen || currentScreen === LokotroPayScreenNavigation.BankTransferFormScreen) {
+        if (this.isPaymentFormScreen) {
             this.paymentService.navigateToScreen(LokotroPayScreenNavigation.PaymentMethodSelectionScreen);
         }
         else if (currentScreen === LokotroPayScreenNavigation.EWalletOtpScreen) {
@@ -4165,19 +3711,10 @@ class LokotroPayCheckoutComponent {
           *ngIf="isPaymentFormScreen"
           [channel]="state?.selectedPaymentMethod?.channel"
           [transactionId]="state?.transactionId"
-          [showUserInfoForm]="state?.paymentInfo?.showUserInfoForm || false"
           (formSubmitted)="onFormSubmitted($event)"
           (cancel)="onCancel()">
         </lokotro-payment-form>
 
-        <!-- Bank Transfer Form Screen -->
-        <lokotro-bank-transfer-form
-          *ngIf="currentScreen === 'bankTransferFormScreen'"
-          [showUserInfoForm]="state?.paymentInfo?.showUserInfoForm || false"
-          (formSubmitted)="onFormSubmitted($event)"
-          (cancel)="onCancel()">
-        </lokotro-bank-transfer-form>
-
         <!-- OTP Verification Screen -->
         <lokotro-otp-verification
           *ngIf="currentScreen === 'ewalletOtpScreen'"
@@ -4240,7 +3777,7 @@ class LokotroPayCheckoutComponent {
         </lokotro-result>
       </div>
     </div>
-  `, isInline: true, styles: [".lokotro-checkout{display:flex;flex-direction:column;min-height:100%;background:var(--lokotro-background, #1C2621);color:var(--lokotro-text-primary, #F2F0D5);font-family:var(--lokotro-font-family, \"Comfortaa\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.lokotro-checkout-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--lokotro-surface, #2A3832);border-bottom:1px solid var(--lokotro-border, #3A473F)}.lokotro-title{flex:1;text-align:center;font-size:18px;font-weight:600;margin:0;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-back-btn,.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-primary, #F2F0D5);border-radius:8px;transition:background-color .2s}.lokotro-back-btn:hover,.lokotro-close-btn:hover{background:var(--lokotro-glass-light, rgba(255, 255, 255, .1))}.lokotro-checkout-content{flex:1;padding:16px;overflow-y:auto}.lokotro-dark{--lokotro-background: #1C2621;--lokotro-surface: #2A3832;--lokotro-text-primary: #F2F0D5;--lokotro-text-secondary: #D5D3B8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LokotroPaymentMethodSelectionComponent, selector: "lokotro-payment-method-selection", inputs: ["paymentMethods", "selectedMethod"], outputs: ["methodSelected"] }, { kind: "component", type: LokotroPaymentFormComponent, selector: "lokotro-payment-form", inputs: ["channel", "transactionId", "showUserInfoForm"], outputs: ["formSubmitted", "cancel"] }, { kind: "component", type: LokotroBankTransferFormComponent, selector: "lokotro-bank-transfer-form", inputs: ["showUserInfoForm"], outputs: ["formSubmitted", "cancel"] }, { kind: "component", type: LokotroOtpVerificationComponent, selector: "lokotro-otp-verification", inputs: ["transactionId", "otpDestination", "otpLength"], outputs: ["otpVerified", "resendOtp", "cancel"] }, { kind: "component", type: LokotroProcessingComponent, selector: "lokotro-processing", inputs: ["type", "message"] }, { kind: "component", type: LokotroResultComponent, selector: "lokotro-result", inputs: ["type", "title", "message", "amount", "currency", "transactionId", "primaryActionLabel", "secondaryActionLabel"], outputs: ["primaryAction", "secondaryAction"] }, { kind: "component", type: LokotroLoadingComponent, selector: "lokotro-loading", inputs: ["message"] }] }); }
+  `, isInline: true, styles: [".lokotro-checkout{display:flex;flex-direction:column;min-height:100%;background:var(--lokotro-background, #1C2621);color:var(--lokotro-text-primary, #F2F0D5);font-family:var(--lokotro-font-family, \"Comfortaa\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.lokotro-checkout-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--lokotro-surface, #2A3832);border-bottom:1px solid var(--lokotro-border, #3A473F)}.lokotro-title{flex:1;text-align:center;font-size:18px;font-weight:600;margin:0;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-back-btn,.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-primary, #F2F0D5);border-radius:8px;transition:background-color .2s}.lokotro-back-btn:hover,.lokotro-close-btn:hover{background:var(--lokotro-glass-light, rgba(255, 255, 255, .1))}.lokotro-checkout-content{flex:1;padding:16px;overflow-y:auto}.lokotro-dark{--lokotro-background: #1C2621;--lokotro-surface: #2A3832;--lokotro-text-primary: #F2F0D5;--lokotro-text-secondary: #D5D3B8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LokotroPaymentMethodSelectionComponent, selector: "lokotro-payment-method-selection", inputs: ["paymentMethods", "selectedMethod"], outputs: ["methodSelected"] }, { kind: "component", type: LokotroPaymentFormComponent, selector: "lokotro-payment-form", inputs: ["channel", "transactionId", "showUserInfoForm"], outputs: ["formSubmitted", "cancel"] }, { kind: "component", type: LokotroOtpVerificationComponent, selector: "lokotro-otp-verification", inputs: ["transactionId", "otpDestination", "otpLength"], outputs: ["otpVerified", "resendOtp", "cancel"] }, { kind: "component", type: LokotroProcessingComponent, selector: "lokotro-processing", inputs: ["type", "message"] }, { kind: "component", type: LokotroResultComponent, selector: "lokotro-result", inputs: ["type", "title", "message", "amount", "currency", "transactionId", "primaryActionLabel", "secondaryActionLabel"], outputs: ["primaryAction", "secondaryAction"] }, { kind: "component", type: LokotroLoadingComponent, selector: "lokotro-loading", inputs: ["message"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPayCheckoutComponent, decorators: [{
             type: Component,
@@ -4248,7 +3785,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CommonModule,
                         LokotroPaymentMethodSelectionComponent,
                         LokotroPaymentFormComponent,
-                        LokotroBankTransferFormComponent,
                         LokotroOtpVerificationComponent,
                         LokotroProcessingComponent,
                         LokotroResultComponent,
@@ -4291,19 +3827,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           *ngIf="isPaymentFormScreen"
           [channel]="state?.selectedPaymentMethod?.channel"
           [transactionId]="state?.transactionId"
-          [showUserInfoForm]="state?.paymentInfo?.showUserInfoForm || false"
           (formSubmitted)="onFormSubmitted($event)"
           (cancel)="onCancel()">
         </lokotro-payment-form>
 
-        <!-- Bank Transfer Form Screen -->
-        <lokotro-bank-transfer-form
-          *ngIf="currentScreen === 'bankTransferFormScreen'"
-          [showUserInfoForm]="state?.paymentInfo?.showUserInfoForm || false"
-          (formSubmitted)="onFormSubmitted($event)"
-          (cancel)="onCancel()">
-        </lokotro-bank-transfer-form>
-
         <!-- OTP Verification Screen -->
         <lokotro-otp-verification
           *ngIf="currentScreen === 'ewalletOtpScreen'"
@@ -4444,7 +3971,6 @@ class LokotroPayModule {
                 LokotroHttpClientService,
                 LokotroPaymentService,
                 LokotroLocalizationService,
-                LokotroCountryService,
                 {
                     provide: LOKOTRO_ENV_CONFIG,
                     useValue: config?.env ?? null,
@@ -4468,17 +3994,13 @@ class LokotroPayModule {
             LokotroOtpVerificationComponent,
             LokotroProcessingComponent,
             LokotroResultComponent,
-            LokotroLoadingComponent,
-            LokotroMobileMoneyPhoneInputComponent,
-            LokotroBankTransferFormComponent], exports: [LokotroPayCheckoutComponent,
+            LokotroLoadingComponent], exports: [LokotroPayCheckoutComponent,
             LokotroPaymentMethodSelectionComponent,
             LokotroPaymentFormComponent,
             LokotroOtpVerificationComponent,
             LokotroProcessingComponent,
             LokotroResultComponent,
-            LokotroLoadingComponent,
-            LokotroMobileMoneyPhoneInputComponent,
-            LokotroBankTransferFormComponent] }); }
+            LokotroLoadingComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPayModule, imports: [CommonModule,
             HttpClientModule,
             ReactiveFormsModule,
@@ -4490,9 +4012,7 @@ class LokotroPayModule {
             LokotroOtpVerificationComponent,
             LokotroProcessingComponent,
             LokotroResultComponent,
-            LokotroLoadingComponent,
-            LokotroMobileMoneyPhoneInputComponent,
-            LokotroBankTransferFormComponent] }); }
+            LokotroLoadingComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPayModule, decorators: [{
             type: NgModule,
@@ -4510,8 +4030,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         LokotroProcessingComponent,
                         LokotroResultComponent,
                         LokotroLoadingComponent,
-                        LokotroMobileMoneyPhoneInputComponent,
-                        LokotroBankTransferFormComponent,
                     ],
                     exports: [
                         LokotroPayCheckoutComponent,
@@ -4521,18 +4039,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         LokotroProcessingComponent,
                         LokotroResultComponent,
                         LokotroLoadingComponent,
-                        LokotroMobileMoneyPhoneInputComponent,
-                        LokotroBankTransferFormComponent,
                     ],
                 }]
         }] });
 
-/**
- * Lokotro Pay - Core Models and Interfaces
- * Angular version of the Flutter Lokotro Pay plugin
- */
-// Re-export country models
-
 /**
  * Lokotro Pay - Color Constants
  * Angular version of the Flutter Lokotro Pay plugin colors
@@ -4710,10 +4220,6 @@ class LokotroPaymentStatusComponent {
         this.currentScreen = 'loading';
         this.paymentDetails = null;
         this.errorMessage = '';
-        /** OTP verification state */
-        this.otpDestination = '';
-        this.rawStatus = '';
-        this.isVerifyingOtp = false;
         this.destroy$ = new Subject();
         this.pollingAttempts = 0;
     }
@@ -4790,26 +4296,8 @@ class LokotroPaymentStatusComponent {
             throw error;
         }))
             .subscribe(response => {
-            // DEBUG: Always log for troubleshooting
-            console.log('[DEBUG] ====== RAW HTTP RESPONSE ======');
-            console.log('[DEBUG] response:', response);
-            console.log('[DEBUG] response.data:', response.data);
-            console.log('[DEBUG] response.data type:', typeof response.data);
-            console.log('[DEBUG] response.data keys:', response.data ? Object.keys(response.data) : 'null');
             if (response.isSuccess && response.data) {
-                // Unwrap the nested API response structure
-                // API returns: { status_code, message, data: { ...actual transaction details } }
-                const apiResponse = response.data;
-                console.log('[DEBUG] apiResponse:', apiResponse);
-                console.log('[DEBUG] apiResponse.data:', apiResponse.data);
-                console.log('[DEBUG] apiResponse.status_code:', apiResponse.status_code);
-                const transactionData = apiResponse.data || response.data;
-                console.log('[DEBUG] ====== TRANSACTION DATA ======');
-                console.log('[DEBUG] transactionData:', transactionData);
-                console.log('[DEBUG] transactionData.status:', transactionData.status);
-                console.log('[DEBUG] transactionData.amount:', transactionData.amount);
-                console.log('[DEBUG] transactionData.transactional_amount:', transactionData.transactional_amount);
-                this.handleStatusResponse(transactionData);
+                this.handleStatusResponse(response.data);
             }
             else {
                 // Sanitize error message from response
@@ -4906,66 +4394,22 @@ class LokotroPaymentStatusComponent {
     handleStatusResponse(data) {
         if (!data)
             return;
-        if (LokotroPayEnv.debugMode) {
-            console.log('[Lokotro Payment Status] Raw response data:', data);
-        }
-        // Store raw status for OTP detection
-        const statusStr = data.status || '';
-        this.rawStatus = statusStr.toLowerCase();
-        // Map status string to enum
-        const status = LokotroPaymentStatusInfo.fromString(statusStr);
-        // Resolve amount (try multiple fields)
-        let amount;
-        if (data.amount !== undefined && data.amount !== null) {
-            amount = typeof data.amount === 'string' ? parseFloat(data.amount) : data.amount;
-        }
-        else if (data.transactional_amount !== undefined && data.transactional_amount !== null) {
-            amount = typeof data.transactional_amount === 'string' ? parseFloat(data.transactional_amount) : data.transactional_amount;
-        }
-        // Resolve currency
-        const currency = data.currency_str || data.transactional_currency || data.currency;
-        // Resolve payment ID
-        const paymentId = data.identifier || data.payment_id || data.transaction_id || this.statusConfig.paymentId;
-        // Get OTP destination if available
-        if (data.otp_sent_to) {
-            this.otpDestination = data.otp_sent_to;
-        }
-        else if (data.customer_email) {
-            this.otpDestination = data.customer_email;
-        }
-        console.log('[DEBUG] Mapping response. Redirects:', {
-            rawSuccess: data.success_redirect_url,
-            rawFail: data.fail_redirect_url,
-            rawNotify: data.notify_url
-        });
         const statusResponse = {
-            code: 0,
+            code: data.code || 0,
             message: data.message || '',
-            paymentId: paymentId,
-            transactionId: data.identifier || data.transaction_id,
-            status: status,
-            amount: amount,
-            currency: currency,
+            paymentId: data.transaction_id || this.statusConfig.paymentId,
+            transactionId: data.transaction_id,
+            status: LokotroPaymentStatusInfo.fromString(data.status || ''),
+            amount: data.amount ? parseFloat(data.amount) : undefined,
+            currency: data.currency,
             merchantReference: data.merchant_reference,
             customerReference: data.customer_reference,
             completedAt: data.completed_at,
             createdAt: data.created_at,
-            metadata: data.metadata,
-            // Redirect URLs
-            successRedirectUrl: data.success_redirect_url,
-            failRedirectUrl: data.fail_redirect_url,
-            notifyUrl: data.notify_url
+            metadata: data.metadata
         };
-        console.log('[DEBUG] Mapped statusResponse:', statusResponse);
         this.paymentDetails = statusResponse;
         this.statusChange.emit(statusResponse);
-        // Check for OTP verification status FIRST (before generic pending handling)
-        if (this.rawStatus === 'pending_otp' || this.rawStatus === 'pending_otp_verification') {
-            console.log('[Lokotro Payment Status] OTP verification required, showing OTP screen');
-            this.currentScreen = 'otp';
-            this.stopPolling(); // Stop polling while user enters OTP
-            return;
-        }
         switch (statusResponse.status) {
             case LokotroPaymentStatus.Pending:
                 this.currentScreen = 'pending';
@@ -4973,29 +4417,25 @@ class LokotroPaymentStatusComponent {
             case LokotroPaymentStatus.Processing:
                 this.currentScreen = 'processing';
                 break;
-            case LokotroPaymentStatus.PendingBankProofUpload:
-                // Bank transfer pending proof upload - show pending screen
-                this.currentScreen = 'pending';
-                break;
             case LokotroPaymentStatus.Approved:
-                // Emit event and let parent handle screen transition
-                // Keep showing processing until parent navigates
-                this.currentScreen = 'processing';
+                this.currentScreen = 'success';
                 this.paymentComplete.emit(statusResponse);
                 this.stopPolling();
                 break;
             case LokotroPaymentStatus.Failed:
             case LokotroPaymentStatus.Declined:
-                // Emit event and let parent handle screen transition
+                this.currentScreen = 'error';
                 this.errorMessage = statusResponse.message;
                 this.paymentFailed.emit(statusResponse);
                 this.stopPolling();
                 break;
             case LokotroPaymentStatus.Cancelled:
+                this.currentScreen = 'cancelled';
                 this.paymentFailed.emit(statusResponse);
                 this.stopPolling();
                 break;
             case LokotroPaymentStatus.Expired:
+                this.currentScreen = 'expired';
                 this.paymentFailed.emit(statusResponse);
                 this.stopPolling();
                 break;
@@ -5037,98 +4477,6 @@ class LokotroPaymentStatusComponent {
         }
         this.onClose.emit();
     }
-    /**
-     * Handle OTP verification
-     */
-    onOtpVerified(otp) {
-        console.log('[Lokotro Payment Status] Verifying OTP:', otp);
-        this.isVerifyingOtp = true;
-        this.currentScreen = 'processing';
-        const verifyPayload = {
-            payment_id: this.statusConfig.paymentId,
-            otp_code: otp
-        };
-        this.httpClient.post(LokotroPayEnv.endpoints.verifyOtp, verifyPayload).subscribe({
-            next: (response) => {
-                console.log('[Lokotro Payment Status] OTP verify response:', response);
-                this.isVerifyingOtp = false;
-                if (response.isSuccess && response.data) {
-                    const apiResponse = response.data;
-                    const verifyData = apiResponse.data || response.data;
-                    const verifyStatus = (verifyData.status || '').toLowerCase();
-                    if (verifyStatus === 'completed' || verifyStatus === 'approved' || verifyStatus === 'success') {
-                        // Payment successful - emit event and let parent handle screen transition
-                        // Keep showing processing screen until parent navigates away
-                        if (this.paymentDetails) {
-                            this.paymentDetails.status = LokotroPaymentStatus.Approved;
-                            this.paymentComplete.emit(this.paymentDetails);
-                        }
-                        // Don't set currentScreen = 'success' - let parent handle
-                    }
-                    else if (verifyStatus === 'failed' || verifyStatus === 'declined') {
-                        // OTP verification failed - emit event and let parent handle
-                        this.errorMessage = verifyData.message || this.localization.translate('otpVerificationFailed');
-                        if (this.paymentDetails) {
-                            this.paymentDetails.status = LokotroPaymentStatus.Failed;
-                            this.paymentFailed.emit(this.paymentDetails);
-                        }
-                        // Don't set currentScreen = 'error' - let parent handle
-                    }
-                    else {
-                        // Still processing, restart polling
-                        this.startStatusCheck();
-                    }
-                }
-                else {
-                    this.errorMessage = this.getSanitizedErrorMessage(response);
-                    if (this.paymentDetails) {
-                        this.paymentDetails.status = LokotroPaymentStatus.Failed;
-                        this.paymentFailed.emit(this.paymentDetails);
-                    }
-                }
-            },
-            error: (error) => {
-                console.error('[Lokotro Payment Status] OTP verify error:', error);
-                this.isVerifyingOtp = false;
-                this.errorMessage = this.getSanitizedErrorMessage(error);
-                if (this.paymentDetails) {
-                    this.paymentDetails.status = LokotroPaymentStatus.Failed;
-                    this.paymentFailed.emit(this.paymentDetails);
-                }
-            }
-        });
-    }
-    /**
-     * Handle OTP resend
-     */
-    onResendOtp() {
-        console.log('[Lokotro Payment Status] Resending OTP');
-        const resendPayload = {
-            payment_id: this.statusConfig.paymentId
-        };
-        this.httpClient.post(LokotroPayEnv.endpoints.resendOtp, resendPayload).subscribe({
-            next: (response) => {
-                console.log('[Lokotro Payment Status] OTP resend response:', response);
-                if (response.isSuccess && response.data) {
-                    const apiResponse = response.data;
-                    const resendData = apiResponse.data || response.data;
-                    if (resendData.otp_sent_to) {
-                        this.otpDestination = resendData.otp_sent_to;
-                    }
-                }
-            },
-            error: (error) => {
-                console.error('[Lokotro Payment Status] OTP resend error:', error);
-            }
-        });
-    }
-    /**
-     * Handle OTP cancellation
-     */
-    onOtpCancel() {
-        console.log('[Lokotro Payment Status] OTP cancelled');
-        this.onClose.emit();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPaymentStatusComponent, deps: [{ token: LokotroPaymentService }, { token: LokotroLocalizationService }, { token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LokotroPaymentStatusComponent, isStandalone: true, selector: "lokotro-payment-status", inputs: { statusConfig: "statusConfig", showHeader: "showHeader", showCloseButton: "showCloseButton" }, outputs: { statusChange: "statusChange", paymentComplete: "paymentComplete", paymentFailed: "paymentFailed", onClose: "onClose", onDoneEvent: "onDoneEvent" }, ngImport: i0, template: `
     <div class="lokotro-payment-status-container">
@@ -5183,17 +4531,6 @@ class LokotroPaymentStatusComponent {
           [message]="localization.translate('paymentProcessing')">
         </lokotro-processing>
 
-        <!-- OTP Verification State -->
-        <lokotro-otp-verification
-          *ngIf="currentScreen === 'otp'"
-          [transactionId]="statusConfig?.paymentId"
-          [otpDestination]="otpDestination"
-          [otpLength]="6"
-          (otpVerified)="onOtpVerified($event)"
-          (resendOtp)="onResendOtp()"
-          (cancel)="onOtpCancel()">
-        </lokotro-otp-verification>
-
         <!-- Success State -->
         <lokotro-result
           *ngIf="currentScreen === 'success'"
@@ -5240,11 +4577,11 @@ class LokotroPaymentStatusComponent {
         </lokotro-result>
       </div>
     </div>
-  `, isInline: true, styles: [".lokotro-payment-status-container{min-height:300px;display:flex;flex-direction:column;background:var(--lokotro-background, #1C2621);border-radius:16px;border:1px solid var(--lokotro-border, rgba(59, 251, 218, .1));overflow:hidden;font-family:var(--lokotro-font-family, \"Comfortaa\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.lokotro-status-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--lokotro-surface, #2A3832);border-bottom:1px solid var(--lokotro-border, rgba(59, 251, 218, .1))}.lokotro-status-title{font-size:18px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5);margin:0}.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-primary, #F2F0D5);border-radius:8px;transition:background-color .2s}.lokotro-close-btn:hover{background:#ffffff1a}.lokotro-status-content{flex:1;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center}.status-section{text-align:center;width:100%;max-width:400px}.status-icon{width:80px;height:80px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;border-radius:50%}.pending-icon{background:#fbbf241a;color:#fbbf24}.status-title{font-size:22px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5);margin:0 0 12px}.status-message{font-size:14px;color:var(--lokotro-text-secondary, rgba(242, 240, 213, .7));margin:0 0 24px;line-height:1.5}.payment-info{background:#5a5e3933;border-radius:12px;padding:16px;margin-bottom:24px}.info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(242,240,213,.1)}.info-row:last-child{border-bottom:none}.info-label{color:var(--lokotro-text-secondary, rgba(242, 240, 213, .6));font-size:14px}.info-value{color:var(--lokotro-text-primary, #F2F0D5);font-size:14px;font-weight:500}.polling-indicator{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--lokotro-text-secondary, rgba(242, 240, 213, .5))}.pulse{width:8px;height:8px;background:var(--lokotro-primary, #3BFBDA);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LokotroLoadingComponent, selector: "lokotro-loading", inputs: ["message"] }, { kind: "component", type: LokotroResultComponent, selector: "lokotro-result", inputs: ["type", "title", "message", "amount", "currency", "transactionId", "primaryActionLabel", "secondaryActionLabel"], outputs: ["primaryAction", "secondaryAction"] }, { kind: "component", type: LokotroProcessingComponent, selector: "lokotro-processing", inputs: ["type", "message"] }, { kind: "component", type: LokotroOtpVerificationComponent, selector: "lokotro-otp-verification", inputs: ["transactionId", "otpDestination", "otpLength"], outputs: ["otpVerified", "resendOtp", "cancel"] }] }); }
+  `, isInline: true, styles: [".lokotro-payment-status-container{min-height:300px;display:flex;flex-direction:column;background:var(--lokotro-background, #1C2621);border-radius:16px;border:1px solid var(--lokotro-border, rgba(59, 251, 218, .1));overflow:hidden;font-family:var(--lokotro-font-family, \"Comfortaa\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.lokotro-status-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--lokotro-surface, #2A3832);border-bottom:1px solid var(--lokotro-border, rgba(59, 251, 218, .1))}.lokotro-status-title{font-size:18px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5);margin:0}.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-primary, #F2F0D5);border-radius:8px;transition:background-color .2s}.lokotro-close-btn:hover{background:#ffffff1a}.lokotro-status-content{flex:1;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center}.status-section{text-align:center;width:100%;max-width:400px}.status-icon{width:80px;height:80px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;border-radius:50%}.pending-icon{background:#fbbf241a;color:#fbbf24}.status-title{font-size:22px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5);margin:0 0 12px}.status-message{font-size:14px;color:var(--lokotro-text-secondary, rgba(242, 240, 213, .7));margin:0 0 24px;line-height:1.5}.payment-info{background:#5a5e3933;border-radius:12px;padding:16px;margin-bottom:24px}.info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(242,240,213,.1)}.info-row:last-child{border-bottom:none}.info-label{color:var(--lokotro-text-secondary, rgba(242, 240, 213, .6));font-size:14px}.info-value{color:var(--lokotro-text-primary, #F2F0D5);font-size:14px;font-weight:500}.polling-indicator{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--lokotro-text-secondary, rgba(242, 240, 213, .5))}.pulse{width:8px;height:8px;background:var(--lokotro-primary, #3BFBDA);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LokotroLoadingComponent, selector: "lokotro-loading", inputs: ["message"] }, { kind: "component", type: LokotroResultComponent, selector: "lokotro-result", inputs: ["type", "title", "message", "amount", "currency", "transactionId", "primaryActionLabel", "secondaryActionLabel"], outputs: ["primaryAction", "secondaryAction"] }, { kind: "component", type: LokotroProcessingComponent, selector: "lokotro-processing", inputs: ["type", "message"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LokotroPaymentStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lokotro-payment-status', standalone: true, imports: [CommonModule, LokotroLoadingComponent, LokotroResultComponent, LokotroProcessingComponent, LokotroOtpVerificationComponent], template: `
+            args: [{ selector: 'lokotro-payment-status', standalone: true, imports: [CommonModule, LokotroLoadingComponent, LokotroResultComponent, LokotroProcessingComponent], template: `
     <div class="lokotro-payment-status-container">
       <!-- Header -->
       <div class="lokotro-status-header" *ngIf="showHeader">
@@ -5297,17 +4634,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           [message]="localization.translate('paymentProcessing')">
         </lokotro-processing>
 
-        <!-- OTP Verification State -->
-        <lokotro-otp-verification
-          *ngIf="currentScreen === 'otp'"
-          [transactionId]="statusConfig?.paymentId"
-          [otpDestination]="otpDestination"
-          [otpLength]="6"
-          (otpVerified)="onOtpVerified($event)"
-          (resendOtp)="onResendOtp()"
-          (cancel)="onOtpCancel()">
-        </lokotro-otp-verification>
-
         <!-- Success State -->
         <lokotro-result
           *ngIf="currentScreen === 'success'"
@@ -5383,5 +4709,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LOKOTRO_ENV_CONFIG, LOKOTRO_PAY_CONFIG, LokotroBankTransferFormComponent, LokotroCountryService, LokotroCountryUtils, LokotroHttpClientService, LokotroLoadingComponent, LokotroLocalizationService, LokotroMobileMoneyPhoneInputComponent, LokotroOtpVerificationComponent, LokotroPayApiResponseCode, LokotroPayApiResponseCodeInfo, LokotroPayChannel, LokotroPayChannelInfo, LokotroPayCheckoutComponent, LokotroPayColors, LokotroPayEnv, LokotroPayFillingInfo, LokotroPayLanguage, LokotroPayLanguageInfo, LokotroPayModule, LokotroPayResultScreen, LokotroPayScreenNavigation, LokotroPayScreenNavigationInfo, LokotroPaymentFormComponent, LokotroPaymentMethodSelectionComponent, LokotroPaymentService, LokotroPaymentStatus, LokotroPaymentStatusComponent, LokotroProcessingComponent, LokotroResultComponent };
+export { LOKOTRO_ENV_CONFIG, LOKOTRO_PAY_CONFIG, LokotroHttpClientService, LokotroLoadingComponent, LokotroLocalizationService, LokotroOtpVerificationComponent, LokotroPayApiResponseCode, LokotroPayApiResponseCodeInfo, LokotroPayChannel, LokotroPayChannelInfo, LokotroPayCheckoutComponent, LokotroPayColors, LokotroPayEnv, LokotroPayFillingInfo, LokotroPayLanguage, LokotroPayLanguageInfo, LokotroPayModule, LokotroPayResultScreen, LokotroPayScreenNavigation, LokotroPayScreenNavigationInfo, LokotroPaymentFormComponent, LokotroPaymentMethodSelectionComponent, LokotroPaymentService, LokotroPaymentStatus, LokotroPaymentStatusComponent, LokotroProcessingComponent, LokotroResultComponent };
 //# sourceMappingURL=bloonio-lokotro-pay.mjs.map