@miden-npm/angular 0.0.18 → 0.0.19

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, ISelectOption, ResourceService, CheckoutService, EncryptService, IPaymentAccountResponse, IPaymentReferenceDetail, IGenerateStableCoinAddress, IGenerateStableCoinAddressResponse } from '@miden-npm/angular';
+import { IPaymentObject, ISuccessObject, ISelectOption, ResourceService, CheckoutService, EncryptService, IPaymentAccountResponse, IPaymentReferenceDetail, IGenerateStableCoinAddress, IGenerateStableCoinAddressResponse } from '@miden-npm/angular';
 import { FormGroup, FormControl } from '@angular/forms';
 
 interface CheckoutIframeStyle {
@@ -33,14 +33,15 @@ declare class CheckoutCardComponent {
         field?: string;
     }>;
     tokenize: EventEmitter<TokenizeResult>;
-    checkoutState: 'STABLE_COIN_PAYMENT' | 'PAYMENT' | 'SUCCESS';
+    successObject: ISuccessObject;
+    checkoutState: 'SUCCESS' | 'PENDING' | 'USED';
     countryOptions: ISelectOption[];
     paymentTypeOptions: ISelectOption[];
     paymentType: string;
     get filteredPaymentTypeOptions(): ISelectOption[];
     get formatAmountHandler(): string;
     paymentTypeHandler(event: string): void;
-    payStableCoinHandler(): void;
+    setSuccess(event: ISuccessObject): 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>;
 }
@@ -54,7 +55,7 @@ declare class PayByCardComponent implements OnInit {
     secretKey: string;
     environment: string;
     paymentObject: IPaymentObject;
-    paymentAuthorized: EventEmitter<string>;
+    paymentAuthorized: EventEmitter<ISuccessObject>;
     loading: boolean;
     loadingCountries: boolean;
     loadingStates: boolean;
@@ -102,8 +103,7 @@ declare class PayByTransferComponent implements OnInit, OnDestroy {
     secretKey: string;
     environment: string;
     paymentObject: IPaymentObject;
-    paymentAuthorized: EventEmitter<string>;
-    paymentUsed: EventEmitter<string>;
+    paymentAuthorized: EventEmitter<ISuccessObject>;
     message: string;
     generatingLink: boolean;
     isMakingPayment: boolean;
@@ -128,10 +128,10 @@ declare class PayByTransferComponent implements OnInit, OnDestroy {
     generatePaymentLinkHandler(): Promise<void | string>;
     payHandler(): Promise<void>;
     getReferenceDetails(): Promise<void>;
-    ngOnInit(): void;
+    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"; "paymentUsed": "paymentUsed"; }, 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"; }, never, never, true, never>;
 }
 
 declare class PayByStableCoinComponent implements OnInit {
@@ -142,8 +142,7 @@ declare class PayByStableCoinComponent implements OnInit {
     secretKey: string;
     environment: string;
     paymentObject: IPaymentObject;
-    paymentAuthorized: EventEmitter<string>;
-    paymentUsed: EventEmitter<string>;
+    paymentAuthorized: EventEmitter<ISuccessObject>;
     message: string;
     transactionReference: string;
     paymentReferenceStatus: string;
@@ -164,15 +163,16 @@ declare class PayByStableCoinComponent implements OnInit {
         network: FormControl<string | null>;
     }>;
     getError(controlName: string, label?: string): string | null;
+    get amountPlusNetworkFee(): number;
     generatePaymentLinkHandler(): Promise<void | string>;
-    generateAddress(): Promise<void>;
+    generateAddress(): void;
     payHandler(): Promise<void>;
     getStableCoins(): Promise<void>;
     getStableCoinNetworks(): Promise<void>;
     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"; "paymentUsed": "paymentUsed"; }, 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"; }, never, never, true, never>;
 }
 
 interface IIframeStyle {

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

@@ -1,7 +1,7 @@
 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, cardType, checkObjectTruthy, ButtonComponent, InputComponent, SelectComponent, formatAmount, LabelInfoComponent, CopyComponent, ImageComponent, CurrencyAmountComponent, IconArrowSwapComponent, RadioGroupComponent, SuccessComponent, CardComponent, IconLoaderComponent, InputErrorComponent } from '@miden-npm/angular';
+import { getValidationErrorMessage, cardType, checkObjectTruthy, getQueryParams, ButtonComponent, InputComponent, SelectComponent, formatAmount, 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';
@@ -127,7 +127,8 @@ class PayByCardComponent {
             .pipe(tap((res) => {
             if (res?.isSuccessful) {
                 this.message = 'Payment link created successfully';
-                this.transactionReference = res.data.transactionReference;
+                const queryParams = getQueryParams(res.launchUrl ?? '');
+                this.transactionReference = queryParams['paymentReference'];
             }
             else {
                 this.message = 'Failed to create payment link';
@@ -255,7 +256,11 @@ class PayByCardComponent {
                                 // Emit the transaction reference to parent component
                                 if (processedResponse.transactionReference &&
                                     processedResponse.transactionReference.trim() !== '') {
-                                    this.paymentAuthorized.emit(processedResponse.transactionReference);
+                                    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
@@ -280,6 +285,11 @@ class PayByCardComponent {
                             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) => {
@@ -344,7 +354,6 @@ class PayByTransferComponent {
         redirectUrl: '',
     };
     paymentAuthorized = new EventEmitter();
-    paymentUsed = new EventEmitter();
     message = '';
     generatingLink = false;
     isMakingPayment = false;
@@ -376,14 +385,16 @@ class PayByTransferComponent {
         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) {
-                if (this.intervalId) {
-                    clearInterval(this.intervalId);
-                    this.intervalId = null;
-                }
+                clearInterval(this.intervalId);
+                this.intervalId = null;
                 this.countDownTime = '00:00';
                 this.cdr.markForCheck();
                 return;
@@ -405,7 +416,8 @@ class PayByTransferComponent {
             .pipe(tap((res) => {
             if (res?.isSuccessful) {
                 this.message = 'Payment link created successfully';
-                this.transactionReference = res.data.transactionReference;
+                const queryParams = getQueryParams(res.launchUrl ?? '');
+                this.transactionReference = queryParams['paymentReference'];
             }
             else {
                 this.message = 'Failed to create payment link';
@@ -464,25 +476,42 @@ class PayByTransferComponent {
                         // 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.paymentAuthorized.emit(this.transactionReference);
                             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(this.transactionReference);
+                        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.paymentUsed.emit(this.transactionReference);
                     this.paymentReferenceStatus = 'used';
                     this.message = response.responseMessage;
+                    this.paymentAuthorized.emit({
+                        paymentId: this.transactionReference,
+                        paymentDate: null,
+                        paymentStatus: this.paymentReferenceStatus,
+                    });
                 }
                 this.isFetchingPaymentDetails = false;
             },
@@ -493,8 +522,9 @@ class PayByTransferComponent {
             },
         });
     }
-    ngOnInit() {
+    async ngOnInit() {
         this.startTimer();
+        await this.generatePaymentLinkHandler();
     }
     ngOnDestroy() {
         if (this.intervalId) {
@@ -503,11 +533,17 @@ 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", paymentUsed: "paymentUsed" }, ngImport: i0, template: "<div class=\"flex flex-col gap-10\">\n  <p class=\"text-sub-copy text-sm font-semibold text-center\">\n    Amount to Pay {{ formatAmountHandler }}\n  </p>\n\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Card 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          (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"], 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" }, 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=\"Card 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"], 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  <p class=\"text-sub-copy text-sm font-semibold text-center\">\n    Amount to Pay {{ formatAmountHandler }}\n  </p>\n\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Card 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          (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" }]
+            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=\"Card 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: [{
@@ -516,8 +552,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], paymentAuthorized: [{
                 type: Output
-            }], paymentUsed: [{
-                type: Output
             }] } });
 
 class PayByStableCoinComponent {
@@ -541,7 +575,6 @@ class PayByStableCoinComponent {
         redirectUrl: '',
     };
     paymentAuthorized = new EventEmitter();
-    paymentUsed = new EventEmitter();
     message = '';
     transactionReference = '';
     paymentReferenceStatus = '';
@@ -567,6 +600,11 @@ class PayByStableCoinComponent {
         const control = this.stableCoinForm.get(controlName);
         return getValidationErrorMessage(control, label);
     }
+    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.');
@@ -581,7 +619,8 @@ class PayByStableCoinComponent {
             .pipe(tap((res) => {
             if (res?.isSuccessful) {
                 this.message = 'Payment link created successfully';
-                this.transactionReference = res.data.transactionReference;
+                const queryParams = getQueryParams(res.launchUrl ?? '');
+                this.transactionReference = queryParams['paymentReference'];
             }
             else {
                 this.message = 'Failed to create payment link';
@@ -592,25 +631,27 @@ class PayByStableCoinComponent {
         }))
             .subscribe();
     }
-    async generateAddress() {
-        if (this.generateAddressPayload) {
-            this.generatingAddress = true;
-            await this.checkout
-                .generateStableCoinAddress(this.environment, this.generateAddressPayload)
-                .subscribe({
-                next: async (response) => {
-                    if (response?.isSuccessful) {
-                        this.addressDetails = response.data;
-                        this.setFormIndex(1);
-                        this.generatingAddress = false;
-                    }
-                },
-                error: (err) => {
-                    this.generatingAddress = false;
-                    this.message = err.error.responseMessage || err.error.message;
-                },
-            });
-        }
+    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) {
@@ -678,18 +719,31 @@ class PayByStableCoinComponent {
                         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(this.transactionReference);
+                        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.paymentUsed.emit(this.transactionReference);
+                    this.paymentAuthorized.emit({
+                        paymentId: this.transactionReference,
+                        paymentDate: null,
+                        paymentStatus: this.paymentReferenceStatus,
+                    });
                 }
                 this.isConfirmingPayment = false;
             },
@@ -705,19 +759,21 @@ 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", paymentUsed: "paymentUsed" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  @if (formIndex === 0) {\n    <form [formGroup]=\"stableCoinForm\">\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\"\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\">USDC</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]=\"addressDetails?.transactionAmount ?? 0\"\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, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }, { kind: "component", type: 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 });
+    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\"\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\">USDC</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,
+                        // ImageComponent,
                         CurrencyAmountComponent,
                         CopyComponent,
                         IconArrowSwapComponent,
                         ReactiveFormsModule,
-                    ], template: "<div class=\"flex flex-col gap-6\">\n  @if (formIndex === 0) {\n    <form [formGroup]=\"stableCoinForm\">\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\"\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\">USDC</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]=\"addressDetails?.transactionAmount ?? 0\"\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" }]
+                    ], 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\"\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\">USDC</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: [{
@@ -726,8 +782,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], paymentAuthorized: [{
                 type: Output
-            }], paymentUsed: [{
-                type: Output
             }] } });
 
 class CheckoutCardComponent {
@@ -746,7 +800,12 @@ class CheckoutCardComponent {
     ready = new EventEmitter();
     validityChange = new EventEmitter();
     tokenize = new EventEmitter();
-    checkoutState = 'PAYMENT';
+    successObject = {
+        paymentDate: '',
+        paymentId: '',
+        paymentStatus: '',
+    };
+    checkoutState = 'PENDING';
     countryOptions = [
         {
             label: 'Nigeria',
@@ -775,11 +834,20 @@ class CheckoutCardComponent {
     paymentTypeHandler(event) {
         this.paymentType = event;
     }
-    payStableCoinHandler() {
-        this.checkoutState = 'STABLE_COIN_PAYMENT';
+    setSuccess(event) {
+        this.successObject = { ...event };
+        if (this.successObject.paymentStatus === 'pending') {
+            this.checkoutState = 'PENDING';
+        }
+        else if (this.successObject.paymentStatus === 'used') {
+            this.checkoutState = 'USED';
+        }
+        else {
+            this.checkoutState = 'SUCCESS';
+        }
     }
     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 [showBackButton]=\"checkoutState === 'STABLE_COIN_PAYMENT'\">\n  <div class=\"grid grid-cols-3\">\n    @if (checkoutState === 'PAYMENT') {\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=\"col-span-2\">\n      @if (checkoutState === 'PAYMENT' || checkoutState === 'STABLE_COIN_PAYMENT') {\n        @if (checkoutState === 'PAYMENT') {\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\n        <div class=\"overflow-y-scroll px-10 pb-10 pt-2\">\n          @if (paymentType === 'CARD') {\n            <pay-by-card [environment]=\"environment\" [secretKey]=\"secretKey\"></pay-by-card>\n          } @else if (paymentType === 'BANK_TRANSFER') {\n            <pay-by-transfer [environment]=\"environment\" [secretKey]=\"secretKey\"></pay-by-transfer>\n          } @else {\n            <pay-by-stable-coin\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              (paymentAuthorized)=\"payStableCoinHandler()\"\n            ></pay-by-stable-coin>\n          }\n        </div>\n      } @else if (checkoutState === 'SUCCESS') {\n        <base-success></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", "paymentUsed"] }, { kind: "component", type: PayByStableCoinComponent, selector: "pay-by-stable-coin", inputs: ["secretKey", "environment", "paymentObject"], outputs: ["paymentAuthorized", "paymentUsed"] }, { kind: "component", type: SuccessComponent, selector: "base-success" }, { 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" }, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutCardComponent, decorators: [{
             type: Component,
@@ -791,7 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         PayByStableCoinComponent,
                         SuccessComponent,
                         CardComponent,
-                    ], template: "<base-card [showBackButton]=\"checkoutState === 'STABLE_COIN_PAYMENT'\">\n  <div class=\"grid grid-cols-3\">\n    @if (checkoutState === 'PAYMENT') {\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=\"col-span-2\">\n      @if (checkoutState === 'PAYMENT' || checkoutState === 'STABLE_COIN_PAYMENT') {\n        @if (checkoutState === 'PAYMENT') {\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\n        <div class=\"overflow-y-scroll px-10 pb-10 pt-2\">\n          @if (paymentType === 'CARD') {\n            <pay-by-card [environment]=\"environment\" [secretKey]=\"secretKey\"></pay-by-card>\n          } @else if (paymentType === 'BANK_TRANSFER') {\n            <pay-by-transfer [environment]=\"environment\" [secretKey]=\"secretKey\"></pay-by-transfer>\n          } @else {\n            <pay-by-stable-coin\n              [environment]=\"environment\"\n              [secretKey]=\"secretKey\"\n              (paymentAuthorized)=\"payStableCoinHandler()\"\n            ></pay-by-stable-coin>\n          }\n        </div>\n      } @else if (checkoutState === 'SUCCESS') {\n        <base-success></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            ></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" }]
         }], propDecorators: { options: [{
                 type: Input
             }], secretKey: [{