@miden-npm/angular 2.1.3 → 2.1.5

package/fesm2022/miden-npm-angular.mjs

@@ -1569,11 +1569,11 @@ class CardComponent {
         this.back.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "base-card", inputs: { showBackButton: "showBackButton", caller: "caller" }, outputs: { back: "back" }, ngImport: i0, template: "@if (caller === 'buzapay') {\n  <div class=\"checkout-card w-full h-screen flex flex-col items-center justify-center text-white\">\n    <div class=\"flex w-1/2\">\n      @if (showBackButton) {\n        <base-back (back)=\"goBack()\"></base-back>\n      }\n\n      <div class=\"flex gap-2 w-full\">\n        <div class=\"flex flex-col gap-8 w-full\">\n          <div class=\"bg-off-white rounded-xl\">\n            <ng-content select=\"[buzapay]\"></ng-content>\n          </div>\n\n          <div class=\"flex items-center gap-2 justify-center\">\n            <p class=\"text-light-white-100 text-body-2xs font-regular\">Powered by Buzapay</p>\n            <icon-buzapay-icon color=\"#E8F4FF\"></icon-buzapay-icon>\n          </div>\n        </div>\n\n        <!-- Close Icon -->\n        <div\n          class=\"close-icon flex flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500\"\n        >\n          <p class=\"text-white\">x</p>\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white\"\n  >\n    <div class=\"flex w-1/2\">\n      @if (showBackButton) {\n        <base-back (back)=\"goBack()\"></base-back>\n      }\n\n      <div class=\"flex gap-2 w-full\">\n        <div class=\"flex flex-col gap-8 w-full\">\n          <div class=\"bg-white rounded-xl\">\n            <ng-content select=\"[miden]\"></ng-content>\n          </div>\n\n          <div class=\"flex items-center gap-4 justify-center\">\n            <icon-lock color=\"#E8F4FF\"></icon-lock>\n            <p class=\"text-light-white-100 text-body-2xs font-regular\">\n              Secured by <span class=\"font-semibold\">Miden</span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: IconBuzapayIconComponent, selector: "icon-buzapay-icon", inputs: ["color", "width", "height"] }, { kind: "component", type: IconLockComponent, selector: "icon-lock", inputs: ["color", "width", "height"] }, { kind: "component", type: BackComponent, selector: "base-back", outputs: ["back"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "base-card", inputs: { showBackButton: "showBackButton", caller: "caller" }, outputs: { back: "back" }, ngImport: i0, template: "@if (caller === 'buzapay') {\n  <div class=\"checkout-card w-full h-screen flex flex-col items-center justify-center text-white\">\n    <div class=\"flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2\">\n      @if (showBackButton) {\n        <base-back (back)=\"goBack()\"></base-back>\n      }\n\n      <div class=\"flex gap-2 w-full\">\n        <div class=\"flex flex-col gap-8 w-full\">\n          <div class=\"bg-off-white rounded-xl\">\n            <ng-content select=\"[buzapay]\"></ng-content>\n          </div>\n\n          <div class=\"flex items-center gap-2 justify-center\">\n            <p class=\"text-light-white-100 text-body-2xs font-regular\">Powered by Buzapay</p>\n            <icon-buzapay-icon color=\"#E8F4FF\"></icon-buzapay-icon>\n          </div>\n        </div>\n\n        <!-- Close Icon -->\n        <div\n          class=\"hidden sm:flex close-icon flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500\"\n        >\n          <p class=\"text-white\">x</p>\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white\"\n  >\n    <div class=\"flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2\">\n      @if (showBackButton) {\n        <base-back (back)=\"goBack()\"></base-back>\n      }\n\n      <div class=\"flex gap-2 w-full\">\n        <div class=\"flex flex-col gap-8 w-full\">\n          <div class=\"bg-white rounded-xl\">\n            <ng-content select=\"[miden]\"></ng-content>\n          </div>\n\n          <div class=\"flex items-center gap-4 justify-center\">\n            <icon-lock color=\"#E8F4FF\"></icon-lock>\n            <p class=\"text-light-white-100 text-body-2xs font-regular\">\n              Secured by <span class=\"font-semibold\">Miden</span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: IconBuzapayIconComponent, selector: "icon-buzapay-icon", inputs: ["color", "width", "height"] }, { kind: "component", type: IconLockComponent, selector: "icon-lock", inputs: ["color", "width", "height"] }, { kind: "component", type: BackComponent, selector: "base-back", outputs: ["back"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconBuzapayIconComponent, IconLockComponent, BackComponent], template: "@if (caller === 'buzapay') {\n  <div class=\"checkout-card w-full h-screen flex flex-col items-center justify-center text-white\">\n    <div class=\"flex w-1/2\">\n      @if (showBackButton) {\n        <base-back (back)=\"goBack()\"></base-back>\n      }\n\n      <div class=\"flex gap-2 w-full\">\n        <div class=\"flex flex-col gap-8 w-full\">\n          <div class=\"bg-off-white rounded-xl\">\n            <ng-content select=\"[buzapay]\"></ng-content>\n          </div>\n\n          <div class=\"flex items-center gap-2 justify-center\">\n            <p class=\"text-light-white-100 text-body-2xs font-regular\">Powered by Buzapay</p>\n            <icon-buzapay-icon color=\"#E8F4FF\"></icon-buzapay-icon>\n          </div>\n        </div>\n\n        <!-- Close Icon -->\n        <div\n          class=\"close-icon flex flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500\"\n        >\n          <p class=\"text-white\">x</p>\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white\"\n  >\n    <div class=\"flex w-1/2\">\n      @if (showBackButton) {\n        <base-back (back)=\"goBack()\"></base-back>\n      }\n\n      <div class=\"flex gap-2 w-full\">\n        <div class=\"flex flex-col gap-8 w-full\">\n          <div class=\"bg-white rounded-xl\">\n            <ng-content select=\"[miden]\"></ng-content>\n          </div>\n\n          <div class=\"flex items-center gap-4 justify-center\">\n            <icon-lock color=\"#E8F4FF\"></icon-lock>\n            <p class=\"text-light-white-100 text-body-2xs font-regular\">\n              Secured by <span class=\"font-semibold\">Miden</span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'base-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconBuzapayIconComponent, IconLockComponent, BackComponent], template: "@if (caller === 'buzapay') {\n  <div class=\"checkout-card w-full h-screen flex flex-col items-center justify-center text-white\">\n    <div class=\"flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2\">\n      @if (showBackButton) {\n        <base-back (back)=\"goBack()\"></base-back>\n      }\n\n      <div class=\"flex gap-2 w-full\">\n        <div class=\"flex flex-col gap-8 w-full\">\n          <div class=\"bg-off-white rounded-xl\">\n            <ng-content select=\"[buzapay]\"></ng-content>\n          </div>\n\n          <div class=\"flex items-center gap-2 justify-center\">\n            <p class=\"text-light-white-100 text-body-2xs font-regular\">Powered by Buzapay</p>\n            <icon-buzapay-icon color=\"#E8F4FF\"></icon-buzapay-icon>\n          </div>\n        </div>\n\n        <!-- Close Icon -->\n        <div\n          class=\"hidden sm:flex close-icon flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500\"\n        >\n          <p class=\"text-white\">x</p>\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white\"\n  >\n    <div class=\"flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2\">\n      @if (showBackButton) {\n        <base-back (back)=\"goBack()\"></base-back>\n      }\n\n      <div class=\"flex gap-2 w-full\">\n        <div class=\"flex flex-col gap-8 w-full\">\n          <div class=\"bg-white rounded-xl\">\n            <ng-content select=\"[miden]\"></ng-content>\n          </div>\n\n          <div class=\"flex items-center gap-4 justify-center\">\n            <icon-lock color=\"#E8F4FF\"></icon-lock>\n            <p class=\"text-light-white-100 text-body-2xs font-regular\">\n              Secured by <span class=\"font-semibold\">Miden</span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { showBackButton: [{
                 type: Input
             }], caller: [{
@@ -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 });
@@ -2265,182 +2291,181 @@ class PayByCardComponent {
         }
         else {
             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;
                             }
-                            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';
+                            // 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;
                             }
-                            else {
+                            // 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;
-                                this.message = processedResponse.responseMessage || 'Payment failed';
-                                this.onError.emit({ errorMessage: this.message });
-                            }
-                        },
-                        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';
+                                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();
@@ -2463,7 +2488,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          <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          <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          <base-input\n            formControlName=\"city\"\n            label=\"City\"\n            [required]=\"true\"\n            [validationError]=\"getError('billing', 'city', 'City') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"postalCode\"\n            label=\"Postal Code\"\n            [required]=\"true\"\n            [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n          ></base-input>\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    <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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, decorators: [{
             type: Component,
@@ -2473,7 +2498,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          <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          <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          <base-input\n            formControlName=\"city\"\n            label=\"City\"\n            [required]=\"true\"\n            [validationError]=\"getError('billing', 'city', 'City') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"postalCode\"\n            label=\"Postal Code\"\n            [required]=\"true\"\n            [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n          ></base-input>\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    <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" }]
         }], ctorParameters: () => [{ type: ResourceService }, { type: i0.ChangeDetectorRef }, { type: CheckoutService }, { type: EncryptService }, { type: i4.DomSanitizer }], propDecorators: { secretKey: [{
                 type: Input
             }], environment: [{
@@ -2842,7 +2867,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 +2891,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 +2907,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 +2916,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 +2941,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,
                     });