@miden-npm/angular 2.1.4 → 2.1.6

package/fesm2022/miden-npm-angular.mjs

@@ -1662,6 +1662,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class PhoneNumberInputComponent {
     phoneCodeOptions = [];
+    /**
+     * This is the phone number value from the parent.
+     * We'll keep the internal input in sync with it.
+     */
     value;
     valueChange = new EventEmitter();
     codeChange = new EventEmitter();
@@ -1684,6 +1688,8 @@ class PhoneNumberInputComponent {
     selectedCode = '+1';
     ngOnInit() {
         this.initSelectedCode();
+        // ✅ hydrate internal input from parent value on first mount
+        this.syncPhoneNumberFromInput(this.value);
     }
     ngOnChanges(changes) {
         if (changes['defaultCountryCode'] && !changes['defaultCountryCode'].firstChange) {
@@ -1692,6 +1698,11 @@ class PhoneNumberInputComponent {
         if (changes['phoneCodeOptions'] && !changes['phoneCodeOptions'].firstChange) {
             this.ensureValidSelection();
         }
+        // ✅ whenever parent value changes (or component remounts with an existing value),
+        // update the internal form control so the UI shows it.
+        if (changes['value']) {
+            this.syncPhoneNumberFromInput(changes['value'].currentValue);
+        }
     }
     get safeDefaultCode() {
         return this.phoneCodeOptions?.[0]?.value ?? '+1';
@@ -1710,21 +1721,36 @@ class PhoneNumberInputComponent {
     initSelectedCode() {
         const nextValue = this.defaultCountryCode ?? this.safeDefaultCode;
         this.selectedCode = nextValue;
+        // keep form select in sync
+        this.phoneNumberInputForm.patchValue({ phoneNumberExt: nextValue }, { emitEvent: false });
+        // emit formatted code to parent
         this.codeChange.emit(this.getFormattedCode(nextValue));
-        this.phoneNumberInputForm.patchValue({ phoneNumberExt: nextValue });
     }
     ensureValidSelection() {
         const exists = this.phoneCodeOptions.some((o) => o.value === this.selectedCode);
         if (!exists) {
             this.selectedCode = this.defaultCountryCode ?? this.safeDefaultCode;
+            this.phoneNumberInputForm.patchValue({ phoneNumberExt: this.selectedCode }, { emitEvent: false });
             this.codeChange.emit(this.getFormattedCode(this.selectedCode));
         }
     }
+    syncPhoneNumberFromInput(val) {
+        const current = this.phoneNumberInputForm.get('phoneNumber')?.value ?? '';
+        const next = val ?? '';
+        if (current !== next) {
+            this.phoneNumberInputForm.patchValue({ phoneNumber: next }, { emitEvent: false });
+        }
+    }
     onCountryChange(e) {
         this.selectedCode = e;
-        this.codeChange.emit(this.getFormattedCode(e));
+        // keep internal form control in sync
+        this.phoneNumberInputForm.patchValue({ phoneNumberExt: this.selectedCode }, { emitEvent: false });
+        this.codeChange.emit(this.getFormattedCode(this.selectedCode));
     }
     onPhoneChange(e) {
+        // keep internal form control in sync
+        this.phoneNumberInputForm.patchValue({ phoneNumber: e }, { emitEvent: false });
+        // emit to parent
         this.valueChange.emit(e);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PhoneNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1879,6 +1905,40 @@ class CheckoutService {
             headers,
         });
     }
+    validateCardPaymentOtp(environment, { merchantId, ...rest }, caller = 'buzapay') {
+        const baseUrl = getBaseUrl(environment, caller);
+        if (!merchantId || merchantId.trim() === '') {
+            throw new Error('merchantId is required for authorizeCardPayment');
+        }
+        const headers = new HttpHeaders({
+            merchantId: merchantId.trim(),
+            uniqueKey: merchantId.trim(),
+        });
+        const apiKey = {
+            buzapay: 'api/v1/checkout/card-payment/validate-otp',
+            miden: '',
+        };
+        return this.http.post(`${baseUrl}/${apiKey[caller]}`, rest, {
+            headers,
+        });
+    }
+    resendCardPaymentOtp(environment, { merchantId, ...rest }, caller = 'buzapay') {
+        const baseUrl = getBaseUrl(environment, caller);
+        if (!merchantId || merchantId.trim() === '') {
+            throw new Error('merchantId is required for authorizeCardPayment');
+        }
+        const headers = new HttpHeaders({
+            merchantId: merchantId.trim(),
+            uniqueKey: merchantId.trim(),
+        });
+        const apiKey = {
+            buzapay: 'api/v1/checkout/card-payment/resend-otp',
+            miden: '',
+        };
+        return this.http.post(`${baseUrl}/${apiKey[caller]}`, rest, {
+            headers,
+        });
+    }
     getPaymentReferenceDetails(environment, paymentReference, caller = 'buzapay') {
         const baseUrl = getBaseUrl(environment, caller);
         const apiKey = {
@@ -2001,6 +2061,8 @@ class PayByCardComponent {
     loadingCountries = false;
     loadingStates = false;
     isMakingPayment = false;
+    isValidatingOtp = false;
+    isSendingOtp = false;
     cardType = '';
     message = '';
     transactionReference = '';
@@ -2033,6 +2095,9 @@ class PayByCardComponent {
         cvv: new FormControl('', [Validators.required]),
         cardPin: new FormControl(''), // Only required for Verve cards
     });
+    otpForm = new FormGroup({
+        otp: new FormControl('', [Validators.required]),
+    });
     onCodeChange(e) {
         this.billingForm.patchValue({ phoneNumberExt: e });
     }
@@ -2040,7 +2105,11 @@ class PayByCardComponent {
         this.billingForm.patchValue({ phoneNumber: e });
     }
     getError(formKey, controlName, label) {
-        const control = formKey === 'billing' ? this.billingForm.get(controlName) : this.payForm.get(controlName);
+        const control = formKey === 'billing'
+            ? this.billingForm.get(controlName)
+            : formKey === 'pay'
+                ? this.payForm.get(controlName)
+                : this.otpForm.get(controlName);
         return getValidationErrorMessage(control, label);
     }
     get formatAmountHandler() {
@@ -2263,189 +2332,250 @@ class PayByCardComponent {
                 this.billingForm.markAllAsTouched();
             }
         }
-        else {
+        else if (this.formIndex === 1) {
             if (this.payForm && this.payForm.valid) {
-                try {
-                    this.isMakingPayment = true;
-                    // Create card details object for encryption
-                    const cardDetails = {
-                        pan: this.payForm.value.cardNo ? this.payForm.value.cardNo.replaceAll(' ', '') : '',
-                        expiryDate: this.payForm.value.expireDate ?? '',
-                        cvv: this.payForm.value.cvv ?? '',
-                        cardScheme: this.cardType,
-                        nameOnCard: this.payForm.value.customerName ?? '',
-                        ...(this.cardType === 'Verve' && { pin: this.payForm.value.cardPin ?? '' }),
+                this.isMakingPayment = true;
+                // Create card details object for encryption
+                const cardDetails = {
+                    pan: this.payForm.value.cardNo ? this.payForm.value.cardNo.replaceAll(' ', '') : '',
+                    expiryDate: this.payForm.value.expireDate ?? '',
+                    cvv: this.payForm.value.cvv ?? '',
+                    cardScheme: this.cardType,
+                    nameOnCard: this.payForm.value.customerName ?? '',
+                    ...(this.cardType === 'Verve' && { pin: this.payForm.value.cardPin ?? '' }),
+                };
+                // Get billing details from the form control
+                const billingDetails = {
+                    address2: this.billingForm.value.address2 ?? '',
+                    address1: this.billingForm.value.address1 ?? '',
+                    postalCode: this.billingForm.value.postalCode ?? '',
+                    state: this.billingForm.value.state ?? '',
+                    city: this.billingForm.value.city ?? '',
+                    country: this.billingForm.value.country ?? '',
+                    emailAddress: this.billingForm.value.emailAddress ?? '',
+                    phoneNumber: this.billingForm.value.phoneNumber
+                        ? `${this.billingForm.value.phoneNumberExt}${this.billingForm.value.phoneNumber}`
+                        : '',
+                };
+                // Encrypt card details using payload encryption method
+                const encryptedCardDetails = this.encryptService.encryptPayload(this.secretKey, cardDetails);
+                // Test: Decrypt to verify encryption works
+                // const decryptedTest = this.encryptService.decryptPayload(
+                //   this.environment,
+                //   encryptedCardDetails.requestParam,
+                // );
+                let payload = null;
+                let payloadMiden = null;
+                if (this.caller === 'buzapay') {
+                    payload = {
+                        customerId: this.paymentObject?.email || this.payForm.value.customerName || '',
+                        amount: this.paymentObject?.amount.toString(),
+                        currency: this.paymentObject?.currency || 'USD',
+                        narration: this.paymentObject?.narration || 'Test transaction',
+                        encryptedCardDetails: encryptedCardDetails.requestParam, // Use the encrypted card details
+                        billingDetails: billingDetails,
+                        redirectUrl: this.paymentObject?.redirectUrl || `${this.baseAppUrl}/account/three-ds-status`,
+                        paymentReference: this.transactionReference,
+                        isCheckout: true,
                     };
-                    // Get billing details from the form control
-                    const billingDetails = {
-                        address2: this.billingForm.value.address2 ?? '',
-                        address1: this.billingForm.value.address1 ?? '',
-                        postalCode: this.billingForm.value.postalCode ?? '',
-                        state: this.billingForm.value.state ?? '',
-                        city: this.billingForm.value.city ?? '',
-                        country: this.billingForm.value.country ?? '',
-                        emailAddress: this.billingForm.value.emailAddress ?? '',
-                        phoneNumber: this.billingForm.value.phoneNumber
-                            ? `${this.billingForm.value.phoneNumberExt}${this.billingForm.value.phoneNumber}`
-                            : '',
+                }
+                else {
+                    const deviceInformation = buildDeviceInformation();
+                    payloadMiden = {
+                        customerId: this.paymentObject?.email || this.payForm.value.customerName || '',
+                        amount: this.paymentObject?.amount.toString(),
+                        currency: this.paymentObject?.currency || 'USD',
+                        narration: this.paymentObject?.narration || 'Test transaction',
+                        encryptedCardDetails: encryptedCardDetails.requestParam, // Use the encrypted card details
+                        billingDetails: billingDetails,
+                        redirectUrl: this.paymentObject?.redirectUrl || `${this.baseAppUrl}/pay/verification`,
+                        paymentReference: this.transactionReference,
+                        isCheckout: true,
+                        postBackUrl: '',
+                        saveCard: false,
+                        deviceInformation,
                     };
-                    // Encrypt card details using payload encryption method
-                    const encryptedCardDetails = this.encryptService.encryptPayload(this.secretKey, cardDetails);
-                    // Test: Decrypt to verify encryption works
-                    // const decryptedTest = this.encryptService.decryptPayload(
-                    //   this.environment,
-                    //   encryptedCardDetails.requestParam,
-                    // );
-                    let payload = null;
-                    let payloadMiden = null;
-                    if (this.caller === 'buzapay') {
-                        payload = {
-                            customerId: this.paymentObject?.email || this.payForm.value.customerName || '',
-                            amount: this.paymentObject?.amount.toString(),
-                            currency: this.paymentObject?.currency || 'USD',
-                            narration: this.paymentObject?.narration || 'Test transaction',
-                            encryptedCardDetails: encryptedCardDetails.requestParam, // Use the encrypted card details
-                            billingDetails: billingDetails,
-                            redirectUrl: this.paymentObject?.redirectUrl || `${this.baseAppUrl}/account/three-ds-status`,
-                            paymentReference: this.transactionReference,
-                            isCheckout: true,
-                        };
-                    }
-                    else {
-                        const deviceInformation = buildDeviceInformation();
-                        payloadMiden = {
-                            customerId: this.paymentObject?.email || this.payForm.value.customerName || '',
-                            amount: this.paymentObject?.amount.toString(),
-                            currency: this.paymentObject?.currency || 'USD',
-                            narration: this.paymentObject?.narration || 'Test transaction',
-                            encryptedCardDetails: encryptedCardDetails.requestParam, // Use the encrypted card details
-                            billingDetails: billingDetails,
-                            redirectUrl: this.paymentObject?.redirectUrl || `${this.baseAppUrl}/pay/verification`,
-                            paymentReference: this.transactionReference,
-                            isCheckout: true,
-                            postBackUrl: '',
-                            saveCard: false,
-                            deviceInformation,
-                        };
+                }
+                this.checkout
+                    .authorizeCardPayment(this.environment, this.caller === 'buzapay'
+                    ? {
+                        ...payload,
+                        merchantId: this.secretKey,
                     }
-                    this.checkout
-                        .authorizeCardPayment(this.environment, this.caller === 'buzapay'
-                        ? {
-                            ...payload,
-                            merchantId: this.secretKey,
+                    : {
+                        ...payloadMiden,
+                        merchantId: this.secretKey,
+                    }, this.caller)
+                    .subscribe({
+                    next: async (response) => {
+                        let processedResponse = response;
+                        // Check if response is encrypted (has responseParam)
+                        if (response?.responseParam) {
+                            // Decrypt the response
+                            processedResponse = this.encryptService.decryptPayload(this.environment, response.responseParam);
                         }
-                        : {
-                            ...payloadMiden,
-                            merchantId: this.secretKey,
-                        }, this.caller)
-                        .subscribe({
-                        next: async (response) => {
-                            let processedResponse = response;
-                            // Check if response is encrypted (has responseParam)
-                            if (response?.responseParam) {
-                                // Decrypt the response
-                                processedResponse = this.encryptService.decryptPayload(this.environment, response.responseParam);
-                            }
-                            if (processedResponse?.isSuccessful) {
-                                // Miden flow
-                                if (this.caller === 'miden') {
-                                    this.handleMidenCard(processedResponse);
-                                    return;
-                                }
-                                // Check for 3DS authentication requirement
-                                if (processedResponse.threeDsInteractionRequired === true) {
-                                    // Store 3DS data for the authentication page
-                                    const threeDsData = {
-                                        transactionReference: processedResponse.transactionReference,
-                                        threeDsHtml: processedResponse.threeDsHtml,
-                                        amount: processedResponse.amount,
-                                        responseMessage: processedResponse.responseMessage,
-                                        // Pass all 3DS details
-                                        paReq: processedResponse.threeDsHtml?.paReq,
-                                        termUrl: processedResponse.threeDsHtml?.termUrl,
-                                        action: processedResponse.threeDsHtml?.action,
-                                        acsUrl: processedResponse.threeDsHtml?.acsUrl,
-                                        md: processedResponse.threeDsHtml?.md,
-                                    };
-                                    // Encrypt 3DS data to pass as url param
-                                    const stringifiedThreeDsData = btoa(JSON.stringify(threeDsData));
-                                    // Open 3DS authentication page in a new tab
-                                    const threeDsUrl = `${this.baseAppUrl}/account/three-ds-confirm?threeDsData=${encodeURIComponent(stringifiedThreeDsData)}&paymentReference=${processedResponse.transactionReference}`;
-                                    window.open(threeDsUrl, '_self', 'noopener,noreferrer');
-                                    this.message =
-                                        '3D Secure authentication opened in new tab. Please complete the verification';
-                                    this.isMakingPayment = false;
-                                    return;
-                                }
-                                // Fallback check: if response message indicates 3DS is required
-                                if (processedResponse.responseMessage === 'Payer Interaction Required' &&
-                                    processedResponse.threeDsHtml) {
-                                    // Store 3DS data for the authentication page
-                                    const threeDsData = {
-                                        transactionReference: processedResponse.transactionReference,
-                                        threeDsHtml: processedResponse.threeDsHtml,
-                                        amount: processedResponse.amount,
-                                        responseMessage: processedResponse.responseMessage,
-                                        // Pass all 3DS details
-                                        paReq: processedResponse.threeDsHtml?.paReq,
-                                        termUrl: processedResponse.threeDsHtml?.termUrl,
-                                        action: processedResponse.threeDsHtml?.action,
-                                        acsUrl: processedResponse.threeDsHtml?.acsUrl,
-                                        md: processedResponse.threeDsHtml?.md,
-                                    };
-                                    // Encrypt 3DS data to pass as url param
-                                    const stringifiedThreeDsData = btoa(JSON.stringify(threeDsData));
-                                    // Open 3DS authentication page in a new tab
-                                    const threeDsUrl = `${this.baseAppUrl}/account/three-ds-confirm?threeDsData=${encodeURIComponent(stringifiedThreeDsData)}&paymentReference=${processedResponse.transactionReference}`;
-                                    window.open(threeDsUrl, '_self', 'noopener,noreferrer');
-                                    this.message =
-                                        '3D Secure authentication opened in new tab. Please complete the verification';
-                                    this.isMakingPayment = false;
-                                    return;
-                                }
-                                // Emit the transaction reference to parent component
-                                if (processedResponse.transactionReference &&
-                                    processedResponse.transactionReference.trim() !== '') {
-                                    this.paymentAuthorized.emit({
-                                        paymentId: processedResponse.transactionReference,
-                                        paymentDate: response?.data?.updatedAt ?? new Date().toISOString(),
-                                        paymentStatus: 'authorized',
-                                        message: this.message,
-                                    });
-                                }
-                                this.message = 'Card payment authorized successfully';
+                        if (processedResponse?.isSuccessful) {
+                            // Verve OTPValidationRequired flow
+                            if (processedResponse?.otpValidationRequired) {
                                 this.isMakingPayment = false;
+                                this.setFormIndex(2);
+                                this.cdr.markForCheck();
+                                return;
                             }
-                            else {
+                            // Miden flow
+                            if (this.caller === 'miden') {
+                                this.handleMidenCard(processedResponse);
+                                return;
+                            }
+                            // Check for 3DS authentication requirement
+                            if (processedResponse.threeDsInteractionRequired === true) {
+                                // Store 3DS data for the authentication page
+                                const threeDsData = {
+                                    transactionReference: processedResponse.transactionReference,
+                                    threeDsHtml: processedResponse.threeDsHtml,
+                                    amount: processedResponse.amount,
+                                    responseMessage: processedResponse.responseMessage,
+                                    // Pass all 3DS details
+                                    paReq: processedResponse.threeDsHtml?.paReq,
+                                    termUrl: processedResponse.threeDsHtml?.termUrl,
+                                    action: processedResponse.threeDsHtml?.action,
+                                    acsUrl: processedResponse.threeDsHtml?.acsUrl,
+                                    md: processedResponse.threeDsHtml?.md,
+                                };
+                                // Encrypt 3DS data to pass as url param
+                                const stringifiedThreeDsData = btoa(JSON.stringify(threeDsData));
+                                // Open 3DS authentication page in a new tab
+                                const threeDsUrl = `${this.baseAppUrl}/account/three-ds-confirm?threeDsData=${encodeURIComponent(stringifiedThreeDsData)}&paymentReference=${processedResponse.transactionReference}`;
+                                window.open(threeDsUrl, '_self', 'noopener,noreferrer');
+                                this.message =
+                                    '3D Secure authentication opened in new tab. Please complete the verification';
                                 this.isMakingPayment = false;
-                                this.message = processedResponse.responseMessage || 'Payment failed';
-                                this.onError.emit({ errorMessage: this.message });
+                                return;
                             }
-                        },
-                        error: (err) => {
-                            this.isMakingPayment = false;
-                            if (err.error?.responseParam) {
-                                // Decrypt error response
-                                const decryptedErrorResponse = this.encryptService.decryptPayload(this.environment, err.error.responseParam);
-                                this.message = decryptedErrorResponse.responseMessage || 'Payment failed';
+                            // Fallback check: if response message indicates 3DS is required
+                            if (processedResponse.responseMessage === 'Payer Interaction Required' &&
+                                processedResponse.threeDsHtml) {
+                                // Store 3DS data for the authentication page
+                                const threeDsData = {
+                                    transactionReference: processedResponse.transactionReference,
+                                    threeDsHtml: processedResponse.threeDsHtml,
+                                    amount: processedResponse.amount,
+                                    responseMessage: processedResponse.responseMessage,
+                                    // Pass all 3DS details
+                                    paReq: processedResponse.threeDsHtml?.paReq,
+                                    termUrl: processedResponse.threeDsHtml?.termUrl,
+                                    action: processedResponse.threeDsHtml?.action,
+                                    acsUrl: processedResponse.threeDsHtml?.acsUrl,
+                                    md: processedResponse.threeDsHtml?.md,
+                                };
+                                // Encrypt 3DS data to pass as url param
+                                const stringifiedThreeDsData = btoa(JSON.stringify(threeDsData));
+                                // Open 3DS authentication page in a new tab
+                                const threeDsUrl = `${this.baseAppUrl}/account/three-ds-confirm?threeDsData=${encodeURIComponent(stringifiedThreeDsData)}&paymentReference=${processedResponse.transactionReference}`;
+                                window.open(threeDsUrl, '_self', 'noopener,noreferrer');
+                                this.message =
+                                    '3D Secure authentication opened in new tab. Please complete the verification';
+                                this.isMakingPayment = false;
+                                return;
                             }
-                            else {
-                                this.message = err.error.message || err.error.responseMessage || 'Payment failed';
+                            // Emit the transaction reference to parent component
+                            if (processedResponse.transactionReference &&
+                                processedResponse.transactionReference.trim() !== '') {
+                                this.paymentAuthorized.emit({
+                                    paymentId: processedResponse.transactionReference,
+                                    paymentDate: response?.data?.updatedAt ?? new Date().toISOString(),
+                                    paymentStatus: 'authorized',
+                                    message: this.message,
+                                });
                             }
+                            this.message = 'Card payment authorized successfully';
+                            this.isMakingPayment = false;
+                        }
+                        // Failure path for miden
+                        if (processedResponse && !processedResponse.isSuccessful && this.caller === 'miden') {
+                            this.message = processedResponse.responseMessage;
                             this.onError.emit({ errorMessage: this.message });
-                        },
-                    });
-                }
-                catch (error) {
-                    this.isMakingPayment = false;
-                    this.message = 'An unexpected error occurred';
-                    this.onError.emit({ errorMessage: this.message });
-                }
+                        }
+                        // Failure path for buzapay
+                        if (processedResponse && processedResponse.message && this.caller === 'buzapay') {
+                            this.message = response.message;
+                            this.onError.emit({ errorMessage: this.message });
+                        }
+                        this.isMakingPayment = false;
+                    },
+                    error: (err) => {
+                        this.isMakingPayment = false;
+                        if (err.error?.responseParam) {
+                            // Decrypt error response
+                            const decryptedErrorResponse = this.encryptService.decryptPayload(this.environment, err.error.responseParam);
+                            this.message = decryptedErrorResponse.responseMessage || 'Payment failed';
+                        }
+                        else {
+                            this.message = err.error.message || err.error.responseMessage || 'Payment failed';
+                        }
+                        this.onError.emit({ errorMessage: this.message });
+                    },
+                });
             }
             else {
                 this.payForm.markAllAsTouched();
             }
         }
+        else {
+            if (this.otpForm && this.otpForm.valid) {
+                this.isValidatingOtp = true;
+                this.checkout
+                    .validateCardPaymentOtp(this.environment, {
+                    transactionReference: this.transactionReference,
+                    otp: this.otpForm.value.otp,
+                    merchantId: this.secretKey,
+                }, this.caller)
+                    .subscribe({
+                    next: async (response) => {
+                        this.isValidatingOtp = false;
+                        this.paymentAuthorized.emit({
+                            paymentId: response.transactionReference,
+                            paymentDate: response?.data?.updatedAt ?? new Date().toISOString(),
+                            paymentStatus: 'authorized',
+                            message: response?.responseMessage,
+                        });
+                    },
+                    error: (err) => {
+                        this.isValidatingOtp = false;
+                        this.message =
+                            err.error.message || err.error.responseMessage || 'Validate OTP Failed';
+                        this.onError.emit({ errorMessage: this.message });
+                    },
+                });
+            }
+            else {
+                this.otpForm.markAllAsTouched();
+            }
+        }
+    }
+    async resendOtp() {
+        this.isSendingOtp = true;
+        this.checkout
+            .resendCardPaymentOtp(this.environment, {
+            transactionReference: this.transactionReference,
+            merchantId: this.secretKey,
+        }, this.caller)
+            .subscribe({
+            next: async (response) => {
+                if (response?.isSuccessful) {
+                    this.isSendingOtp = false;
+                    this.notyf.success({
+                        message: 'OTP Sent Successfully.',
+                        ...toastConfig,
+                    });
+                }
+            },
+            error: (err) => {
+                this.isSendingOtp = false;
+                this.message = err.error.message || err.error.responseMessage || 'OTP Sending Failed';
+                this.onError.emit({ errorMessage: this.message });
+            },
+        });
     }
     async ngOnInit() {
         this.notyf = new Notyf();
@@ -2463,7 +2593,7 @@ class PayByCardComponent {
         }).sort((a, b) => a.label.localeCompare(b.label));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, deps: [{ token: ResourceService }, { token: i0.ChangeDetectorRef }, { token: CheckoutService }, { token: EncryptService }, { token: i4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"false\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div>\n          }\n        </div>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex > 0) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n        <base-button\n          [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"proceedHandler()\"\n        ></base-button>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType", "showBottomText"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PhoneNumberInputComponent, selector: "base-phone-number-input", inputs: ["phoneCodeOptions", "value", "label", "required", "disabled", "loading", "validationError", "hint", "defaultCountryCode", "preventPaste", "showCopyIcon", "containerClassName", "inputClassName", "placeholder"], outputs: ["valueChange", "codeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <!-- <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div> -->\n          }\n        </div>\n      </form>\n    }\n\n    <!-- Verve OTP Verification -->\n    @if (formIndex === 2) {\n      <form [formGroup]=\"otpForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"otp\"\n              label=\"OTP\"\n              [required]=\"true\"\n              [validationError]=\"getError('otp', 'otp', 'OTP') || ''\"\n            ></base-input>\n          </div>\n        </div>\n        <p class=\"text-primary text-sm mt-2\">\n          Didn't get OTP?\n          <span\n            [class]=\"isSendingOtp ? '' : 'underline cursor-pointer'\"\n            (click)=\"isSendingOtp ? null : resendOtp()\"\n            >{{ isSendingOtp ? 'Sending...' : 'Resend OTP' }}</span\n          >\n        </p>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex > 0) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex < 2) {\n        <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n          <base-button\n            [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isMakingPayment\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex === 2) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Validate OTP\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isValidatingOtp\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType", "showBottomText"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PhoneNumberInputComponent, selector: "base-phone-number-input", inputs: ["phoneCodeOptions", "value", "label", "required", "disabled", "loading", "validationError", "hint", "defaultCountryCode", "preventPaste", "showCopyIcon", "containerClassName", "inputClassName", "placeholder"], outputs: ["valueChange", "codeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, decorators: [{
             type: Component,
@@ -2473,7 +2603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         SelectComponent,
                         ReactiveFormsModule,
                         PhoneNumberInputComponent,
-                    ], template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"false\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div>\n          }\n        </div>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex > 0) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n        <base-button\n          [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"proceedHandler()\"\n        ></base-button>\n      </div>\n    </div>\n  </div>\n}\n" }]
+                    ], template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <!-- <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div> -->\n          }\n        </div>\n      </form>\n    }\n\n    <!-- Verve OTP Verification -->\n    @if (formIndex === 2) {\n      <form [formGroup]=\"otpForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"otp\"\n              label=\"OTP\"\n              [required]=\"true\"\n              [validationError]=\"getError('otp', 'otp', 'OTP') || ''\"\n            ></base-input>\n          </div>\n        </div>\n        <p class=\"text-primary text-sm mt-2\">\n          Didn't get OTP?\n          <span\n            [class]=\"isSendingOtp ? '' : 'underline cursor-pointer'\"\n            (click)=\"isSendingOtp ? null : resendOtp()\"\n            >{{ isSendingOtp ? 'Sending...' : 'Resend OTP' }}</span\n          >\n        </p>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex > 0) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex < 2) {\n        <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n          <base-button\n            [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isMakingPayment\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex === 2) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Validate OTP\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isValidatingOtp\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: ResourceService }, { type: i0.ChangeDetectorRef }, { type: CheckoutService }, { type: EncryptService }, { type: i4.DomSanitizer }], propDecorators: { secretKey: [{
                 type: Input
             }], environment: [{
@@ -2776,6 +2906,10 @@ class PayByTransferComponent {
         this.countDownTime = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
         this.cdr.markForCheck(); // 👈 notify OnPush to re-render
     }
+    resetPaymentAccountDetails() {
+        this.paymentAccountDetails = null;
+        this.cdr.markForCheck();
+    }
     transferForm = new FormGroup({
         customerName: new FormControl('', [Validators.required]),
     });
@@ -2842,7 +2976,7 @@ class PayByTransferComponent {
             await this.checkout.generatePaymentAccount(this.environment, payload, this.caller).subscribe({
                 next: async (response) => {
                     if (response?.isSuccessful) {
-                        this.paymentAccountDetails = response;
+                        this.paymentAccountDetails = this.caller === 'buzapay' ? response.data : response;
                         this.startTimer();
                         this.message = 'Virtual account generated successfully for payment.';
                         this.isMakingPayment = false;
@@ -2866,13 +3000,14 @@ class PayByTransferComponent {
             .subscribe({
             next: async (response) => {
                 if (response?.isSuccessful) {
-                    this.paymentReferenceDetails = response.data;
+                    this.paymentReferenceDetails =
+                        this.caller === 'buzapay' ? response.data : response;
                     // Check if payment has been made (paymentStatus is "Payment Received")
-                    if (response.data?.paymentStatus === 'Payment Received') {
+                    if (this.paymentReferenceDetails?.paymentStatus === 'Payment Received') {
                         this.paymentMade = true;
                     }
-                    if (response.data?.finalTransactionStatus === null ||
-                        response.data?.paymentStatus === null) {
+                    if (this.paymentReferenceDetails?.finalTransactionStatus === null ||
+                        this.paymentReferenceDetails?.paymentStatus === null) {
                         if (this.isConfirmCall) {
                             this.message = 'Transaction not confirmed !!';
                         }
@@ -2881,7 +3016,7 @@ class PayByTransferComponent {
                             this.paymentReferenceStatus = 'pending';
                             this.paymentAuthorized.emit({
                                 paymentId: this.transactionReference,
-                                paymentDate: response?.data?.updatedAt ?? new Date().toISOString(),
+                                paymentDate: this.paymentReferenceDetails?.updatedAt ?? new Date().toISOString(),
                                 paymentStatus: this.paymentReferenceStatus,
                                 message: this.message,
                             });
@@ -2890,18 +3025,18 @@ class PayByTransferComponent {
                             this.paymentReferenceStatus = 'confirmed';
                             this.paymentAuthorized.emit({
                                 paymentId: this.transactionReference,
-                                paymentDate: response?.data?.updatedAt ?? new Date().toISOString(),
+                                paymentDate: this.paymentReferenceDetails?.updatedAt ?? new Date().toISOString(),
                                 paymentStatus: this.paymentReferenceStatus,
                                 message: this.message,
                             });
                         }
                     }
-                    else if (response.data?.finalTransactionStatus === 'Success' ||
-                        response.data?.paymentStatus === 'Received' ||
-                        response.data?.paymentStatus === 'Payment Received') {
+                    else if (this.paymentReferenceDetails?.finalTransactionStatus === 'Success' ||
+                        this.paymentReferenceDetails?.paymentStatus === 'Received' ||
+                        this.paymentReferenceDetails?.paymentStatus === 'Payment Received') {
                         this.paymentAuthorized.emit({
                             paymentId: this.transactionReference,
-                            paymentDate: response?.data?.updatedAt ?? new Date().toISOString(),
+                            paymentDate: this.paymentReferenceDetails?.updatedAt ?? new Date().toISOString(),
                             paymentStatus: this.paymentReferenceStatus,
                             message: this.message,
                         });
@@ -2915,7 +3050,7 @@ class PayByTransferComponent {
                     this.message = response.responseMessage;
                     this.paymentAuthorized.emit({
                         paymentId: this.transactionReference,
-                        paymentDate: null,
+                        paymentDate: new Date().toISOString(),
                         paymentStatus: this.paymentReferenceStatus,
                         message: this.message,
                     });
@@ -2941,7 +3076,7 @@ class PayByTransferComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByTransferComponent, deps: [{ token: CheckoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByTransferComponent, isStandalone: true, selector: "pay-by-transfer", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "<div class=\"flex flex-col gap-10\">\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Customer Name\"\n          [required]=\"true\"\n          [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n        ></base-input>\n\n        <base-button\n          [label]=\"'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"payHandler()\"\n        ></base-button>\n      </div>\n    </form>\n  }\n\n  @if (paymentAccountDetails) {\n    <div class=\"flex flex-col gap-10\">\n      <div\n        class=\"p-4 rounded-lg flex flex-col gap-6\"\n        [ngClass]=\"{\n          'bg-[#FAFDFF] border border-[#F0FAFF]': caller === 'miden',\n          'bg-[#EFF7FF]': caller === 'buzapay',\n        }\"\n      >\n        <base-label-info label=\"Bank Name\" [value]=\"paymentAccountDetails.bank\"></base-label-info>\n        <base-label-info\n          label=\"Account Name\"\n          [value]=\"paymentAccountDetails.accountName\"\n        ></base-label-info>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info\n            label=\"Account Number\"\n            [value]=\"paymentAccountDetails.accountNumber\"\n          ></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n        </div>\n      </div>\n\n      @if (caller === 'buzapay') {\n        <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n          This account is for this transaction only and expires in\n          <span class=\"text-orange-500\">{{ countDownTime }}</span>\n        </p>\n      } @else {\n        <div class=\"p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3\">\n          <base-circle-countdown\n            [value]=\"remainingSeconds\"\n            [total]=\"1800\"\n            [middleText]=\"countDownTime\"\n            [size]=\"40\"\n            [stroke]=\"2\"\n            style=\"color: #3b82f6\"\n          ></base-circle-countdown>\n          <p class=\"text-body-3xs font-medium text-light-copy\">\n            This account is for this transaction only and expires in\n            <span class=\"text-[#1383E8]\">{{ countDownTime }}...</span>\n          </p>\n        </div>\n      }\n\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isFetchingPaymentDetails\"\n          (onClick)=\"getReferenceDetails()\"\n        ></base-button>\n        <p class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\">\n          Cancel Payment\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: LabelInfoComponent, selector: "base-label-info", inputs: ["type", "label", "labelCustomClass", "valueImageSrc", "valueImageCustomClass", "valueImagePosition", "hasValueCopy", "value", "valueCustomClass", "alignRight"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CircleCountdownComponent, selector: "base-circle-countdown", inputs: ["value", "total", "middleText", "size", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByTransferComponent, isStandalone: true, selector: "pay-by-transfer", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "<div class=\"flex flex-col gap-10\">\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Customer Name\"\n          [required]=\"true\"\n          [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n        ></base-input>\n\n        <base-button\n          [label]=\"'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"payHandler()\"\n        ></base-button>\n      </div>\n    </form>\n  }\n\n  @if (paymentAccountDetails) {\n    <div class=\"flex flex-col gap-10\">\n      <div\n        class=\"p-4 rounded-lg flex flex-col gap-6\"\n        [ngClass]=\"{\n          'bg-[#FAFDFF] border border-[#F0FAFF]': caller === 'miden',\n          'bg-[#EFF7FF]': caller === 'buzapay',\n        }\"\n      >\n        <base-label-info label=\"Bank Name\" [value]=\"paymentAccountDetails.bank\"></base-label-info>\n        <base-label-info\n          label=\"Account Name\"\n          [value]=\"paymentAccountDetails.accountName\"\n        ></base-label-info>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info\n            label=\"Account Number\"\n            [value]=\"paymentAccountDetails.accountNumber\"\n          ></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n        </div>\n      </div>\n\n      @if (caller === 'buzapay') {\n        <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n          This account is for this transaction only and expires in\n          <span class=\"text-orange-500\">{{ countDownTime }}</span>\n        </p>\n      } @else {\n        <div class=\"p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3\">\n          <base-circle-countdown\n            [value]=\"remainingSeconds\"\n            [total]=\"1800\"\n            [middleText]=\"countDownTime\"\n            [size]=\"40\"\n            [stroke]=\"2\"\n            style=\"color: #3b82f6\"\n          ></base-circle-countdown>\n          <p class=\"text-body-3xs font-medium text-light-copy\">\n            This account is for this transaction only and expires in\n            <span class=\"text-[#1383E8]\">{{ countDownTime }}...</span>\n          </p>\n        </div>\n      }\n\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isFetchingPaymentDetails\"\n          (onClick)=\"getReferenceDetails()\"\n        ></base-button>\n        <p\n          class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\"\n          (click)=\"resetPaymentAccountDetails()\"\n        >\n          Cancel Payment\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: LabelInfoComponent, selector: "base-label-info", inputs: ["type", "label", "labelCustomClass", "valueImageSrc", "valueImageCustomClass", "valueImagePosition", "hasValueCopy", "value", "valueCustomClass", "alignRight"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CircleCountdownComponent, selector: "base-circle-countdown", inputs: ["value", "total", "middleText", "size", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByTransferComponent, decorators: [{
             type: Component,
@@ -2953,7 +3088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         InputComponent,
                         CommonModule,
                         CircleCountdownComponent,
-                    ], template: "<div class=\"flex flex-col gap-10\">\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Customer Name\"\n          [required]=\"true\"\n          [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n        ></base-input>\n\n        <base-button\n          [label]=\"'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"payHandler()\"\n        ></base-button>\n      </div>\n    </form>\n  }\n\n  @if (paymentAccountDetails) {\n    <div class=\"flex flex-col gap-10\">\n      <div\n        class=\"p-4 rounded-lg flex flex-col gap-6\"\n        [ngClass]=\"{\n          'bg-[#FAFDFF] border border-[#F0FAFF]': caller === 'miden',\n          'bg-[#EFF7FF]': caller === 'buzapay',\n        }\"\n      >\n        <base-label-info label=\"Bank Name\" [value]=\"paymentAccountDetails.bank\"></base-label-info>\n        <base-label-info\n          label=\"Account Name\"\n          [value]=\"paymentAccountDetails.accountName\"\n        ></base-label-info>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info\n            label=\"Account Number\"\n            [value]=\"paymentAccountDetails.accountNumber\"\n          ></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n        </div>\n      </div>\n\n      @if (caller === 'buzapay') {\n        <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n          This account is for this transaction only and expires in\n          <span class=\"text-orange-500\">{{ countDownTime }}</span>\n        </p>\n      } @else {\n        <div class=\"p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3\">\n          <base-circle-countdown\n            [value]=\"remainingSeconds\"\n            [total]=\"1800\"\n            [middleText]=\"countDownTime\"\n            [size]=\"40\"\n            [stroke]=\"2\"\n            style=\"color: #3b82f6\"\n          ></base-circle-countdown>\n          <p class=\"text-body-3xs font-medium text-light-copy\">\n            This account is for this transaction only and expires in\n            <span class=\"text-[#1383E8]\">{{ countDownTime }}...</span>\n          </p>\n        </div>\n      }\n\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isFetchingPaymentDetails\"\n          (onClick)=\"getReferenceDetails()\"\n        ></base-button>\n        <p class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\">\n          Cancel Payment\n        </p>\n      </div>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-col gap-10\">\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Customer Name\"\n          [required]=\"true\"\n          [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n        ></base-input>\n\n        <base-button\n          [label]=\"'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"payHandler()\"\n        ></base-button>\n      </div>\n    </form>\n  }\n\n  @if (paymentAccountDetails) {\n    <div class=\"flex flex-col gap-10\">\n      <div\n        class=\"p-4 rounded-lg flex flex-col gap-6\"\n        [ngClass]=\"{\n          'bg-[#FAFDFF] border border-[#F0FAFF]': caller === 'miden',\n          'bg-[#EFF7FF]': caller === 'buzapay',\n        }\"\n      >\n        <base-label-info label=\"Bank Name\" [value]=\"paymentAccountDetails.bank\"></base-label-info>\n        <base-label-info\n          label=\"Account Name\"\n          [value]=\"paymentAccountDetails.accountName\"\n        ></base-label-info>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info\n            label=\"Account Number\"\n            [value]=\"paymentAccountDetails.accountNumber\"\n          ></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n        </div>\n      </div>\n\n      @if (caller === 'buzapay') {\n        <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n          This account is for this transaction only and expires in\n          <span class=\"text-orange-500\">{{ countDownTime }}</span>\n        </p>\n      } @else {\n        <div class=\"p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3\">\n          <base-circle-countdown\n            [value]=\"remainingSeconds\"\n            [total]=\"1800\"\n            [middleText]=\"countDownTime\"\n            [size]=\"40\"\n            [stroke]=\"2\"\n            style=\"color: #3b82f6\"\n          ></base-circle-countdown>\n          <p class=\"text-body-3xs font-medium text-light-copy\">\n            This account is for this transaction only and expires in\n            <span class=\"text-[#1383E8]\">{{ countDownTime }}...</span>\n          </p>\n        </div>\n      }\n\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isFetchingPaymentDetails\"\n          (onClick)=\"getReferenceDetails()\"\n        ></base-button>\n        <p\n          class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\"\n          (click)=\"resetPaymentAccountDetails()\"\n        >\n          Cancel Payment\n        </p>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
                 type: Input
             }], environment: [{