@miden-npm/angular 0.0.36 → 1.0.0

package/buzapay-checkout/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, OnInit, ChangeDetectorRef, OnDestroy, AfterViewInit, Renderer2, ElementRef } from '@angular/core';
-import { IPaymentObject, ISuccessObject, ISelectOption, ResourceService, CheckoutService, EncryptService, ICountry, IPaymentAccountResponse, IPaymentReferenceDetail, IGenerateStableCoinAddress, IGenerateStableCoinAddressResponse } from '@miden-npm/angular';
+import { IPaymentObject, ISuccessObject, IErrorObject, ISelectOption, ResourceService, CheckoutService, EncryptService, ICountry, IPaymentAccountResponse, IPaymentReferenceDetail, IGenerateStableCoinAddress, IGenerateStableCoinAddressResponse } from '@miden-npm/angular';
 import { FormGroup, FormControl } from '@angular/forms';
 
 interface CheckoutIframeStyle {
@@ -33,6 +33,8 @@ declare class CheckoutCardComponent {
         field?: string;
     }>;
     tokenize: EventEmitter<TokenizeResult>;
+    paymentAuthorized: EventEmitter<ISuccessObject>;
+    onError: EventEmitter<IErrorObject>;
     successObject: ISuccessObject;
     checkoutState: 'SUCCESS' | 'PENDING' | 'USED';
     countryOptions: ISelectOption[];
@@ -42,8 +44,9 @@ declare class CheckoutCardComponent {
     get formatAmountHandler(): string;
     paymentTypeHandler(event: string): void;
     setSuccess(event: ISuccessObject): void;
+    onErrorHandler(e: IErrorObject): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckoutCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckoutCardComponent, "bzp-checkout-card", never, { "options": { "alias": "options"; "required": false; }; "secretKey": { "alias": "secretKey"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "ready": "ready"; "validityChange": "validityChange"; "tokenize": "tokenize"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckoutCardComponent, "bzp-checkout-card", never, { "options": { "alias": "options"; "required": false; }; "secretKey": { "alias": "secretKey"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "ready": "ready"; "validityChange": "validityChange"; "tokenize": "tokenize"; "paymentAuthorized": "paymentAuthorized"; "onError": "onError"; }, never, never, true, never>;
 }
 
 declare class PayByCardComponent implements OnInit {
@@ -56,6 +59,7 @@ declare class PayByCardComponent implements OnInit {
     environment: 'sandbox' | 'prod';
     paymentObject: IPaymentObject;
     paymentAuthorized: EventEmitter<ISuccessObject>;
+    onError: EventEmitter<IErrorObject>;
     loading: boolean;
     loadingCountries: boolean;
     loadingStates: boolean;
@@ -95,7 +99,7 @@ declare class PayByCardComponent implements OnInit {
     proceedHandler(): Promise<void>;
     ngOnInit(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PayByCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PayByCardComponent, "pay-by-card", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "paymentAuthorized": "paymentAuthorized"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PayByCardComponent, "pay-by-card", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "paymentAuthorized": "paymentAuthorized"; "onError": "onError"; }, never, never, true, never>;
 }
 
 declare class PayByTransferComponent implements OnInit, OnDestroy {
@@ -106,6 +110,7 @@ declare class PayByTransferComponent implements OnInit, OnDestroy {
     environment: string;
     paymentObject: IPaymentObject;
     paymentAuthorized: EventEmitter<ISuccessObject>;
+    onError: EventEmitter<IErrorObject>;
     message: string;
     generatingLink: boolean;
     isMakingPayment: boolean;
@@ -133,7 +138,7 @@ declare class PayByTransferComponent implements OnInit, OnDestroy {
     ngOnInit(): Promise<void>;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PayByTransferComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PayByTransferComponent, "pay-by-transfer", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "paymentAuthorized": "paymentAuthorized"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PayByTransferComponent, "pay-by-transfer", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "paymentAuthorized": "paymentAuthorized"; "onError": "onError"; }, never, never, true, never>;
 }
 
 declare class PayByStableCoinComponent implements OnInit {
@@ -145,6 +150,7 @@ declare class PayByStableCoinComponent implements OnInit {
     environment: string;
     paymentObject: IPaymentObject;
     paymentAuthorized: EventEmitter<ISuccessObject>;
+    onError: EventEmitter<IErrorObject>;
     message: string;
     transactionReference: string;
     paymentReferenceStatus: string;
@@ -175,7 +181,7 @@ declare class PayByStableCoinComponent implements OnInit {
     confirmPaymentHandler(): Promise<void>;
     ngOnInit(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PayByStableCoinComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PayByStableCoinComponent, "pay-by-stable-coin", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "paymentAuthorized": "paymentAuthorized"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PayByStableCoinComponent, "pay-by-stable-coin", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "paymentAuthorized": "paymentAuthorized"; "onError": "onError"; }, never, never, true, never>;
 }
 
 interface IIframeStyle {
@@ -200,6 +206,7 @@ declare class CheckoutIframeComponent implements AfterViewInit {
     environment: 'sandbox' | 'prod';
     paymentObject: IPaymentObject;
     container?: ElementRef<HTMLDivElement>;
+    onError: EventEmitter<IErrorObject>;
     get blockStyle(): {
         width?: string;
         height?: string;
@@ -211,7 +218,7 @@ declare class CheckoutIframeComponent implements AfterViewInit {
     generatePaymentLinkHandler(): Promise<void | string>;
     ngAfterViewInit(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckoutIframeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckoutIframeComponent, "bzp-checkout-iframe", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "url": { "alias": "url"; "required": false; }; "style": { "alias": "style"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckoutIframeComponent, "bzp-checkout-iframe", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "url": { "alias": "url"; "required": false; }; "style": { "alias": "style"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "onError": "onError"; }, never, never, true, never>;
 }
 
 declare class CheckoutButtonComponent {
@@ -227,9 +234,10 @@ declare class CheckoutButtonComponent {
     environment: 'sandbox' | 'prod';
     mode: 'redirect' | 'iframe';
     paymentObject: IPaymentObject;
+    onError: EventEmitter<IErrorObject>;
     generatePaymentLinkHandler(): Promise<void | string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckoutButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckoutButtonComponent, "bzp-checkout-button", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "timeout": { "alias": "timeout"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckoutButtonComponent, "bzp-checkout-button", never, { "secretKey": { "alias": "secretKey"; "required": false; }; "timeout": { "alias": "timeout"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "paymentObject": { "alias": "paymentObject"; "required": false; }; }, { "onError": "onError"; }, never, never, true, never>;
 }
 
 export { CheckoutButtonComponent, CheckoutCardComponent, CheckoutIframeComponent, PayByCardComponent, PayByStableCoinComponent, PayByTransferComponent };

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

@@ -31,6 +31,7 @@ class PayByCardComponent {
         redirectUrl: '',
     };
     paymentAuthorized = new EventEmitter();
+    onError = new EventEmitter();
     loading = false;
     loadingCountries = false;
     loadingStates = false;
@@ -268,7 +269,8 @@ class PayByCardComponent {
                                     this.paymentAuthorized.emit({
                                         paymentId: processedResponse.transactionReference,
                                         paymentDate: response.data.updatedAt,
-                                        paymentStatus: 'Authorized',
+                                        paymentStatus: 'authorized',
+                                        message: this.message,
                                     });
                                 }
                                 this.message = 'Card payment authorized successfully';
@@ -297,7 +299,8 @@ class PayByCardComponent {
                                 this.paymentAuthorized.emit({
                                     paymentId: processedResponse.transactionReference,
                                     paymentDate: response.data.updatedAt,
-                                    paymentStatus: 'Payment failed',
+                                    paymentStatus: 'payment failed',
+                                    message: this.message,
                                 });
                             }
                         },
@@ -311,12 +314,14 @@ class PayByCardComponent {
                             else {
                                 this.message = err.error.responseMessage || err.error.message || 'Payment failed';
                             }
+                            this.onError.emit({ errorMessage: this.message });
                         },
                     });
                 }
                 catch (error) {
                     this.isMakingPayment = false;
                     this.message = 'An unexpected error occurred';
+                    this.onError.emit({ errorMessage: this.message });
                 }
             }
             else {
@@ -329,7 +334,7 @@ class PayByCardComponent {
         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 });
+    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", onError: "onError" }, 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,
@@ -342,6 +347,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], paymentAuthorized: [{
                 type: Output
+            }], onError: [{
+                type: Output
             }] } });
 
 class PayByTransferComponent {
@@ -363,6 +370,7 @@ class PayByTransferComponent {
         redirectUrl: '',
     };
     paymentAuthorized = new EventEmitter();
+    onError = new EventEmitter();
     message = '';
     generatingLink = false;
     isMakingPayment = false;
@@ -458,6 +466,7 @@ class PayByTransferComponent {
                 error: (err) => {
                     this.isMakingPayment = false;
                     this.message = err.error.responseMessage || err.error.message;
+                    this.onError.emit({ errorMessage: this.message });
                 },
             });
         }
@@ -489,6 +498,7 @@ class PayByTransferComponent {
                                 paymentId: this.transactionReference,
                                 paymentDate: response.data.updatedAt,
                                 paymentStatus: this.paymentReferenceStatus,
+                                message: this.message,
                             });
                         }
                         else {
@@ -497,6 +507,7 @@ class PayByTransferComponent {
                                 paymentId: this.transactionReference,
                                 paymentDate: response.data.updatedAt,
                                 paymentStatus: this.paymentReferenceStatus,
+                                message: this.message,
                             });
                         }
                     }
@@ -507,6 +518,7 @@ class PayByTransferComponent {
                             paymentId: this.transactionReference,
                             paymentDate: response.data.updatedAt,
                             paymentStatus: this.paymentReferenceStatus,
+                            message: this.message,
                         });
                         this.message = 'Transaction confirmed !!';
                         this.paymentReferenceStatus = 'confirmed';
@@ -520,6 +532,7 @@ class PayByTransferComponent {
                         paymentId: this.transactionReference,
                         paymentDate: null,
                         paymentStatus: this.paymentReferenceStatus,
+                        message: this.message,
                     });
                 }
                 this.isFetchingPaymentDetails = false;
@@ -528,6 +541,7 @@ class PayByTransferComponent {
                 this.paymentReferenceStatus = '';
                 this.isFetchingPaymentDetails = false;
                 this.message = err.error.responseMessage || err.error.message;
+                this.onError.emit({ errorMessage: this.message });
             },
         });
     }
@@ -542,7 +556,7 @@ class PayByTransferComponent {
         }
     }
     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 });
+    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", onError: "onError" }, ngImport: i0, template: "<div class=\"flex flex-col gap-10\">\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Customer Name\"\n          [required]=\"true\"\n          [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n        ></base-input>\n\n        <base-button\n          [label]=\"'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          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,
@@ -561,6 +575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], paymentAuthorized: [{
                 type: Output
+            }], onError: [{
+                type: Output
             }] } });
 
 class PayByStableCoinComponent {
@@ -584,6 +600,7 @@ class PayByStableCoinComponent {
         redirectUrl: '',
     };
     paymentAuthorized = new EventEmitter();
+    onError = new EventEmitter();
     message = '';
     transactionReference = '';
     paymentReferenceStatus = '';
@@ -662,6 +679,7 @@ class PayByStableCoinComponent {
             .subscribe({
             error: (err) => {
                 this.message = err.error.responseMessage || err.error.message;
+                this.onError.emit({ errorMessage: this.message });
             },
         });
     }
@@ -696,6 +714,7 @@ class PayByStableCoinComponent {
             error: (err) => {
                 this.loadingStableCoins = false;
                 this.message = err.error.responseMessage || err.error.message;
+                this.onError.emit({ errorMessage: this.message });
             },
         });
     }
@@ -716,6 +735,7 @@ class PayByStableCoinComponent {
             error: (err) => {
                 this.loadingStableCoinNetworks = false;
                 this.message = err.error.responseMessage || err.error.message;
+                this.onError.emit({ errorMessage: this.message });
             },
         });
     }
@@ -735,6 +755,7 @@ class PayByStableCoinComponent {
                             paymentId: this.transactionReference,
                             paymentDate: response.data.updatedAt,
                             paymentStatus: this.paymentReferenceStatus,
+                            message: this.message,
                         });
                     }
                     else if (response.data?.finalTransactionStatus === 'Success' ||
@@ -745,6 +766,7 @@ class PayByStableCoinComponent {
                             paymentId: this.transactionReference,
                             paymentDate: response.data.updatedAt,
                             paymentStatus: this.paymentReferenceStatus,
+                            message: this.message,
                         });
                     }
                 }
@@ -755,6 +777,7 @@ class PayByStableCoinComponent {
                         paymentId: this.transactionReference,
                         paymentDate: null,
                         paymentStatus: this.paymentReferenceStatus,
+                        message: this.message,
                     });
                 }
                 this.isConfirmingPayment = false;
@@ -763,6 +786,7 @@ class PayByStableCoinComponent {
                 this.paymentReferenceStatus = '';
                 this.isConfirmingPayment = false;
                 this.message = err.error.responseMessage || err.error.message;
+                this.onError.emit({ errorMessage: this.message });
             },
         });
     }
@@ -771,7 +795,7 @@ class PayByStableCoinComponent {
         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: 
+    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", onError: "onError" }, 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 });
 }
@@ -794,6 +818,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], paymentAuthorized: [{
                 type: Output
+            }], onError: [{
+                type: Output
             }] } });
 
 class CheckoutCardComponent {
@@ -812,6 +838,8 @@ class CheckoutCardComponent {
     ready = new EventEmitter();
     validityChange = new EventEmitter();
     tokenize = new EventEmitter();
+    paymentAuthorized = new EventEmitter();
+    onError = new EventEmitter();
     successObject = {
         paymentDate: '',
         paymentId: '',
@@ -867,9 +895,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\">\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              (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              (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              (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: ["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", "onError"] }, { kind: "component", type: PayByTransferComponent, selector: "pay-by-transfer", inputs: ["secretKey", "environment", "paymentObject"], outputs: ["paymentAuthorized", "onError"] }, { kind: "component", type: PayByStableCoinComponent, selector: "pay-by-stable-coin", inputs: ["secretKey", "environment", "paymentObject"], outputs: ["paymentAuthorized", "onError"] }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutCardComponent, decorators: [{
             type: Component,
@@ -881,7 +913,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\">\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              (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              (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              (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 +928,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 +967,7 @@ class CheckoutIframeComponent {
         redirectUrl: 'https://sandbox-merchant.buzapay.com/account/three-ds-status',
     };
     container;
+    onError = new EventEmitter();
     get blockStyle() {
         return {
             ...(this.style || {}),
@@ -974,18 +1011,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$1.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 +1045,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 +1073,7 @@ class CheckoutButtonComponent {
         narration: '',
         redirectUrl: 'https://sandbox-merchant.buzapay.com/account/three-ds-status',
     };
+    onError = new EventEmitter();
     async generatePaymentLinkHandler() {
         if (!this.secretKey) {
             return (this.errorMessage = 'Secret key is required.');
@@ -1051,15 +1096,20 @@ 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\"\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"], outputs: ["onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutButtonComponent, decorators: [{
             type: Component,
@@ -1074,6 +1124,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], paymentObject: [{
                 type: Input
+            }], onError: [{
+                type: Output
             }] } });
 
 /**