@miden-npm/angular 0.0.18 → 0.0.20

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, 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) => {
@@ -127,7 +133,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';
@@ -150,6 +157,7 @@ class PayByCardComponent {
         }
         else {
             if (this.payForm && this.payForm.valid) {
+                debugger;
                 try {
                     this.isMakingPayment = true;
                     // Create card details object for encryption
@@ -175,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(),
@@ -194,6 +205,7 @@ class PayByCardComponent {
                     })
                         .subscribe({
                         next: async (response) => {
+                            debugger;
                             let processedResponse = response;
                             // Check if response is encrypted (has responseParam)
                             if (response?.responseParam) {
@@ -255,7 +267,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 +296,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) => {
@@ -310,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: [{
@@ -344,7 +365,6 @@ class PayByTransferComponent {
         redirectUrl: '',
     };
     paymentAuthorized = new EventEmitter();
-    paymentUsed = new EventEmitter();
     message = '';
     generatingLink = false;
     isMakingPayment = false;
@@ -376,14 +396,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 +427,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 +487,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 +533,9 @@ class PayByTransferComponent {
             },
         });
     }
-    ngOnInit() {
+    async ngOnInit() {
         this.startTimer();
+        await this.generatePaymentLinkHandler();
     }
     ngOnDestroy() {
         if (this.intervalId) {
@@ -503,11 +544,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 +563,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], paymentAuthorized: [{
                 type: Output
-            }], paymentUsed: [{
-                type: Output
             }] } });
 
 class PayByStableCoinComponent {
@@ -541,7 +586,6 @@ class PayByStableCoinComponent {
         redirectUrl: '',
     };
     paymentAuthorized = new EventEmitter();
-    paymentUsed = new EventEmitter();
     message = '';
     transactionReference = '';
     paymentReferenceStatus = '';
@@ -567,6 +611,14 @@ 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
+            : 0;
+    }
     async generatePaymentLinkHandler() {
         if (!this.secretKey) {
             return (this.message = 'Secret key is required.');
@@ -581,7 +633,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 +645,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 +733,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 +773,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 ' + 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 });
 }
 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 ' + 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: [{
@@ -726,8 +796,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], paymentAuthorized: [{
                 type: Output
-            }], paymentUsed: [{
-                type: Output
             }] } });
 
 class CheckoutCardComponent {
@@ -746,7 +814,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 +848,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 +873,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: [{