epp-lib 0.0.4 → 0.0.6-snapshot

package/fesm2022/epp-lib.mjs

@@ -1,125 +1,112 @@
-import * as i1 from '@angular/common/http';
-import { HttpParams, HttpHeaders } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable, inject } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
+import { Injectable, inject, makeEnvironmentProviders, Pipe, Input, Component, Inject } from '@angular/core';
+import * as i2 from '@jsverse/transloco';
+import { TranslocoService, provideTransloco, provideTranslocoScope, TranslocoModule } from '@jsverse/transloco';
+import { Subject, Observable, timer, takeUntil } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { NgStyle } from '@angular/common';
 
-class IParam {
-    getMobileFlag() {
-        return /android|mobi/i.test(navigator.userAgent.toLowerCase());
-    }
-    toJson() {
-        return JSON.stringify(this);
-    }
-    toFormUrlEncoded() {
-        return new URLSearchParams(Object.entries(this).map(([key, value]) => [key, String(value)])).toString();
+class EppLibLoader {
+    getTranslation(lang) {
+        switch (lang) {
+            case 'cs':
+                return import('./epp-lib-cs-Cq7S0zUq.mjs');
+            case 'ru':
+                return import('./epp-lib-ru-DCZzQ5FE.mjs');
+            case 'es':
+                return import('./epp-lib-es--n1OPBgV.mjs');
+            case 'en':
+            default:
+                return import('./epp-lib-en-Bt5VLnlu.mjs');
+        }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibLoader }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibLoader, decorators: [{
+            type: Injectable
+        }] });
 
-class BaseForm extends IParam {
+class EppLibTranslationService {
     constructor() {
-        super();
-        this.isMobile = 'false';
-    }
-    /**
-     * Use this function for building POST params with form url encoded content type.
-     * Remeber to call params.toString() when passing to http request
-     */
-    getUrlSearchParam() {
-        const params = new URLSearchParams();
-        params.set('isMobile', this.isMobile);
-        return params;
+        this.transloco = inject(TranslocoService);
     }
-    /**
-     * Use this function for building GET params
-     */
-    getHttpParams() {
-        let params = new HttpParams();
-        params = params.append('isMobile', this.isMobile);
-        return params;
+    setLanguage(lang) {
+        this.transloco.setActiveLang(lang);
     }
-    /**
-     * Add isMobile = 'true' to paramters
-     * @param params : object
-     */
-    addIsMobile(params) {
-        params['isMobile'] = this.isMobile;
-    }
-    /**
-     * For POST request with form-urlencoded
-     */
-    getHeaderWithContentTypeForm() {
-        const headers = new HttpHeaders()
-            .set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
-        return headers;
-    }
-    /**
-     * For POST request with json body
-     */
-    getHeaderWithContentTypeJson() {
-        const headers = new HttpHeaders()
-            .set('Content-Type', 'application/json; charset=utf-8');
-        return headers;
+    getLanguage() {
+        return this.transloco.getActiveLang();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibTranslationService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibTranslationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
-class CallbackMessage {
-    constructor(errorMessage) {
-        this.errorMessage = '';
-        this.errorMessage = errorMessage;
-    }
+function provideEppLibTranslations(config) {
+    return makeEnvironmentProviders([
+        provideTransloco({
+            config: {
+                availableLangs: config.availableLangs,
+                defaultLang: config.defaultLang,
+                reRenderOnLangChange: true,
+            },
+            loader: EppLibLoader,
+        }),
+        provideTranslocoScope({
+            scope: 'epp-lib',
+            loader: {
+                en: () => import('./epp-lib-en-Bt5VLnlu.mjs'),
+                cs: () => import('./epp-lib-cs-Cq7S0zUq.mjs'),
+                es: () => import('./epp-lib-es--n1OPBgV.mjs'),
+                ru: () => import('./epp-lib-ru-DCZzQ5FE.mjs'),
+            },
+        })
+    ]);
 }
 
-var PaymentType;
-(function (PaymentType) {
-    PaymentType[PaymentType["NA"] = 0] = "NA";
-    PaymentType[PaymentType["JETON"] = 1] = "JETON";
-    PaymentType[PaymentType["ECOPAYZ"] = 2] = "ECOPAYZ";
-    PaymentType[PaymentType["RAPYD"] = 3] = "RAPYD";
-})(PaymentType || (PaymentType = {}));
-
-class Checkout {
+class EventEmitterService {
     constructor() {
-        this.requestId = 0;
-        this.paymentType = PaymentType.NA;
-        this.url = '';
-        this.expiration = 300;
-        this.errorMessage = '';
-        this.successMessage = '';
+        this.eventBus = new Subject();
     }
-    setErrorMessage(errorMessage) {
-        this.errorMessage = errorMessage;
-        this.popup = undefined;
+    broadcast(event) {
+        this.eventBus.next(event);
     }
-    setCallback(callback) {
-        this.successMessage = 'success';
-        this.callback = callback;
-        this.popup = undefined;
+    getEventBus() {
+        return this.eventBus;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EventEmitterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EventEmitterService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EventEmitterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 class Domain {
     constructor() {
         this.defaultDomain = '';
-        this.allowedOrigins = ['http://localhost:9000'];
+        this.allowedOrigins = ['http://localhost:9000', 'http://localhost:4200'];
         this.specialDomain = [];
         this.jetonDomain = '';
+        this.ecopayzDomain = '';
+        this.rapydDomain = 'https://sandboxcheckout.rapyd.net';
     }
 }
 
-var IframeMessageType;
-(function (IframeMessageType) {
-    IframeMessageType[IframeMessageType["OPEN_PAYMENT_FORM"] = 0] = "OPEN_PAYMENT_FORM";
-    IframeMessageType[IframeMessageType["PAYMENT_CALLBACK"] = 1] = "PAYMENT_CALLBACK";
-})(IframeMessageType || (IframeMessageType = {}));
-
-const ApiRoute = {
-    GET_DOMAIN: { url: "/getDomain", method: "get" }
-};
-
 class VoddsHttpService {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
+    constructor() {
+        this.httpClient = inject(HttpClient);
     }
     postJson(url, request) {
         const headers = new HttpHeaders({ 'Content-type': 'application/json' });
@@ -159,7 +146,7 @@ class VoddsHttpService {
     getFullUrl(url, param) {
         return `${url}?${param.toFormUrlEncoded()}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, decorators: [{
@@ -167,26 +154,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+        }] });
+
+const ApiRoute = {
+    GET_DOMAIN: { url: "/payment/getDomain", method: "get" }
+};
+
+var PaymentType;
+(function (PaymentType) {
+    PaymentType[PaymentType["NA"] = 0] = "NA";
+    PaymentType[PaymentType["JETON"] = 1] = "JETON";
+    PaymentType[PaymentType["ECOPAYZ"] = 2] = "ECOPAYZ";
+    PaymentType[PaymentType["RAPYD"] = 3] = "RAPYD";
+})(PaymentType || (PaymentType = {}));
+
+var IframeMessageType;
+(function (IframeMessageType) {
+    IframeMessageType[IframeMessageType["OPEN_PAYMENT_FORM"] = 0] = "OPEN_PAYMENT_FORM";
+    IframeMessageType[IframeMessageType["PAYMENT_CALLBACK"] = 1] = "PAYMENT_CALLBACK";
+    IframeMessageType[IframeMessageType["THIRD_PARTY_CALLBACK"] = 2] = "THIRD_PARTY_CALLBACK";
+})(IframeMessageType || (IframeMessageType = {}));
 
 class IframeMessageService {
-    constructor(ngZone, http) {
+    constructor(ngZone) {
         this.ngZone = ngZone;
-        this.http = http;
         this.messages$ = new Subject();
         this.thirdPartyMessages$ = new Subject();
+        this.http = inject(VoddsHttpService);
         this.listener = (event) => {
-            // console.log("message: ", event);
+            if (event.data && event.data.target != "metamask-inpage") {
+                console.log("listener: ", event);
+            }
             if (!this.domain.allowedOrigins.includes(event.origin)) {
-                console.log("listener not allow: ", event);
-                if (this.domain.jetonDomain == event.origin) {
+                if (this.isValidDomain(PaymentType.NA, event.origin)) {
                     this.ngZone.run(() => {
                         this.thirdPartyMessages$.next(event);
                     });
-                    return;
                 }
                 return;
             }
+            if (event.data && event.data.target == "metamask-inpage") {
+                return;
+            }
             if (event.data && IframeMessageType[event.data.type]) {
                 this.ngZone.run(() => {
                     this.messages$.next(event.data);
@@ -204,10 +213,10 @@ class IframeMessageService {
         });
         window.addEventListener('message', this.listener);
     }
-    messages() {
+    onMessages() {
         return this.messages$.asObservable();
     }
-    thirdPartyMessages() {
+    onThirdPartyMessages() {
         return this.thirdPartyMessages$.asObservable();
     }
     ngOnDestroy() {
@@ -215,12 +224,23 @@ class IframeMessageService {
         this.messages$.complete();
         this.thirdPartyMessages$.complete();
     }
+    /**
+     * Skip for RAPYD - It will process when the dialog close
+     */
     isValidDomain(paymentType, origin) {
-        if (paymentType == null)
+        if (paymentType == undefined || paymentType == null)
             return false;
         switch (paymentType) {
             case PaymentType.JETON:
                 return this.domain.jetonDomain == origin;
+            case PaymentType.ECOPAYZ:
+                return this.domain.ecopayzDomain == origin;
+            // case PaymentType.RAPYD:
+            //     return this.domain.rapydDomain == origin;
+            case PaymentType.NA:
+                return this.domain.jetonDomain == origin
+                    // || this.domain.rapydDomain == origin
+                    || this.domain.ecopayzDomain == origin;
             default:
                 return false;
         }
@@ -230,7 +250,7 @@ class IframeMessageService {
             return;
         iframe.nativeElement.contentWindow?.postMessage(message, window.location.origin);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, deps: [{ token: i0.NgZone }, { token: VoddsHttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, decorators: [{
@@ -238,7 +258,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: VoddsHttpService }] });
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+class CommonUtil {
+    static isMobileTemplate() {
+        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+        return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|Mobile/i.test(userAgent.toLowerCase());
+    }
+}
+
+class Checkout {
+    constructor() {
+        this.requestId = 0;
+        this.paymentType = PaymentType.NA;
+        this.url = '';
+        this.expiration = 300;
+        this.errorMessage = '';
+        this.successMessage = '';
+    }
+    setErrorMessage(errorMessage) {
+        this.errorMessage = errorMessage;
+        this.popup = undefined;
+    }
+    setCallback(callback) {
+        this.successMessage = 'success';
+        this.callback = callback;
+        this.popup = undefined;
+    }
+}
+
+class CountDownTime {
+    constructor(initTime) {
+        this.isStart = false;
+        this.isStop = false;
+        this.nextRound = false;
+        this.initTime = 0;
+        this.timeLeft = 0;
+        this.isCancel = false;
+        this.destroy$ = new Subject();
+        this.initTime = initTime;
+    }
+    start() {
+        this.isStart = true;
+        this.isStop = false;
+        this.timeLeft = this.initTime;
+    }
+    stop() {
+        this.isStart = false;
+        this.isStop = true;
+        this.timeLeft = 0;
+        this.nextRound = true;
+    }
+    downTime() {
+        this.timeLeft = this.timeLeft - 1;
+    }
+    cancel() {
+        this.isCancel = true;
+        this.stop();
+    }
+    oberserableTimer(isStop) {
+        timer(0, 1000)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(val => {
+            if (this.timeLeft === 0) {
+                if (this.isStart) {
+                    this.stop();
+                }
+            }
+            else {
+                this.downTime();
+            }
+            if (this.nextRound) {
+                this.nextRound = false;
+                if (isStop) {
+                    isStop.emit();
+                }
+            }
+        });
+    }
+    onDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+
+class IParam {
+    getMobileFlag() {
+        return /android|mobi/i.test(navigator.userAgent.toLowerCase());
+    }
+    toJson() {
+        return JSON.stringify(this);
+    }
+    toFormUrlEncoded() {
+        return new URLSearchParams(Object.entries(this).map(([key, value]) => [key, String(value)])).toString();
+    }
+}
 
 class Timer {
     constructor(interval, maxTime) {
@@ -253,9 +367,7 @@ class Timer {
     }
     oberserableTimer(data, callback) {
         this.popup = data.popup;
-        console.log("investigate popup status begin: ", this.popup?.name, this.popup);
         this.popupTimer = setInterval(() => {
-            console.log("investigate popup status: ", data);
             if ((this.maxTime > 0 && this.currentTime >= this.maxTime) || !data) {
                 this.stopWatcher();
                 // TODO Hit expire time
@@ -280,24 +392,275 @@ class Timer {
     }
 }
 
-class PaymentService {
+class TranslocoPipe {
     constructor() {
+        this.transloco = inject(TranslocoService);
+    }
+    transform(key) {
+        return this.transloco.translate(key, {}, 'epp-lib');
+        // return this.transloco.selectTranslate(key, {}, 'epp-lib');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranslocoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TranslocoPipe, isStandalone: true, name: "vTransloco" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranslocoPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'vTransloco',
+                    standalone: true
+                }]
+        }] });
+
+class VoddsLoaderComponent {
+    constructor() {
+        this.message = '';
+        this.showAjaxLoader = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VoddsLoaderComponent, isStandalone: true, selector: "vodds-loader", inputs: { message: "message", showAjaxLoader: "showAjaxLoader" }, ngImport: i0, template: "@if (showAjaxLoader) {\r\n  <div class=\"load-indicator\">\r\n    <img src=\"https://cdn.voddos.net/vodds/static/ajax-loader16.gif\">\r\n    {{message != undefined ? message : ''}}\r\n  </div>\r\n}\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vodds-loader', standalone: true, imports: [], template: "@if (showAjaxLoader) {\r\n  <div class=\"load-indicator\">\r\n    <img src=\"https://cdn.voddos.net/vodds/static/ajax-loader16.gif\">\r\n    {{message != undefined ? message : ''}}\r\n  </div>\r\n}\r\n" }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], showAjaxLoader: [{
+                type: Input
+            }] } });
+
+class RapydComponent {
+    constructor(dialogRef, data, translocoService) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.translocoService = translocoService;
+        this.isOpen = false;
+        this.checkoutToolKit = undefined;
+        this.visaMasterTimeout = 300;
+        this.visaMasterCheckoutId = '';
+        this.displayTimer = "00:00";
+        this.isShow = false;
+        this.isLoading = true;
+        this.errorMessage = "";
+        this.defaultExpirationSec = 300; // 5mins
+        this.checkoutFailureMessage = '';
+        this.handleLoading = (event) => {
+            if (!event.detail.loading && this.isLoading) {
+                this.isShow = true;
+                this.isLoading = false;
+                this.startTimer();
+            }
+        };
+        this.handleCheckoutPaymentSuccess = (event) => {
+            this.closeDialog(false);
+        };
+        this.handleCheckoutPaymentFailure = (event) => {
+            this.stopTimer();
+            this.isShow = false;
+            this.checkoutFailureMessage = event.detail.message;
+        };
+        this.visaMasterTimeout = data.expiration ?? data.expiration;
+        this.visaMasterCheckoutId = data.checkoutUrl;
+    }
+    ngOnDestroy() {
+        this.stopTimer();
+        window.removeEventListener('onLoading', this.handleLoading);
+        window.removeEventListener('onCheckoutPaymentSuccess', this.handleCheckoutPaymentSuccess);
+        window.removeEventListener('onCheckoutPaymentFailure', this.handleCheckoutPaymentFailure);
+    }
+    ngAfterViewInit() {
+        if (this.checkout) {
+            this.visaMasterTimeout = this.checkout.expiration;
+            this.visaMasterCheckoutId = this.checkout.url;
+        }
+        this.translocoService.selectTranslate('mobile_payment_form_title').subscribe(buttonText => {
+            console.log('Async translations loaded:', buttonText);
+            this.checkoutToolKit = this.isMobile() ? this.createCheckoutToolKitOnMobile(buttonText) : this.createCheckoutToolKitOnDesktop(buttonText);
+            this.displayCheckout();
+            window.addEventListener('onLoading', this.handleLoading);
+            window.addEventListener('onCheckoutPaymentSuccess', this.handleCheckoutPaymentSuccess);
+            window.addEventListener('onCheckoutPaymentFailure', this.handleCheckoutPaymentFailure);
+        });
+    }
+    createCheckoutToolKitOnDesktop(buttonText) {
+        return new RapydCheckoutToolkit({
+            pay_button_text: buttonText,
+            id: this.visaMasterCheckoutId,
+            wait_on_payment_redirect: true,
+            style: {
+                cardFields: {
+                    title: {
+                        color: '#80807F'
+                    },
+                    saveForFutureLabel: {
+                        color: '#80807F'
+                    }
+                },
+                input: {
+                    base: {
+                        fontWeight: "400",
+                        borderRadius: "5px",
+                    }
+                },
+                orderDetails: {
+                    title: {
+                        color: '#80807F'
+                    },
+                    totalLabel: {
+                        color: '#80807F'
+                    },
+                    totalValue: {
+                        color: '#80807F'
+                    }
+                },
+                submit: {
+                    base: {
+                        backgroundColor: "#F48215",
+                        color: "#FFFFFF",
+                        fontWeight: "900",
+                        borderRadius: "5px",
+                        border: "none",
+                        boxShadow: "0px 0px 20px 0px #28303A33",
+                        height: "35px",
+                    }
+                }
+            }
+        });
+    }
+    createCheckoutToolKitOnMobile(buttonText) {
+        return new RapydCheckoutToolkit({
+            pay_button_text: buttonText,
+            id: this.visaMasterCheckoutId,
+            wait_on_payment_redirect: true,
+            style: {
+                input: {
+                    base: {
+                        fontWeight: "400",
+                        borderRadius: "5px",
+                        fontSize: "12px"
+                    },
+                    placeholder: {
+                        fontSize: "12px !important",
+                        fontWeight: "700",
+                        fontFamily: "Manrope",
+                        color: '#8C8C8C',
+                    },
+                },
+                cardFields: {
+                    title: {
+                        color: '#8C8C8C'
+                    },
+                    saveForFutureLabel: {
+                        color: '#8C8C8C',
+                    }
+                },
+                orderDetails: {
+                    title: {
+                        color: '#8C8C8C',
+                    },
+                    totalLabel: {
+                        color: '#8C8C8C',
+                    },
+                    totalValue: {
+                        color: '#8C8C8C',
+                    }
+                },
+                submit: {
+                    base: {
+                        backgroundColor: "#28303A",
+                        color: "#FFFFFF",
+                        fontWeight: "900 !important",
+                        borderRadius: "12px",
+                        boxShadow: "0 0 8.57px #ff6b0066 !important",
+                        height: "40px",
+                        width: "100%",
+                        fontSize: "12px !important",
+                        border: "none"
+                    }
+                }
+            }
+        });
+    }
+    closeDialog(isCloseCheckout = true) {
+        this.stopTimer();
+        if (this.checkoutToolKit && isCloseCheckout) {
+            try {
+                this.checkoutToolKit.closeCheckout();
+            }
+            catch (err) {
+                console.error("Error when closing checkout", err);
+            }
+        }
+        this.checkoutToolKit = undefined;
+        this.isShow = false;
+        this.dialogRef.close(this.checkoutFailureMessage);
+    }
+    ;
+    startTimer() {
+        if (this.visaMasterTimer)
+            this.stopTimer();
+        this.visaMasterTimer = setInterval(() => {
+            if (this.visaMasterTimeout <= 0) {
+                this.closeDialog();
+                return;
+            }
+            this.visaMasterTimeout--;
+            this.displayTimer = `${this.pad(Math.floor(this.visaMasterTimeout / 60))}:${this.pad(this.visaMasterTimeout % 60)}`;
+        }, 1000);
+    }
+    stopTimer() {
+        clearInterval(this.visaMasterTimer);
+    }
+    pad(number) {
+        return `${number < 10 ? '0' : ''}${number}`;
+    }
+    displayCheckout() {
+        if (document.getElementById("rapyd-checkout")) {
+            this.checkoutToolKit.displayCheckout();
+        }
+        else {
+            setTimeout(() => {
+                this.displayCheckout();
+            }, 10);
+        }
+    }
+    isMobile() {
+        return true;
+        // return CommonUtil.isMobileTemplate();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RapydComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RapydComponent, isStandalone: true, selector: "v-rapyd", inputs: { checkout: "checkout" }, ngImport: i0, template: "@if(isMobile()) {\r\n    <div class=\"v-dialog mobile\">\r\n        <div class=\"v-flex-center-between header text-black-cs\">\r\n            <div class=\"v-flex-center-none\">\r\n                <span class=\"ml-8\">{{ 'mobile_payment_form_title' | transloco }}</span>\r\n            </div>\r\n            <div class=\"v-flex-center-between mr-8\">\r\n                <div (click)=\"closeDialog()\">\r\n                    <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                            d=\"M11.0121 12.3959L16.6455 18.0293C16.8333 18.2107 17.0849 18.3111 17.346 18.3088C17.6071 18.3065 17.8569 18.2018 18.0415 18.0172C18.2261 17.8325 18.3309 17.5828 18.3331 17.3217C18.3354 17.0606 18.235 16.809 18.0536 16.6212L12.4202 10.9878L18.0536 5.35431C18.235 5.16649 18.3354 4.91494 18.3331 4.65384C18.3309 4.39273 18.2261 4.14297 18.0415 3.95833C17.8569 3.77369 17.6071 3.66896 17.346 3.66669C17.0849 3.66443 16.8333 3.7648 16.6455 3.9462L11.0121 9.57964L5.37863 3.9462C5.18997 3.76928 4.93988 3.67271 4.68128 3.67691C4.42268 3.68111 4.17585 3.78575 3.99304 3.9687C3.81022 4.15165 3.70575 4.39854 3.70173 4.65715C3.69772 4.91575 3.79447 5.16577 3.97152 5.35431L9.60396 10.9878L3.97052 16.6212C3.87541 16.7131 3.79954 16.8229 3.74735 16.9444C3.69516 17.0659 3.66769 17.1966 3.66654 17.3288C3.66539 17.4611 3.69059 17.5922 3.74066 17.7146C3.79073 17.837 3.86468 17.9481 3.95818 18.0416C4.05168 18.1352 4.16287 18.2091 4.28525 18.2592C4.40764 18.3092 4.53877 18.3344 4.67099 18.3333C4.80322 18.3321 4.93389 18.3047 5.05539 18.2525C5.17688 18.2003 5.28677 18.1244 5.37863 18.0293L11.0121 12.3959Z\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (isLoading) {\r\n        <div class=\"v-spinner\">\r\n            <mat-spinner diameter=\"50\" strokeWidth=\"4\"></mat-spinner>\r\n        </div>\r\n        }\r\n        <div class=\"v-content\" id=\"deposit-id\">\r\n            @if (!isLoading && !isShow) {\r\n            <div class=\"visa-card-message\">\r\n                {{ 'visaCardErrorMessage' | transloco }} <br> {{ 'visaCardErrorMessage2' | transloco }}\r\n            </div>\r\n            }\r\n            <div class=\"vodds-checkout-deposit\">\r\n                @if(!isLoading && isShow) {\r\n                <div class=\"vodds-checkout-expiration\">\r\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path\r\n                            d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\"\r\n                            fill=\"#8C8C8C\" />\r\n                        <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#8C8C8C\" stroke-width=\"1.5\" />\r\n                        <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\" transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82843 1.06067)\"\r\n                            stroke=\"#8C8C8C\" stroke-width=\"1.5\" />\r\n                    </svg>\r\n                    <span>{{ 'visaCardTimeout' | transloco }} <span class=\"countdown-timer\">{{displayTimer}}</span></span>\r\n                </div>\r\n                }\r\n                <div id=\"rapyd-checkout\" class=\"iframe-wrapper\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n} @else {\r\n    <div id=\"visa-card\">\r\n        <div class=\"top\">\r\n            <h2>{{ 'payment_form_title' | transloco }}</h2>\r\n            <svg class=\"clsbtn my-account\" (click)=\"closeDialog()\" width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                    d=\"M9.89214 0L5.5 4.39214L1.10786 0L0 1.10786L4.39214 5.5L0 9.89214L1.10786 11L5.5 6.60786L9.89214 11L11 9.89214L6.60786 5.5L11 1.10786L9.89214 0Z\"\r\n                    fill=\"white\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"flex-center\">\r\n            <vodds-loader [showAjaxLoader]=\"isLoading\"></vodds-loader>\r\n        </div>\r\n        @if (!isLoading && !isShow) {\r\n        <div class=\"visa-card-message\">\r\n            {{ 'visaCardErrorMessage' | transloco }} <br> {{ 'visaCardErrorMessage2' | transloco }}\r\n        </div>\r\n        }\r\n        <div class=\"visa-card-form\" [style]=\"{display: isShow ? 'flex' : 'none'}\">\r\n            <div class=\"timer\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                        d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\"\r\n                        fill=\"#B5B5B5\" />\r\n                    <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#B5B5B5\" stroke-width=\"1.5\" />\r\n                    <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\"\r\n                        transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82861 1.06067)\" stroke=\"#B5B5B5\"\r\n                        stroke-width=\"1.5\" />\r\n                </svg>\r\n                <span class=\"label\">&nbsp;{{ 'visaCardTimeout' | transloco }}&nbsp;</span> <span class=\"display-time\">\r\n                    {{displayTimer}}</span>\r\n            </div>\r\n            <div id=\"rapyd-checkout\"></div>\r\n        </div>\r\n    </div>\r\n}", styles: [".flex-center{display:flex;justify-content:center;align-items:center}#visa-card{height:auto;width:500px;top:0;left:710px;z-index:101}.top{width:100%;align-items:center;margin-bottom:8px;border-radius:0;background:#dd453c;position:relative;color:#fff;display:flex;justify-content:space-between}.top h2{padding-left:15px;text-align:left;font-size:16px;font-weight:800}.top svg{position:unset;padding-right:15px;width:18px;height:18px}.visa-card-form{display:flex;flex-direction:column;align-items:center;min-height:500px!important;width:100%}.visa-card-form .timer{display:flex;align-items:center}#rapyd-checkout{min-height:550px;max-height:550px;overflow-y:auto;scrollbar-width:none}#rapyd-checkout::-webkit-scrollbar{display:none}.ui-widget.ui-widget-content.vodds-visa-card-dialog{padding:0;border:none;border-radius:10px}.vodds-visa-card-dialog .ui-dialog-content{display:flex;align-items:center;flex-direction:column;padding:0;margin:0}.vodds-visa-card-dialog .ui-dialog-content .top{width:100%;display:flex;align-items:center;padding:6px 18px;margin-bottom:8px;border-radius:8px}.vodds-visa-card-dialog .ui-dialog-content .top h2{text-align:left;font-size:16px;font-weight:800}#trading-platform.dark .vodds-visa-card-dialog .label,.vodds-visa-card-dialog .label{color:#80807f!important}#trading-platform.dark .vodds-visa-card-dialog span{color:#000!important}#trading-platform.dark .vodds-visa-card-dialog{background:#fff!important}.mobile .header{font-weight:800;font-size:18px;line-height:18px;margin:0 7px;border-bottom:1px solid #96A2B3;padding:20px 0 15px}.mobile .header .dark{color:#fff}.mobile .header .light{color:#2c3644}.mobile .header svg{fill:#2c3644}.mobile .v-flex-center-between{display:flex;justify-content:space-between;align-items:center;padding-left:10px;padding-right:10px}.mobile .vodds-checkout-expiration{display:flex;justify-content:center;align-items:center;font-weight:700;gap:5px;color:#8c8c8c;font-size:12px}.mobile .countdown-timer{color:#000}.mobile .iframe-wrapper{position:relative;overflow:hidden}.mobile .v-dialog .v-content{padding:0!important;max-height:74vh}.mobile .vodds-checkout-deposit{overflow:auto;margin-top:10px}.mobile .v-dialog{background:#f3f2f9;color:#28303a}.mobile .v-spinner{display:flex;justify-content:center;width:100%}.mobile ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:#dd443c!important}.mobile .visa-card-message{margin:28px 20px;color:#dd453c;font-size:14px}.mobile .v-dialog .v-content{background-color:#f1f1f1}\n"], dependencies: [{ kind: "component", type: VoddsLoaderComponent, selector: "vodds-loader", inputs: ["message", "showAjaxLoader"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RapydComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'v-rapyd', standalone: true, imports: [NgStyle, VoddsLoaderComponent, MatDialogModule, MatProgressSpinnerModule, TranslocoModule], template: "@if(isMobile()) {\r\n    <div class=\"v-dialog mobile\">\r\n        <div class=\"v-flex-center-between header text-black-cs\">\r\n            <div class=\"v-flex-center-none\">\r\n                <span class=\"ml-8\">{{ 'mobile_payment_form_title' | transloco }}</span>\r\n            </div>\r\n            <div class=\"v-flex-center-between mr-8\">\r\n                <div (click)=\"closeDialog()\">\r\n                    <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                            d=\"M11.0121 12.3959L16.6455 18.0293C16.8333 18.2107 17.0849 18.3111 17.346 18.3088C17.6071 18.3065 17.8569 18.2018 18.0415 18.0172C18.2261 17.8325 18.3309 17.5828 18.3331 17.3217C18.3354 17.0606 18.235 16.809 18.0536 16.6212L12.4202 10.9878L18.0536 5.35431C18.235 5.16649 18.3354 4.91494 18.3331 4.65384C18.3309 4.39273 18.2261 4.14297 18.0415 3.95833C17.8569 3.77369 17.6071 3.66896 17.346 3.66669C17.0849 3.66443 16.8333 3.7648 16.6455 3.9462L11.0121 9.57964L5.37863 3.9462C5.18997 3.76928 4.93988 3.67271 4.68128 3.67691C4.42268 3.68111 4.17585 3.78575 3.99304 3.9687C3.81022 4.15165 3.70575 4.39854 3.70173 4.65715C3.69772 4.91575 3.79447 5.16577 3.97152 5.35431L9.60396 10.9878L3.97052 16.6212C3.87541 16.7131 3.79954 16.8229 3.74735 16.9444C3.69516 17.0659 3.66769 17.1966 3.66654 17.3288C3.66539 17.4611 3.69059 17.5922 3.74066 17.7146C3.79073 17.837 3.86468 17.9481 3.95818 18.0416C4.05168 18.1352 4.16287 18.2091 4.28525 18.2592C4.40764 18.3092 4.53877 18.3344 4.67099 18.3333C4.80322 18.3321 4.93389 18.3047 5.05539 18.2525C5.17688 18.2003 5.28677 18.1244 5.37863 18.0293L11.0121 12.3959Z\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (isLoading) {\r\n        <div class=\"v-spinner\">\r\n            <mat-spinner diameter=\"50\" strokeWidth=\"4\"></mat-spinner>\r\n        </div>\r\n        }\r\n        <div class=\"v-content\" id=\"deposit-id\">\r\n            @if (!isLoading && !isShow) {\r\n            <div class=\"visa-card-message\">\r\n                {{ 'visaCardErrorMessage' | transloco }} <br> {{ 'visaCardErrorMessage2' | transloco }}\r\n            </div>\r\n            }\r\n            <div class=\"vodds-checkout-deposit\">\r\n                @if(!isLoading && isShow) {\r\n                <div class=\"vodds-checkout-expiration\">\r\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path\r\n                            d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\"\r\n                            fill=\"#8C8C8C\" />\r\n                        <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#8C8C8C\" stroke-width=\"1.5\" />\r\n                        <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\" transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82843 1.06067)\"\r\n                            stroke=\"#8C8C8C\" stroke-width=\"1.5\" />\r\n                    </svg>\r\n                    <span>{{ 'visaCardTimeout' | transloco }} <span class=\"countdown-timer\">{{displayTimer}}</span></span>\r\n                </div>\r\n                }\r\n                <div id=\"rapyd-checkout\" class=\"iframe-wrapper\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n} @else {\r\n    <div id=\"visa-card\">\r\n        <div class=\"top\">\r\n            <h2>{{ 'payment_form_title' | transloco }}</h2>\r\n            <svg class=\"clsbtn my-account\" (click)=\"closeDialog()\" width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                    d=\"M9.89214 0L5.5 4.39214L1.10786 0L0 1.10786L4.39214 5.5L0 9.89214L1.10786 11L5.5 6.60786L9.89214 11L11 9.89214L6.60786 5.5L11 1.10786L9.89214 0Z\"\r\n                    fill=\"white\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"flex-center\">\r\n            <vodds-loader [showAjaxLoader]=\"isLoading\"></vodds-loader>\r\n        </div>\r\n        @if (!isLoading && !isShow) {\r\n        <div class=\"visa-card-message\">\r\n            {{ 'visaCardErrorMessage' | transloco }} <br> {{ 'visaCardErrorMessage2' | transloco }}\r\n        </div>\r\n        }\r\n        <div class=\"visa-card-form\" [style]=\"{display: isShow ? 'flex' : 'none'}\">\r\n            <div class=\"timer\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                        d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\"\r\n                        fill=\"#B5B5B5\" />\r\n                    <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#B5B5B5\" stroke-width=\"1.5\" />\r\n                    <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\"\r\n                        transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82861 1.06067)\" stroke=\"#B5B5B5\"\r\n                        stroke-width=\"1.5\" />\r\n                </svg>\r\n                <span class=\"label\">&nbsp;{{ 'visaCardTimeout' | transloco }}&nbsp;</span> <span class=\"display-time\">\r\n                    {{displayTimer}}</span>\r\n            </div>\r\n            <div id=\"rapyd-checkout\"></div>\r\n        </div>\r\n    </div>\r\n}", styles: [".flex-center{display:flex;justify-content:center;align-items:center}#visa-card{height:auto;width:500px;top:0;left:710px;z-index:101}.top{width:100%;align-items:center;margin-bottom:8px;border-radius:0;background:#dd453c;position:relative;color:#fff;display:flex;justify-content:space-between}.top h2{padding-left:15px;text-align:left;font-size:16px;font-weight:800}.top svg{position:unset;padding-right:15px;width:18px;height:18px}.visa-card-form{display:flex;flex-direction:column;align-items:center;min-height:500px!important;width:100%}.visa-card-form .timer{display:flex;align-items:center}#rapyd-checkout{min-height:550px;max-height:550px;overflow-y:auto;scrollbar-width:none}#rapyd-checkout::-webkit-scrollbar{display:none}.ui-widget.ui-widget-content.vodds-visa-card-dialog{padding:0;border:none;border-radius:10px}.vodds-visa-card-dialog .ui-dialog-content{display:flex;align-items:center;flex-direction:column;padding:0;margin:0}.vodds-visa-card-dialog .ui-dialog-content .top{width:100%;display:flex;align-items:center;padding:6px 18px;margin-bottom:8px;border-radius:8px}.vodds-visa-card-dialog .ui-dialog-content .top h2{text-align:left;font-size:16px;font-weight:800}#trading-platform.dark .vodds-visa-card-dialog .label,.vodds-visa-card-dialog .label{color:#80807f!important}#trading-platform.dark .vodds-visa-card-dialog span{color:#000!important}#trading-platform.dark .vodds-visa-card-dialog{background:#fff!important}.mobile .header{font-weight:800;font-size:18px;line-height:18px;margin:0 7px;border-bottom:1px solid #96A2B3;padding:20px 0 15px}.mobile .header .dark{color:#fff}.mobile .header .light{color:#2c3644}.mobile .header svg{fill:#2c3644}.mobile .v-flex-center-between{display:flex;justify-content:space-between;align-items:center;padding-left:10px;padding-right:10px}.mobile .vodds-checkout-expiration{display:flex;justify-content:center;align-items:center;font-weight:700;gap:5px;color:#8c8c8c;font-size:12px}.mobile .countdown-timer{color:#000}.mobile .iframe-wrapper{position:relative;overflow:hidden}.mobile .v-dialog .v-content{padding:0!important;max-height:74vh}.mobile .vodds-checkout-deposit{overflow:auto;margin-top:10px}.mobile .v-dialog{background:#f3f2f9;color:#28303a}.mobile .v-spinner{display:flex;justify-content:center;width:100%}.mobile ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:#dd443c!important}.mobile .visa-card-message{margin:28px 20px;color:#dd453c;font-size:14px}.mobile .v-dialog .v-content{background-color:#f1f1f1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2.TranslocoService }], propDecorators: { checkout: [{
+                type: Input
+            }] } });
+
+class Payment {
+    constructor(dialog) {
+        this.dialog = dialog;
         this.cache = new Map();
         this.timer = new Timer(500); // 0.5s
         this.iframeMessageService = inject(IframeMessageService);
+        this.rapydScriptLoaded = false;
         /**
          * Listen OPEN_PAYMENT_FORM message to open 3th party page
          */
-        this.iframeMessageService.messages().subscribe(message => {
+        this.iframeMessageService.onMessages().subscribe(message => {
             console.log('Received from iframe:', message);
             if (IframeMessageType.OPEN_PAYMENT_FORM == message.type) {
                 const checkout = Object.assign(new Checkout(), message.payload);
-                if (!checkout || this.cache.get(checkout.requestId))
+                if (!checkout || this.cache.get(checkout.requestId)) {
                     return;
-                if (this.cache.size > 0) {
-                    this.cache.clear();
-                    //TODO clear the current popup
                 }
+                // if (this.cache.size > 0) {
+                //     this.cache.clear();
+                //     //TODO clear the current popup
+                // }
                 switch (checkout.paymentType) {
                     case PaymentType.JETON:
                     case PaymentType.ECOPAYZ:
@@ -309,8 +672,11 @@ class PaymentService {
                     default:
                 }
             }
-            if (IframeMessageType.PAYMENT_CALLBACK == message.type) {
-                this.result = Object.assign(new Checkout(), message.payload);
+            if (IframeMessageType.THIRD_PARTY_CALLBACK == message.type) {
+                let checkout = new Checkout();
+                checkout.setCallback(message.payload);
+                this.timer.stopWatcher();
+                this.sendMessageToIframe(checkout);
             }
         });
     }
@@ -318,46 +684,86 @@ class PaymentService {
      * Open 3th party page on the popup windown or new tab
      */
     openWindow(checkout) {
+        this.cache.set(checkout.requestId, checkout);
         console.log("Open windown: ", this.cache);
         const width = 470;
         const height = 550;
-        // var left = Math.max(0, (screen.width - width) / 2) + (screen.availLeft | 0),
-        // top = Math.max(0, (screen.height - height) / 2) + (screen.availTop | 0);
+        var left = Math.max(0, (screen.width - width) / 2), top = Math.max(0, (screen.height - height) / 2);
         // var popup = window.open(url, "VOdds", 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',status=0,location=0,menubar=0,toolbar=0');
-        const popup = window.open(checkout.url, 'VOdds', 'width=' + width + ',height=' + height + ',status=0,location=0,menubar=0,toolbar=0');
+        let popup = window.open(checkout.url, "VOdds", 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',status=0,location=0,menubar=0,toolbar=0');
         if (!popup) {
             checkout.errorMessage = 'Your setting prevents popups. Please change your setting to allow it.';
             this.sendMessageToIframe(checkout);
+            this.cache.delete(checkout.requestId);
             return;
         }
         checkout.popup = popup;
-        window.addEventListener("beforeunload", () => {
-            window.opener?.postMessage({ type: "vodds-popup-closing12" }, window.location.origin);
-        });
-        popup.postMessage({ type: "vodds-popup-closing" }, window.location.origin);
-        this.cache.set(checkout.requestId, checkout);
         popup.focus();
-        this.onThirdPartyPopupClose(checkout);
+        this.onThirdPartyMessage(checkout);
+        this.timer.oberserableTimer(checkout, () => this.sendMessageToIframe(checkout));
+    }
+    async openVisaCheckout(checkout) {
+        try {
+            await this.load();
+            this.dialog.open(RapydComponent, {
+                data: {
+                    checkoutUrl: checkout.url,
+                    expiration: checkout.expiration
+                },
+                width: '500px',
+                maxWidth: '90vw'
+            }).afterClosed().subscribe(checkoutFailureMessage => {
+                checkout.errorMessage = checkoutFailureMessage;
+                this.sendMessageToIframe(checkout);
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    load() {
+        if (this.rapydScriptLoaded) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = 'https://sandboxcheckouttoolkit.rapyd.net';
+            script.async = true;
+            script.onload = () => {
+                this.rapydScriptLoaded = true;
+                resolve();
+            };
+            script.onerror = () => {
+                reject(new Error('Failed to load Rapyd Checkout Toolkit'));
+            };
+            document.head.appendChild(script);
+        });
     }
     /**
      * Listen message or action from 3th party on the popup
+     * Skip for RAPYD - It will process when the dialog close
      */
-    onThirdPartyPopupClose(checkout) {
-        this.iframeMessageService.thirdPartyMessages().subscribe(event => {
+    onThirdPartyMessage(checkout) {
+        this.iframeMessageService.onThirdPartyMessages().subscribe(event => {
             if (this.iframeMessageService.isValidDomain(checkout.paymentType, event.origin)) {
+                switch (checkout.paymentType) {
+                    case PaymentType.NA:
+                        break;
+                    case PaymentType.JETON:
+                    case PaymentType.ECOPAYZ:
+                }
                 console.log('Received from 3th party:', event.data);
                 checkout.setCallback(event.data);
                 this.timer.stopWatcher();
                 this.sendMessageToIframe(checkout);
             }
         });
-        this.timer.oberserableTimer(checkout, () => this.sendMessageToIframe(checkout));
     }
     /**
      * send the message from the parent to the iframe
      */
     sendMessageToIframe(checkout) {
-        console.log("send message to iframe");
+        console.log("send message to iframe: ", checkout);
         if (this.iframe == undefined)
             return;
         let message = {
@@ -365,23 +771,17 @@ class PaymentService {
             payload: checkout
         };
         this.iframeMessageService.sendMessageToIframe(this.iframe, message);
-    }
-    // removePaymentIframe() {
-    //     //TODO
-    //     this.iframe = undefined;
-    // }
-    async openVisaCheckout(checkout) {
+        this.cache.delete(checkout.requestId);
     }
 }
 
 /*
  * Public API Surface of epp-lib
  */
-// Models
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ApiRoute, BaseForm, CallbackMessage, Checkout, Domain, IParam, IframeMessageService, IframeMessageType, PaymentService, PaymentType, VoddsHttpService };
+export { Checkout, CommonUtil, CountDownTime, Domain, EppLibLoader, EppLibTranslationService, EventEmitterService, IParam, IframeMessageService, IframeMessageType, Payment, PaymentType, RapydComponent, Timer, TranslocoPipe, VoddsHttpService, VoddsLoaderComponent, provideEppLibTranslations };
 //# sourceMappingURL=epp-lib.mjs.map