@miden-npm/angular 0.0.19 → 0.0.20

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, IPaymentAccountResponse, IPaymentReferenceDetail, IGenerateStableCoinAddress, IGenerateStableCoinAddressResponse } from '@miden-npm/angular';
+import { IPaymentObject, ISuccessObject, ISelectOption, ResourceService, CheckoutService, EncryptService, ICountry, IPaymentAccountResponse, IPaymentReferenceDetail, IGenerateStableCoinAddress, IGenerateStableCoinAddressResponse } from '@miden-npm/angular';
 import { FormGroup, FormControl } from '@angular/forms';
 
 interface CheckoutIframeStyle {
@@ -63,6 +63,7 @@ declare class PayByCardComponent implements OnInit {
     cardType: string;
     message: string;
     transactionReference: string;
+    rawCountries: ICountry[];
     countries: ISelectOption[];
     countryStates: ISelectOption[];
     formIndex: number;
@@ -85,10 +86,11 @@ declare class PayByCardComponent implements OnInit {
         cardPin: FormControl<string | null>;
     }>;
     getError(formKey: string, controlName: string, label?: string): string | null;
+    get formatAmountHandler(): string;
     cardNumberInputHandler(event: string): void;
     updatePinValidation(): void;
     getAllCountries(): Promise<void>;
-    getCountryStates(countryIso3: string): Promise<void>;
+    getCountryStates(countryIso2: string): Promise<void>;
     generatePaymentLinkHandler(): Promise<void | string>;
     proceedHandler(): Promise<void>;
     ngOnInit(): Promise<void>;
@@ -163,6 +165,7 @@ declare class PayByStableCoinComponent implements OnInit {
         network: FormControl<string | null>;
     }>;
     getError(controlName: string, label?: string): string | null;
+    get formatAmountHandler(): string;
     get amountPlusNetworkFee(): number;
     generatePaymentLinkHandler(): Promise<void | string>;
     generateAddress(): void;

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, getQueryParams, ButtonComponent, InputComponent, SelectComponent, formatAmount, LabelInfoComponent, CopyComponent, CurrencyAmountComponent, IconArrowSwapComponent, RadioGroupComponent, ImageComponent, SuccessComponent, CardComponent, IconLoaderComponent, InputErrorComponent } from '@miden-npm/angular';
+import { getValidationErrorMessage, formatAmount, cardType, checkObjectTruthy, getQueryParams, ButtonComponent, InputComponent, SelectComponent, LabelInfoComponent, CopyComponent, CurrencyAmountComponent, IconArrowSwapComponent, RadioGroupComponent, ImageComponent, SuccessComponent, CardComponent, IconLoaderComponent, InputErrorComponent } from '@miden-npm/angular';
 import * as i2 from '@angular/forms';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { tap, finalize } from 'rxjs';
@@ -38,6 +38,7 @@ class PayByCardComponent {
     cardType = '';
     message = '';
     transactionReference = '';
+    rawCountries = [];
     countries = [];
     countryStates = [];
     formIndex = 0;
@@ -65,6 +66,9 @@ class PayByCardComponent {
         const control = formKey === 'billing' ? this.billingForm.get(controlName) : this.payForm.get(controlName);
         return getValidationErrorMessage(control, label);
     }
+    get formatAmountHandler() {
+        return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
+    }
     cardNumberInputHandler(event) {
         this.cardType = cardType(event);
         this.updatePinValidation();
@@ -86,8 +90,9 @@ class PayByCardComponent {
             .getCountries(this.environment, this.secretKey)
             .pipe(tap((res) => {
             if (res?.isSuccessful) {
+                this.rawCountries = res.data ?? [];
                 this.countries = (res.data ?? []).map((c) => {
-                    return { label: c.countryName, value: c.iso3 };
+                    return { label: c.countryName, value: c.iso2 };
                 });
             }
         }), finalize(() => {
@@ -96,11 +101,12 @@ class PayByCardComponent {
         }))
             .subscribe();
     }
-    async getCountryStates(countryIso3) {
+    async getCountryStates(countryIso2) {
+        const country = this.rawCountries.filter((c) => c.iso2 === countryIso2);
         this.loadingStates = true;
         this.cdr.markForCheck();
         this.resources
-            .getCountryStates(countryIso3, this.environment, this.secretKey)
+            .getCountryStates(country[0].iso3, this.environment, this.secretKey)
             .pipe(tap((res) => {
             if (res?.isSuccessful) {
                 this.countryStates = (res.data ?? []).map((s) => {
@@ -151,6 +157,7 @@ class PayByCardComponent {
         }
         else {
             if (this.payForm && this.payForm.valid) {
+                debugger;
                 try {
                     this.isMakingPayment = true;
                     // Create card details object for encryption
@@ -176,7 +183,10 @@ class PayByCardComponent {
                     // Encrypt card details using payload encryption method
                     const encryptedCardDetails = this.encryptService.encryptPayload(this.environment, cardDetails);
                     // Test: Decrypt to verify encryption works
-                    const decryptedTest = this.encryptService.decryptPayload(this.environment, encryptedCardDetails.requestParam);
+                    // const decryptedTest = this.encryptService.decryptPayload(
+                    //   this.environment,
+                    //   encryptedCardDetails.requestParam,
+                    // );
                     const payload = {
                         customerId: this.paymentObject?.email || this.payForm.value.customerName || '',
                         amount: this.paymentObject?.amount.toString(),
@@ -195,6 +205,7 @@ class PayByCardComponent {
                     })
                         .subscribe({
                         next: async (response) => {
+                            debugger;
                             let processedResponse = response;
                             // Check if response is encrypted (has responseParam)
                             if (response?.responseParam) {
@@ -320,11 +331,11 @@ 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            [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'\"\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"], 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" }, 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            [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"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pay-by-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, InputComponent, SelectComponent, ReactiveFormsModule], template: "<div class=\"flex flex-col gap-6\">\n  <!-- Billing Details -->\n  @if (formIndex === 0) {\n    <form [formGroup]=\"billingForm\">\n      <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n        <div class=\"col-span-2\">\n          <base-input\n            formControlName=\"address1\"\n            label=\"Address Line 1\"\n            [required]=\"true\"\n            [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n          ></base-input>\n        </div>\n        <div class=\"col-span-2\">\n          <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n        </div>\n        <base-select\n          formControlName=\"country\"\n          label=\"Select Country\"\n          [required]=\"true\"\n          [options]=\"countries\"\n          [loading]=\"loadingCountries\"\n          [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n          (onSelectChange)=\"getCountryStates($event)\"\n        ></base-select>\n        <base-select\n          formControlName=\"state\"\n          label=\"Select State\"\n          [required]=\"true\"\n          [options]=\"countryStates\"\n          [loading]=\"loadingStates\"\n          [validationError]=\"getError('billing', 'state', 'State') || ''\"\n        ></base-select>\n        <base-input\n          formControlName=\"city\"\n          label=\"City\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'city', 'City') || ''\"\n        ></base-input>\n        <base-input\n          formControlName=\"postalCode\"\n          label=\"Postal Code\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n        ></base-input>\n        <base-input\n          formControlName=\"emailAddress\"\n          label=\"Email\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n        ></base-input>\n        <base-input\n          formControlName=\"phoneNumber\"\n          label=\"Phone Number\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n        ></base-input>\n      </div>\n    </form>\n  }\n\n  <!-- Card Details -->\n  @if (formIndex === 1) {\n    <form [formGroup]=\"payForm\">\n      <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n        <div class=\"col-span-2\">\n          <base-input\n            formControlName=\"customerName\"\n            label=\"Card Name\"\n            [required]=\"true\"\n            [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n          ></base-input>\n        </div>\n        <div class=\"col-span-2\">\n          <base-input\n            formControlName=\"cardNo\"\n            label=\"Card Number\"\n            [required]=\"true\"\n            mask=\"0000 0000 0000 0000\"\n            placeholder=\"0000 0000 0000 0000\"\n            [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'\"\n    type=\"primary\"\n    customClass=\"w-full\"\n    [loading]=\"isMakingPayment\"\n    (onClick)=\"proceedHandler()\"\n  ></base-button>\n</div>\n" }]
+            args: [{ selector: 'pay-by-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, InputComponent, SelectComponent, ReactiveFormsModule], template: "<div class=\"flex flex-col gap-6\">\n  <!-- Billing Details -->\n  @if (formIndex === 0) {\n    <form [formGroup]=\"billingForm\">\n      <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n        <div class=\"col-span-2\">\n          <base-input\n            formControlName=\"address1\"\n            label=\"Address Line 1\"\n            [required]=\"true\"\n            [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n          ></base-input>\n        </div>\n        <div class=\"col-span-2\">\n          <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n        </div>\n        <base-select\n          formControlName=\"country\"\n          label=\"Select Country\"\n          [required]=\"true\"\n          [options]=\"countries\"\n          [loading]=\"loadingCountries\"\n          [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n          (onSelectChange)=\"getCountryStates($event)\"\n        ></base-select>\n        <base-select\n          formControlName=\"state\"\n          label=\"Select State\"\n          [required]=\"true\"\n          [options]=\"countryStates\"\n          [loading]=\"loadingStates\"\n          [validationError]=\"getError('billing', 'state', 'State') || ''\"\n        ></base-select>\n        <base-input\n          formControlName=\"city\"\n          label=\"City\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'city', 'City') || ''\"\n        ></base-input>\n        <base-input\n          formControlName=\"postalCode\"\n          label=\"Postal Code\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n        ></base-input>\n        <base-input\n          formControlName=\"emailAddress\"\n          label=\"Email\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n        ></base-input>\n        <base-input\n          formControlName=\"phoneNumber\"\n          label=\"Phone Number\"\n          [required]=\"true\"\n          [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n        ></base-input>\n      </div>\n    </form>\n  }\n\n  <!-- Card Details -->\n  @if (formIndex === 1) {\n    <form [formGroup]=\"payForm\">\n      <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n        <div class=\"col-span-2\">\n          <base-input\n            formControlName=\"customerName\"\n            label=\"Card Name\"\n            [required]=\"true\"\n            [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n          ></base-input>\n        </div>\n        <div class=\"col-span-2\">\n          <base-input\n            formControlName=\"cardNo\"\n            label=\"Card Number\"\n            [required]=\"true\"\n            mask=\"0000 0000 0000 0000\"\n            placeholder=\"0000 0000 0000 0000\"\n            [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n            (onInputChange)=\"cardNumberInputHandler($event)\"\n          ></base-input>\n        </div>\n        <base-input\n          formControlName=\"expireDate\"\n          label=\"Expiry Date\"\n          [required]=\"true\"\n          mask=\"00/00\"\n          placeholder=\"00/00\"\n          [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n        ></base-input>\n        <base-input\n          formControlName=\"cvv\"\n          label=\"CVV\"\n          [required]=\"true\"\n          mask=\"000\"\n          placeholder=\"000\"\n          [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n        ></base-input>\n\n        @if (cardType === 'Verve') {\n          <base-input\n            formControlName=\"cardPin\"\n            label=\"Card Pin\"\n            type=\"password\"\n            placeholder=\"0000\"\n            mask=\"0000\"\n            [required]=\"true\"\n            [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n          ></base-input>\n          <div class=\"text-sm text-blue-600 mb-4\">\n            <i class=\"fas fa-info-circle mr-1\"></i>\n            Pin is required for Verve cards\n          </div>\n        }\n      </div>\n    </form>\n  }\n\n  <base-button\n    [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n    type=\"primary\"\n    customClass=\"w-full\"\n    [loading]=\"isMakingPayment\"\n    (onClick)=\"proceedHandler()\"\n  ></base-button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.ResourceService }, { type: i0.ChangeDetectorRef }, { type: i1.CheckoutService }, { type: i1.EncryptService }], propDecorators: { secretKey: [{
                 type: Input
             }], environment: [{
@@ -600,6 +611,9 @@ class PayByStableCoinComponent {
         const control = this.stableCoinForm.get(controlName);
         return getValidationErrorMessage(control, label);
     }
+    get formatAmountHandler() {
+        return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
+    }
     get amountPlusNetworkFee() {
         return this.addressDetails
             ? Number(this.addressDetails.transactionAmount) + this.addressDetails.networkFee
@@ -759,7 +773,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\"\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: 
+    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\">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 });
 }
@@ -773,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         CopyComponent,
                         IconArrowSwapComponent,
                         ReactiveFormsModule,
-                    ], template: "<div class=\"flex flex-col gap-6\">\n  @if (formIndex === 0) {\n    <form [formGroup]=\"stableCoinForm\" class=\"grid grid-cols-1 gap-6\">\n      <div class=\"grid grid-cols-1 gap-6\">\n        <base-select\n          formControlName=\"stableCoin\"\n          label=\"Select Crypto\"\n          [required]=\"true\"\n          [options]=\"stableCoins\"\n          [validationError]=\"getError('stableCoin', 'Select Crypto') ?? ''\"\n          [loading]=\"loadingStableCoins\"\n          (onSelectChange)=\"getStableCoinNetworks()\"\n        ></base-select>\n        <base-select\n          formControlName=\"network\"\n          label=\"Select Network\"\n          [required]=\"true\"\n          [options]=\"networkList\"\n          [validationError]=\"getError('network', 'Network') ?? ''\"\n          [loading]=\"loadingStableCoinNetworks\"\n        ></base-select>\n      </div>\n\n      <base-button\n        label=\"Pay\"\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" }]
+                    ], 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\">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: [{