@miden-npm/angular 0.0.37 → 2.0.0

package/fesm2022/miden-npm-angular-buzapay-checkout.mjs

@@ -1,800 +1,10 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
 import * as i1 from '@miden-npm/angular';
-import { getValidationErrorMessage, formatAmount, cardType, checkObjectTruthy, getQueryParams, ButtonComponent, InputComponent, SelectComponent, LabelInfoComponent, CopyComponent, CurrencyAmountComponent, IconArrowSwapComponent, RadioGroupComponent, ImageComponent, SuccessComponent, CardComponent, IconLoaderComponent, InputErrorComponent } from '@miden-npm/angular';
-import * as i2 from '@angular/forms';
-import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { tap, finalize } from 'rxjs';
-import * as i2$1 from '@angular/common';
+import { formatAmount, RadioGroupComponent, ImageComponent, PayByCardComponent, PayByTransferComponent, PayByStableCoinComponent, SuccessComponent, CardComponent, checkObjectTruthy, IconLoaderComponent, ButtonComponent, InputErrorComponent } from '@miden-npm/angular';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-
-class PayByCardComponent {
-    resources;
-    cdr;
-    checkout;
-    encryptService;
-    constructor(resources, cdr, checkout, encryptService) {
-        this.resources = resources;
-        this.cdr = cdr;
-        this.checkout = checkout;
-        this.encryptService = encryptService;
-    }
-    secretKey = '';
-    environment = 'sandbox';
-    paymentObject = {
-        merchantName: '',
-        amount: 0,
-        currency: '',
-        email: '',
-        phoneNumber: '',
-        narration: '',
-        redirectUrl: '',
-    };
-    paymentAuthorized = new EventEmitter();
-    loading = false;
-    loadingCountries = false;
-    loadingStates = false;
-    isMakingPayment = false;
-    cardType = '';
-    message = '';
-    transactionReference = '';
-    rawCountries = [];
-    countries = [];
-    countryStates = [];
-    formIndex = 0;
-    setFormIndex(index) {
-        this.formIndex = index;
-    }
-    billingForm = new FormGroup({
-        address1: new FormControl('', [Validators.required]),
-        address2: new FormControl(''),
-        postalCode: new FormControl('', [Validators.required]),
-        state: new FormControl('', [Validators.required]),
-        city: new FormControl('', [Validators.required]),
-        country: new FormControl('', [Validators.required]),
-        emailAddress: new FormControl('', [Validators.required, Validators.email]),
-        phoneNumber: new FormControl('', [Validators.required]),
-    });
-    payForm = new FormGroup({
-        customerName: new FormControl('', [Validators.required]),
-        cardNo: new FormControl('', [Validators.required]),
-        expireDate: new FormControl('', [Validators.required]),
-        cvv: new FormControl('', [Validators.required]),
-        cardPin: new FormControl(''), // Only required for Verve cards
-    });
-    getError(formKey, controlName, label) {
-        const control = formKey === 'billing' ? this.billingForm.get(controlName) : this.payForm.get(controlName);
-        return getValidationErrorMessage(control, label);
-    }
-    get formatAmountHandler() {
-        return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
-    }
-    cardNumberInputHandler(event) {
-        this.cardType = cardType(event);
-        this.updatePinValidation();
-    }
-    updatePinValidation() {
-        const cardPinControl = this.payForm.get('cardPin');
-        if (this.cardType === 'Verve') {
-            cardPinControl?.setValidators([Validators.required]);
-        }
-        else {
-            cardPinControl?.clearValidators();
-        }
-        cardPinControl?.updateValueAndValidity();
-    }
-    async getAllCountries() {
-        this.loadingCountries = true;
-        this.cdr.markForCheck();
-        this.resources
-            .getCountries(this.environment, this.secretKey)
-            .pipe(tap((res) => {
-            if (res?.isSuccessful) {
-                this.rawCountries = res.data ?? [];
-                this.countries = (res.data ?? []).map((c) => {
-                    return { label: c.countryName, value: c.iso2 };
-                });
-            }
-        }), finalize(() => {
-            this.loadingCountries = false;
-            this.cdr.markForCheck();
-        }))
-            .subscribe();
-    }
-    async getCountryStates(countryIso2) {
-        const country = this.rawCountries.filter((c) => c.iso2 === countryIso2);
-        this.loadingStates = true;
-        this.cdr.markForCheck();
-        this.resources
-            .getCountryStates(country[0].iso3, this.environment, this.secretKey)
-            .pipe(tap((res) => {
-            if (res?.isSuccessful) {
-                this.countryStates = (res.data ?? []).map((s) => {
-                    return { label: s.name, value: s.name };
-                });
-            }
-        }), finalize(() => {
-            this.loadingStates = false;
-            this.cdr.markForCheck();
-        }))
-            .subscribe();
-    }
-    async generatePaymentLinkHandler() {
-        if (!this.secretKey) {
-            return (this.message = 'Secret key is required.');
-        }
-        if (!checkObjectTruthy(this.paymentObject)) {
-            return (this.message = 'Kindly ensure you are passing all the required data.');
-        }
-        this.loading = true;
-        this.cdr.markForCheck();
-        this.checkout
-            .createPaymentLink(this.paymentObject, this.environment, this.secretKey)
-            .pipe(tap((res) => {
-            if (res?.isSuccessful) {
-                this.message = 'Payment link created successfully';
-                const queryParams = getQueryParams(res.launchUrl ?? '');
-                this.transactionReference = queryParams['paymentReference'];
-            }
-            else {
-                this.message = 'Failed to create payment link';
-            }
-        }), finalize(() => {
-            this.loading = false;
-            this.cdr.markForCheck();
-        }))
-            .subscribe();
-    }
-    async proceedHandler() {
-        if (this.formIndex === 0) {
-            if (this.billingForm && this.billingForm.valid) {
-                this.checkout.setBillingInfo({ ...this.billingForm.value });
-                this.setFormIndex(1);
-            }
-            else {
-                this.billingForm.markAllAsTouched();
-            }
-        }
-        else {
-            if (this.payForm && this.payForm.valid) {
-                try {
-                    this.isMakingPayment = true;
-                    // Create card details object for encryption
-                    const cardDetails = {
-                        pan: this.payForm.value.cardNo ?? '',
-                        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 ?? '',
-                    };
-                    // 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,
-                    // );
-                    const 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 || '',
-                        paymentReference: this.transactionReference,
-                        isCheckout: true,
-                    };
-                    this.checkout
-                        .authorizeCardPayment(this.environment, {
-                        ...payload,
-                        merchantId: this.secretKey,
-                    })
-                        .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) {
-                                // 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 = `https://sandbox-merchant.buzapay.com/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 = `https://sandbox-merchant.buzapay.com/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,
-                                        paymentStatus: 'Authorized',
-                                    });
-                                }
-                                this.message = 'Card payment authorized successfully';
-                                // Handle legacy 3DS logic for backward compatibility
-                                // if (processedResponse.provider === 'myRoute2') {
-                                //   if (processedResponse.requires3DS === true) {
-                                //     this.router.navigateByUrl('account/visa-card-payment-confirm');
-                                //   } else {
-                                //     if (processedResponse.responseCode === 'T00') {
-                                //     } else if (processedResponse.responseCode === '000') {
-                                //       this.message = 'Please confirm transaction !!';
-                                //     } else {
-                                //       this.message = processedResponse.responseMessage;
-                                //     }
-                                //   }
-                                // } else if (processedResponse.provider === 'myRoute1') {
-                                //   if (processedResponse.requires3DS === true) {
-                                //     this.router.navigateByUrl('account/visa-card-payment-confirm2');
-                                //   }
-                                // }
-                                this.isMakingPayment = false;
-                            }
-                            else {
-                                this.isMakingPayment = false;
-                                this.message = processedResponse.responseMessage || 'Payment failed';
-                                this.paymentAuthorized.emit({
-                                    paymentId: processedResponse.transactionReference,
-                                    paymentDate: response.data.updatedAt,
-                                    paymentStatus: 'Payment failed',
-                                });
-                            }
-                        },
-                        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.responseMessage || err.error.message || 'Payment failed';
-                            }
-                        },
-                    });
-                }
-                catch (error) {
-                    this.isMakingPayment = false;
-                    this.message = 'An unexpected error occurred';
-                }
-            }
-            else {
-                this.payForm.markAllAsTouched();
-            }
-        }
-    }
-    async ngOnInit() {
-        await this.generatePaymentLinkHandler();
-        await this.getAllCountries();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByCardComponent, deps: [{ token: i1.ResourceService }, { token: i0.ChangeDetectorRef }, { token: i1.CheckoutService }, { token: i1.EncryptService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, ngImport: i0, template: "<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        <base-input\n          formControlName=\"emailAddress\"\n          label=\"Email\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n        ></base-input>\n        <base-input\n          formControlName=\"phoneNumber\"\n          label=\"Phone Number\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n        ></base-input>\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]=\"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  <base-button\n    [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n    type=\"primary\"\n    customClass=\"w-full\"\n    [loading]=\"isMakingPayment\"\n    (onClick)=\"proceedHandler()\"\n  ></base-button>\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "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"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pay-by-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, InputComponent, SelectComponent, ReactiveFormsModule], template: "<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        <base-input\n          formControlName=\"emailAddress\"\n          label=\"Email\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n        ></base-input>\n        <base-input\n          formControlName=\"phoneNumber\"\n          label=\"Phone Number\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n        ></base-input>\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]=\"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  <base-button\n    [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n    type=\"primary\"\n    customClass=\"w-full\"\n    [loading]=\"isMakingPayment\"\n    (onClick)=\"proceedHandler()\"\n  ></base-button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.ResourceService }, { type: i0.ChangeDetectorRef }, { type: i1.CheckoutService }, { type: i1.EncryptService }], propDecorators: { secretKey: [{
-                type: Input
-            }], environment: [{
-                type: Input
-            }], paymentObject: [{
-                type: Input
-            }], paymentAuthorized: [{
-                type: Output
-            }] } });
-
-class PayByTransferComponent {
-    checkout;
-    cdr;
-    constructor(checkout, cdr) {
-        this.checkout = checkout;
-        this.cdr = cdr;
-    }
-    secretKey = '';
-    environment = '';
-    paymentObject = {
-        merchantName: '',
-        amount: 0,
-        currency: '',
-        email: '',
-        phoneNumber: '',
-        narration: '',
-        redirectUrl: '',
-    };
-    paymentAuthorized = new EventEmitter();
-    message = '';
-    generatingLink = false;
-    isMakingPayment = false;
-    isFetchingPaymentDetails = false;
-    isConfirmCall = false;
-    paymentMade = false;
-    isPaymentConfirmed = false;
-    paymentAccountDetails = null;
-    paymentReferenceDetails = null;
-    transactionReference = '';
-    paymentReferenceStatus = '';
-    countDownTime = '';
-    remainingSeconds = 30 * 60;
-    intervalId = null;
-    updateDisplay() {
-        const minutes = Math.floor(this.remainingSeconds / 60);
-        const seconds = this.remainingSeconds % 60;
-        this.countDownTime = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-        this.cdr.markForCheck(); // 👈 notify OnPush to re-render
-    }
-    transferForm = new FormGroup({
-        customerName: new FormControl('', [Validators.required]),
-    });
-    getError(controlName, label) {
-        const control = this.transferForm.get(controlName);
-        return getValidationErrorMessage(control, label);
-    }
-    get formatAmountHandler() {
-        return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
-    }
-    startTimer() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
-            this.intervalId = null;
-        }
-        this.updateDisplay();
-        this.intervalId = setInterval(() => {
-            this.remainingSeconds--;
-            if (this.remainingSeconds < 0) {
-                clearInterval(this.intervalId);
-                this.intervalId = null;
-                this.countDownTime = '00:00';
-                this.cdr.markForCheck();
-                return;
-            }
-            this.updateDisplay();
-        }, 1000);
-    }
-    async generatePaymentLinkHandler() {
-        if (!this.secretKey) {
-            return (this.message = 'Secret key is required.');
-        }
-        if (!checkObjectTruthy(this.paymentObject)) {
-            return (this.message = 'Kindly ensure you are passing all the required data.');
-        }
-        this.generatingLink = true;
-        this.cdr.markForCheck();
-        this.checkout
-            .createPaymentLink(this.paymentObject, this.environment, this.secretKey)
-            .pipe(tap((res) => {
-            if (res?.isSuccessful) {
-                this.message = 'Payment link created successfully';
-                const queryParams = getQueryParams(res.launchUrl ?? '');
-                this.transactionReference = queryParams['paymentReference'];
-            }
-            else {
-                this.message = 'Failed to create payment link';
-            }
-        }), finalize(() => {
-            this.generatingLink = false;
-            this.cdr.markForCheck();
-        }))
-            .subscribe();
-    }
-    async payHandler() {
-        if (this.transferForm && this.transferForm.valid) {
-            const payload = {
-                paymentReference: this.transactionReference,
-                channel: 'virtual_account',
-                customerName: this.transferForm.value.customerName ?? '',
-                merchantId: this.secretKey,
-            };
-            this.isMakingPayment = true;
-            await this.checkout.generatePaymentAccount(this.environment, payload).subscribe({
-                next: async (response) => {
-                    if (response?.isSuccessful) {
-                        this.paymentAccountDetails = response.data;
-                        this.startTimer();
-                        this.message = 'Virtual account generated successfully for payment.';
-                        this.isMakingPayment = false;
-                    }
-                },
-                error: (err) => {
-                    this.isMakingPayment = false;
-                    this.message = err.error.responseMessage || err.error.message;
-                },
-            });
-        }
-        else {
-            this.transferForm?.markAllAsTouched();
-        }
-    }
-    async getReferenceDetails() {
-        this.isFetchingPaymentDetails = true;
-        await this.checkout
-            .getPaymentReferenceDetails(this.environment, this.transactionReference)
-            .subscribe({
-            next: async (response) => {
-                if (response?.isSuccessful) {
-                    this.paymentReferenceDetails = response.data;
-                    // Check if payment has been made (paymentStatus is "Payment Received")
-                    if (response.data?.paymentStatus === 'Payment Received') {
-                        this.paymentMade = true;
-                    }
-                    if (response.data?.finalTransactionStatus === null ||
-                        response.data?.paymentStatus === null) {
-                        if (this.isConfirmCall) {
-                            this.message = 'Transaction not confirmed !!';
-                        }
-                        // Only set to pending if payment hasn't been confirmed locally or made locally
-                        if (!this.isPaymentConfirmed && !this.paymentMade) {
-                            this.paymentReferenceStatus = 'pending';
-                            this.paymentAuthorized.emit({
-                                paymentId: this.transactionReference,
-                                paymentDate: response.data.updatedAt,
-                                paymentStatus: this.paymentReferenceStatus,
-                            });
-                        }
-                        else {
-                            this.paymentReferenceStatus = 'confirmed';
-                            this.paymentAuthorized.emit({
-                                paymentId: this.transactionReference,
-                                paymentDate: response.data.updatedAt,
-                                paymentStatus: this.paymentReferenceStatus,
-                            });
-                        }
-                    }
-                    else if (response.data?.finalTransactionStatus === 'Success' ||
-                        response.data?.paymentStatus === 'Received' ||
-                        response.data?.paymentStatus === 'Payment Received') {
-                        this.paymentAuthorized.emit({
-                            paymentId: this.transactionReference,
-                            paymentDate: response.data.updatedAt,
-                            paymentStatus: this.paymentReferenceStatus,
-                        });
-                        this.message = 'Transaction confirmed !!';
-                        this.paymentReferenceStatus = 'confirmed';
-                        this.isPaymentConfirmed = true;
-                    }
-                }
-                else if (!response?.isSuccessful && response?.responseCode === '119') {
-                    this.paymentReferenceStatus = 'used';
-                    this.message = response.responseMessage;
-                    this.paymentAuthorized.emit({
-                        paymentId: this.transactionReference,
-                        paymentDate: null,
-                        paymentStatus: this.paymentReferenceStatus,
-                    });
-                }
-                this.isFetchingPaymentDetails = false;
-            },
-            error: (err) => {
-                this.paymentReferenceStatus = '';
-                this.isFetchingPaymentDetails = false;
-                this.message = err.error.responseMessage || err.error.message;
-            },
-        });
-    }
-    async ngOnInit() {
-        this.startTimer();
-        await this.generatePaymentLinkHandler();
-    }
-    ngOnDestroy() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
-            this.intervalId = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByTransferComponent, deps: [{ token: i1.CheckoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByTransferComponent, isStandalone: true, selector: "pay-by-transfer", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, 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          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 class=\"bg-[#EFF7FF] p-4 rounded-lg flex flex-col gap-6\">\n        <base-label-info\n          label=\"Bank Name\"\n          [value]=\"paymentAccountDetails.bank + ' - ' + 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      <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\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\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", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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"], outputs: ["onInputChange", "onInputBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByTransferComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pay-by-transfer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        LabelInfoComponent,
-                        CopyComponent,
-                        ButtonComponent,
-                        ReactiveFormsModule,
-                        InputComponent,
-                    ], 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          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 class=\"bg-[#EFF7FF] p-4 rounded-lg flex flex-col gap-6\">\n        <base-label-info\n          label=\"Bank Name\"\n          [value]=\"paymentAccountDetails.bank + ' - ' + 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      <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\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\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" }]
-        }], ctorParameters: () => [{ type: i1.CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
-                type: Input
-            }], environment: [{
-                type: Input
-            }], paymentObject: [{
-                type: Input
-            }], paymentAuthorized: [{
-                type: Output
-            }] } });
-
-class PayByStableCoinComponent {
-    resource;
-    checkout;
-    cdr;
-    constructor(resource, checkout, cdr) {
-        this.resource = resource;
-        this.checkout = checkout;
-        this.cdr = cdr;
-    }
-    secretKey = '';
-    environment = '';
-    paymentObject = {
-        merchantName: '',
-        amount: 0,
-        currency: '',
-        email: '',
-        phoneNumber: '',
-        narration: '',
-        redirectUrl: '',
-    };
-    paymentAuthorized = new EventEmitter();
-    message = '';
-    transactionReference = '';
-    paymentReferenceStatus = '';
-    generateAddressPayload = null;
-    addressDetails = null;
-    paymentReferenceDetails = null;
-    stableCoins = [];
-    networkList = [];
-    loadingStableCoins = false;
-    generatingAddress = false;
-    isConfirmingPayment = false;
-    loading = false;
-    loadingStableCoinNetworks = false;
-    formIndex = 0;
-    setFormIndex(index) {
-        this.formIndex = index;
-    }
-    stableCoinForm = new FormGroup({
-        stableCoin: new FormControl('', [Validators.required]),
-        network: new FormControl('', [Validators.required]),
-    });
-    getError(controlName, label) {
-        const control = this.stableCoinForm.get(controlName);
-        return getValidationErrorMessage(control, label);
-    }
-    get formatAmountHandler() {
-        return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
-    }
-    get amountPlusNetworkFee() {
-        return this.addressDetails
-            ? Number(this.addressDetails.transactionAmount) + this.addressDetails.networkFee
-            : 0;
-    }
-    async generatePaymentLinkHandler() {
-        if (!this.secretKey) {
-            return (this.message = 'Secret key is required.');
-        }
-        if (!checkObjectTruthy(this.paymentObject)) {
-            return (this.message = 'Kindly ensure you are passing all the required data.');
-        }
-        this.loading = true;
-        this.cdr.markForCheck();
-        this.checkout
-            .createPaymentLink(this.paymentObject, this.environment, this.secretKey)
-            .pipe(tap((res) => {
-            if (res?.isSuccessful) {
-                this.message = 'Payment link created successfully';
-                const queryParams = getQueryParams(res.launchUrl ?? '');
-                this.transactionReference = queryParams['paymentReference'];
-            }
-            else {
-                this.message = 'Failed to create payment link';
-            }
-        }), finalize(() => {
-            this.loading = false;
-            this.cdr.markForCheck();
-        }))
-            .subscribe();
-    }
-    generateAddress() {
-        if (!this.generateAddressPayload)
-            return;
-        this.generatingAddress = true;
-        this.cdr.markForCheck();
-        this.checkout
-            .generateStableCoinAddress(this.environment, this.generateAddressPayload)
-            .pipe(tap((response) => {
-            if (response?.isSuccessful) {
-                this.addressDetails = response.data;
-                this.setFormIndex(1);
-            }
-        }), finalize(() => {
-            this.generatingAddress = false;
-            this.cdr.markForCheck();
-        }))
-            .subscribe({
-            error: (err) => {
-                this.message = err.error.responseMessage || err.error.message;
-            },
-        });
-    }
-    async payHandler() {
-        if (this.stableCoinForm && this.stableCoinForm.valid) {
-            this.generateAddressPayload = {
-                paymentReference: this.transactionReference,
-                currency: this.stableCoinForm.get('stableCoin')?.value ?? '',
-                chain: this.stableCoinForm.get('network')?.value ?? '',
-                transactionAmount: this.paymentObject?.amount,
-                merchantId: this.secretKey,
-            };
-            await this.generateAddress();
-        }
-        else {
-            this.stableCoinForm?.markAllAsTouched();
-        }
-    }
-    async getStableCoins() {
-        this.loadingStableCoins = true;
-        await this.resource.getStableCoins(this.environment).subscribe({
-            next: async (response) => {
-                if (response?.isSuccessful) {
-                    this.stableCoins =
-                        response.data?.map((c) => ({
-                            label: c.name,
-                            value: c.name,
-                        })) ?? [];
-                    this.loadingStableCoins = false;
-                }
-            },
-            error: (err) => {
-                this.loadingStableCoins = false;
-                this.message = err.error.responseMessage || err.error.message;
-            },
-        });
-    }
-    async getStableCoinNetworks() {
-        const stableCoin = this.stableCoinForm.get('stableCoin')?.value;
-        this.loadingStableCoinNetworks = true;
-        await this.resource.getStableCoinNetworks(this.environment, stableCoin ?? '').subscribe({
-            next: async (response) => {
-                if (response?.isSuccessful) {
-                    this.networkList =
-                        response.networks?.map((n) => ({
-                            label: n,
-                            value: n,
-                        })) ?? [];
-                    this.loadingStableCoinNetworks = false;
-                }
-            },
-            error: (err) => {
-                this.loadingStableCoinNetworks = false;
-                this.message = err.error.responseMessage || err.error.message;
-            },
-        });
-    }
-    async confirmPaymentHandler() {
-        this.isConfirmingPayment = true;
-        await this.checkout
-            .getPaymentReferenceDetails(this.environment, this.transactionReference)
-            .subscribe({
-            next: async (response) => {
-                if (response?.isSuccessful) {
-                    this.paymentReferenceDetails = response.data;
-                    if (response.data?.finalTransactionStatus === null ||
-                        response.data?.paymentStatus === null) {
-                        this.message = 'Transaction not confirmed !!';
-                        this.paymentReferenceStatus = 'pending';
-                        this.paymentAuthorized.emit({
-                            paymentId: this.transactionReference,
-                            paymentDate: response.data.updatedAt,
-                            paymentStatus: this.paymentReferenceStatus,
-                        });
-                    }
-                    else if (response.data?.finalTransactionStatus === 'Success' ||
-                        response.data?.paymentStatus === 'Payment Received') {
-                        this.message = 'Transaction confirmed !!';
-                        this.paymentReferenceStatus = 'confirmed';
-                        this.paymentAuthorized.emit({
-                            paymentId: this.transactionReference,
-                            paymentDate: response.data.updatedAt,
-                            paymentStatus: this.paymentReferenceStatus,
-                        });
-                    }
-                }
-                else if (!response?.isSuccessful && response?.responseCode === '119') {
-                    this.paymentReferenceStatus = 'used';
-                    this.message = response.responseMessage;
-                    this.paymentAuthorized.emit({
-                        paymentId: this.transactionReference,
-                        paymentDate: null,
-                        paymentStatus: this.paymentReferenceStatus,
-                    });
-                }
-                this.isConfirmingPayment = false;
-            },
-            error: (err) => {
-                this.paymentReferenceStatus = '';
-                this.isConfirmingPayment = false;
-                this.message = err.error.responseMessage || err.error.message;
-            },
-        });
-    }
-    async ngOnInit() {
-        await this.generatePaymentLinkHandler();
-        await this.getStableCoins();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByStableCoinComponent, deps: [{ token: i1.ResourceService }, { token: i1.CheckoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByStableCoinComponent, isStandalone: true, selector: "pay-by-stable-coin", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  @if (formIndex === 0) {\n    <form [formGroup]=\"stableCoinForm\" class=\"grid grid-cols-1 gap-6\">\n      <div class=\"grid grid-cols-1 gap-6\">\n        <base-select\n          formControlName=\"stableCoin\"\n          label=\"Select Crypto\"\n          [required]=\"true\"\n          [options]=\"stableCoins\"\n          [validationError]=\"getError('stableCoin', 'Select Crypto') ?? ''\"\n          [loading]=\"loadingStableCoins\"\n          (onSelectChange)=\"getStableCoinNetworks()\"\n        ></base-select>\n        <base-select\n          formControlName=\"network\"\n          label=\"Select Network\"\n          [required]=\"true\"\n          [options]=\"networkList\"\n          [validationError]=\"getError('network', 'Network') ?? ''\"\n          [loading]=\"loadingStableCoinNetworks\"\n        ></base-select>\n      </div>\n\n      <base-button\n        [label]=\"'Pay ' + formatAmountHandler\"\n        type=\"primary\"\n        customClass=\"w-full\"\n        [loading]=\"generatingAddress\"\n        (onClick)=\"payHandler()\"\n      ></base-button>\n    </form>\n  }\n\n  @if (formIndex === 1) {\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"mx-auto\">\n        <!-- <base-image\n          src=\"../../../assets/images/stable-coin-qr-code.png\"\n          alt=\"QR Code\"\n          [width]=\"122\"\n          [height]=\"122\"\n          class=\"mb-1\"\n        ></base-image> -->\n        <p class=\"mb-0 text-body-4xs text-light-copy font-normal text-center\">\n          {{ generateAddressPayload?.currency }}\n        </p>\n      </div>\n\n      <div class=\"flex flex-col gap-6 border-c border-grey-100 p-4 rounded-2xl bg-light-white-50\">\n        <div class=\"border-b border-grey-border pb-4 flex flex-col gap-2\">\n          <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Network</p>\n          <div class=\"flex justify-between\">\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"mb-0 text-body-2xs font-medium text-sub-copy\">\n                {{ addressDetails?.chain }}\n              </p>\n              <div class=\"flex items-center gap-2\">\n                <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">*Est. arrival = 3 mins</p>\n                <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">|</p>\n                <base-currency-amount\n                  [currency]=\"generateAddressPayload?.currency ?? ''\"\n                  [amount]=\"addressDetails?.networkFee ?? 0\"\n                  textClass=\"mb-0 text-body-3xs text-light-copy font-normal\"\n                  iconColorClass=\"#557591\"\n                  iconWidth=\"12\"\n                  iconHeight=\"12\"\n                ></base-currency-amount>\n              </div>\n            </div>\n            <icon-arrow-swap></icon-arrow-swap>\n          </div>\n        </div>\n\n        <div class=\"pb-4 flex flex-col gap-2\">\n          <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Deposit Address ></p>\n          <div class=\"flex justify-between\">\n            <p class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\">\n              {{ addressDetails?.walletAddress }}\n            </p>\n            <base-copy [copyText]=\"addressDetails?.walletAddress ?? ''\"></base-copy>\n          </div>\n        </div>\n\n        <!-- <div class=\"pb-4 flex flex-col gap-2\">\n          <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Memo ></p>\n          <div class=\"flex justify-between\">\n            <p\n              class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\"\n            >\n              0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6\n            </p>\n            <app-copy\n              [isCopyIcon]=\"true\"\n              [copyText]=\"'0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6'\"\n            ></app-copy>\n          </div>\n        </div> -->\n      </div>\n\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"flex items-center justify-between border-b border-grey-border py-3\">\n          <p class=\"mb-0 text-body-2xs font-medium text-primary-black\">Network fee</p>\n          <base-currency-amount\n            [currency]=\"generateAddressPayload?.currency ?? ''\"\n            [amount]=\"addressDetails?.networkFee ?? 0\"\n            textClass=\"mb-0 text-body-2xs font-extrabold text-primary-black\"\n            iconColorClass=\"#231F20\"\n          ></base-currency-amount>\n        </div>\n\n        <div class=\"flex items-center justify-between py-4\">\n          <p class=\"mb-0 text-body-lg font-semibold text-primary-black\">Pay</p>\n          <base-currency-amount\n            [currency]=\"generateAddressPayload?.currency ?? ''\"\n            [amount]=\"amountPlusNetworkFee\"\n            textClass=\"mb-0 text-body-lg font-extrabold text-primary-black\"\n            iconColorClass=\"#231F20\"\n            iconWidth=\"20\"\n            iconHeight=\"20\"\n          ></base-currency-amount>\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-6\">\n        <base-button\n          label=\"Confirm Payment\"\n          type=\"primary\"\n          customClass=\"w-full\"\n          [loading]=\"isConfirmingPayment\"\n          (onClick)=\"confirmPaymentHandler()\"\n        ></base-button>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType"], outputs: ["onSelectChange"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: 
-                // ImageComponent,
-                CurrencyAmountComponent, selector: "base-currency-amount", inputs: ["currency", "amount", "textClass", "iconColorClass", "iconWidth", "iconHeight"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: IconArrowSwapComponent, selector: "icon-arrow-swap", inputs: ["color", "width", "height"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByStableCoinComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pay-by-stable-coin', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        SelectComponent,
-                        ButtonComponent,
-                        // ImageComponent,
-                        CurrencyAmountComponent,
-                        CopyComponent,
-                        IconArrowSwapComponent,
-                        ReactiveFormsModule,
-                    ], template: "<div class=\"flex flex-col gap-6\">\n  @if (formIndex === 0) {\n    <form [formGroup]=\"stableCoinForm\" class=\"grid grid-cols-1 gap-6\">\n      <div class=\"grid grid-cols-1 gap-6\">\n        <base-select\n          formControlName=\"stableCoin\"\n          label=\"Select Crypto\"\n          [required]=\"true\"\n          [options]=\"stableCoins\"\n          [validationError]=\"getError('stableCoin', 'Select Crypto') ?? ''\"\n          [loading]=\"loadingStableCoins\"\n          (onSelectChange)=\"getStableCoinNetworks()\"\n        ></base-select>\n        <base-select\n          formControlName=\"network\"\n          label=\"Select Network\"\n          [required]=\"true\"\n          [options]=\"networkList\"\n          [validationError]=\"getError('network', 'Network') ?? ''\"\n          [loading]=\"loadingStableCoinNetworks\"\n        ></base-select>\n      </div>\n\n      <base-button\n        [label]=\"'Pay ' + formatAmountHandler\"\n        type=\"primary\"\n        customClass=\"w-full\"\n        [loading]=\"generatingAddress\"\n        (onClick)=\"payHandler()\"\n      ></base-button>\n    </form>\n  }\n\n  @if (formIndex === 1) {\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"mx-auto\">\n        <!-- <base-image\n          src=\"../../../assets/images/stable-coin-qr-code.png\"\n          alt=\"QR Code\"\n          [width]=\"122\"\n          [height]=\"122\"\n          class=\"mb-1\"\n        ></base-image> -->\n        <p class=\"mb-0 text-body-4xs text-light-copy font-normal text-center\">\n          {{ generateAddressPayload?.currency }}\n        </p>\n      </div>\n\n      <div class=\"flex flex-col gap-6 border-c border-grey-100 p-4 rounded-2xl bg-light-white-50\">\n        <div class=\"border-b border-grey-border pb-4 flex flex-col gap-2\">\n          <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Network</p>\n          <div class=\"flex justify-between\">\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"mb-0 text-body-2xs font-medium text-sub-copy\">\n                {{ addressDetails?.chain }}\n              </p>\n              <div class=\"flex items-center gap-2\">\n                <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">*Est. arrival = 3 mins</p>\n                <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">|</p>\n                <base-currency-amount\n                  [currency]=\"generateAddressPayload?.currency ?? ''\"\n                  [amount]=\"addressDetails?.networkFee ?? 0\"\n                  textClass=\"mb-0 text-body-3xs text-light-copy font-normal\"\n                  iconColorClass=\"#557591\"\n                  iconWidth=\"12\"\n                  iconHeight=\"12\"\n                ></base-currency-amount>\n              </div>\n            </div>\n            <icon-arrow-swap></icon-arrow-swap>\n          </div>\n        </div>\n\n        <div class=\"pb-4 flex flex-col gap-2\">\n          <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Deposit Address ></p>\n          <div class=\"flex justify-between\">\n            <p class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\">\n              {{ addressDetails?.walletAddress }}\n            </p>\n            <base-copy [copyText]=\"addressDetails?.walletAddress ?? ''\"></base-copy>\n          </div>\n        </div>\n\n        <!-- <div class=\"pb-4 flex flex-col gap-2\">\n          <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Memo ></p>\n          <div class=\"flex justify-between\">\n            <p\n              class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\"\n            >\n              0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6\n            </p>\n            <app-copy\n              [isCopyIcon]=\"true\"\n              [copyText]=\"'0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6'\"\n            ></app-copy>\n          </div>\n        </div> -->\n      </div>\n\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"flex items-center justify-between border-b border-grey-border py-3\">\n          <p class=\"mb-0 text-body-2xs font-medium text-primary-black\">Network fee</p>\n          <base-currency-amount\n            [currency]=\"generateAddressPayload?.currency ?? ''\"\n            [amount]=\"addressDetails?.networkFee ?? 0\"\n            textClass=\"mb-0 text-body-2xs font-extrabold text-primary-black\"\n            iconColorClass=\"#231F20\"\n          ></base-currency-amount>\n        </div>\n\n        <div class=\"flex items-center justify-between py-4\">\n          <p class=\"mb-0 text-body-lg font-semibold text-primary-black\">Pay</p>\n          <base-currency-amount\n            [currency]=\"generateAddressPayload?.currency ?? ''\"\n            [amount]=\"amountPlusNetworkFee\"\n            textClass=\"mb-0 text-body-lg font-extrabold text-primary-black\"\n            iconColorClass=\"#231F20\"\n            iconWidth=\"20\"\n            iconHeight=\"20\"\n          ></base-currency-amount>\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-6\">\n        <base-button\n          label=\"Confirm Payment\"\n          type=\"primary\"\n          customClass=\"w-full\"\n          [loading]=\"isConfirmingPayment\"\n          (onClick)=\"confirmPaymentHandler()\"\n        ></base-button>\n      </div>\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.ResourceService }, { type: i1.CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
-                type: Input
-            }], environment: [{
-                type: Input
-            }], paymentObject: [{
-                type: Input
-            }], paymentAuthorized: [{
-                type: Output
-            }] } });
+import { tap, finalize } from 'rxjs';
 
 class CheckoutCardComponent {
     options = null;
@@ -812,6 +22,8 @@ class CheckoutCardComponent {
     ready = new EventEmitter();
     validityChange = new EventEmitter();
     tokenize = new EventEmitter();
+    paymentAuthorized = new EventEmitter();
+    onError = new EventEmitter();
     successObject = {
         paymentDate: '',
         paymentId: '',
@@ -855,10 +67,10 @@ class CheckoutCardComponent {
     }
     setSuccess(event) {
         this.successObject = { ...event };
-        if (this.successObject.paymentStatus === 'Authorized') {
+        if (this.successObject.paymentStatus === 'authorized') {
             this.checkoutState = 'SUCCESS';
         }
-        else if (this.successObject.paymentStatus === 'Payment failed') {
+        else if (this.successObject.paymentStatus === 'payment failed') {
             this.checkoutState = 'PENDING';
         }
         else if (this.successObject.paymentStatus === 'used') {
@@ -867,9 +79,13 @@ class CheckoutCardComponent {
         else {
             this.checkoutState = 'PENDING';
         }
+        this.paymentAuthorized.emit(event);
+    }
+    onErrorHandler(e) {
+        this.onError.emit(e);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutCardComponent, isStandalone: true, selector: "bzp-checkout-card", inputs: { options: "options", secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { ready: "ready", validityChange: "validityChange", tokenize: "tokenize" }, ngImport: i0, template: "<base-card>\n  <div class=\"grid grid-cols-3\">\n    @if (checkoutState === 'PENDING') {\n      <div class=\"bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl\">\n        <p class=\"text-heading-text text-body-xs font-semibold\">Pay with</p>\n        <base-radio-group\n          [options]=\"filteredPaymentTypeOptions\"\n          (selectedChange)=\"paymentTypeHandler($event)\"\n        ></base-radio-group>\n      </div>\n    }\n\n    <div [class]=\"checkoutState === 'SUCCESS' ? 'col-span-3' : 'col-span-2'\">\n      @if (checkoutState === 'PENDING') {\n        <div class=\"flex items-center justify-between px-12 py-8\">\n          @if (options?.imageUrl) {\n            <base-image\n              [src]=\"options?.imageUrl ?? ''\"\n              alt=\"Merchant Logo\"\n              [width]=\"52\"\n              [height]=\"52\"\n              class=\"rounded-lg\"\n            ></base-image>\n          } @else {\n            <div\n              class=\"bg-heading-text rounded flex flex-col justify-center\"\n              style=\"width: 52px; height: 52px\"\n            >\n              <p class=\"text-white text-center text-body-2xs font-medium\">Logo</p>\n            </div>\n          }\n\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n              {{ paymentObject.merchantName }}\n            </p>\n            <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n              Pay:\n              <span class=\"text-orange-500 font-extrabold\">{{ formatAmountHandler }}</span>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"overflow-y-scroll px-10 pb-10 pt-2\">\n          @if (paymentType === 'CARD') {\n            <pay-by-card\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n            ></pay-by-card>\n          } @else if (paymentType === 'BANK_TRANSFER') {\n            <pay-by-transfer\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n            ></pay-by-transfer>\n          } @else {\n            <pay-by-stable-coin\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n            ></pay-by-stable-coin>\n          }\n        </div>\n      } @else if (checkoutState === 'SUCCESS') {\n        <base-success\n          [amount]=\"paymentObject.amount\"\n          [currency]=\"paymentObject.currency\"\n          [redirectUrl]=\"paymentObject.redirectUrl ?? ''\"\n          [successObject]=\"successObject\"\n        ></base-success>\n      }\n    </div>\n  </div>\n</base-card>\n", dependencies: [{ kind: "component", type: RadioGroupComponent, selector: "base-radio-group", inputs: ["options", "type"], outputs: ["selectedChange"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }, { kind: "component", type: PayByCardComponent, selector: "pay-by-card", inputs: ["secretKey", "environment", "paymentObject"], outputs: ["paymentAuthorized"] }, { kind: "component", type: PayByTransferComponent, selector: "pay-by-transfer", inputs: ["secretKey", "environment", "paymentObject"], outputs: ["paymentAuthorized"] }, { kind: "component", type: PayByStableCoinComponent, selector: "pay-by-stable-coin", inputs: ["secretKey", "environment", "paymentObject"], outputs: ["paymentAuthorized"] }, { kind: "component", type: SuccessComponent, selector: "base-success", inputs: ["successObject", "amount", "currency", "redirectUrl"] }, { kind: "component", type: CardComponent, selector: "base-card", inputs: ["showBackButton"], outputs: ["back"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutCardComponent, isStandalone: true, selector: "bzp-checkout-card", inputs: { options: "options", secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { ready: "ready", validityChange: "validityChange", tokenize: "tokenize", paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "<base-card>\n  <div class=\"grid grid-cols-3\" buzapay>\n    @if (checkoutState === 'PENDING') {\n      <div class=\"bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl\">\n        <p class=\"text-heading-text text-body-xs font-semibold\">Pay with</p>\n        <base-radio-group\n          [options]=\"filteredPaymentTypeOptions\"\n          (selectedChange)=\"paymentTypeHandler($event)\"\n        ></base-radio-group>\n      </div>\n    }\n\n    <div [class]=\"checkoutState === 'SUCCESS' ? 'col-span-3' : 'col-span-2'\">\n      @if (checkoutState === 'PENDING') {\n        <div class=\"flex items-center justify-between px-12 py-8\">\n          @if (options?.imageUrl) {\n            <base-image\n              [src]=\"options?.imageUrl ?? ''\"\n              alt=\"Merchant Logo\"\n              [width]=\"52\"\n              [height]=\"52\"\n              class=\"rounded-lg\"\n            ></base-image>\n          } @else {\n            <div\n              class=\"bg-heading-text rounded flex flex-col justify-center\"\n              style=\"width: 52px; height: 52px\"\n            >\n              <p class=\"text-white text-center text-body-2xs font-medium\">Logo</p>\n            </div>\n          }\n\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n              {{ paymentObject.merchantName }}\n            </p>\n            <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n              Pay:\n              <span class=\"text-orange-500 font-extrabold\">{{ formatAmountHandler }}</span>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"max-h-[32rem] overflow-y-scroll px-10 pb-10 pt-2\">\n          @if (paymentType === 'CARD') {\n            <pay-by-card\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              caller=\"buzapay\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n              (onError)=\"onErrorHandler($event)\"\n            ></pay-by-card>\n          } @else if (paymentType === 'BANK_TRANSFER') {\n            <pay-by-transfer\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              caller=\"buzapay\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n              (onError)=\"onErrorHandler($event)\"\n            ></pay-by-transfer>\n          } @else {\n            <pay-by-stable-coin\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              caller=\"buzapay\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n              (onError)=\"onErrorHandler($event)\"\n            ></pay-by-stable-coin>\n          }\n        </div>\n      } @else if (checkoutState === 'SUCCESS') {\n        <base-success\n          [amount]=\"paymentObject.amount\"\n          [currency]=\"paymentObject.currency\"\n          [redirectUrl]=\"paymentObject.redirectUrl ?? ''\"\n          [successObject]=\"successObject\"\n        ></base-success>\n      }\n    </div>\n  </div>\n</base-card>\n", dependencies: [{ kind: "component", type: RadioGroupComponent, selector: "base-radio-group", inputs: ["caller", "options", "type"], outputs: ["selectedChange"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }, { kind: "component", type: PayByCardComponent, selector: "pay-by-card", inputs: ["secretKey", "environment", "caller", "paymentObject"], outputs: ["paymentAuthorized", "onError"] }, { kind: "component", type: PayByTransferComponent, selector: "pay-by-transfer", inputs: ["secretKey", "environment", "caller", "paymentObject"], outputs: ["paymentAuthorized", "onError"] }, { kind: "component", type: PayByStableCoinComponent, selector: "pay-by-stable-coin", inputs: ["secretKey", "environment", "caller", "paymentObject"], outputs: ["paymentAuthorized", "onError"] }, { kind: "component", type: SuccessComponent, selector: "base-success", inputs: ["successObject", "caller", "amount", "currency", "redirectUrl"] }, { kind: "component", type: CardComponent, selector: "base-card", inputs: ["showBackButton", "caller"], outputs: ["back"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutCardComponent, decorators: [{
             type: Component,
@@ -881,7 +97,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         PayByStableCoinComponent,
                         SuccessComponent,
                         CardComponent,
-                    ], template: "<base-card>\n  <div class=\"grid grid-cols-3\">\n    @if (checkoutState === 'PENDING') {\n      <div class=\"bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl\">\n        <p class=\"text-heading-text text-body-xs font-semibold\">Pay with</p>\n        <base-radio-group\n          [options]=\"filteredPaymentTypeOptions\"\n          (selectedChange)=\"paymentTypeHandler($event)\"\n        ></base-radio-group>\n      </div>\n    }\n\n    <div [class]=\"checkoutState === 'SUCCESS' ? 'col-span-3' : 'col-span-2'\">\n      @if (checkoutState === 'PENDING') {\n        <div class=\"flex items-center justify-between px-12 py-8\">\n          @if (options?.imageUrl) {\n            <base-image\n              [src]=\"options?.imageUrl ?? ''\"\n              alt=\"Merchant Logo\"\n              [width]=\"52\"\n              [height]=\"52\"\n              class=\"rounded-lg\"\n            ></base-image>\n          } @else {\n            <div\n              class=\"bg-heading-text rounded flex flex-col justify-center\"\n              style=\"width: 52px; height: 52px\"\n            >\n              <p class=\"text-white text-center text-body-2xs font-medium\">Logo</p>\n            </div>\n          }\n\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n              {{ paymentObject.merchantName }}\n            </p>\n            <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n              Pay:\n              <span class=\"text-orange-500 font-extrabold\">{{ formatAmountHandler }}</span>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"overflow-y-scroll px-10 pb-10 pt-2\">\n          @if (paymentType === 'CARD') {\n            <pay-by-card\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n            ></pay-by-card>\n          } @else if (paymentType === 'BANK_TRANSFER') {\n            <pay-by-transfer\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n            ></pay-by-transfer>\n          } @else {\n            <pay-by-stable-coin\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n            ></pay-by-stable-coin>\n          }\n        </div>\n      } @else if (checkoutState === 'SUCCESS') {\n        <base-success\n          [amount]=\"paymentObject.amount\"\n          [currency]=\"paymentObject.currency\"\n          [redirectUrl]=\"paymentObject.redirectUrl ?? ''\"\n          [successObject]=\"successObject\"\n        ></base-success>\n      }\n    </div>\n  </div>\n</base-card>\n" }]
+                    ], template: "<base-card>\n  <div class=\"grid grid-cols-3\" buzapay>\n    @if (checkoutState === 'PENDING') {\n      <div class=\"bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl\">\n        <p class=\"text-heading-text text-body-xs font-semibold\">Pay with</p>\n        <base-radio-group\n          [options]=\"filteredPaymentTypeOptions\"\n          (selectedChange)=\"paymentTypeHandler($event)\"\n        ></base-radio-group>\n      </div>\n    }\n\n    <div [class]=\"checkoutState === 'SUCCESS' ? 'col-span-3' : 'col-span-2'\">\n      @if (checkoutState === 'PENDING') {\n        <div class=\"flex items-center justify-between px-12 py-8\">\n          @if (options?.imageUrl) {\n            <base-image\n              [src]=\"options?.imageUrl ?? ''\"\n              alt=\"Merchant Logo\"\n              [width]=\"52\"\n              [height]=\"52\"\n              class=\"rounded-lg\"\n            ></base-image>\n          } @else {\n            <div\n              class=\"bg-heading-text rounded flex flex-col justify-center\"\n              style=\"width: 52px; height: 52px\"\n            >\n              <p class=\"text-white text-center text-body-2xs font-medium\">Logo</p>\n            </div>\n          }\n\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n              {{ paymentObject.merchantName }}\n            </p>\n            <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n              Pay:\n              <span class=\"text-orange-500 font-extrabold\">{{ formatAmountHandler }}</span>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"max-h-[32rem] overflow-y-scroll px-10 pb-10 pt-2\">\n          @if (paymentType === 'CARD') {\n            <pay-by-card\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              caller=\"buzapay\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n              (onError)=\"onErrorHandler($event)\"\n            ></pay-by-card>\n          } @else if (paymentType === 'BANK_TRANSFER') {\n            <pay-by-transfer\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              caller=\"buzapay\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n              (onError)=\"onErrorHandler($event)\"\n            ></pay-by-transfer>\n          } @else {\n            <pay-by-stable-coin\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              [paymentObject]=\"paymentObject\"\n              caller=\"buzapay\"\n              (paymentAuthorized)=\"setSuccess($event)\"\n              (onError)=\"onErrorHandler($event)\"\n            ></pay-by-stable-coin>\n          }\n        </div>\n      } @else if (checkoutState === 'SUCCESS') {\n        <base-success\n          [amount]=\"paymentObject.amount\"\n          [currency]=\"paymentObject.currency\"\n          [redirectUrl]=\"paymentObject.redirectUrl ?? ''\"\n          [successObject]=\"successObject\"\n        ></base-success>\n      }\n    </div>\n  </div>\n</base-card>\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }], secretKey: [{
@@ -896,6 +112,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Output
             }], tokenize: [{
                 type: Output
+            }], paymentAuthorized: [{
+                type: Output
+            }], onError: [{
+                type: Output
             }] } });
 
 class CheckoutIframeComponent {
@@ -931,6 +151,7 @@ class CheckoutIframeComponent {
         redirectUrl: 'https://sandbox-merchant.buzapay.com/account/three-ds-status',
     };
     container;
+    onError = new EventEmitter();
     get blockStyle() {
         return {
             ...(this.style || {}),
@@ -963,7 +184,7 @@ class CheckoutIframeComponent {
         this.loading = true;
         this.cdr.markForCheck();
         this.checkout
-            .createPaymentLink(this.paymentObject, this.environment, this.secretKey)
+            .createPaymentLink(this.paymentObject, this.environment, this.secretKey, 'buzapay')
             .pipe(tap((res) => {
             if (res?.isSuccessful) {
                 this.launchUrl = res.launchUrl ?? '';
@@ -974,18 +195,23 @@ class CheckoutIframeComponent {
             }
             else {
                 this.errorMessage = 'Failed to create payment link';
+                this.onError.emit({ errorMessage: this.errorMessage });
             }
         }), finalize(() => {
             this.loading = false;
             this.cdr.markForCheck();
         }))
-            .subscribe();
+            .subscribe({
+            error: (err) => {
+                this.onError.emit({ errorMessage: this.errorMessage });
+            },
+        });
     }
     async ngAfterViewInit() {
         await this.generatePaymentLinkHandler();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutIframeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.CheckoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutIframeComponent, isStandalone: true, selector: "bzp-checkout-iframe", inputs: { secretKey: "secretKey", url: "url", style: "style", environment: "environment", paymentObject: "paymentObject" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"relative\" [ngStyle]=\"blockStyle\">\n  <div #container class=\"w-full h-full\"></div>\n\n  @if (loading) {\n    <div class=\"absolute inset-0 grid place-items-center bg-white/60\">\n      <icon-loader></icon-loader>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: IconLoaderComponent, selector: "icon-loader", inputs: ["color", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutIframeComponent, isStandalone: true, selector: "bzp-checkout-iframe", inputs: { secretKey: "secretKey", url: "url", style: "style", environment: "environment", paymentObject: "paymentObject" }, outputs: { onError: "onError" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"relative\" [ngStyle]=\"blockStyle\">\n  <div #container class=\"w-full h-full\"></div>\n\n  @if (loading) {\n    <div class=\"absolute inset-0 grid place-items-center bg-white/60\">\n      <icon-loader></icon-loader>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: IconLoaderComponent, selector: "icon-loader", inputs: ["color", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutIframeComponent, decorators: [{
             type: Component,
@@ -1003,6 +229,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
             }], container: [{
                 type: ViewChild,
                 args: ['container', { static: false }]
+            }], onError: [{
+                type: Output
             }] } });
 
 class CheckoutButtonComponent {
@@ -1029,6 +257,10 @@ class CheckoutButtonComponent {
         narration: '',
         redirectUrl: 'https://sandbox-merchant.buzapay.com/account/three-ds-status',
     };
+    onError = new EventEmitter();
+    get formatAmountHandler() {
+        return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
+    }
     async generatePaymentLinkHandler() {
         if (!this.secretKey) {
             return (this.errorMessage = 'Secret key is required.');
@@ -1039,7 +271,7 @@ class CheckoutButtonComponent {
         this.loading = true;
         this.cdr.markForCheck();
         this.checkout
-            .createPaymentLink(this.paymentObject, this.environment, this.secretKey)
+            .createPaymentLink(this.paymentObject, this.environment, this.secretKey, 'buzapay')
             .pipe(tap((res) => {
             if (res?.isSuccessful) {
                 this.launchUrl = res.launchUrl ?? '';
@@ -1051,19 +283,24 @@ class CheckoutButtonComponent {
             }
             else {
                 this.errorMessage = 'Failed to create payment link';
+                this.onError.emit({ errorMessage: this.errorMessage });
             }
         }), finalize(() => {
             this.loading = false;
             this.cdr.markForCheck();
         }))
-            .subscribe();
+            .subscribe({
+            error: (err) => {
+                this.onError.emit({ errorMessage: this.errorMessage });
+            },
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutButtonComponent, deps: [{ token: i1.CheckoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutButtonComponent, isStandalone: true, selector: "bzp-checkout-button", inputs: { secretKey: "secretKey", timeout: "timeout", environment: "environment", mode: "mode", paymentObject: "paymentObject" }, ngImport: i0, template: "@if (urlLaunchUrl && mode === 'iframe') {\n  <bzp-checkout-iframe\n    [url]=\"urlLaunchUrl\"\n    [secretKey]=\"secretKey\"\n    [environment]=\"environment\"\n  ></bzp-checkout-iframe>\n} @else {\n  <base-button\n    label=\"Pay\"\n    type=\"primary\"\n    customClass=\"w-full\"\n    [loading]=\"loading\"\n    (onClick)=\"generatePaymentLinkHandler()\"\n  ></base-button>\n  <base-input-error [errorMessage]=\"errorMessage\"></base-input-error>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: InputErrorComponent, selector: "base-input-error", inputs: ["errorMessage"] }, { kind: "component", type: CheckoutIframeComponent, selector: "bzp-checkout-iframe", inputs: ["secretKey", "url", "style", "environment", "paymentObject"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutButtonComponent, isStandalone: true, selector: "bzp-checkout-button", inputs: { secretKey: "secretKey", timeout: "timeout", environment: "environment", mode: "mode", paymentObject: "paymentObject" }, outputs: { onError: "onError" }, ngImport: i0, template: "@if (urlLaunchUrl && mode === 'iframe') {\n  <bzp-checkout-iframe\n    [url]=\"urlLaunchUrl\"\n    [secretKey]=\"secretKey\"\n    [environment]=\"environment\"\n  ></bzp-checkout-iframe>\n} @else {\n  <base-button\n    [label]=\"'Pay ' + formatAmountHandler\"\n    type=\"primary\"\n    customClass=\"w-full\"\n    [loading]=\"loading\"\n    (onClick)=\"generatePaymentLinkHandler()\"\n  ></base-button>\n  <base-input-error [errorMessage]=\"errorMessage\"></base-input-error>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: InputErrorComponent, selector: "base-input-error", inputs: ["errorMessage"] }, { kind: "component", type: CheckoutIframeComponent, selector: "bzp-checkout-iframe", inputs: ["secretKey", "url", "style", "environment", "paymentObject"], outputs: ["onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bzp-checkout-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, InputErrorComponent, InputErrorComponent, CheckoutIframeComponent], template: "@if (urlLaunchUrl && mode === 'iframe') {\n  <bzp-checkout-iframe\n    [url]=\"urlLaunchUrl\"\n    [secretKey]=\"secretKey\"\n    [environment]=\"environment\"\n  ></bzp-checkout-iframe>\n} @else {\n  <base-button\n    label=\"Pay\"\n    type=\"primary\"\n    customClass=\"w-full\"\n    [loading]=\"loading\"\n    (onClick)=\"generatePaymentLinkHandler()\"\n  ></base-button>\n  <base-input-error [errorMessage]=\"errorMessage\"></base-input-error>\n}\n" }]
+            args: [{ selector: 'bzp-checkout-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, InputErrorComponent, InputErrorComponent, CheckoutIframeComponent], template: "@if (urlLaunchUrl && mode === 'iframe') {\n  <bzp-checkout-iframe\n    [url]=\"urlLaunchUrl\"\n    [secretKey]=\"secretKey\"\n    [environment]=\"environment\"\n  ></bzp-checkout-iframe>\n} @else {\n  <base-button\n    [label]=\"'Pay ' + formatAmountHandler\"\n    type=\"primary\"\n    customClass=\"w-full\"\n    [loading]=\"loading\"\n    (onClick)=\"generatePaymentLinkHandler()\"\n  ></base-button>\n  <base-input-error [errorMessage]=\"errorMessage\"></base-input-error>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
                 type: Input
             }], timeout: [{
@@ -1074,11 +311,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], paymentObject: [{
                 type: Input
+            }], onError: [{
+                type: Output
             }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CheckoutButtonComponent, CheckoutCardComponent, CheckoutIframeComponent, PayByCardComponent, PayByStableCoinComponent, PayByTransferComponent };
+export { CheckoutButtonComponent, CheckoutCardComponent, CheckoutIframeComponent };
 //# sourceMappingURL=miden-npm-angular-buzapay-checkout.mjs.map