@bloonio/lokotro-pay 1.5.1 → 1.6.0

package/fesm2022/bloonio-lokotro-pay.mjs

@@ -253,6 +253,7 @@ var LokotroPayScreenNavigation;
     LokotroPayScreenNavigation["MobileMoneyFormScreen"] = "mobilemoneyFormScreen";
     LokotroPayScreenNavigation["CardFormScreen"] = "cardFormScreen";
     LokotroPayScreenNavigation["BankTransferFormScreen"] = "bankTransferFormScreen";
+    LokotroPayScreenNavigation["BankTransferOfferScreen"] = "bankTransferOfferScreen";
     LokotroPayScreenNavigation["FlashFormScreen"] = "flashFormScreen";
     LokotroPayScreenNavigation["PaymentConfirmationScreen"] = "paymentConfirmationScreen";
     LokotroPayScreenNavigation["ProcessingScreen"] = "processingScreen";
@@ -275,6 +276,7 @@ const LokotroPayScreenNavigationInfo = {
     [LokotroPayScreenNavigation.MobileMoneyFormScreen]: 'Mobile Money Form',
     [LokotroPayScreenNavigation.CardFormScreen]: 'Card Form',
     [LokotroPayScreenNavigation.BankTransferFormScreen]: 'Bank Transfer Form',
+    [LokotroPayScreenNavigation.BankTransferOfferScreen]: 'Bank Transfer Offer',
     [LokotroPayScreenNavigation.FlashFormScreen]: 'Flash Form',
     [LokotroPayScreenNavigation.PaymentConfirmationScreen]: 'Payment Confirmation',
     [LokotroPayScreenNavigation.ProcessingScreen]: 'Processing',
@@ -629,6 +631,10 @@ const EN_TRANSLATIONS = {
     accountLabel: 'Account Label',
     bankTransferProofInstructions: 'A payment link will be sent to your email to upload the proof of transfer.',
     confirmBankTransfer: 'Confirm Transfer',
+    bankTransferSwitchTitle: 'Payment method unavailable',
+    bankTransferSwitchMessage: "This amount isn't available for the selected payment method. Would you like to continue with a bank transfer instead?",
+    bankTransferSwitchConfirm: 'Continue with bank transfer',
+    bankTransferSwitchDecline: 'Choose another method',
     // Auto-redirect countdown
     redirectingIn: 'Redirecting in {seconds}s',
     tapToCancel: 'Tap to cancel'
@@ -737,6 +743,10 @@ const FR_TRANSLATIONS = {
     accountLabel: 'Libellé du compte',
     bankTransferProofInstructions: 'Un lien de paiement sera envoyé à votre adresse e-mail pour télécharger la preuve de virement.',
     confirmBankTransfer: 'Confirmer le virement',
+    bankTransferSwitchTitle: 'Moyen de paiement indisponible',
+    bankTransferSwitchMessage: "Ce montant n'est pas disponible pour le moyen de paiement choisi. Souhaitez-vous continuer avec un virement bancaire ?",
+    bankTransferSwitchConfirm: 'Continuer avec un virement',
+    bankTransferSwitchDecline: 'Choisir un autre moyen',
     // Auto-redirect countdown
     redirectingIn: 'Redirection dans {seconds}s',
     tapToCancel: 'Appuyez pour annuler'
@@ -845,6 +855,10 @@ const ES_TRANSLATIONS = {
     accountLabel: 'Etiqueta de la cuenta',
     bankTransferProofInstructions: 'Se enviará un enlace de pago a su correo electrónico para cargar el comprobante de transferencia.',
     confirmBankTransfer: 'Confirmar transferencia',
+    bankTransferSwitchTitle: 'Método de pago no disponible',
+    bankTransferSwitchMessage: 'Este importe no está disponible para el método de pago seleccionado. ¿Desea continuar con una transferencia bancaria?',
+    bankTransferSwitchConfirm: 'Continuar con transferencia',
+    bankTransferSwitchDecline: 'Elegir otro método',
     // Auto-redirect countdown
     redirectingIn: 'Redirigiendo en {seconds}s',
     tapToCancel: 'Toque para cancelar'
@@ -2692,1568 +2706,2053 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 /**
- * Lokotro Pay - OTP Verification Component
+ * Lokotro Pay - Feature Flags
+ *
+ * Compile-time switches for capabilities that are partially wired into the SDK
+ * but not yet ready to expose to end users. Flip a flag to `true` once the
+ * feature is implemented end-to-end.
  */
-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;
+const LOKOTRO_PAY_FEATURE_FLAGS = {
+    /**
+     * Native wallet payments — Google Pay and Apple Pay.
+     *
+     * The models and method-flag plumbing already understand these methods, but
+     * the native tokenisation flows are not implemented end-to-end yet. While
+     * this is `false` the SDK hides Google Pay / Apple Pay from the
+     * payment-method selection UI so they can never be shown or selected. Set to
+     * `true` once the native integrations are complete.
+     */
+    nativeWalletsEnabled: false,
+};
+/**
+ * Whether a payment method is a Google Pay / Apple Pay native wallet method.
+ *
+ * Matches the provider flag as well as the raw name / id / channel strings, so
+ * detection holds even when the backend channel does not map onto the enum.
+ */
+function isNativeWalletMethod(method) {
+    if (method.flag === 'google_pay' || method.flag === 'apple_pay') {
+        return true;
     }
-    ngOnInit() {
-        this.otpDigits = new Array(this.otpLength).fill('');
-        this.startResendTimer();
+    const looksNative = (value) => {
+        const key = (value ?? '').toLowerCase().replace(/[^a-z]/g, '');
+        return key.includes('googlepay') || key.includes('applepay');
+    };
+    return (looksNative(method.name) ||
+        looksNative(method.displayName) ||
+        looksNative(method.id) ||
+        looksNative(method.channel));
+}
+/**
+ * Returns the payment methods that should be visible to the user, dropping any
+ * hidden behind a disabled feature flag (currently Google / Apple Pay). The
+ * list is returned unchanged once the relevant flag is enabled.
+ */
+function visiblePaymentMethods(methods) {
+    if (LOKOTRO_PAY_FEATURE_FLAGS.nativeWalletsEnabled) {
+        return methods;
     }
-    ngOnDestroy() {
-        if (this.timerInterval) {
-            clearInterval(this.timerInterval);
-        }
+    return methods.filter((method) => !isNativeWalletMethod(method));
+}
+
+/**
+ * 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 {
+    static { this.MOBILE_MONEY_POLL_INTERVAL = 5000; }
+    static { this.MOBILE_MONEY_MAX_ATTEMPTS = 60; }
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.stateSubject = new BehaviorSubject(initialState);
+        this.state$ = this.stateSubject.asObservable();
+        this.mobileMoneyPollingAttempts = 0;
     }
-    get isOtpComplete() {
-        return this.otpDigits.every(digit => digit !== '');
+    /**
+     * Get current state
+     */
+    get currentState() {
+        return this.stateSubject.value;
     }
-    get otpValue() {
-        return this.otpDigits.join('');
+    /**
+     * Update state
+     */
+    updateState(partialState) {
+        this.stateSubject.next({
+            ...this.currentState,
+            ...partialState
+        });
     }
-    startResendTimer() {
-        this.resendTimer = 60;
-        this.timerInterval = setInterval(() => {
-            this.resendTimer--;
-            if (this.resendTimer <= 0) {
-                clearInterval(this.timerInterval);
-            }
-        }, 1000);
+    /**
+     * Reset state to initial
+     */
+    resetState() {
+        this.stopMobileMoneyPolling();
+        this.currentPaymentBody = undefined;
+        this.stateSubject.next(initialState);
     }
-    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] = '';
-        }
+    /**
+     * Set app-key for authentication
+     */
+    setAppKey(appKey) {
+        this.httpClient.setAppKey(appKey);
     }
-    onOtpKeydown(event, index) {
-        if (event.key === 'Backspace' && !this.otpDigits[index] && index > 0) {
-            const inputs = document.querySelectorAll('.lokotro-otp-input');
-            inputs[index - 1]?.focus();
-        }
+    /**
+     * Set accept language
+     */
+    setAcceptLanguage(language) {
+        this.httpClient.setAcceptLanguage(language);
     }
-    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];
+    /**
+     * Step 1: Create payment transaction
+     * POST /payments/collect
+     */
+    createPayment(paymentBody) {
+        this.currentPaymentBody = paymentBody;
+        this.updateState({ isLoading: true });
+        const requestData = this.convertPaymentBodyToRequest(paymentBody);
+        // PR-1.2 / CRIT-1: previous `console.log(requestData)` shipped PAN, CVV,
+        // wallet PIN, flash PIN, and full PII to the browser console on every
+        // checkout. Removed.
+        return this.httpClient.post(LokotroPayEnv.endpoints.collect, requestData).pipe(switchMap(response => {
+            // PR-1.2: response contains transaction IDs and (sometimes) redirect
+            // URLs that are sensitive. Don't log it.
+            if (!response.isSuccess || !response.data) {
+                this.updateState({
+                    isLoading: false,
+                    error: {
+                        message: response.message || 'Failed to create payment',
+                        title: 'Payment Creation Failed',
+                        errorCode: response.apiResponseCode,
+                        timestamp: new Date()
+                    },
+                    currentScreen: LokotroPayScreenNavigation.ErrorScreen
+                });
+                return of(response);
             }
-            const inputs = document.querySelectorAll('.lokotro-otp-input');
-            inputs.forEach((input, i) => {
-                input.value = this.otpDigits[i] || '';
+            return this.resolveCollectResponse(this.unwrapPayload(response.data), paymentBody).pipe(map(() => response));
+        }), catchError(error => {
+            this.updateState({
+                isLoading: false,
+                error: {
+                    message: error.message || 'Failed to create payment',
+                    title: 'Error',
+                    timestamp: new Date()
+                },
+                currentScreen: LokotroPayScreenNavigation.ErrorScreen
             });
-            // Focus last filled input or first empty
-            const focusIndex = Math.min(pastedData.length, this.otpLength - 1);
-            inputs[focusIndex]?.focus();
-        }
-    }
-    onVerify() {
-        if (this.isOtpComplete) {
-            this.otpVerified.emit(this.otpValue);
-        }
-    }
-    onResend() {
-        this.otpDigits = new Array(this.otpLength).fill('');
-        this.startResendTimer();
-        this.resendOtp.emit();
+            return throwError(() => error);
+        }));
     }
-    onCancelClick() {
-        this.cancel.emit();
+    /**
+     * Step 2: Get transaction details
+     * GET /payments/transaction/{transaction_id}
+     */
+    getTransactionDetails(transactionId) {
+        return this.httpClient.get(`${LokotroPayEnv.endpoints.transaction}/${transactionId}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroOtpVerificationComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroOtpVerificationComponent, isStandalone: true, selector: "lokotro-otp-verification", inputs: { transactionId: "transactionId", otpDestination: "otpDestination", otpLength: "otpLength" }, outputs: { otpVerified: "otpVerified", resendOtp: "resendOtp", cancel: "cancel" }, ngImport: i0, template: `
-    <div class="lokotro-otp-verification">
-      <div class="lokotro-otp-icon">
-        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-          <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-        </svg>
-      </div>
-    
-      <h3 class="lokotro-otp-title">{{ localization.translate('enterOtp') }}</h3>
-      @if (otpDestination) {
-        <p class="lokotro-otp-subtitle">
-          {{ localization.translate('otpSentTo') }} {{ otpDestination }}
-        </p>
-      }
-    
-      <div class="lokotro-otp-inputs">
-        @for (digit of otpDigits; track digit; let i = $index) {
-          <input
-            type="text"
-            class="lokotro-otp-input"
-            maxlength="1"
-            [value]="otpDigits[i]"
-            (input)="onOtpInput($event, i)"
-            (keydown)="onOtpKeydown($event, i)"
-            (paste)="onOtpPaste($event)"
-            #otpInput>
-        }
-      </div>
-    
-      @if (resendTimer > 0) {
-        <div class="lokotro-otp-timer">
-          Resend OTP in {{ resendTimer }}s
-        </div>
-      }
-    
-      @if (resendTimer === 0) {
-        <button
-          class="lokotro-resend-btn"
-          (click)="onResend()">
-          {{ localization.translate('resendOtp') }}
-        </button>
-      }
-    
-      <div class="lokotro-form-actions">
-        <button type="button" class="lokotro-btn-secondary" (click)="onCancelClick()">
-          {{ localization.translate('cancel') }}
-        </button>
-        <button
-          type="button"
-          class="lokotro-btn-primary"
-          [disabled]="!isOtpComplete"
-          (click)="onVerify()">
-          {{ localization.translate('verifyOtp') }}
-        </button>
-      </div>
-    </div>
-    `, isInline: true, styles: [".lokotro-otp-verification{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 0}.lokotro-otp-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--lokotro-card, #3A4840);border-radius:50%;margin-bottom:24px;color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-title{font-size:24px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-otp-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-otp-inputs{display:flex;gap:12px;margin-bottom:24px}.lokotro-otp-input{width:50px;height:56px;text-align:center;font-size:24px;font-weight:600;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);transition:border-color .2s}.lokotro-otp-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-timer{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin-bottom:24px}.lokotro-resend-btn{background:none;border:none;color:var(--lokotro-accent, #3BFBDA);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:24px;text-decoration:underline}.lokotro-resend-btn:hover{opacity:.8}.lokotro-form-actions{display:flex;gap:12px;width:100%}.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)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroOtpVerificationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lokotro-otp-verification', standalone: true, imports: [FormsModule], template: `
-    <div class="lokotro-otp-verification">
-      <div class="lokotro-otp-icon">
-        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-          <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-        </svg>
-      </div>
-    
-      <h3 class="lokotro-otp-title">{{ localization.translate('enterOtp') }}</h3>
-      @if (otpDestination) {
-        <p class="lokotro-otp-subtitle">
-          {{ localization.translate('otpSentTo') }} {{ otpDestination }}
-        </p>
-      }
-    
-      <div class="lokotro-otp-inputs">
-        @for (digit of otpDigits; track digit; let i = $index) {
-          <input
-            type="text"
-            class="lokotro-otp-input"
-            maxlength="1"
-            [value]="otpDigits[i]"
-            (input)="onOtpInput($event, i)"
-            (keydown)="onOtpKeydown($event, i)"
-            (paste)="onOtpPaste($event)"
-            #otpInput>
-        }
-      </div>
-    
-      @if (resendTimer > 0) {
-        <div class="lokotro-otp-timer">
-          Resend OTP in {{ resendTimer }}s
-        </div>
-      }
-    
-      @if (resendTimer === 0) {
-        <button
-          class="lokotro-resend-btn"
-          (click)="onResend()">
-          {{ localization.translate('resendOtp') }}
-        </button>
-      }
-    
-      <div class="lokotro-form-actions">
-        <button type="button" class="lokotro-btn-secondary" (click)="onCancelClick()">
-          {{ localization.translate('cancel') }}
-        </button>
-        <button
-          type="button"
-          class="lokotro-btn-primary"
-          [disabled]="!isOtpComplete"
-          (click)="onVerify()">
-          {{ localization.translate('verifyOtp') }}
-        </button>
-      </div>
-    </div>
-    `, styles: [".lokotro-otp-verification{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 0}.lokotro-otp-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--lokotro-card, #3A4840);border-radius:50%;margin-bottom:24px;color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-title{font-size:24px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-otp-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-otp-inputs{display:flex;gap:12px;margin-bottom:24px}.lokotro-otp-input{width:50px;height:56px;text-align:center;font-size:24px;font-weight:600;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);transition:border-color .2s}.lokotro-otp-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-timer{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin-bottom:24px}.lokotro-resend-btn{background:none;border:none;color:var(--lokotro-accent, #3BFBDA);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:24px;text-decoration:underline}.lokotro-resend-btn:hover{opacity:.8}.lokotro-form-actions{display:flex;gap:12px;width:100%}.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)}\n"] }]
-        }], ctorParameters: () => [{ type: LokotroLocalizationService }], propDecorators: { transactionId: [{
-                type: Input
-            }], otpDestination: [{
-                type: Input
-            }], otpLength: [{
-                type: Input
-            }], otpVerified: [{
-                type: Output
-            }], resendOtp: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }] } });
-
-/**
- * Lokotro Pay - Processing Component
- */
-class LokotroProcessingComponent {
-    constructor(localization) {
-        this.localization = localization;
-        this.type = 'default';
-        this.currentStep = 1;
-        // Simulate step progression for mobile money
-        if (this.type === 'mobileMoney') {
-            setTimeout(() => this.currentStep = 2, 3000);
-            setTimeout(() => this.currentStep = 3, 6000);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroProcessingComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroProcessingComponent, isStandalone: true, selector: "lokotro-processing", inputs: { type: "type", message: "message" }, ngImport: i0, template: `
-    <div class="lokotro-processing">
-      <div class="lokotro-processing-spinner">
-        <div class="lokotro-spinner-ring"></div>
-        <div class="lokotro-spinner-ring"></div>
-        <div class="lokotro-spinner-ring"></div>
-      </div>
-    
-      <h3 class="lokotro-processing-title">{{ message || localization.translate('processing') }}</h3>
-    
-      @if (type === 'mobileMoney') {
-        <p class="lokotro-processing-subtitle">
-          Please confirm the payment on your mobile device
-        </p>
-      }
-    
-      @if (type === 'mobileMoney') {
-        <div class="lokotro-processing-steps">
-          <div class="lokotro-step" [class.active]="currentStep >= 1">
-            <div class="lokotro-step-icon">📱</div>
-            <span>Check your phone</span>
-          </div>
-          <div class="lokotro-step" [class.active]="currentStep >= 2">
-            <div class="lokotro-step-icon">🔐</div>
-            <span>Enter your PIN</span>
-          </div>
-          <div class="lokotro-step" [class.active]="currentStep >= 3">
-            <div class="lokotro-step-icon">✅</div>
-            <span>Confirm payment</span>
-          </div>
-        </div>
-      }
-    </div>
-    `, isInline: true, styles: [".lokotro-processing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;min-height:300px}.lokotro-processing-spinner{position:relative;width:80px;height:80px;margin-bottom:32px}.lokotro-spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-radius:50%;animation:lokotro-spin 1.5s linear infinite}.lokotro-spinner-ring:nth-child(1){border-top-color:var(--lokotro-accent, #3BFBDA);animation-delay:0s}.lokotro-spinner-ring:nth-child(2){border-right-color:var(--lokotro-primary, #5A5E39);animation-delay:.15s;width:70%;height:70%;top:15%;left:15%}.lokotro-spinner-ring:nth-child(3){border-bottom-color:var(--lokotro-secondary, #6E7346);animation-delay:.3s;width:50%;height:50%;top:25%;left:25%}@keyframes lokotro-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lokotro-processing-title{font-size:20px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-processing-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-processing-steps{display:flex;flex-direction:column;gap:16px;width:100%;max-width:280px}.lokotro-step{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--lokotro-card, #3A4840);border-radius:12px;opacity:.5;transition:opacity .3s}.lokotro-step.active{opacity:1}.lokotro-step-icon{font-size:20px}.lokotro-step span{font-size:14px;color:var(--lokotro-text-primary, #F2F0D5)}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroProcessingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lokotro-processing', standalone: true, imports: [], template: `
-    <div class="lokotro-processing">
-      <div class="lokotro-processing-spinner">
-        <div class="lokotro-spinner-ring"></div>
-        <div class="lokotro-spinner-ring"></div>
-        <div class="lokotro-spinner-ring"></div>
-      </div>
-    
-      <h3 class="lokotro-processing-title">{{ message || localization.translate('processing') }}</h3>
-    
-      @if (type === 'mobileMoney') {
-        <p class="lokotro-processing-subtitle">
-          Please confirm the payment on your mobile device
-        </p>
-      }
-    
-      @if (type === 'mobileMoney') {
-        <div class="lokotro-processing-steps">
-          <div class="lokotro-step" [class.active]="currentStep >= 1">
-            <div class="lokotro-step-icon">📱</div>
-            <span>Check your phone</span>
-          </div>
-          <div class="lokotro-step" [class.active]="currentStep >= 2">
-            <div class="lokotro-step-icon">🔐</div>
-            <span>Enter your PIN</span>
-          </div>
-          <div class="lokotro-step" [class.active]="currentStep >= 3">
-            <div class="lokotro-step-icon">✅</div>
-            <span>Confirm payment</span>
-          </div>
-        </div>
-      }
-    </div>
-    `, styles: [".lokotro-processing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;min-height:300px}.lokotro-processing-spinner{position:relative;width:80px;height:80px;margin-bottom:32px}.lokotro-spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-radius:50%;animation:lokotro-spin 1.5s linear infinite}.lokotro-spinner-ring:nth-child(1){border-top-color:var(--lokotro-accent, #3BFBDA);animation-delay:0s}.lokotro-spinner-ring:nth-child(2){border-right-color:var(--lokotro-primary, #5A5E39);animation-delay:.15s;width:70%;height:70%;top:15%;left:15%}.lokotro-spinner-ring:nth-child(3){border-bottom-color:var(--lokotro-secondary, #6E7346);animation-delay:.3s;width:50%;height:50%;top:25%;left:25%}@keyframes lokotro-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lokotro-processing-title{font-size:20px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-processing-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-processing-steps{display:flex;flex-direction:column;gap:16px;width:100%;max-width:280px}.lokotro-step{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--lokotro-card, #3A4840);border-radius:12px;opacity:.5;transition:opacity .3s}.lokotro-step.active{opacity:1}.lokotro-step-icon{font-size:20px}.lokotro-step span{font-size:14px;color:var(--lokotro-text-primary, #F2F0D5)}\n"] }]
-        }], ctorParameters: () => [{ type: LokotroLocalizationService }], propDecorators: { type: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }] } });
-
-/**
- * Lokotro Pay - Result Component
- * Success, Error, Warning, Info screens
- *
- * Designed for financial UX: clean white surface, prominent amount focal
- * on success, filled status badge, restrained transaction-detail panel.
- */
-class LokotroResultComponent {
-    constructor(localization) {
-        this.localization = localization;
-        this.type = 'success';
-        this.title = '';
-        /** Auto-redirect duration in seconds. If > 0, will auto-call onAutoRedirect after countdown. */
-        this.autoRedirectSeconds = 0;
-        this.primaryAction = new EventEmitter();
-        this.secondaryAction = new EventEmitter();
-        /** Emitted when auto-redirect triggers after countdown completes. */
-        this.autoRedirect = new EventEmitter();
-        // Countdown state
-        this.countdownSeconds = 0;
-        this.isCountdownCancelled = false;
-    }
-    ngOnInit() {
-        this.startAutoRedirectCountdown();
-    }
-    ngOnDestroy() {
-        this.clearCountdown();
-    }
-    startAutoRedirectCountdown() {
-        if (this.autoRedirectSeconds <= 0)
-            return;
-        this.countdownSeconds = this.autoRedirectSeconds;
-        this.countdownInterval = setInterval(() => {
-            if (this.isCountdownCancelled) {
-                this.clearCountdown();
-                return;
-            }
-            this.countdownSeconds--;
-            if (this.countdownSeconds <= 0) {
-                this.clearCountdown();
-                this.triggerAutoRedirect();
+    /**
+     * 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 responseData = this.unwrapPayload(response.data);
+                const submitResponse = this.parseSubmitResponse(responseData);
+                if (submitResponse.requiresOtp) {
+                    this.updateState({
+                        isLoading: false,
+                        transactionId: submitResponse.transactionId || this.resolvePaymentId(request),
+                        currentScreen: LokotroPayScreenNavigation.EWalletOtpScreen
+                    });
+                    return;
+                }
+                if (submitResponse.redirectUrl) {
+                    this.updateState({
+                        isLoading: false,
+                        transactionId: submitResponse.transactionId || this.resolvePaymentId(request)
+                    });
+                    // PR-1.2 / Angular HIGH-1: validate redirect URL against allow-list
+                    // before handing the tab over. Server-side allow-list (PR-2.0) is
+                    // the real defense; this is defense-in-depth on the client.
+                    this.redirectIfAllowed(submitResponse.redirectUrl, 'submit-response');
+                    return;
+                }
+                if (submitResponse.status === LokotroPaymentStatus.PendingBankProofUpload) {
+                    this.handlePaymentSuccess(responseData, LokotroPaymentStatus.PendingBankProofUpload, 'Upload Proof Required');
+                    return;
+                }
+                if (LokotroPaymentStatusInfo.isSuccess(submitResponse.status)) {
+                    this.handlePaymentSuccess(responseData);
+                    return;
+                }
+                if (LokotroPaymentStatusInfo.isPending(submitResponse.status)) {
+                    const txId = submitResponse.transactionId || this.resolvePaymentId(request);
+                    this.updateState({
+                        isLoading: false,
+                        transactionId: txId,
+                        currentScreen: LokotroPayScreenNavigation.MobileMoneyProcessingScreen
+                    });
+                    this.startMobileMoneyPolling(txId);
+                    return;
+                }
+                this.handlePaymentFailure(this.getString(responseData['message']) || response.message, response.apiResponseCode);
             }
-        }, 1000);
-    }
-    cancelCountdown() {
-        if (this.countdownInterval) {
-            this.isCountdownCancelled = true;
-            this.clearCountdown();
-        }
-    }
-    clearCountdown() {
-        if (this.countdownInterval) {
-            clearInterval(this.countdownInterval);
-            this.countdownInterval = undefined;
-        }
-    }
-    triggerAutoRedirect() {
-        if (this.isCountdownCancelled)
-            return;
-        this.autoRedirect.emit();
-    }
-    getCountdownProgress() {
-        if (this.autoRedirectSeconds <= 0)
-            return 0;
-        return (this.countdownSeconds / this.autoRedirectSeconds) * 100;
+            else {
+                this.handlePaymentFailure(response.message, response.apiResponseCode);
+            }
+        }), catchError(error => {
+            this.handlePaymentFailure(error.message);
+            return throwError(() => error);
+        }));
     }
-    formatNumber(amount) {
-        return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount);
+    /**
+     * 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, {
+            payment_id: request.paymentId || request.transactionId || this.currentState.transactionId,
+            otp_code: request.otpCode || request.otp
+        }).pipe(tap(response => {
+            if (response.isSuccess && response.data) {
+                const responseData = this.unwrapPayload(response.data);
+                const status = LokotroPaymentStatusInfo.fromString(this.getString(responseData['status']));
+                if (LokotroPaymentStatusInfo.isSuccess(status)) {
+                    this.handlePaymentSuccess(responseData);
+                }
+                else {
+                    this.handlePaymentFailure(this.getString(responseData['message']) || 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()
+                    },
+                    currentScreen: LokotroPayScreenNavigation.ErrorScreen
+                });
+            }
+        }), catchError(error => {
+            this.updateState({
+                isLoading: false,
+                error: {
+                    message: error.message || 'OTP verification failed',
+                    title: 'Error',
+                    timestamp: new Date()
+                },
+                currentScreen: LokotroPayScreenNavigation.ErrorScreen
+            });
+            return throwError(() => error);
+        }));
     }
-    formatAmount(amount, currency) {
-        return new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: currency || 'USD',
-            minimumFractionDigits: 2
-        }).format(amount);
+    /**
+     * Step 5: Resend OTP (if needed)
+     * POST /payments/resend-otp
+     */
+    resendOtp(request) {
+        return this.httpClient.post(LokotroPayEnv.endpoints.resendOtp, {
+            payment_id: request.paymentId || request.transactionId || this.currentState.transactionId
+        });
     }
-    onPrimaryClick() {
-        this.cancelCountdown();
-        this.primaryAction.emit();
+    /**
+     * Select payment method
+     */
+    selectPaymentMethod(method) {
+        this.updateState({
+            selectedPaymentMethod: method,
+            currentScreen: this.getFormScreenForChannel(method.channel)
+        });
     }
-    onSecondaryClick() {
-        this.cancelCountdown();
-        this.secondaryAction.emit();
+    /**
+     * Navigate to screen
+     */
+    navigateToScreen(screen) {
+        this.updateState({ currentScreen: screen });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroResultComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroResultComponent, isStandalone: true, selector: "lokotro-result", inputs: { type: "type", title: "title", message: "message", amount: "amount", currency: "currency", transactionId: "transactionId", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", autoRedirectSeconds: "autoRedirectSeconds" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", autoRedirect: "autoRedirect" }, ngImport: i0, template: `
-    <div class="lokotro-result" [class]="'lokotro-result-' + type">
-      <div class="lokotro-result-card">
-        <!-- Status Badge (filled circle with icon) -->
-        <div class="lokotro-status-badge" [class]="'lokotro-status-' + type">
-          @if (type === 'success') {
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-              <polyline points="5 12 10 17 19 8"/>
-            </svg>
-          }
-          @if (type === 'error') {
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18"/>
-              <line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-          }
-          @if (type === 'warning') {
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="12" y1="8" x2="12" y2="13"/>
-              <line x1="12" y1="17" x2="12.01" y2="17"/>
-            </svg>
-          }
-          @if (type === 'info') {
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="12" y1="11" x2="12" y2="16"/>
-              <line x1="12" y1="7" x2="12.01" y2="7"/>
-            </svg>
-          }
-        </div>
-
-        <!-- Amount focal (success only, when amount provided) -->
-        @if (type === 'success' && amount !== undefined && amount !== null) {
-          <div class="lokotro-amount-focal">
-            <span class="lokotro-amount-currency">{{ (currency || '').toUpperCase() }}</span>
-            <span class="lokotro-amount-value">{{ formatNumber(amount) }}</span>
-          </div>
-        }
-
-        <!-- Title -->
-        <h2 class="lokotro-result-title">{{ title }}</h2>
-
-        <!-- Message -->
-        @if (message) {
-          <p class="lokotro-result-message">{{ message }}</p>
-        }
-
-        <!-- Countdown Indicator -->
-        @if (autoRedirectSeconds > 0 && countdownSeconds > 0 && !isCountdownCancelled) {
-          <button type="button" class="lokotro-countdown-indicator" (click)="cancelCountdown()">
-            <svg viewBox="0 0 36 36" class="lokotro-countdown-circle">
-              <path class="lokotro-countdown-bg"
-                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
-              <path class="lokotro-countdown-fill" [class]="'lokotro-countdown-' + type"
-                [attr.stroke-dasharray]="getCountdownProgress() + ', 100'"
-                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
-            </svg>
-            <span class="lokotro-countdown-text">
-              {{ localization.translate('redirectingIn', { seconds: countdownSeconds }) }}
-            </span>
-            <svg class="lokotro-countdown-cancel" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M18 6L6 18M6 6l12 12"/>
-            </svg>
-          </button>
-        }
-
-        <!-- Transaction Details -->
-        @if (type === 'success' && transactionId) {
-          <div class="lokotro-result-details">
-            <div class="lokotro-detail-row">
-              <span class="lokotro-detail-label">Transaction ID</span>
-              <span class="lokotro-detail-value lokotro-mono">{{ transactionId }}</span>
-            </div>
-          </div>
-        }
-      </div>
-
-      <!-- Actions -->
-      @if (primaryActionLabel || secondaryActionLabel) {
-        <div class="lokotro-result-actions">
-          @if (primaryActionLabel) {
-            <button type="button" class="lokotro-btn-primary" (click)="onPrimaryClick()">
-              {{ primaryActionLabel }}
-            </button>
-          }
-          @if (secondaryActionLabel) {
-            <button type="button" class="lokotro-btn-secondary" (click)="onSecondaryClick()">
-              {{ secondaryActionLabel }}
-            </button>
-          }
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [".lokotro-result{display:flex;flex-direction:column;align-items:stretch;max-width:420px;margin:0 auto;padding:24px 16px;gap:20px}.lokotro-result-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:var(--lokotro-card, #FFFFFF);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:20px;box-shadow:0 1px 3px var(--lokotro-shadow-light, rgba(15, 23, 42, .04)),0 8px 24px var(--lokotro-shadow-light, rgba(15, 23, 42, .04))}.lokotro-status-badge{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:lokotro-pop .5s cubic-bezier(.34,1.56,.64,1)}.lokotro-status-badge svg{width:36px;height:36px;color:#fff}.lokotro-status-success{background:var(--lokotro-success, #16A34A);box-shadow:0 0 0 8px #16a34a1f,0 8px 20px #16a34a40}.lokotro-status-error{background:var(--lokotro-error, #DC2626);box-shadow:0 0 0 8px #dc26261f,0 8px 20px #dc262640}.lokotro-status-warning{background:var(--lokotro-warning, #D97706);box-shadow:0 0 0 8px #d977061f,0 8px 20px #d9770640}.lokotro-status-info{background:var(--lokotro-info, #2563EB);box-shadow:0 0 0 8px #2563eb1f,0 8px 20px #2563eb40}@keyframes lokotro-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.lokotro-amount-focal{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:16px}.lokotro-amount-currency{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--lokotro-text-secondary, #64748B)}.lokotro-amount-value{font-size:40px;font-weight:700;line-height:1;color:var(--lokotro-text-primary, #0F172A);font-variant-numeric:tabular-nums}.lokotro-result-title{font-size:20px;font-weight:600;margin:0 0 6px;color:var(--lokotro-text-primary, #0F172A)}.lokotro-result-message{font-size:14px;color:var(--lokotro-text-secondary, #64748B);margin:0;line-height:1.5;max-width:320px}.lokotro-result-details{width:100%;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:12px;padding:12px 16px;margin-top:24px}.lokotro-detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}.lokotro-detail-row:not(:last-child){border-bottom:1px solid var(--lokotro-divider, #F1F5F9)}.lokotro-detail-label{font-size:13px;color:var(--lokotro-text-secondary, #64748B)}.lokotro-detail-value{font-size:13px;font-weight:600;color:var(--lokotro-text-primary, #0F172A);text-align:right;overflow:hidden;text-overflow:ellipsis;max-width:200px;white-space:nowrap}.lokotro-mono{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,monospace;font-size:12px}.lokotro-result-actions{display:flex;flex-direction:column;gap:10px;width:100%}.lokotro-btn-primary,.lokotro-btn-secondary{width:100%;padding:14px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s ease;font-family:inherit}.lokotro-btn-primary{background:var(--lokotro-primary, #0F172A);color:#fff;border:none}.lokotro-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--lokotro-shadow-medium, rgba(15, 23, 42, .12))}.lokotro-btn-primary:active{transform:translateY(0)}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #0F172A);border:1.5px solid var(--lokotro-border, #E2E8F0)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #64748B);background:var(--lokotro-surface, #F7F8FA)}.lokotro-countdown-indicator{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:999px;cursor:pointer;margin-top:20px;transition:all .18s ease;color:var(--lokotro-text-secondary, #64748B);font-family:inherit}.lokotro-countdown-indicator:hover{background:var(--lokotro-card, #FFFFFF);border-color:var(--lokotro-text-tertiary, #64748B)}.lokotro-countdown-circle{width:14px;height:14px;transform:rotate(-90deg)}.lokotro-countdown-bg{fill:none;stroke:var(--lokotro-border, #E2E8F0);stroke-width:4}.lokotro-countdown-fill{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .3s ease}.lokotro-countdown-success{stroke:var(--lokotro-success, #16A34A)}.lokotro-countdown-error{stroke:var(--lokotro-error, #DC2626)}.lokotro-countdown-warning{stroke:var(--lokotro-warning, #D97706)}.lokotro-countdown-info{stroke:var(--lokotro-info, #2563EB)}.lokotro-countdown-text{font-size:12px;font-weight:500}.lokotro-countdown-cancel{color:inherit;opacity:.7}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroResultComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lokotro-result', standalone: true, imports: [], template: `
-    <div class="lokotro-result" [class]="'lokotro-result-' + type">
-      <div class="lokotro-result-card">
-        <!-- Status Badge (filled circle with icon) -->
-        <div class="lokotro-status-badge" [class]="'lokotro-status-' + type">
-          @if (type === 'success') {
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-              <polyline points="5 12 10 17 19 8"/>
-            </svg>
-          }
-          @if (type === 'error') {
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18"/>
-              <line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-          }
-          @if (type === 'warning') {
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="12" y1="8" x2="12" y2="13"/>
-              <line x1="12" y1="17" x2="12.01" y2="17"/>
-            </svg>
-          }
-          @if (type === 'info') {
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="12" y1="11" x2="12" y2="16"/>
-              <line x1="12" y1="7" x2="12.01" y2="7"/>
-            </svg>
-          }
-        </div>
-
-        <!-- Amount focal (success only, when amount provided) -->
-        @if (type === 'success' && amount !== undefined && amount !== null) {
-          <div class="lokotro-amount-focal">
-            <span class="lokotro-amount-currency">{{ (currency || '').toUpperCase() }}</span>
-            <span class="lokotro-amount-value">{{ formatNumber(amount) }}</span>
-          </div>
+    /**
+     * Start polling for mobile money payment status
+     */
+    startMobileMoneyPolling(transactionId) {
+        this.stopMobileMoneyPolling();
+        this.mobileMoneyPollingAttempts = 0;
+        // PR-1.2: removed console.log of transactionId — operational logging
+        // should be opt-in via merchant config, not on by default.
+        this.mobileMoneyPollingTimer = setInterval(() => {
+            this.mobileMoneyPollingAttempts++;
+            if (this.mobileMoneyPollingAttempts > LokotroPaymentService.MOBILE_MONEY_MAX_ATTEMPTS) {
+                this.stopMobileMoneyPolling();
+                this.handlePaymentFailure('Payment took too long. Please try again or contact support.');
+                return;
+            }
+            const endpoint = `${LokotroPayEnv.endpoints.mobileMoneyStatus}/${transactionId}`;
+            this.httpClient.get(endpoint).subscribe({
+                next: (response) => {
+                    if (!response.isSuccess || !response.data)
+                        return;
+                    const data = this.unwrapPayload(response.data);
+                    const status = this.getString(data['status']).toLowerCase();
+                    if (status === 'completed' || status === 'success' || status === 'approved') {
+                        this.stopMobileMoneyPolling();
+                        this.handlePaymentSuccess(data);
+                    }
+                    else if (status === 'failed' || status === 'error' || status === 'cancelled' || status === 'declined') {
+                        this.stopMobileMoneyPolling();
+                        this.handlePaymentFailure(this.getString(data['message']) || 'Payment failed or was declined');
+                    }
+                },
+                error: (_err) => {
+                    // PR-1.2: don't log full error object — may contain backend
+                    // response details that leak server internals to console.
+                }
+            });
+        }, LokotroPaymentService.MOBILE_MONEY_POLL_INTERVAL);
+    }
+    /**
+     * Stop mobile money status polling
+     */
+    stopMobileMoneyPolling() {
+        if (this.mobileMoneyPollingTimer) {
+            clearInterval(this.mobileMoneyPollingTimer);
+            this.mobileMoneyPollingTimer = undefined;
+            this.mobileMoneyPollingAttempts = 0;
         }
-
-        <!-- Title -->
-        <h2 class="lokotro-result-title">{{ title }}</h2>
-
-        <!-- Message -->
-        @if (message) {
-          <p class="lokotro-result-message">{{ message }}</p>
+    }
+    /**
+     * Validate a server-supplied redirect URL before handing the browser tab to
+     * it. Defense-in-depth for Angular HIGH-1 — server-side per-merchant
+     * allow-list (PR-2.0) is the real fix.
+     *
+     * Policy:
+     *   - Reject non-http(s) schemes (blocks `javascript:`, `data:`, `file:`,
+     *     `intent:`, custom schemes).
+     *   - Reject http:// in production.
+     *   - Reject malformed URLs.
+     *   - SSR safety: skip the redirect when window is unavailable.
+     */
+    redirectIfAllowed(url, _origin) {
+        if (typeof window === 'undefined') {
+            return;
         }
-
-        <!-- Countdown Indicator -->
-        @if (autoRedirectSeconds > 0 && countdownSeconds > 0 && !isCountdownCancelled) {
-          <button type="button" class="lokotro-countdown-indicator" (click)="cancelCountdown()">
-            <svg viewBox="0 0 36 36" class="lokotro-countdown-circle">
-              <path class="lokotro-countdown-bg"
-                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
-              <path class="lokotro-countdown-fill" [class]="'lokotro-countdown-' + type"
-                [attr.stroke-dasharray]="getCountdownProgress() + ', 100'"
-                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
-            </svg>
-            <span class="lokotro-countdown-text">
-              {{ localization.translate('redirectingIn', { seconds: countdownSeconds }) }}
-            </span>
-            <svg class="lokotro-countdown-cancel" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M18 6L6 18M6 6l12 12"/>
-            </svg>
-          </button>
+        if (!url || typeof url !== 'string') {
+            this.handlePaymentFailure('Invalid redirect URL');
+            return;
         }
-
-        <!-- Transaction Details -->
-        @if (type === 'success' && transactionId) {
-          <div class="lokotro-result-details">
-            <div class="lokotro-detail-row">
-              <span class="lokotro-detail-label">Transaction ID</span>
-              <span class="lokotro-detail-value lokotro-mono">{{ transactionId }}</span>
-            </div>
-          </div>
+        let parsed;
+        try {
+            parsed = new URL(url, window.location.href);
         }
-      </div>
-
-      <!-- Actions -->
-      @if (primaryActionLabel || secondaryActionLabel) {
-        <div class="lokotro-result-actions">
-          @if (primaryActionLabel) {
-            <button type="button" class="lokotro-btn-primary" (click)="onPrimaryClick()">
-              {{ primaryActionLabel }}
-            </button>
-          }
-          @if (secondaryActionLabel) {
-            <button type="button" class="lokotro-btn-secondary" (click)="onSecondaryClick()">
-              {{ secondaryActionLabel }}
-            </button>
-          }
-        </div>
-      }
-    </div>
-  `, styles: [".lokotro-result{display:flex;flex-direction:column;align-items:stretch;max-width:420px;margin:0 auto;padding:24px 16px;gap:20px}.lokotro-result-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:var(--lokotro-card, #FFFFFF);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:20px;box-shadow:0 1px 3px var(--lokotro-shadow-light, rgba(15, 23, 42, .04)),0 8px 24px var(--lokotro-shadow-light, rgba(15, 23, 42, .04))}.lokotro-status-badge{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:lokotro-pop .5s cubic-bezier(.34,1.56,.64,1)}.lokotro-status-badge svg{width:36px;height:36px;color:#fff}.lokotro-status-success{background:var(--lokotro-success, #16A34A);box-shadow:0 0 0 8px #16a34a1f,0 8px 20px #16a34a40}.lokotro-status-error{background:var(--lokotro-error, #DC2626);box-shadow:0 0 0 8px #dc26261f,0 8px 20px #dc262640}.lokotro-status-warning{background:var(--lokotro-warning, #D97706);box-shadow:0 0 0 8px #d977061f,0 8px 20px #d9770640}.lokotro-status-info{background:var(--lokotro-info, #2563EB);box-shadow:0 0 0 8px #2563eb1f,0 8px 20px #2563eb40}@keyframes lokotro-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.lokotro-amount-focal{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:16px}.lokotro-amount-currency{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--lokotro-text-secondary, #64748B)}.lokotro-amount-value{font-size:40px;font-weight:700;line-height:1;color:var(--lokotro-text-primary, #0F172A);font-variant-numeric:tabular-nums}.lokotro-result-title{font-size:20px;font-weight:600;margin:0 0 6px;color:var(--lokotro-text-primary, #0F172A)}.lokotro-result-message{font-size:14px;color:var(--lokotro-text-secondary, #64748B);margin:0;line-height:1.5;max-width:320px}.lokotro-result-details{width:100%;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:12px;padding:12px 16px;margin-top:24px}.lokotro-detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}.lokotro-detail-row:not(:last-child){border-bottom:1px solid var(--lokotro-divider, #F1F5F9)}.lokotro-detail-label{font-size:13px;color:var(--lokotro-text-secondary, #64748B)}.lokotro-detail-value{font-size:13px;font-weight:600;color:var(--lokotro-text-primary, #0F172A);text-align:right;overflow:hidden;text-overflow:ellipsis;max-width:200px;white-space:nowrap}.lokotro-mono{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,monospace;font-size:12px}.lokotro-result-actions{display:flex;flex-direction:column;gap:10px;width:100%}.lokotro-btn-primary,.lokotro-btn-secondary{width:100%;padding:14px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s ease;font-family:inherit}.lokotro-btn-primary{background:var(--lokotro-primary, #0F172A);color:#fff;border:none}.lokotro-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--lokotro-shadow-medium, rgba(15, 23, 42, .12))}.lokotro-btn-primary:active{transform:translateY(0)}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #0F172A);border:1.5px solid var(--lokotro-border, #E2E8F0)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #64748B);background:var(--lokotro-surface, #F7F8FA)}.lokotro-countdown-indicator{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:999px;cursor:pointer;margin-top:20px;transition:all .18s ease;color:var(--lokotro-text-secondary, #64748B);font-family:inherit}.lokotro-countdown-indicator:hover{background:var(--lokotro-card, #FFFFFF);border-color:var(--lokotro-text-tertiary, #64748B)}.lokotro-countdown-circle{width:14px;height:14px;transform:rotate(-90deg)}.lokotro-countdown-bg{fill:none;stroke:var(--lokotro-border, #E2E8F0);stroke-width:4}.lokotro-countdown-fill{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .3s ease}.lokotro-countdown-success{stroke:var(--lokotro-success, #16A34A)}.lokotro-countdown-error{stroke:var(--lokotro-error, #DC2626)}.lokotro-countdown-warning{stroke:var(--lokotro-warning, #D97706)}.lokotro-countdown-info{stroke:var(--lokotro-info, #2563EB)}.lokotro-countdown-text{font-size:12px;font-weight:500}.lokotro-countdown-cancel{color:inherit;opacity:.7}\n"] }]
-        }], ctorParameters: () => [{ type: LokotroLocalizationService }], propDecorators: { type: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], amount: [{
-                type: Input
-            }], currency: [{
-                type: Input
-            }], transactionId: [{
-                type: Input
-            }], primaryActionLabel: [{
-                type: Input
-            }], secondaryActionLabel: [{
-                type: Input
-            }], autoRedirectSeconds: [{
-                type: Input
-            }], primaryAction: [{
-                type: Output
-            }], secondaryAction: [{
-                type: Output
-            }], autoRedirect: [{
-                type: Output
-            }] } });
-
-/**
- * Lokotro Pay - Loading Component
- */
-class LokotroLoadingComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroLoadingComponent, isStandalone: true, selector: "lokotro-loading", inputs: { message: "message" }, ngImport: i0, 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>
-      @if (message) {
-        <p class="lokotro-loading-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"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroLoadingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lokotro-loading', standalone: true, imports: [], 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>
-      @if (message) {
-        <p class="lokotro-loading-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 - Feature Flags
- *
- * Compile-time switches for capabilities that are partially wired into the SDK
- * but not yet ready to expose to end users. Flip a flag to `true` once the
- * feature is implemented end-to-end.
- */
-const LOKOTRO_PAY_FEATURE_FLAGS = {
+        catch {
+            this.handlePaymentFailure('Untrusted redirect URL');
+            return;
+        }
+        if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:') {
+            this.handlePaymentFailure('Untrusted redirect scheme');
+            return;
+        }
+        const isProduction = LokotroPayEnv.environment === 'production';
+        if (isProduction && parsed.protocol !== 'https:') {
+            this.handlePaymentFailure('Insecure redirect rejected');
+            return;
+        }
+        window.location.href = parsed.toString();
+    }
     /**
-     * Native wallet payments — Google Pay and Apple Pay.
-     *
-     * The models and method-flag plumbing already understand these methods, but
-     * the native tokenisation flows are not implemented end-to-end yet. While
-     * this is `false` the SDK hides Google Pay / Apple Pay from the
-     * payment-method selection UI so they can never be shown or selected. Set to
-     * `true` once the native integrations are complete.
+     * Handle payment success
      */
-    nativeWalletsEnabled: false,
-};
-/**
- * Whether a payment method is a Google Pay / Apple Pay native wallet method.
- *
- * Matches the provider flag as well as the raw name / id / channel strings, so
- * detection holds even when the backend channel does not map onto the enum.
- */
-function isNativeWalletMethod(method) {
-    if (method.flag === 'google_pay' || method.flag === 'apple_pay') {
-        return true;
-    }
-    const looksNative = (value) => {
-        const key = (value ?? '').toLowerCase().replace(/[^a-z]/g, '');
-        return key.includes('googlepay') || key.includes('applepay');
-    };
-    return (looksNative(method.name) ||
-        looksNative(method.displayName) ||
-        looksNative(method.id) ||
-        looksNative(method.channel));
-}
-/**
- * Returns the payment methods that should be visible to the user, dropping any
- * hidden behind a disabled feature flag (currently Google / Apple Pay). The
- * list is returned unchanged once the relevant flag is enabled.
- */
-function visiblePaymentMethods(methods) {
-    if (LOKOTRO_PAY_FEATURE_FLAGS.nativeWalletsEnabled) {
-        return methods;
-    }
-    return methods.filter((method) => !isNativeWalletMethod(method));
-}
-
-/**
- * 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 {
-    static { this.MOBILE_MONEY_POLL_INTERVAL = 5000; }
-    static { this.MOBILE_MONEY_MAX_ATTEMPTS = 60; }
-    constructor(httpClient) {
-        this.httpClient = httpClient;
-        this.stateSubject = new BehaviorSubject(initialState);
-        this.state$ = this.stateSubject.asObservable();
-        this.mobileMoneyPollingAttempts = 0;
+    handlePaymentSuccess(data, paymentStatus = LokotroPaymentStatus.Approved, defaultTitle = 'Success') {
+        this.stopMobileMoneyPolling();
+        const transactionId = this.getString(data['transaction_id']) || this.getString(data['payment_id']);
+        const response = {
+            message: this.getString(data['message']) || 'Payment successful',
+            title: this.getString(data['title']) || defaultTitle,
+            customRef: this.getString(data['custom_ref']) || this.getString(data['customer_reference']),
+            amount: this.getNumber(data['amount']),
+            apiResponseCode: LokotroPayApiResponseCode.LOK000,
+            currency: this.getString(data['currency']) || this.getString(data['currency_str']),
+            paymentStatus,
+            systemRef: this.getString(data['system_reference']) || this.getString(data['system_ref']) || transactionId,
+            transactionId,
+            timestamp: new Date()
+        };
+        this.updateState({
+            isLoading: false,
+            response,
+            currentScreen: LokotroPayScreenNavigation.SuccessScreen
+        });
     }
     /**
-     * Get current state
+     * Handle payment failure
      */
-    get currentState() {
-        return this.stateSubject.value;
+    handlePaymentFailure(message, errorCode) {
+        this.stopMobileMoneyPolling();
+        this.updateState({
+            isLoading: false,
+            error: {
+                message: message || 'Payment failed',
+                title: 'Payment Failed',
+                errorCode,
+                timestamp: new Date()
+            },
+            currentScreen: LokotroPayScreenNavigation.ErrorScreen
+        });
     }
     /**
-     * Update state
+     * Resolve the collect response into the same flow the Flutter SDK uses.
      */
-    updateState(partialState) {
-        this.stateSubject.next({
-            ...this.currentState,
-            ...partialState
+    resolveCollectResponse(collectData, paymentBody) {
+        const paymentId = this.resolvePaymentId(collectData);
+        const paymentStatus = this.getString(collectData['status']).toLowerCase();
+        const paymentInfo = this.parsePaymentInfo(collectData);
+        const additionalData = this.asRecord(collectData['additional_data']);
+        // Bank-transfer switch offer: the amount is out of range for the chosen
+        // method but fits bank transfer. Pre-transaction (no id yet) — detect it
+        // before any status routing. NOT a silent switch: route to the confirm
+        // screen; the customer accepts (confirmBankTransferSwitch → re-collect) or
+        // declines (declineBankTransferSwitch → method selection).
+        const bankTransferOffer = this.asRecord(additionalData?.['bank_transfer_offer']);
+        if (bankTransferOffer && this.getBoolean(bankTransferOffer['available'])) {
+            this.updateState({
+                isLoading: false,
+                bankTransferOffer,
+                currentScreen: LokotroPayScreenNavigation.BankTransferOfferScreen
+            });
+            return of(void 0);
+        }
+        if (paymentStatus === 'pending_otp' || paymentStatus === 'pending_otp_verification') {
+            this.updateState({
+                isLoading: false,
+                transactionId: paymentId,
+                paymentInfo,
+                currentScreen: LokotroPayScreenNavigation.EWalletOtpScreen
+            });
+            return of(void 0);
+        }
+        if (paymentStatus === 'pending_bank_proof_upload') {
+            this.handlePaymentSuccess(collectData, LokotroPaymentStatus.PendingBankProofUpload, 'Upload Proof Required');
+            return of(void 0);
+        }
+        if (paymentStatus === 'completed' || paymentStatus === 'approved' || paymentStatus === 'success') {
+            this.handlePaymentSuccess(collectData);
+            return of(void 0);
+        }
+        if (paymentStatus === 'session_created') {
+            const redirectUrl = this.getString(collectData['mastercardUrl']) ||
+                this.getString(collectData['redirect_url']) ||
+                this.getString(collectData['payment_url']);
+            if (!redirectUrl) {
+                this.handlePaymentFailure('Hosted session created but no checkout URL was provided');
+                return of(void 0);
+            }
+            this.updateState({
+                isLoading: false,
+                transactionId: paymentId
+            });
+            // PR-1.2 / Angular HIGH-1: validate before redirect.
+            this.redirectIfAllowed(redirectUrl, 'session-created');
+            return of(void 0);
+        }
+        if (this.getString(additionalData?.['action']) === 'select_payment_method') {
+            this.updateState({
+                isLoading: false,
+                transactionId: paymentId,
+                paymentInfo,
+                currentScreen: LokotroPayScreenNavigation.PaymentMethodSelectionScreen
+            });
+            return of(void 0);
+        }
+        if (paymentStatus === 'failed' || paymentStatus === 'rejected' || paymentStatus === 'declined') {
+            this.handlePaymentFailure(this.getString(collectData['message']) || 'Payment failed');
+            return of(void 0);
+        }
+        if (!paymentId) {
+            this.handlePaymentFailure('Transaction ID not received from payment collection');
+            return of(void 0);
+        }
+        return this.getTransactionDetails(paymentId).pipe(switchMap(response => this.resolveTransactionResponse(response, paymentBody)));
+    }
+    /**
+     * Resolve transaction details into the correct screen or auto-submit flow.
+     */
+    resolveTransactionResponse(response, paymentBody) {
+        if (!response.isSuccess || !response.data) {
+            this.handlePaymentFailure(response.message || 'Failed to load transaction details', response.apiResponseCode);
+            return of(void 0);
+        }
+        const transactionData = this.unwrapPayload(response.data);
+        const paymentId = this.resolvePaymentId(transactionData);
+        if (!paymentId) {
+            this.handlePaymentFailure('Transaction ID not found in transaction details');
+            return of(void 0);
+        }
+        const paymentInfo = this.parseTransactionPaymentInfo(transactionData);
+        const selectedPaymentMethod = this.resolveSelectedPaymentMethod(transactionData, paymentInfo);
+        if (!paymentInfo.showUserInfoForm && !paymentInfo.showPaymentMethodForm) {
+            this.updateState({
+                transactionId: paymentId,
+                paymentInfo,
+                selectedPaymentMethod
+            });
+            if (selectedPaymentMethod?.channel === LokotroPayChannel.Card) {
+                const hostedCheckoutUrl = this.getString(transactionData['mastercardUrl']) ||
+                    this.getString(transactionData['redirect_url']);
+                if (hostedCheckoutUrl) {
+                    this.updateState({ isLoading: false });
+                    // PR-1.2 / Angular HIGH-1: validate hosted-checkout URL.
+                    this.redirectIfAllowed(hostedCheckoutUrl, 'hosted-checkout');
+                    return of(void 0);
+                }
+            }
+            const paymentMethodId = selectedPaymentMethod?.id || this.getString(transactionData['payment_method_id']);
+            if (!paymentMethodId) {
+                this.handlePaymentFailure('Payment method not found for auto-processing');
+                return of(void 0);
+            }
+            return this.submitPaymentDetails(this.buildAutoSubmitRequest(paymentId, paymentMethodId, paymentBody)).pipe(map(() => void 0));
+        }
+        const nextScreen = paymentInfo.showPaymentMethodForm
+            ? LokotroPayScreenNavigation.PaymentMethodSelectionScreen
+            : this.getFormScreenForChannel(selectedPaymentMethod?.channel || this.parseChannel(this.getString(transactionData['channel'])));
+        this.updateState({
+            isLoading: false,
+            transactionId: paymentId,
+            paymentInfo,
+            selectedPaymentMethod,
+            currentScreen: nextScreen
         });
+        return of(void 0);
     }
     /**
-     * Reset state to initial
+     * Get form screen for payment channel
      */
-    resetState() {
-        this.stopMobileMoneyPolling();
-        this.currentPaymentBody = undefined;
-        this.stateSubject.next(initialState);
+    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;
+        }
     }
     /**
-     * Set app-key for authentication
+     * Fetch the banks / accounts / entities available for a bank-transfer
+     * selection. Calls the gateway's /payments/get-config-bank (the same endpoint
+     * the Flutter SDK uses) and maps the snake_case payload into the typed models.
+     * Returns a LokotroHttpResponse<LokotroBank[]> so the bank form can read
+     * response.isSuccess + response.data.
      */
-    setAppKey(appKey) {
-        this.httpClient.setAppKey(appKey);
+    fetchAvailableBanks() {
+        return this.httpClient.get('/payments/get-config-bank').pipe(map(response => {
+            const rows = this.asArray(response.data?.['data']);
+            return {
+                isSuccess: response.isSuccess,
+                message: response.message,
+                data: rows.map(row => this.mapBank(row))
+            };
+        }));
     }
     /**
-     * Set accept language
+     * Customer accepted the bank-transfer switch offer — re-collect with the
+     * method forced to bank_transfer (analogue of the Flutter re-init). Clears the
+     * offer first so the confirm screen doesn't flash again.
      */
-    setAcceptLanguage(language) {
-        this.httpClient.setAcceptLanguage(language);
+    confirmBankTransferSwitch() {
+        const body = this.currentPaymentBody;
+        if (!body) {
+            this.handlePaymentFailure('Cannot switch to bank transfer: no payment in progress');
+            return;
+        }
+        this.updateState({ bankTransferOffer: null });
+        this.createPayment({ ...body, paymentMethod: 'bank_transfer' }).subscribe();
+    }
+    /** Customer declined the switch — return to payment-method selection. */
+    declineBankTransferSwitch() {
+        this.updateState({ bankTransferOffer: null });
+        this.navigateToScreen(LokotroPayScreenNavigation.PaymentMethodSelectionScreen);
+    }
+    asArray(value) {
+        return Array.isArray(value) ? value : [];
+    }
+    mapBank(row) {
+        return {
+            id: this.getString(row['id']),
+            name: this.getString(row['name']),
+            abreviation: this.getString(row['abreviation']),
+            bankLogoUrl: this.getString(row['bank_logo_url']),
+            hasRibNomenclatureConstraint: this.getBoolean(row['has_rib_nomenclature_constraint']),
+            ribAccountNumberFormatStr: this.getString(row['rib_account_number_format_str']),
+            bankAccounts: this.asArray(row['bank_accounts']).map(a => this.mapBankAccount(a)),
+            entityAvailables: this.asArray(row['entity_availables']).map(e => this.mapBankEntity(e))
+        };
+    }
+    mapBankAccount(row) {
+        const refBank = this.asRecord(row['ref_bank']);
+        const refCurrency = this.asRecord(row['ref_currency']);
+        return {
+            id: this.getString(row['id']),
+            identifier: this.getString(row['identifier']) || this.getString(row['id']),
+            accountNumber: this.getString(row['account_number']),
+            accountLabel: this.getString(row['account_label']),
+            createdAt: this.getString(row['created_at']),
+            refBank: refBank
+                ? {
+                    id: this.getString(refBank['id']),
+                    name: this.getString(refBank['name']),
+                    abreviation: this.getString(refBank['abreviation']),
+                    bankLogoUrl: this.getString(refBank['logo_url']),
+                    hasRibNomenclatureConstraint: false,
+                    ribAccountNumberFormatStr: '',
+                    bankAccounts: [],
+                    entityAvailables: []
+                }
+                : undefined,
+            refCurrency: refCurrency ? this.mapBankCurrency(refCurrency) : undefined
+        };
+    }
+    mapBankEntity(row) {
+        return {
+            id: this.getString(row['id']),
+            name: this.getString(row['name']),
+            countryFlag: this.getString(row['country_flag'])
+        };
+    }
+    mapBankCurrency(row) {
+        return {
+            id: this.getString(row['id']),
+            name: this.getString(row['name']),
+            code: this.getString(row['code']),
+            symbol: this.getString(row['symbol'])
+        };
     }
     /**
-     * Step 1: Create payment transaction
-     * POST /payments/collect
+     * Convert payment body to API request format
      */
-    createPayment(paymentBody) {
-        this.currentPaymentBody = paymentBody;
-        this.updateState({ isLoading: true });
-        const requestData = this.convertPaymentBodyToRequest(paymentBody);
-        // PR-1.2 / CRIT-1: previous `console.log(requestData)` shipped PAN, CVV,
-        // wallet PIN, flash PIN, and full PII to the browser console on every
-        // checkout. Removed.
-        return this.httpClient.post(LokotroPayEnv.endpoints.collect, requestData).pipe(switchMap(response => {
-            // PR-1.2: response contains transaction IDs and (sometimes) redirect
-            // URLs that are sensitive. Don't log it.
-            if (!response.isSuccess || !response.data) {
-                this.updateState({
-                    isLoading: false,
-                    error: {
-                        message: response.message || 'Failed to create payment',
-                        title: 'Payment Creation Failed',
-                        errorCode: response.apiResponseCode,
-                        timestamp: new Date()
-                    },
-                    currentScreen: LokotroPayScreenNavigation.ErrorScreen
-                });
-                return of(response);
-            }
-            return this.resolveCollectResponse(this.unwrapPayload(response.data), paymentBody).pipe(map(() => response));
-        }), 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);
-        }));
+    convertPaymentBodyToRequest(body) {
+        const request = {
+            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'
+        };
+        // Auth-v3 refactor: customer_reference / amount / currency are bound
+        // on the session_token. The gateway reads them straight from the
+        // session — sending them again on the wire is redundant, and was
+        // the source of the `"1.00"` vs `"1"` formatting drift that 400'd
+        // body-binding. Only include them when the merchant explicitly set
+        // them (legacy / display reasons). The gateway treats them as a
+        // soft check when present, ignores when absent.
+        if (body.customerReference)
+            request['customer_reference'] = body.customerReference;
+        if (body.amount)
+            request['amount'] = body.amount;
+        if (body.currency)
+            request['currency'] = body.currency.toLowerCase();
+        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;
+        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;
+        }
+        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;
+        }
+        if (body.merchant) {
+            request['merchant'] = {
+                name: body.merchant.name,
+                url: body.merchant.website,
+                logo: body.merchant.logoUrl
+            };
+        }
+        if (body.mastercardPaymentMethod) {
+            request['mastercard_payment_method'] = body.mastercardPaymentMethod;
+        }
+        if (body.transactionalCurrency) {
+            request['transactional_currency'] = body.transactionalCurrency.toLowerCase();
+        }
+        if (body.nativePayToken) {
+            request['native_pay_token'] = body.nativePayToken;
+        }
+        if (body.nativePayTokenType) {
+            request['native_pay_token_type'] = body.nativePayTokenType;
+        }
+        if (body.metadata) {
+            request['metadata'] = body.metadata;
+        }
+        return request;
     }
     /**
-     * Step 2: Get transaction details
-     * GET /payments/transaction/{transaction_id}
+     * Convert submit request to API format
      */
-    getTransactionDetails(transactionId) {
-        return this.httpClient.get(`${LokotroPayEnv.endpoints.transaction}/${transactionId}`);
+    convertSubmitRequestToData(request) {
+        const data = {
+            payment_id: this.resolvePaymentId(request),
+            payment_method_id: request.paymentMethodId || request.paymentMethod || ''
+        };
+        if (request.firstName)
+            data['first_name'] = request.firstName;
+        if (request.lastName)
+            data['last_name'] = request.lastName;
+        if (request.email)
+            data['email'] = request.email;
+        if (request.phoneNumber)
+            data['phone_number'] = request.phoneNumber;
+        if (request.walletNumber)
+            data['ewallet_number'] = request.walletNumber;
+        if (request.walletPin)
+            data['ewallet_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_account_id'] = request.bankTransferAccountId;
+        if (request.bankAccountId)
+            data['bank_account_id'] = request.bankAccountId;
+        if (request.bankAccountNumber)
+            data['bank_account_number'] = request.bankAccountNumber;
+        if (request.bankAccountLabel)
+            data['bank_account_label'] = request.bankAccountLabel;
+        if (request.bankId)
+            data['bank_id'] = request.bankId;
+        if (request.bankEntityId)
+            data['bank_entity_id'] = request.bankEntityId;
+        if (request.mastercardPaymentMethod)
+            data['mastercard_payment_method'] = request.mastercardPaymentMethod;
+        if (request.sessionId)
+            data['session_id'] = request.sessionId;
+        if (request.cardData)
+            data['card_data'] = request.cardData;
+        if (typeof request.savePaymentMethod === 'boolean')
+            data['save_payment_method'] = request.savePaymentMethod;
+        return data;
     }
     /**
-     * Step 3: Submit payment details
-     * POST /payments/submit
+     * Parse payment info from collect response.
      */
-    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 responseData = this.unwrapPayload(response.data);
-                const submitResponse = this.parseSubmitResponse(responseData);
-                if (submitResponse.requiresOtp) {
-                    this.updateState({
-                        isLoading: false,
-                        transactionId: submitResponse.transactionId || this.resolvePaymentId(request),
-                        currentScreen: LokotroPayScreenNavigation.EWalletOtpScreen
-                    });
-                    return;
-                }
-                if (submitResponse.redirectUrl) {
-                    this.updateState({
-                        isLoading: false,
-                        transactionId: submitResponse.transactionId || this.resolvePaymentId(request)
-                    });
-                    // PR-1.2 / Angular HIGH-1: validate redirect URL against allow-list
-                    // before handing the tab over. Server-side allow-list (PR-2.0) is
-                    // the real defense; this is defense-in-depth on the client.
-                    this.redirectIfAllowed(submitResponse.redirectUrl, 'submit-response');
-                    return;
-                }
-                if (submitResponse.status === LokotroPaymentStatus.PendingBankProofUpload) {
-                    this.handlePaymentSuccess(responseData, LokotroPaymentStatus.PendingBankProofUpload, 'Upload Proof Required');
-                    return;
-                }
-                if (LokotroPaymentStatusInfo.isSuccess(submitResponse.status)) {
-                    this.handlePaymentSuccess(responseData);
-                    return;
-                }
-                if (LokotroPaymentStatusInfo.isPending(submitResponse.status)) {
-                    const txId = submitResponse.transactionId || this.resolvePaymentId(request);
-                    this.updateState({
-                        isLoading: false,
-                        transactionId: txId,
-                        currentScreen: LokotroPayScreenNavigation.MobileMoneyProcessingScreen
-                    });
-                    this.startMobileMoneyPolling(txId);
-                    return;
-                }
-                this.handlePaymentFailure(this.getString(responseData['message']) || response.message, response.apiResponseCode);
-            }
-            else {
-                this.handlePaymentFailure(response.message, response.apiResponseCode);
-            }
-        }), catchError(error => {
-            this.handlePaymentFailure(error.message);
-            return throwError(() => error);
-        }));
+    parsePaymentInfo(data) {
+        const additionalData = this.asRecord(data['additional_data']);
+        // Drop feature-flag-hidden methods (e.g. Google/Apple Pay) so they never
+        // enter the payment info model, get rendered, or get auto-selected.
+        const availablePaymentMethods = visiblePaymentMethods(this.getRecordArray(data['available_payment_methods'] || additionalData?.['payment_methods'])
+            .map(method => this.parsePaymentMethod(method)));
+        const action = this.getString(additionalData?.['action']);
+        return {
+            id: this.resolvePaymentId(data),
+            amount: this.getNumber(data['amount']),
+            currency: this.getString(data['currency']) || 'USD',
+            description: this.getString(data['description']),
+            merchantName: this.getString(data['merchant_name']),
+            merchantId: this.getString(data['merchant_id']),
+            availablePaymentMethods,
+            createdAt: new Date(this.getString(data['created_at']) || Date.now()),
+            expiresAt: this.getString(data['expires_at']) ? new Date(this.getString(data['expires_at'])) : undefined,
+            metadata: this.asRecord(data['metadata']),
+            paymentUrl: this.getString(data['payment_url']) || undefined,
+            showUserInfoForm: this.getBoolean(data['show_user_info_form']) || action === 'select_payment_method',
+            showPaymentMethodForm: this.getBoolean(data['show_payment_method_form']) || action === 'select_payment_method'
+        };
     }
     /**
-     * Step 4: Verify OTP (for e-wallet and flash payments)
-     * POST /payments/verify-otp
+     * Parse payment info from transaction details response.
      */
-    verifyOtp(request) {
-        this.updateState({ isLoading: true });
-        return this.httpClient.post(LokotroPayEnv.endpoints.verifyOtp, {
-            payment_id: request.paymentId || request.transactionId || this.currentState.transactionId,
-            otp_code: request.otpCode || request.otp
-        }).pipe(tap(response => {
-            if (response.isSuccess && response.data) {
-                const responseData = this.unwrapPayload(response.data);
-                const status = LokotroPaymentStatusInfo.fromString(this.getString(responseData['status']));
-                if (LokotroPaymentStatusInfo.isSuccess(status)) {
-                    this.handlePaymentSuccess(responseData);
-                }
-                else {
-                    this.handlePaymentFailure(this.getString(responseData['message']) || 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()
-                    },
-                    currentScreen: LokotroPayScreenNavigation.ErrorScreen
-                });
-            }
-        }), catchError(error => {
-            this.updateState({
-                isLoading: false,
-                error: {
-                    message: error.message || 'OTP verification failed',
-                    title: 'Error',
-                    timestamp: new Date()
-                },
-                currentScreen: LokotroPayScreenNavigation.ErrorScreen
-            });
-            return throwError(() => error);
-        }));
+    parseTransactionPaymentInfo(data) {
+        const fillingInfo = this.getString(data['filling_info']) || 'none';
+        const channelInfo = this.getString(data['channel_info']) || 'none';
+        return {
+            id: this.resolvePaymentId(data),
+            amount: this.getNumber(data['transactional_amount'] ?? data['amount']),
+            currency: this.getString(data['transactional_currency']) || this.getString(data['currency_str']) || 'USD',
+            description: this.getString(data['description']),
+            merchantName: this.getString(data['merchant_name']),
+            merchantId: this.getString(data['merchant_id']),
+            availablePaymentMethods: visiblePaymentMethods(this.getRecordArray(data['payment_methods']).map(method => this.parsePaymentMethod(method))),
+            createdAt: new Date(this.getString(data['created_at']) || Date.now()),
+            metadata: this.asRecord(data['metadata']),
+            paymentUrl: this.getString(data['payment_url']) || undefined,
+            showUserInfoForm: fillingInfo === 'none',
+            showPaymentMethodForm: channelInfo === 'none',
+            fillingInfo,
+            channelInfo
+        };
     }
     /**
-     * Step 5: Resend OTP (if needed)
-     * POST /payments/resend-otp
+     * Parse payment method from API response.
      */
-    resendOtp(request) {
-        return this.httpClient.post(LokotroPayEnv.endpoints.resendOtp, {
-            payment_id: request.paymentId || request.transactionId || this.currentState.transactionId
-        });
+    parsePaymentMethod(data) {
+        const nestedChannel = this.asRecord(data['channel']);
+        const rawChannel = this.getString(nestedChannel?.['name']) ||
+            this.getString(data['group']) ||
+            this.getString(data['method']) ||
+            this.getString(data['channel']) ||
+            this.getString(data['name']);
+        const name = this.getString(data['name']) || this.getString(data['method']) || rawChannel;
+        return {
+            id: this.getString(data['id']) || this.getString(data['payment_method_id']) || name,
+            name,
+            displayName: this.getString(data['display_name']) || name,
+            channel: this.parseChannel(rawChannel),
+            // PR-3.0 — pull the provider flag through. Legacy responses omit it →
+            // remains undefined, consumers fall back to channel-level branching.
+            flag: this.parsePaymentMethodFlag(this.getString(data['flag'])),
+            iconUrl: this.getString(data['icon_url']) || this.getString(data['icon']),
+            isEnabled: this.getBoolean(data['is_enabled'], this.getBoolean(data['available'], true)),
+            configuration: this.asRecord(data['configuration']),
+            supportedCurrencies: Array.isArray(data['supported_currencies'])
+                ? data['supported_currencies']
+                : undefined
+        };
     }
     /**
-     * Select payment method
+     * PR-3.0 — narrow an arbitrary string to the LokotroPaymentMethodFlag union.
+     * Unknown / empty inputs return undefined so the field stays optional.
      */
-    selectPaymentMethod(method) {
-        this.updateState({
-            selectedPaymentMethod: method,
-            currentScreen: this.getFormScreenForChannel(method.channel)
-        });
+    parsePaymentMethodFlag(value) {
+        const known = [
+            'none', 'all',
+            'onafriq_mobile_money', 'onafriq_credit_card', 'rawbank_credit_card',
+            'lokotro_wallet', 'lokotro_eflash',
+            'cash', 'bank_transfer', 'google_pay', 'apple_pay',
+        ];
+        return known.find(f => f === value);
     }
     /**
-     * Navigate to screen
+     * Parse submit response from API.
      */
-    navigateToScreen(screen) {
-        this.updateState({ currentScreen: screen });
+    parseSubmitResponse(data) {
+        const rawStatus = this.getString(data['status']);
+        return {
+            success: this.getBoolean(data['success']),
+            message: this.getString(data['message']),
+            transactionId: this.resolvePaymentId(data),
+            status: LokotroPaymentStatusInfo.fromString(rawStatus),
+            requiresOtp: this.getBoolean(data['requires_otp']) || rawStatus === 'pending_otp' || rawStatus === 'pending_otp_verification',
+            otpDestination: this.getString(data['otp_destination']) || this.getString(data['otp_sent_to']) || undefined,
+            redirectUrl: this.getString(data['redirect_url']) || this.getString(data['mastercardUrl']) || undefined
+        };
     }
     /**
-     * Start polling for mobile money payment status
+     * Build an auto-submit request using the original payment body.
      */
-    startMobileMoneyPolling(transactionId) {
-        this.stopMobileMoneyPolling();
-        this.mobileMoneyPollingAttempts = 0;
-        // PR-1.2: removed console.log of transactionId — operational logging
-        // should be opt-in via merchant config, not on by default.
-        this.mobileMoneyPollingTimer = setInterval(() => {
-            this.mobileMoneyPollingAttempts++;
-            if (this.mobileMoneyPollingAttempts > LokotroPaymentService.MOBILE_MONEY_MAX_ATTEMPTS) {
-                this.stopMobileMoneyPolling();
-                this.handlePaymentFailure('Payment took too long. Please try again or contact support.');
-                return;
-            }
-            const endpoint = `${LokotroPayEnv.endpoints.mobileMoneyStatus}/${transactionId}`;
-            this.httpClient.get(endpoint).subscribe({
-                next: (response) => {
-                    if (!response.isSuccess || !response.data)
-                        return;
-                    const data = this.unwrapPayload(response.data);
-                    const status = this.getString(data['status']).toLowerCase();
-                    if (status === 'completed' || status === 'success' || status === 'approved') {
-                        this.stopMobileMoneyPolling();
-                        this.handlePaymentSuccess(data);
-                    }
-                    else if (status === 'failed' || status === 'error' || status === 'cancelled' || status === 'declined') {
-                        this.stopMobileMoneyPolling();
-                        this.handlePaymentFailure(this.getString(data['message']) || 'Payment failed or was declined');
-                    }
-                },
-                error: (_err) => {
-                    // PR-1.2: don't log full error object — may contain backend
-                    // response details that leak server internals to console.
-                }
-            });
-        }, LokotroPaymentService.MOBILE_MONEY_POLL_INTERVAL);
+    buildAutoSubmitRequest(paymentId, paymentMethodId, paymentBody) {
+        return {
+            paymentId,
+            paymentMethodId,
+            paymentMethod: paymentBody.paymentMethod,
+            firstName: paymentBody.firstName,
+            lastName: paymentBody.lastName,
+            email: paymentBody.email,
+            phoneNumber: paymentBody.phoneNumber,
+            walletNumber: paymentBody.walletNumber,
+            walletPin: paymentBody.walletPin,
+            mobileMoneyPhoneNumber: paymentBody.mobileMoneyPhoneNumber,
+            flashNumber: paymentBody.flashNumber,
+            flashPin: paymentBody.flashPin,
+            cardNumber: paymentBody.cardNumber,
+            cardExpiryDate: paymentBody.cardExpiryDate,
+            cardCvv: paymentBody.cardCvv,
+            cardHolderName: paymentBody.cardHolderName,
+            mastercardPaymentMethod: paymentBody.mastercardPaymentMethod
+        };
     }
     /**
-     * Stop mobile money status polling
+     * Resolve the selected payment method from transaction details.
      */
-    stopMobileMoneyPolling() {
-        if (this.mobileMoneyPollingTimer) {
-            clearInterval(this.mobileMoneyPollingTimer);
-            this.mobileMoneyPollingTimer = undefined;
-            this.mobileMoneyPollingAttempts = 0;
+    resolveSelectedPaymentMethod(transactionData, paymentInfo) {
+        const paymentMethodId = this.getString(transactionData['payment_method_id']);
+        const paymentMethodName = this.getString(transactionData['payment_method_str']) || this.getString(transactionData['payment_method']);
+        const normalizedName = this.normalizeMethodKey(paymentMethodName);
+        const exactMatch = paymentInfo.availablePaymentMethods.find(method => method.id === paymentMethodId ||
+            this.normalizeMethodKey(method.name) === normalizedName ||
+            this.normalizeMethodKey(method.displayName) === normalizedName);
+        if (exactMatch) {
+            return exactMatch;
+        }
+        const channel = this.parseChannel(this.getString(transactionData['channel']) || paymentMethodName);
+        if (!paymentMethodId && !paymentMethodName && channel === LokotroPayChannel.None) {
+            return paymentInfo.availablePaymentMethods[0];
         }
+        return {
+            id: paymentMethodId || paymentMethodName || channel,
+            name: paymentMethodName || paymentMethodId || channel,
+            displayName: paymentMethodName || paymentMethodId || channel,
+            channel,
+            iconUrl: '',
+            isEnabled: true
+        };
     }
     /**
-     * Validate a server-supplied redirect URL before handing the browser tab to
-     * it. Defense-in-depth for Angular HIGH-1 — server-side per-merchant
-     * allow-list (PR-2.0) is the real fix.
-     *
-     * Policy:
-     *   - Reject non-http(s) schemes (blocks `javascript:`, `data:`, `file:`,
-     *     `intent:`, custom schemes).
-     *   - Reject http:// in production.
-     *   - Reject malformed URLs.
-     *   - SSR safety: skip the redirect when window is unavailable.
+     * Normalize payloads that sometimes return data nested inside data.
      */
-    redirectIfAllowed(url, _origin) {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        if (!url || typeof url !== 'string') {
-            this.handlePaymentFailure('Invalid redirect URL');
-            return;
+    unwrapPayload(payload) {
+        const record = this.asRecord(payload);
+        if (!record) {
+            return {};
         }
-        let parsed;
-        try {
-            parsed = new URL(url, window.location.href);
+        const nestedData = this.asRecord(record['data']);
+        return nestedData || record;
+    }
+    resolvePaymentId(source) {
+        return this.getString(source['payment_id']) ||
+            this.getString(source['transaction_id']) ||
+            this.getString(source['paymentId']) ||
+            this.getString(source['transactionId']) ||
+            this.currentState.transactionId ||
+            '';
+    }
+    parseChannel(channel) {
+        switch (this.normalizeMethodKey(channel)) {
+            case 'card':
+                return LokotroPayChannel.Card;
+            case 'mobilemoney':
+                return LokotroPayChannel.MobileMoney;
+            case 'wallet':
+            case 'ewallet':
+            case 'lokotrowallet':
+                return LokotroPayChannel.EWallet;
+            case 'flash':
+            case 'eflash':
+                return LokotroPayChannel.EFlash;
+            case 'banktransfer':
+                return LokotroPayChannel.BankTransfer;
+            default:
+                return LokotroPayChannel.None;
         }
-        catch {
-            this.handlePaymentFailure('Untrusted redirect URL');
-            return;
+    }
+    normalizeMethodKey(value) {
+        return value.toLowerCase().replace(/[_\s-]/g, '');
+    }
+    getNumber(value, fallback = 0) {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? value : fallback;
         }
-        if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:') {
-            this.handlePaymentFailure('Untrusted redirect scheme');
-            return;
+        if (typeof value === 'string') {
+            const parsedValue = parseFloat(value);
+            return Number.isFinite(parsedValue) ? parsedValue : fallback;
         }
-        const isProduction = LokotroPayEnv.environment === 'production';
-        if (isProduction && parsed.protocol !== 'https:') {
-            this.handlePaymentFailure('Insecure redirect rejected');
-            return;
+        return fallback;
+    }
+    getString(value) {
+        return typeof value === 'string' ? value : '';
+    }
+    getBoolean(value, fallback = false) {
+        return typeof value === 'boolean' ? value : fallback;
+    }
+    asRecord(value) {
+        return value !== null && typeof value === 'object' && !Array.isArray(value)
+            ? value
+            : undefined;
+    }
+    getRecordArray(value) {
+        if (!Array.isArray(value)) {
+            return [];
         }
-        window.location.href = parsed.toString();
+        return value
+            .map(item => this.asRecord(item))
+            .filter((item) => Boolean(item));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentService, deps: [{ token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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;
     }
-    /**
-     * Handle payment success
-     */
-    handlePaymentSuccess(data, paymentStatus = LokotroPaymentStatus.Approved, defaultTitle = 'Success') {
-        this.stopMobileMoneyPolling();
-        const transactionId = this.getString(data['transaction_id']) || this.getString(data['payment_id']);
-        const response = {
-            message: this.getString(data['message']) || 'Payment successful',
-            title: this.getString(data['title']) || defaultTitle,
-            customRef: this.getString(data['custom_ref']) || this.getString(data['customer_reference']),
-            amount: this.getNumber(data['amount']),
-            apiResponseCode: LokotroPayApiResponseCode.LOK000,
-            currency: this.getString(data['currency']) || this.getString(data['currency_str']),
-            paymentStatus,
-            systemRef: this.getString(data['system_reference']) || this.getString(data['system_ref']) || transactionId,
-            transactionId,
-            timestamp: new Date()
+    ngOnInit() {
+        this.initForm();
+        this.fetchBanks();
+    }
+    initForm() {
+        const config = {
+            city: ['', Validators.required],
+            bank: [{ value: '', disabled: true }, Validators.required],
+            account: [{ value: '', disabled: true }, Validators.required]
         };
-        this.updateState({
-            isLoading: false,
-            response,
-            currentScreen: LokotroPayScreenNavigation.SuccessScreen
-        });
+        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);
     }
-    /**
-     * Handle payment failure
-     */
-    handlePaymentFailure(message, errorCode) {
-        this.stopMobileMoneyPolling();
-        this.updateState({
-            isLoading: false,
-            error: {
-                message: message || 'Payment failed',
-                title: 'Payment Failed',
-                errorCode,
-                timestamp: new Date()
+    fetchBanks() {
+        this.isLoading = true;
+        this.paymentService.fetchAvailableBanks().subscribe({
+            next: (response) => {
+                if (response.isSuccess && response.data) {
+                    this.allBanks = response.data;
+                    this.extractCities();
+                }
+                this.isLoading = false;
             },
-            currentScreen: LokotroPayScreenNavigation.ErrorScreen
+            error: (err) => {
+                console.error('Failed to fetch banks', err);
+                this.isLoading = false;
+            }
         });
     }
-    /**
-     * Resolve the collect response into the same flow the Flutter SDK uses.
-     */
-    resolveCollectResponse(collectData, paymentBody) {
-        const paymentId = this.resolvePaymentId(collectData);
-        const paymentStatus = this.getString(collectData['status']).toLowerCase();
-        const paymentInfo = this.parsePaymentInfo(collectData);
-        const additionalData = this.asRecord(collectData['additional_data']);
-        if (paymentStatus === 'pending_otp' || paymentStatus === 'pending_otp_verification') {
-            this.updateState({
-                isLoading: false,
-                transactionId: paymentId,
-                paymentInfo,
-                currentScreen: LokotroPayScreenNavigation.EWalletOtpScreen
+    extractCities() {
+        const cityMap = new Map();
+        this.allBanks.forEach(bank => {
+            bank.entityAvailables.forEach(city => {
+                if (!cityMap.has(city.id)) {
+                    cityMap.set(city.id, city);
+                }
             });
-            return of(void 0);
+        });
+        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();
+            }
         }
-        if (paymentStatus === 'pending_bank_proof_upload') {
-            this.handlePaymentSuccess(collectData, LokotroPaymentStatus.PendingBankProofUpload, 'Upload Proof Required');
-            return of(void 0);
+    }
+    onAccountChange() {
+        const accountId = this.bankTransferForm.get('account')?.value;
+        if (accountId) {
+            this.selectedAccount = this.accounts.find(a => a.id === accountId) || null;
         }
-        if (paymentStatus === 'completed' || paymentStatus === 'approved' || paymentStatus === 'success') {
-            this.handlePaymentSuccess(collectData);
-            return of(void 0);
+        else {
+            this.selectedAccount = null;
         }
-        if (paymentStatus === 'session_created') {
-            const redirectUrl = this.getString(collectData['mastercardUrl']) ||
-                this.getString(collectData['redirect_url']) ||
-                this.getString(collectData['payment_url']);
-            if (!redirectUrl) {
-                this.handlePaymentFailure('Hosted session created but no checkout URL was provided');
-                return of(void 0);
+    }
+    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.updateState({
-                isLoading: false,
-                transactionId: paymentId
-            });
-            // PR-1.2 / Angular HIGH-1: validate before redirect.
-            this.redirectIfAllowed(redirectUrl, 'session-created');
-            return of(void 0);
+            this.formSubmitted.emit(submitData);
         }
-        if (this.getString(additionalData?.['action']) === 'select_payment_method') {
-            this.updateState({
-                isLoading: false,
-                transactionId: paymentId,
-                paymentInfo,
-                currentScreen: LokotroPayScreenNavigation.PaymentMethodSelectionScreen
-            });
-            return of(void 0);
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroBankTransferFormComponent, deps: [{ token: i1$1.FormBuilder }, { token: LokotroLocalizationService }, { token: LokotroPaymentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 -->
+        @if (showUserInfoForm) {
+          <div class="lokotro-user-info-section">
+            <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">
+                @if (bankTransferForm.get('firstName')?.touched && bankTransferForm.get('firstName')?.invalid) {
+                  <span class="lokotro-error">
+                    {{ 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">
+                @if (bankTransferForm.get('lastName')?.touched && bankTransferForm.get('lastName')?.invalid) {
+                  <span class="lokotro-error">
+                    {{ 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">
+              @if (bankTransferForm.get('email')?.touched && bankTransferForm.get('email')?.invalid) {
+                <span class="lokotro-error">
+                  {{ 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">
+              @if (bankTransferForm.get('personalPhone')?.touched && bankTransferForm.get('personalPhone')?.invalid) {
+                <span class="lokotro-error">
+                  {{ localization.translate('invalidPhoneNumber') }}
+                </span>
+              }
+            </div>
+            <hr class="lokotro-divider">
+          </div>
         }
-        if (paymentStatus === 'failed' || paymentStatus === 'rejected' || paymentStatus === 'declined') {
-            this.handlePaymentFailure(this.getString(collectData['message']) || 'Payment failed');
-            return of(void 0);
+    
+        <!-- Bank Selection Section -->
+        @if (showUserInfoForm) {
+          <h4 class="lokotro-section-subtitle">{{ localization.translate('bankDetails') || 'Bank Details' }}</h4>
         }
-        if (!paymentId) {
-            this.handlePaymentFailure('Transaction ID not received from payment collection');
-            return of(void 0);
+    
+        <!-- Loading State -->
+        @if (isLoading) {
+          <div class="lokotro-loading-text">
+            {{ localization.translate('loading') || 'Loading...' }}
+          </div>
         }
-        return this.getTransactionDetails(paymentId).pipe(switchMap(response => this.resolveTransactionResponse(response, paymentBody)));
-    }
-    /**
-     * Resolve transaction details into the correct screen or auto-submit flow.
-     */
-    resolveTransactionResponse(response, paymentBody) {
-        if (!response.isSuccess || !response.data) {
-            this.handlePaymentFailure(response.message || 'Failed to load transaction details', response.apiResponseCode);
-            return of(void 0);
+    
+        @if (!isLoading) {
+          <div>
+            <!-- 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>
+                @for (city of cities; track city) {
+                  <option [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>
+                @for (bank of filteredBanks; track bank) {
+                  <option [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>
+                @for (account of accounts; track account) {
+                  <option [value]="account.id">{{ account.accountLabel }} ({{ account.accountNumber }})</option>
+                }
+              </select>
+            </div>
+          </div>
         }
-        const transactionData = this.unwrapPayload(response.data);
-        const paymentId = this.resolvePaymentId(transactionData);
-        if (!paymentId) {
-            this.handlePaymentFailure('Transaction ID not found in transaction details');
-            return of(void 0);
+    
+        <!-- Selected Account Summary -->
+        @if (selectedAccount) {
+          <div class="lokotro-account-summary">
+            <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>
         }
-        const paymentInfo = this.parseTransactionPaymentInfo(transactionData);
-        const selectedPaymentMethod = this.resolveSelectedPaymentMethod(transactionData, paymentInfo);
-        if (!paymentInfo.showUserInfoForm && !paymentInfo.showPaymentMethodForm) {
-            this.updateState({
-                transactionId: paymentId,
-                paymentInfo,
-                selectedPaymentMethod
-            });
-            if (selectedPaymentMethod?.channel === LokotroPayChannel.Card) {
-                const hostedCheckoutUrl = this.getString(transactionData['mastercardUrl']) ||
-                    this.getString(transactionData['redirect_url']);
-                if (hostedCheckoutUrl) {
-                    this.updateState({ isLoading: false });
-                    // PR-1.2 / Angular HIGH-1: validate hosted-checkout URL.
-                    this.redirectIfAllowed(hostedCheckoutUrl, 'hosted-checkout');
-                    return of(void 0);
+    
+        <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: 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],[formArray],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: "21.2.9", ngImport: i0, type: LokotroBankTransferFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lokotro-bank-transfer-form', standalone: true, imports: [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 -->
+        @if (showUserInfoForm) {
+          <div class="lokotro-user-info-section">
+            <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">
+                @if (bankTransferForm.get('firstName')?.touched && bankTransferForm.get('firstName')?.invalid) {
+                  <span class="lokotro-error">
+                    {{ localization.translate('required') }}
+                  </span>
                 }
-            }
-            const paymentMethodId = selectedPaymentMethod?.id || this.getString(transactionData['payment_method_id']);
-            if (!paymentMethodId) {
-                this.handlePaymentFailure('Payment method not found for auto-processing');
-                return of(void 0);
-            }
-            return this.submitPaymentDetails(this.buildAutoSubmitRequest(paymentId, paymentMethodId, paymentBody)).pipe(map(() => void 0));
+              </div>
+              <div class="lokotro-form-group">
+                <label class="lokotro-label">{{ localization.translate('lastName') }}</label>
+                <input type="text" class="lokotro-input" formControlName="lastName" placeholder="Doe">
+                @if (bankTransferForm.get('lastName')?.touched && bankTransferForm.get('lastName')?.invalid) {
+                  <span class="lokotro-error">
+                    {{ 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">
+              @if (bankTransferForm.get('email')?.touched && bankTransferForm.get('email')?.invalid) {
+                <span class="lokotro-error">
+                  {{ 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">
+              @if (bankTransferForm.get('personalPhone')?.touched && bankTransferForm.get('personalPhone')?.invalid) {
+                <span class="lokotro-error">
+                  {{ localization.translate('invalidPhoneNumber') }}
+                </span>
+              }
+            </div>
+            <hr class="lokotro-divider">
+          </div>
         }
-        const nextScreen = paymentInfo.showPaymentMethodForm
-            ? LokotroPayScreenNavigation.PaymentMethodSelectionScreen
-            : this.getFormScreenForChannel(selectedPaymentMethod?.channel || this.parseChannel(this.getString(transactionData['channel'])));
-        this.updateState({
-            isLoading: false,
-            transactionId: paymentId,
-            paymentInfo,
-            selectedPaymentMethod,
-            currentScreen: nextScreen
-        });
-        return of(void 0);
+    
+        <!-- Bank Selection Section -->
+        @if (showUserInfoForm) {
+          <h4 class="lokotro-section-subtitle">{{ localization.translate('bankDetails') || 'Bank Details' }}</h4>
+        }
+    
+        <!-- Loading State -->
+        @if (isLoading) {
+          <div class="lokotro-loading-text">
+            {{ localization.translate('loading') || 'Loading...' }}
+          </div>
+        }
+    
+        @if (!isLoading) {
+          <div>
+            <!-- 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>
+                @for (city of cities; track city) {
+                  <option [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>
+                @for (bank of filteredBanks; track bank) {
+                  <option [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>
+                @for (account of accounts; track account) {
+                  <option [value]="account.id">{{ account.accountLabel }} ({{ account.accountNumber }})</option>
+                }
+              </select>
+            </div>
+          </div>
+        }
+    
+        <!-- Selected Account Summary -->
+        @if (selectedAccount) {
+          <div class="lokotro-account-summary">
+            <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;
     }
-    /**
-     * 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;
+    ngOnInit() {
+        this.otpDigits = new Array(this.otpLength).fill('');
+        this.startResendTimer();
+    }
+    ngOnDestroy() {
+        if (this.timerInterval) {
+            clearInterval(this.timerInterval);
         }
     }
-    /**
-     * Convert payment body to API request format
-     */
-    convertPaymentBodyToRequest(body) {
-        const request = {
-            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'
-        };
-        // Auth-v3 refactor: customer_reference / amount / currency are bound
-        // on the session_token. The gateway reads them straight from the
-        // session — sending them again on the wire is redundant, and was
-        // the source of the `"1.00"` vs `"1"` formatting drift that 400'd
-        // body-binding. Only include them when the merchant explicitly set
-        // them (legacy / display reasons). The gateway treats them as a
-        // soft check when present, ignores when absent.
-        if (body.customerReference)
-            request['customer_reference'] = body.customerReference;
-        if (body.amount)
-            request['amount'] = body.amount;
-        if (body.currency)
-            request['currency'] = body.currency.toLowerCase();
-        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;
-        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;
+    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();
+            }
         }
-        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;
+        else {
+            this.otpDigits[index] = '';
         }
-        if (body.merchant) {
-            request['merchant'] = {
-                name: body.merchant.name,
-                url: body.merchant.website,
-                logo: body.merchant.logoUrl
-            };
+    }
+    onOtpKeydown(event, index) {
+        if (event.key === 'Backspace' && !this.otpDigits[index] && index > 0) {
+            const inputs = document.querySelectorAll('.lokotro-otp-input');
+            inputs[index - 1]?.focus();
         }
-        if (body.mastercardPaymentMethod) {
-            request['mastercard_payment_method'] = body.mastercardPaymentMethod;
+    }
+    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();
         }
-        if (body.transactionalCurrency) {
-            request['transactional_currency'] = body.transactionalCurrency.toLowerCase();
+    }
+    onVerify() {
+        if (this.isOtpComplete) {
+            this.otpVerified.emit(this.otpValue);
         }
-        if (body.nativePayToken) {
-            request['native_pay_token'] = body.nativePayToken;
+    }
+    onResend() {
+        this.otpDigits = new Array(this.otpLength).fill('');
+        this.startResendTimer();
+        this.resendOtp.emit();
+    }
+    onCancelClick() {
+        this.cancel.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroOtpVerificationComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroOtpVerificationComponent, isStandalone: true, selector: "lokotro-otp-verification", inputs: { transactionId: "transactionId", otpDestination: "otpDestination", otpLength: "otpLength" }, outputs: { otpVerified: "otpVerified", resendOtp: "resendOtp", cancel: "cancel" }, ngImport: i0, template: `
+    <div class="lokotro-otp-verification">
+      <div class="lokotro-otp-icon">
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+          <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+        </svg>
+      </div>
+    
+      <h3 class="lokotro-otp-title">{{ localization.translate('enterOtp') }}</h3>
+      @if (otpDestination) {
+        <p class="lokotro-otp-subtitle">
+          {{ localization.translate('otpSentTo') }} {{ otpDestination }}
+        </p>
+      }
+    
+      <div class="lokotro-otp-inputs">
+        @for (digit of otpDigits; track digit; let i = $index) {
+          <input
+            type="text"
+            class="lokotro-otp-input"
+            maxlength="1"
+            [value]="otpDigits[i]"
+            (input)="onOtpInput($event, i)"
+            (keydown)="onOtpKeydown($event, i)"
+            (paste)="onOtpPaste($event)"
+            #otpInput>
         }
-        if (body.nativePayTokenType) {
-            request['native_pay_token_type'] = body.nativePayTokenType;
+      </div>
+    
+      @if (resendTimer > 0) {
+        <div class="lokotro-otp-timer">
+          Resend OTP in {{ resendTimer }}s
+        </div>
+      }
+    
+      @if (resendTimer === 0) {
+        <button
+          class="lokotro-resend-btn"
+          (click)="onResend()">
+          {{ localization.translate('resendOtp') }}
+        </button>
+      }
+    
+      <div class="lokotro-form-actions">
+        <button type="button" class="lokotro-btn-secondary" (click)="onCancelClick()">
+          {{ localization.translate('cancel') }}
+        </button>
+        <button
+          type="button"
+          class="lokotro-btn-primary"
+          [disabled]="!isOtpComplete"
+          (click)="onVerify()">
+          {{ localization.translate('verifyOtp') }}
+        </button>
+      </div>
+    </div>
+    `, isInline: true, styles: [".lokotro-otp-verification{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 0}.lokotro-otp-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--lokotro-card, #3A4840);border-radius:50%;margin-bottom:24px;color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-title{font-size:24px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-otp-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-otp-inputs{display:flex;gap:12px;margin-bottom:24px}.lokotro-otp-input{width:50px;height:56px;text-align:center;font-size:24px;font-weight:600;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);transition:border-color .2s}.lokotro-otp-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-timer{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin-bottom:24px}.lokotro-resend-btn{background:none;border:none;color:var(--lokotro-accent, #3BFBDA);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:24px;text-decoration:underline}.lokotro-resend-btn:hover{opacity:.8}.lokotro-form-actions{display:flex;gap:12px;width:100%}.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)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroOtpVerificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lokotro-otp-verification', standalone: true, imports: [FormsModule], template: `
+    <div class="lokotro-otp-verification">
+      <div class="lokotro-otp-icon">
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+          <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+        </svg>
+      </div>
+    
+      <h3 class="lokotro-otp-title">{{ localization.translate('enterOtp') }}</h3>
+      @if (otpDestination) {
+        <p class="lokotro-otp-subtitle">
+          {{ localization.translate('otpSentTo') }} {{ otpDestination }}
+        </p>
+      }
+    
+      <div class="lokotro-otp-inputs">
+        @for (digit of otpDigits; track digit; let i = $index) {
+          <input
+            type="text"
+            class="lokotro-otp-input"
+            maxlength="1"
+            [value]="otpDigits[i]"
+            (input)="onOtpInput($event, i)"
+            (keydown)="onOtpKeydown($event, i)"
+            (paste)="onOtpPaste($event)"
+            #otpInput>
         }
-        if (body.metadata) {
-            request['metadata'] = body.metadata;
+      </div>
+    
+      @if (resendTimer > 0) {
+        <div class="lokotro-otp-timer">
+          Resend OTP in {{ resendTimer }}s
+        </div>
+      }
+    
+      @if (resendTimer === 0) {
+        <button
+          class="lokotro-resend-btn"
+          (click)="onResend()">
+          {{ localization.translate('resendOtp') }}
+        </button>
+      }
+    
+      <div class="lokotro-form-actions">
+        <button type="button" class="lokotro-btn-secondary" (click)="onCancelClick()">
+          {{ localization.translate('cancel') }}
+        </button>
+        <button
+          type="button"
+          class="lokotro-btn-primary"
+          [disabled]="!isOtpComplete"
+          (click)="onVerify()">
+          {{ localization.translate('verifyOtp') }}
+        </button>
+      </div>
+    </div>
+    `, styles: [".lokotro-otp-verification{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 0}.lokotro-otp-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--lokotro-card, #3A4840);border-radius:50%;margin-bottom:24px;color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-title{font-size:24px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-otp-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-otp-inputs{display:flex;gap:12px;margin-bottom:24px}.lokotro-otp-input{width:50px;height:56px;text-align:center;font-size:24px;font-weight:600;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);transition:border-color .2s}.lokotro-otp-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-timer{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin-bottom:24px}.lokotro-resend-btn{background:none;border:none;color:var(--lokotro-accent, #3BFBDA);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:24px;text-decoration:underline}.lokotro-resend-btn:hover{opacity:.8}.lokotro-form-actions{display:flex;gap:12px;width:100%}.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)}\n"] }]
+        }], ctorParameters: () => [{ type: LokotroLocalizationService }], propDecorators: { transactionId: [{
+                type: Input
+            }], otpDestination: [{
+                type: Input
+            }], otpLength: [{
+                type: Input
+            }], otpVerified: [{
+                type: Output
+            }], resendOtp: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+/**
+ * Lokotro Pay - Processing Component
+ */
+class LokotroProcessingComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.type = 'default';
+        this.currentStep = 1;
+        // Simulate step progression for mobile money
+        if (this.type === 'mobileMoney') {
+            setTimeout(() => this.currentStep = 2, 3000);
+            setTimeout(() => this.currentStep = 3, 6000);
         }
-        return request;
-    }
-    /**
-     * Convert submit request to API format
-     */
-    convertSubmitRequestToData(request) {
-        const data = {
-            payment_id: this.resolvePaymentId(request),
-            payment_method_id: request.paymentMethodId || request.paymentMethod || ''
-        };
-        if (request.firstName)
-            data['first_name'] = request.firstName;
-        if (request.lastName)
-            data['last_name'] = request.lastName;
-        if (request.email)
-            data['email'] = request.email;
-        if (request.phoneNumber)
-            data['phone_number'] = request.phoneNumber;
-        if (request.walletNumber)
-            data['ewallet_number'] = request.walletNumber;
-        if (request.walletPin)
-            data['ewallet_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_account_id'] = request.bankTransferAccountId;
-        if (request.bankAccountId)
-            data['bank_account_id'] = request.bankAccountId;
-        if (request.bankAccountNumber)
-            data['bank_account_number'] = request.bankAccountNumber;
-        if (request.bankAccountLabel)
-            data['bank_account_label'] = request.bankAccountLabel;
-        if (request.bankId)
-            data['bank_id'] = request.bankId;
-        if (request.bankEntityId)
-            data['bank_entity_id'] = request.bankEntityId;
-        if (request.mastercardPaymentMethod)
-            data['mastercard_payment_method'] = request.mastercardPaymentMethod;
-        if (request.sessionId)
-            data['session_id'] = request.sessionId;
-        if (request.cardData)
-            data['card_data'] = request.cardData;
-        if (typeof request.savePaymentMethod === 'boolean')
-            data['save_payment_method'] = request.savePaymentMethod;
-        return data;
-    }
-    /**
-     * Parse payment info from collect response.
-     */
-    parsePaymentInfo(data) {
-        const additionalData = this.asRecord(data['additional_data']);
-        // Drop feature-flag-hidden methods (e.g. Google/Apple Pay) so they never
-        // enter the payment info model, get rendered, or get auto-selected.
-        const availablePaymentMethods = visiblePaymentMethods(this.getRecordArray(data['available_payment_methods'] || additionalData?.['payment_methods'])
-            .map(method => this.parsePaymentMethod(method)));
-        const action = this.getString(additionalData?.['action']);
-        return {
-            id: this.resolvePaymentId(data),
-            amount: this.getNumber(data['amount']),
-            currency: this.getString(data['currency']) || 'USD',
-            description: this.getString(data['description']),
-            merchantName: this.getString(data['merchant_name']),
-            merchantId: this.getString(data['merchant_id']),
-            availablePaymentMethods,
-            createdAt: new Date(this.getString(data['created_at']) || Date.now()),
-            expiresAt: this.getString(data['expires_at']) ? new Date(this.getString(data['expires_at'])) : undefined,
-            metadata: this.asRecord(data['metadata']),
-            paymentUrl: this.getString(data['payment_url']) || undefined,
-            showUserInfoForm: this.getBoolean(data['show_user_info_form']) || action === 'select_payment_method',
-            showPaymentMethodForm: this.getBoolean(data['show_payment_method_form']) || action === 'select_payment_method'
-        };
-    }
-    /**
-     * Parse payment info from transaction details response.
-     */
-    parseTransactionPaymentInfo(data) {
-        const fillingInfo = this.getString(data['filling_info']) || 'none';
-        const channelInfo = this.getString(data['channel_info']) || 'none';
-        return {
-            id: this.resolvePaymentId(data),
-            amount: this.getNumber(data['transactional_amount'] ?? data['amount']),
-            currency: this.getString(data['transactional_currency']) || this.getString(data['currency_str']) || 'USD',
-            description: this.getString(data['description']),
-            merchantName: this.getString(data['merchant_name']),
-            merchantId: this.getString(data['merchant_id']),
-            availablePaymentMethods: visiblePaymentMethods(this.getRecordArray(data['payment_methods']).map(method => this.parsePaymentMethod(method))),
-            createdAt: new Date(this.getString(data['created_at']) || Date.now()),
-            metadata: this.asRecord(data['metadata']),
-            paymentUrl: this.getString(data['payment_url']) || undefined,
-            showUserInfoForm: fillingInfo === 'none',
-            showPaymentMethodForm: channelInfo === 'none',
-            fillingInfo,
-            channelInfo
-        };
     }
-    /**
-     * Parse payment method from API response.
-     */
-    parsePaymentMethod(data) {
-        const nestedChannel = this.asRecord(data['channel']);
-        const rawChannel = this.getString(nestedChannel?.['name']) ||
-            this.getString(data['group']) ||
-            this.getString(data['method']) ||
-            this.getString(data['channel']) ||
-            this.getString(data['name']);
-        const name = this.getString(data['name']) || this.getString(data['method']) || rawChannel;
-        return {
-            id: this.getString(data['id']) || this.getString(data['payment_method_id']) || name,
-            name,
-            displayName: this.getString(data['display_name']) || name,
-            channel: this.parseChannel(rawChannel),
-            // PR-3.0 — pull the provider flag through. Legacy responses omit it →
-            // remains undefined, consumers fall back to channel-level branching.
-            flag: this.parsePaymentMethodFlag(this.getString(data['flag'])),
-            iconUrl: this.getString(data['icon_url']) || this.getString(data['icon']),
-            isEnabled: this.getBoolean(data['is_enabled'], this.getBoolean(data['available'], true)),
-            configuration: this.asRecord(data['configuration']),
-            supportedCurrencies: Array.isArray(data['supported_currencies'])
-                ? data['supported_currencies']
-                : undefined
-        };
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroProcessingComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroProcessingComponent, isStandalone: true, selector: "lokotro-processing", inputs: { type: "type", message: "message" }, ngImport: i0, template: `
+    <div class="lokotro-processing">
+      <div class="lokotro-processing-spinner">
+        <div class="lokotro-spinner-ring"></div>
+        <div class="lokotro-spinner-ring"></div>
+        <div class="lokotro-spinner-ring"></div>
+      </div>
+    
+      <h3 class="lokotro-processing-title">{{ message || localization.translate('processing') }}</h3>
+    
+      @if (type === 'mobileMoney') {
+        <p class="lokotro-processing-subtitle">
+          Please confirm the payment on your mobile device
+        </p>
+      }
+    
+      @if (type === 'mobileMoney') {
+        <div class="lokotro-processing-steps">
+          <div class="lokotro-step" [class.active]="currentStep >= 1">
+            <div class="lokotro-step-icon">📱</div>
+            <span>Check your phone</span>
+          </div>
+          <div class="lokotro-step" [class.active]="currentStep >= 2">
+            <div class="lokotro-step-icon">🔐</div>
+            <span>Enter your PIN</span>
+          </div>
+          <div class="lokotro-step" [class.active]="currentStep >= 3">
+            <div class="lokotro-step-icon">✅</div>
+            <span>Confirm payment</span>
+          </div>
+        </div>
+      }
+    </div>
+    `, isInline: true, styles: [".lokotro-processing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;min-height:300px}.lokotro-processing-spinner{position:relative;width:80px;height:80px;margin-bottom:32px}.lokotro-spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-radius:50%;animation:lokotro-spin 1.5s linear infinite}.lokotro-spinner-ring:nth-child(1){border-top-color:var(--lokotro-accent, #3BFBDA);animation-delay:0s}.lokotro-spinner-ring:nth-child(2){border-right-color:var(--lokotro-primary, #5A5E39);animation-delay:.15s;width:70%;height:70%;top:15%;left:15%}.lokotro-spinner-ring:nth-child(3){border-bottom-color:var(--lokotro-secondary, #6E7346);animation-delay:.3s;width:50%;height:50%;top:25%;left:25%}@keyframes lokotro-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lokotro-processing-title{font-size:20px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-processing-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-processing-steps{display:flex;flex-direction:column;gap:16px;width:100%;max-width:280px}.lokotro-step{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--lokotro-card, #3A4840);border-radius:12px;opacity:.5;transition:opacity .3s}.lokotro-step.active{opacity:1}.lokotro-step-icon{font-size:20px}.lokotro-step span{font-size:14px;color:var(--lokotro-text-primary, #F2F0D5)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroProcessingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lokotro-processing', standalone: true, imports: [], template: `
+    <div class="lokotro-processing">
+      <div class="lokotro-processing-spinner">
+        <div class="lokotro-spinner-ring"></div>
+        <div class="lokotro-spinner-ring"></div>
+        <div class="lokotro-spinner-ring"></div>
+      </div>
+    
+      <h3 class="lokotro-processing-title">{{ message || localization.translate('processing') }}</h3>
+    
+      @if (type === 'mobileMoney') {
+        <p class="lokotro-processing-subtitle">
+          Please confirm the payment on your mobile device
+        </p>
+      }
+    
+      @if (type === 'mobileMoney') {
+        <div class="lokotro-processing-steps">
+          <div class="lokotro-step" [class.active]="currentStep >= 1">
+            <div class="lokotro-step-icon">📱</div>
+            <span>Check your phone</span>
+          </div>
+          <div class="lokotro-step" [class.active]="currentStep >= 2">
+            <div class="lokotro-step-icon">🔐</div>
+            <span>Enter your PIN</span>
+          </div>
+          <div class="lokotro-step" [class.active]="currentStep >= 3">
+            <div class="lokotro-step-icon">✅</div>
+            <span>Confirm payment</span>
+          </div>
+        </div>
+      }
+    </div>
+    `, styles: [".lokotro-processing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;min-height:300px}.lokotro-processing-spinner{position:relative;width:80px;height:80px;margin-bottom:32px}.lokotro-spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-radius:50%;animation:lokotro-spin 1.5s linear infinite}.lokotro-spinner-ring:nth-child(1){border-top-color:var(--lokotro-accent, #3BFBDA);animation-delay:0s}.lokotro-spinner-ring:nth-child(2){border-right-color:var(--lokotro-primary, #5A5E39);animation-delay:.15s;width:70%;height:70%;top:15%;left:15%}.lokotro-spinner-ring:nth-child(3){border-bottom-color:var(--lokotro-secondary, #6E7346);animation-delay:.3s;width:50%;height:50%;top:25%;left:25%}@keyframes lokotro-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lokotro-processing-title{font-size:20px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-processing-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-processing-steps{display:flex;flex-direction:column;gap:16px;width:100%;max-width:280px}.lokotro-step{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--lokotro-card, #3A4840);border-radius:12px;opacity:.5;transition:opacity .3s}.lokotro-step.active{opacity:1}.lokotro-step-icon{font-size:20px}.lokotro-step span{font-size:14px;color:var(--lokotro-text-primary, #F2F0D5)}\n"] }]
+        }], ctorParameters: () => [{ type: LokotroLocalizationService }], propDecorators: { type: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }] } });
+
+/**
+ * Lokotro Pay - Result Component
+ * Success, Error, Warning, Info screens
+ *
+ * Designed for financial UX: clean white surface, prominent amount focal
+ * on success, filled status badge, restrained transaction-detail panel.
+ */
+class LokotroResultComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.type = 'success';
+        this.title = '';
+        /** Auto-redirect duration in seconds. If > 0, will auto-call onAutoRedirect after countdown. */
+        this.autoRedirectSeconds = 0;
+        this.primaryAction = new EventEmitter();
+        this.secondaryAction = new EventEmitter();
+        /** Emitted when auto-redirect triggers after countdown completes. */
+        this.autoRedirect = new EventEmitter();
+        // Countdown state
+        this.countdownSeconds = 0;
+        this.isCountdownCancelled = false;
     }
-    /**
-     * PR-3.0 — narrow an arbitrary string to the LokotroPaymentMethodFlag union.
-     * Unknown / empty inputs return undefined so the field stays optional.
-     */
-    parsePaymentMethodFlag(value) {
-        const known = [
-            'none', 'all',
-            'onafriq_mobile_money', 'onafriq_credit_card', 'rawbank_credit_card',
-            'lokotro_wallet', 'lokotro_eflash',
-            'cash', 'bank_transfer', 'google_pay', 'apple_pay',
-        ];
-        return known.find(f => f === value);
+    ngOnInit() {
+        this.startAutoRedirectCountdown();
     }
-    /**
-     * Parse submit response from API.
-     */
-    parseSubmitResponse(data) {
-        const rawStatus = this.getString(data['status']);
-        return {
-            success: this.getBoolean(data['success']),
-            message: this.getString(data['message']),
-            transactionId: this.resolvePaymentId(data),
-            status: LokotroPaymentStatusInfo.fromString(rawStatus),
-            requiresOtp: this.getBoolean(data['requires_otp']) || rawStatus === 'pending_otp' || rawStatus === 'pending_otp_verification',
-            otpDestination: this.getString(data['otp_destination']) || this.getString(data['otp_sent_to']) || undefined,
-            redirectUrl: this.getString(data['redirect_url']) || this.getString(data['mastercardUrl']) || undefined
-        };
+    ngOnDestroy() {
+        this.clearCountdown();
     }
-    /**
-     * Build an auto-submit request using the original payment body.
-     */
-    buildAutoSubmitRequest(paymentId, paymentMethodId, paymentBody) {
-        return {
-            paymentId,
-            paymentMethodId,
-            paymentMethod: paymentBody.paymentMethod,
-            firstName: paymentBody.firstName,
-            lastName: paymentBody.lastName,
-            email: paymentBody.email,
-            phoneNumber: paymentBody.phoneNumber,
-            walletNumber: paymentBody.walletNumber,
-            walletPin: paymentBody.walletPin,
-            mobileMoneyPhoneNumber: paymentBody.mobileMoneyPhoneNumber,
-            flashNumber: paymentBody.flashNumber,
-            flashPin: paymentBody.flashPin,
-            cardNumber: paymentBody.cardNumber,
-            cardExpiryDate: paymentBody.cardExpiryDate,
-            cardCvv: paymentBody.cardCvv,
-            cardHolderName: paymentBody.cardHolderName,
-            mastercardPaymentMethod: paymentBody.mastercardPaymentMethod
-        };
+    startAutoRedirectCountdown() {
+        if (this.autoRedirectSeconds <= 0)
+            return;
+        this.countdownSeconds = this.autoRedirectSeconds;
+        this.countdownInterval = setInterval(() => {
+            if (this.isCountdownCancelled) {
+                this.clearCountdown();
+                return;
+            }
+            this.countdownSeconds--;
+            if (this.countdownSeconds <= 0) {
+                this.clearCountdown();
+                this.triggerAutoRedirect();
+            }
+        }, 1000);
     }
-    /**
-     * Resolve the selected payment method from transaction details.
-     */
-    resolveSelectedPaymentMethod(transactionData, paymentInfo) {
-        const paymentMethodId = this.getString(transactionData['payment_method_id']);
-        const paymentMethodName = this.getString(transactionData['payment_method_str']) || this.getString(transactionData['payment_method']);
-        const normalizedName = this.normalizeMethodKey(paymentMethodName);
-        const exactMatch = paymentInfo.availablePaymentMethods.find(method => method.id === paymentMethodId ||
-            this.normalizeMethodKey(method.name) === normalizedName ||
-            this.normalizeMethodKey(method.displayName) === normalizedName);
-        if (exactMatch) {
-            return exactMatch;
-        }
-        const channel = this.parseChannel(this.getString(transactionData['channel']) || paymentMethodName);
-        if (!paymentMethodId && !paymentMethodName && channel === LokotroPayChannel.None) {
-            return paymentInfo.availablePaymentMethods[0];
+    cancelCountdown() {
+        if (this.countdownInterval) {
+            this.isCountdownCancelled = true;
+            this.clearCountdown();
         }
-        return {
-            id: paymentMethodId || paymentMethodName || channel,
-            name: paymentMethodName || paymentMethodId || channel,
-            displayName: paymentMethodName || paymentMethodId || channel,
-            channel,
-            iconUrl: '',
-            isEnabled: true
-        };
     }
-    /**
-     * Normalize payloads that sometimes return data nested inside data.
-     */
-    unwrapPayload(payload) {
-        const record = this.asRecord(payload);
-        if (!record) {
-            return {};
+    clearCountdown() {
+        if (this.countdownInterval) {
+            clearInterval(this.countdownInterval);
+            this.countdownInterval = undefined;
         }
-        const nestedData = this.asRecord(record['data']);
-        return nestedData || record;
     }
-    resolvePaymentId(source) {
-        return this.getString(source['payment_id']) ||
-            this.getString(source['transaction_id']) ||
-            this.getString(source['paymentId']) ||
-            this.getString(source['transactionId']) ||
-            this.currentState.transactionId ||
-            '';
+    triggerAutoRedirect() {
+        if (this.isCountdownCancelled)
+            return;
+        this.autoRedirect.emit();
     }
-    parseChannel(channel) {
-        switch (this.normalizeMethodKey(channel)) {
-            case 'card':
-                return LokotroPayChannel.Card;
-            case 'mobilemoney':
-                return LokotroPayChannel.MobileMoney;
-            case 'wallet':
-            case 'ewallet':
-            case 'lokotrowallet':
-                return LokotroPayChannel.EWallet;
-            case 'flash':
-            case 'eflash':
-                return LokotroPayChannel.EFlash;
-            case 'banktransfer':
-                return LokotroPayChannel.BankTransfer;
-            default:
-                return LokotroPayChannel.None;
+    getCountdownProgress() {
+        if (this.autoRedirectSeconds <= 0)
+            return 0;
+        return (this.countdownSeconds / this.autoRedirectSeconds) * 100;
+    }
+    formatNumber(amount) {
+        return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount);
+    }
+    formatAmount(amount, currency) {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: currency || 'USD',
+            minimumFractionDigits: 2
+        }).format(amount);
+    }
+    onPrimaryClick() {
+        this.cancelCountdown();
+        this.primaryAction.emit();
+    }
+    onSecondaryClick() {
+        this.cancelCountdown();
+        this.secondaryAction.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroResultComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroResultComponent, isStandalone: true, selector: "lokotro-result", inputs: { type: "type", title: "title", message: "message", amount: "amount", currency: "currency", transactionId: "transactionId", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", autoRedirectSeconds: "autoRedirectSeconds" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", autoRedirect: "autoRedirect" }, ngImport: i0, template: `
+    <div class="lokotro-result" [class]="'lokotro-result-' + type">
+      <div class="lokotro-result-card">
+        <!-- Status Badge (filled circle with icon) -->
+        <div class="lokotro-status-badge" [class]="'lokotro-status-' + type">
+          @if (type === 'success') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="5 12 10 17 19 8"/>
+            </svg>
+          }
+          @if (type === 'error') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          }
+          @if (type === 'warning') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="8" x2="12" y2="13"/>
+              <line x1="12" y1="17" x2="12.01" y2="17"/>
+            </svg>
+          }
+          @if (type === 'info') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="11" x2="12" y2="16"/>
+              <line x1="12" y1="7" x2="12.01" y2="7"/>
+            </svg>
+          }
+        </div>
+
+        <!-- Amount focal (success only, when amount provided) -->
+        @if (type === 'success' && amount !== undefined && amount !== null) {
+          <div class="lokotro-amount-focal">
+            <span class="lokotro-amount-currency">{{ (currency || '').toUpperCase() }}</span>
+            <span class="lokotro-amount-value">{{ formatNumber(amount) }}</span>
+          </div>
+        }
+
+        <!-- Title -->
+        <h2 class="lokotro-result-title">{{ title }}</h2>
+
+        <!-- Message -->
+        @if (message) {
+          <p class="lokotro-result-message">{{ message }}</p>
+        }
+
+        <!-- Countdown Indicator -->
+        @if (autoRedirectSeconds > 0 && countdownSeconds > 0 && !isCountdownCancelled) {
+          <button type="button" class="lokotro-countdown-indicator" (click)="cancelCountdown()">
+            <svg viewBox="0 0 36 36" class="lokotro-countdown-circle">
+              <path class="lokotro-countdown-bg"
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
+              <path class="lokotro-countdown-fill" [class]="'lokotro-countdown-' + type"
+                [attr.stroke-dasharray]="getCountdownProgress() + ', 100'"
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
+            </svg>
+            <span class="lokotro-countdown-text">
+              {{ localization.translate('redirectingIn', { seconds: countdownSeconds }) }}
+            </span>
+            <svg class="lokotro-countdown-cancel" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
         }
-    }
-    normalizeMethodKey(value) {
-        return value.toLowerCase().replace(/[_\s-]/g, '');
-    }
-    getNumber(value, fallback = 0) {
-        if (typeof value === 'number') {
-            return Number.isFinite(value) ? value : fallback;
+
+        <!-- Transaction Details -->
+        @if (type === 'success' && transactionId) {
+          <div class="lokotro-result-details">
+            <div class="lokotro-detail-row">
+              <span class="lokotro-detail-label">Transaction ID</span>
+              <span class="lokotro-detail-value lokotro-mono">{{ transactionId }}</span>
+            </div>
+          </div>
         }
-        if (typeof value === 'string') {
-            const parsedValue = parseFloat(value);
-            return Number.isFinite(parsedValue) ? parsedValue : fallback;
+      </div>
+
+      <!-- Actions -->
+      @if (primaryActionLabel || secondaryActionLabel) {
+        <div class="lokotro-result-actions">
+          @if (primaryActionLabel) {
+            <button type="button" class="lokotro-btn-primary" (click)="onPrimaryClick()">
+              {{ primaryActionLabel }}
+            </button>
+          }
+          @if (secondaryActionLabel) {
+            <button type="button" class="lokotro-btn-secondary" (click)="onSecondaryClick()">
+              {{ secondaryActionLabel }}
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".lokotro-result{display:flex;flex-direction:column;align-items:stretch;max-width:420px;margin:0 auto;padding:24px 16px;gap:20px}.lokotro-result-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:var(--lokotro-card, #FFFFFF);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:20px;box-shadow:0 1px 3px var(--lokotro-shadow-light, rgba(15, 23, 42, .04)),0 8px 24px var(--lokotro-shadow-light, rgba(15, 23, 42, .04))}.lokotro-status-badge{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:lokotro-pop .5s cubic-bezier(.34,1.56,.64,1)}.lokotro-status-badge svg{width:36px;height:36px;color:#fff}.lokotro-status-success{background:var(--lokotro-success, #16A34A);box-shadow:0 0 0 8px #16a34a1f,0 8px 20px #16a34a40}.lokotro-status-error{background:var(--lokotro-error, #DC2626);box-shadow:0 0 0 8px #dc26261f,0 8px 20px #dc262640}.lokotro-status-warning{background:var(--lokotro-warning, #D97706);box-shadow:0 0 0 8px #d977061f,0 8px 20px #d9770640}.lokotro-status-info{background:var(--lokotro-info, #2563EB);box-shadow:0 0 0 8px #2563eb1f,0 8px 20px #2563eb40}@keyframes lokotro-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.lokotro-amount-focal{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:16px}.lokotro-amount-currency{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--lokotro-text-secondary, #64748B)}.lokotro-amount-value{font-size:40px;font-weight:700;line-height:1;color:var(--lokotro-text-primary, #0F172A);font-variant-numeric:tabular-nums}.lokotro-result-title{font-size:20px;font-weight:600;margin:0 0 6px;color:var(--lokotro-text-primary, #0F172A)}.lokotro-result-message{font-size:14px;color:var(--lokotro-text-secondary, #64748B);margin:0;line-height:1.5;max-width:320px}.lokotro-result-details{width:100%;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:12px;padding:12px 16px;margin-top:24px}.lokotro-detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}.lokotro-detail-row:not(:last-child){border-bottom:1px solid var(--lokotro-divider, #F1F5F9)}.lokotro-detail-label{font-size:13px;color:var(--lokotro-text-secondary, #64748B)}.lokotro-detail-value{font-size:13px;font-weight:600;color:var(--lokotro-text-primary, #0F172A);text-align:right;overflow:hidden;text-overflow:ellipsis;max-width:200px;white-space:nowrap}.lokotro-mono{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,monospace;font-size:12px}.lokotro-result-actions{display:flex;flex-direction:column;gap:10px;width:100%}.lokotro-btn-primary,.lokotro-btn-secondary{width:100%;padding:14px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s ease;font-family:inherit}.lokotro-btn-primary{background:var(--lokotro-primary, #0F172A);color:#fff;border:none}.lokotro-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--lokotro-shadow-medium, rgba(15, 23, 42, .12))}.lokotro-btn-primary:active{transform:translateY(0)}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #0F172A);border:1.5px solid var(--lokotro-border, #E2E8F0)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #64748B);background:var(--lokotro-surface, #F7F8FA)}.lokotro-countdown-indicator{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:999px;cursor:pointer;margin-top:20px;transition:all .18s ease;color:var(--lokotro-text-secondary, #64748B);font-family:inherit}.lokotro-countdown-indicator:hover{background:var(--lokotro-card, #FFFFFF);border-color:var(--lokotro-text-tertiary, #64748B)}.lokotro-countdown-circle{width:14px;height:14px;transform:rotate(-90deg)}.lokotro-countdown-bg{fill:none;stroke:var(--lokotro-border, #E2E8F0);stroke-width:4}.lokotro-countdown-fill{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .3s ease}.lokotro-countdown-success{stroke:var(--lokotro-success, #16A34A)}.lokotro-countdown-error{stroke:var(--lokotro-error, #DC2626)}.lokotro-countdown-warning{stroke:var(--lokotro-warning, #D97706)}.lokotro-countdown-info{stroke:var(--lokotro-info, #2563EB)}.lokotro-countdown-text{font-size:12px;font-weight:500}.lokotro-countdown-cancel{color:inherit;opacity:.7}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroResultComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lokotro-result', standalone: true, imports: [], template: `
+    <div class="lokotro-result" [class]="'lokotro-result-' + type">
+      <div class="lokotro-result-card">
+        <!-- Status Badge (filled circle with icon) -->
+        <div class="lokotro-status-badge" [class]="'lokotro-status-' + type">
+          @if (type === 'success') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="5 12 10 17 19 8"/>
+            </svg>
+          }
+          @if (type === 'error') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          }
+          @if (type === 'warning') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="8" x2="12" y2="13"/>
+              <line x1="12" y1="17" x2="12.01" y2="17"/>
+            </svg>
+          }
+          @if (type === 'info') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="11" x2="12" y2="16"/>
+              <line x1="12" y1="7" x2="12.01" y2="7"/>
+            </svg>
+          }
+        </div>
+
+        <!-- Amount focal (success only, when amount provided) -->
+        @if (type === 'success' && amount !== undefined && amount !== null) {
+          <div class="lokotro-amount-focal">
+            <span class="lokotro-amount-currency">{{ (currency || '').toUpperCase() }}</span>
+            <span class="lokotro-amount-value">{{ formatNumber(amount) }}</span>
+          </div>
         }
-        return fallback;
-    }
-    getString(value) {
-        return typeof value === 'string' ? value : '';
-    }
-    getBoolean(value, fallback = false) {
-        return typeof value === 'boolean' ? value : fallback;
-    }
-    asRecord(value) {
-        return value !== null && typeof value === 'object' && !Array.isArray(value)
-            ? value
-            : undefined;
-    }
-    getRecordArray(value) {
-        if (!Array.isArray(value)) {
-            return [];
+
+        <!-- Title -->
+        <h2 class="lokotro-result-title">{{ title }}</h2>
+
+        <!-- Message -->
+        @if (message) {
+          <p class="lokotro-result-message">{{ message }}</p>
         }
-        return value
-            .map(item => this.asRecord(item))
-            .filter((item) => Boolean(item));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentService, deps: [{ token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentService, providedIn: 'root' }); }
+
+        <!-- Countdown Indicator -->
+        @if (autoRedirectSeconds > 0 && countdownSeconds > 0 && !isCountdownCancelled) {
+          <button type="button" class="lokotro-countdown-indicator" (click)="cancelCountdown()">
+            <svg viewBox="0 0 36 36" class="lokotro-countdown-circle">
+              <path class="lokotro-countdown-bg"
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
+              <path class="lokotro-countdown-fill" [class]="'lokotro-countdown-' + type"
+                [attr.stroke-dasharray]="getCountdownProgress() + ', 100'"
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
+            </svg>
+            <span class="lokotro-countdown-text">
+              {{ localization.translate('redirectingIn', { seconds: countdownSeconds }) }}
+            </span>
+            <svg class="lokotro-countdown-cancel" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        }
+
+        <!-- Transaction Details -->
+        @if (type === 'success' && transactionId) {
+          <div class="lokotro-result-details">
+            <div class="lokotro-detail-row">
+              <span class="lokotro-detail-label">Transaction ID</span>
+              <span class="lokotro-detail-value lokotro-mono">{{ transactionId }}</span>
+            </div>
+          </div>
+        }
+      </div>
+
+      <!-- Actions -->
+      @if (primaryActionLabel || secondaryActionLabel) {
+        <div class="lokotro-result-actions">
+          @if (primaryActionLabel) {
+            <button type="button" class="lokotro-btn-primary" (click)="onPrimaryClick()">
+              {{ primaryActionLabel }}
+            </button>
+          }
+          @if (secondaryActionLabel) {
+            <button type="button" class="lokotro-btn-secondary" (click)="onSecondaryClick()">
+              {{ secondaryActionLabel }}
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".lokotro-result{display:flex;flex-direction:column;align-items:stretch;max-width:420px;margin:0 auto;padding:24px 16px;gap:20px}.lokotro-result-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:var(--lokotro-card, #FFFFFF);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:20px;box-shadow:0 1px 3px var(--lokotro-shadow-light, rgba(15, 23, 42, .04)),0 8px 24px var(--lokotro-shadow-light, rgba(15, 23, 42, .04))}.lokotro-status-badge{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:lokotro-pop .5s cubic-bezier(.34,1.56,.64,1)}.lokotro-status-badge svg{width:36px;height:36px;color:#fff}.lokotro-status-success{background:var(--lokotro-success, #16A34A);box-shadow:0 0 0 8px #16a34a1f,0 8px 20px #16a34a40}.lokotro-status-error{background:var(--lokotro-error, #DC2626);box-shadow:0 0 0 8px #dc26261f,0 8px 20px #dc262640}.lokotro-status-warning{background:var(--lokotro-warning, #D97706);box-shadow:0 0 0 8px #d977061f,0 8px 20px #d9770640}.lokotro-status-info{background:var(--lokotro-info, #2563EB);box-shadow:0 0 0 8px #2563eb1f,0 8px 20px #2563eb40}@keyframes lokotro-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.lokotro-amount-focal{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:16px}.lokotro-amount-currency{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--lokotro-text-secondary, #64748B)}.lokotro-amount-value{font-size:40px;font-weight:700;line-height:1;color:var(--lokotro-text-primary, #0F172A);font-variant-numeric:tabular-nums}.lokotro-result-title{font-size:20px;font-weight:600;margin:0 0 6px;color:var(--lokotro-text-primary, #0F172A)}.lokotro-result-message{font-size:14px;color:var(--lokotro-text-secondary, #64748B);margin:0;line-height:1.5;max-width:320px}.lokotro-result-details{width:100%;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:12px;padding:12px 16px;margin-top:24px}.lokotro-detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}.lokotro-detail-row:not(:last-child){border-bottom:1px solid var(--lokotro-divider, #F1F5F9)}.lokotro-detail-label{font-size:13px;color:var(--lokotro-text-secondary, #64748B)}.lokotro-detail-value{font-size:13px;font-weight:600;color:var(--lokotro-text-primary, #0F172A);text-align:right;overflow:hidden;text-overflow:ellipsis;max-width:200px;white-space:nowrap}.lokotro-mono{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,monospace;font-size:12px}.lokotro-result-actions{display:flex;flex-direction:column;gap:10px;width:100%}.lokotro-btn-primary,.lokotro-btn-secondary{width:100%;padding:14px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s ease;font-family:inherit}.lokotro-btn-primary{background:var(--lokotro-primary, #0F172A);color:#fff;border:none}.lokotro-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--lokotro-shadow-medium, rgba(15, 23, 42, .12))}.lokotro-btn-primary:active{transform:translateY(0)}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #0F172A);border:1.5px solid var(--lokotro-border, #E2E8F0)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #64748B);background:var(--lokotro-surface, #F7F8FA)}.lokotro-countdown-indicator{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:999px;cursor:pointer;margin-top:20px;transition:all .18s ease;color:var(--lokotro-text-secondary, #64748B);font-family:inherit}.lokotro-countdown-indicator:hover{background:var(--lokotro-card, #FFFFFF);border-color:var(--lokotro-text-tertiary, #64748B)}.lokotro-countdown-circle{width:14px;height:14px;transform:rotate(-90deg)}.lokotro-countdown-bg{fill:none;stroke:var(--lokotro-border, #E2E8F0);stroke-width:4}.lokotro-countdown-fill{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .3s ease}.lokotro-countdown-success{stroke:var(--lokotro-success, #16A34A)}.lokotro-countdown-error{stroke:var(--lokotro-error, #DC2626)}.lokotro-countdown-warning{stroke:var(--lokotro-warning, #D97706)}.lokotro-countdown-info{stroke:var(--lokotro-info, #2563EB)}.lokotro-countdown-text{font-size:12px;font-weight:500}.lokotro-countdown-cancel{color:inherit;opacity:.7}\n"] }]
+        }], ctorParameters: () => [{ type: LokotroLocalizationService }], propDecorators: { type: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], amount: [{
+                type: Input
+            }], currency: [{
+                type: Input
+            }], transactionId: [{
+                type: Input
+            }], primaryActionLabel: [{
+                type: Input
+            }], secondaryActionLabel: [{
+                type: Input
+            }], autoRedirectSeconds: [{
+                type: Input
+            }], primaryAction: [{
+                type: Output
+            }], secondaryAction: [{
+                type: Output
+            }], autoRedirect: [{
+                type: Output
+            }] } });
+
+/**
+ * Lokotro Pay - Loading Component
+ */
+class LokotroLoadingComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroLoadingComponent, isStandalone: true, selector: "lokotro-loading", inputs: { message: "message" }, ngImport: i0, 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>
+      @if (message) {
+        <p class="lokotro-loading-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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: LokotroHttpClientService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroLoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lokotro-loading', standalone: true, imports: [], 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>
+      @if (message) {
+        <p class="lokotro-loading-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 - Checkout Component
@@ -4484,6 +4983,12 @@ class LokotroPayCheckoutComponent {
     onCancel() {
         this.closed.emit();
     }
+    onConfirmBankTransfer() {
+        this.paymentService.confirmBankTransferSwitch();
+    }
+    onDeclineBankTransfer() {
+        this.paymentService.declineBankTransferSwitch();
+    }
     onClose() {
         this.closed.emit();
     }
@@ -4600,7 +5105,34 @@ class LokotroPayCheckoutComponent {
             (cancel)="onCancel()">
           </lokotro-payment-form>
         }
-    
+
+        <!-- Bank Transfer Form Screen (town/bank/account selection) -->
+        @if (currentScreen === 'bankTransferFormScreen') {
+          <lokotro-bank-transfer-form
+            [showUserInfoForm]="state?.paymentInfo?.showUserInfoForm || false"
+            (formSubmitted)="onFormSubmitted($event)"
+            (cancel)="onCancel()">
+          </lokotro-bank-transfer-form>
+        }
+
+        <!-- Bank Transfer Switch Offer (amount out of range for chosen method) -->
+        @if (currentScreen === 'bankTransferOfferScreen') {
+          <div style="padding:24px;text-align:center;display:flex;flex-direction:column;gap:16px;">
+            <h3 style="margin:0;font-size:18px;font-weight:600;">{{ localization.translate('bankTransferSwitchTitle') }}</h3>
+            <p style="margin:0;opacity:0.75;">{{ localization.translate('bankTransferSwitchMessage') }}</p>
+            <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
+              <button type="button" (click)="onDeclineBankTransfer()"
+                style="padding:12px 20px;border-radius:10px;border:1px solid rgba(128,128,128,0.4);background:transparent;color:inherit;cursor:pointer;">
+                {{ localization.translate('bankTransferSwitchDecline') }}
+              </button>
+              <button type="button" (click)="onConfirmBankTransfer()"
+                style="padding:12px 20px;border-radius:10px;border:none;background:var(--lokotro-primary,#0891b2);color:#fff;cursor:pointer;font-weight:600;">
+                {{ localization.translate('bankTransferSwitchConfirm') }}
+              </button>
+            </div>
+          </div>
+        }
+
         <!-- OTP Verification Screen -->
         @if (currentScreen === 'ewalletOtpScreen') {
           <lokotro-otp-verification
@@ -4673,13 +5205,14 @@ class LokotroPayCheckoutComponent {
         }
       </div>
     </div>
-    `, isInline: true, styles: [".lokotro-checkout{display:flex;flex-direction:column;min-height:100%;background:var(--lokotro-background, #FFFFFF);color:var(--lokotro-text-primary, #0F172A);font-family:var(--lokotro-font-family, -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-background, #FFFFFF);border-bottom:1px solid var(--lokotro-border, #E2E8F0)}.lokotro-title{flex:1;text-align:center;font-size:18px;font-weight:600;margin:0;color:var(--lokotro-text-primary, #0F172A)}.lokotro-back-btn,.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-secondary, #475569);border-radius:8px;transition:background-color .2s,color .2s}.lokotro-back-btn:hover,.lokotro-close-btn:hover{background:var(--lokotro-surface, #F7F8FA);color:var(--lokotro-text-primary, #0F172A)}.lokotro-checkout-content{flex:1;padding:16px;overflow-y:auto}.lokotro-dark{--lokotro-background: #0F172A;--lokotro-surface: #1E293B;--lokotro-card: #1E293B;--lokotro-text-primary: #F8FAFC;--lokotro-text-secondary: #CBD5E1;--lokotro-border: #334155}\n"], dependencies: [{ 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", "autoRedirectSeconds"], outputs: ["primaryAction", "secondaryAction", "autoRedirect"] }, { 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, #FFFFFF);color:var(--lokotro-text-primary, #0F172A);font-family:var(--lokotro-font-family, -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-background, #FFFFFF);border-bottom:1px solid var(--lokotro-border, #E2E8F0)}.lokotro-title{flex:1;text-align:center;font-size:18px;font-weight:600;margin:0;color:var(--lokotro-text-primary, #0F172A)}.lokotro-back-btn,.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-secondary, #475569);border-radius:8px;transition:background-color .2s,color .2s}.lokotro-back-btn:hover,.lokotro-close-btn:hover{background:var(--lokotro-surface, #F7F8FA);color:var(--lokotro-text-primary, #0F172A)}.lokotro-checkout-content{flex:1;padding:16px;overflow-y:auto}.lokotro-dark{--lokotro-background: #0F172A;--lokotro-surface: #1E293B;--lokotro-card: #1E293B;--lokotro-text-primary: #F8FAFC;--lokotro-text-secondary: #CBD5E1;--lokotro-border: #334155}\n"], dependencies: [{ 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", "autoRedirectSeconds"], outputs: ["primaryAction", "secondaryAction", "autoRedirect"] }, { kind: "component", type: LokotroLoadingComponent, selector: "lokotro-loading", inputs: ["message"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPayCheckoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-pay-checkout', standalone: true, imports: [
                         LokotroPaymentMethodSelectionComponent,
                         LokotroPaymentFormComponent,
+                        LokotroBankTransferFormComponent,
                         LokotroOtpVerificationComponent,
                         LokotroProcessingComponent,
                         LokotroResultComponent,
@@ -4734,7 +5267,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             (cancel)="onCancel()">
           </lokotro-payment-form>
         }
-    
+
+        <!-- Bank Transfer Form Screen (town/bank/account selection) -->
+        @if (currentScreen === 'bankTransferFormScreen') {
+          <lokotro-bank-transfer-form
+            [showUserInfoForm]="state?.paymentInfo?.showUserInfoForm || false"
+            (formSubmitted)="onFormSubmitted($event)"
+            (cancel)="onCancel()">
+          </lokotro-bank-transfer-form>
+        }
+
+        <!-- Bank Transfer Switch Offer (amount out of range for chosen method) -->
+        @if (currentScreen === 'bankTransferOfferScreen') {
+          <div style="padding:24px;text-align:center;display:flex;flex-direction:column;gap:16px;">
+            <h3 style="margin:0;font-size:18px;font-weight:600;">{{ localization.translate('bankTransferSwitchTitle') }}</h3>
+            <p style="margin:0;opacity:0.75;">{{ localization.translate('bankTransferSwitchMessage') }}</p>
+            <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
+              <button type="button" (click)="onDeclineBankTransfer()"
+                style="padding:12px 20px;border-radius:10px;border:1px solid rgba(128,128,128,0.4);background:transparent;color:inherit;cursor:pointer;">
+                {{ localization.translate('bankTransferSwitchDecline') }}
+              </button>
+              <button type="button" (click)="onConfirmBankTransfer()"
+                style="padding:12px 20px;border-radius:10px;border:none;background:var(--lokotro-primary,#0891b2);color:#fff;cursor:pointer;font-weight:600;">
+                {{ localization.translate('bankTransferSwitchConfirm') }}
+              </button>
+            </div>
+          </div>
+        }
+
         <!-- OTP Verification Screen -->
         @if (currentScreen === 'ewalletOtpScreen') {
           <lokotro-otp-verification
@@ -5632,5 +6192,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LOKOTRO_ENV_CONFIG, LOKOTRO_PAY_CONFIG, LOKOTRO_PAY_FEATURE_FLAGS, 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, visiblePaymentMethods };
+export { LOKOTRO_ENV_CONFIG, LOKOTRO_PAY_CONFIG, LOKOTRO_PAY_FEATURE_FLAGS, LokotroBankTransferFormComponent, 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, visiblePaymentMethods };
 //# sourceMappingURL=bloonio-lokotro-pay.mjs.map