@tonder.io/ionic-lite-sdk 0.0.57 → 0.0.58-beta.DEV-1845.1

package/src/classes/liteCheckout.ts

@@ -1,40 +1,59 @@
-import { fetchBusiness } from "../data/businessApi";
-
-declare const MP_DEVICE_SESSION_ID: string | undefined;
-import { ErrorResponse } from "./errorResponse";
+import {fetchBusiness} from "../data/businessApi";
+import {ErrorResponse} from "./errorResponse";
 import {
   buildErrorResponse,
   buildErrorResponseFromCatch,
+  formatPublicErrorResponse,
   getBrowserInfo,
   getBusinessId,
-  formatPublicErrorResponse,
   getCardType,
 } from "../helpers/utils";
-import { getCustomerAPMs } from "../data/api";
-import { BaseInlineCheckout } from "./BaseInlineCheckout";
-import { MESSAGES } from "../shared/constants/messages";
-import { getSkyflowTokens } from "../helpers/skyflow";
-import { startCheckoutRouter } from "../data/checkoutApi";
-import { getOpenpayDeviceSessionID } from "../data/openPayApi";
-import { getPaymentMethodDetails } from "../shared/catalog/paymentMethodsCatalog";
-import {APM, IInlineLiteCheckoutOptions, TonderAPM} from "../types/commons";
-import {ICustomerCardsResponse, ISaveCardRequest, ISaveCardResponse, ISaveCardSkyflowRequest} from "../types/card";
+import {getCustomerAPMs} from "../data/api";
+import {BaseInlineCheckout} from "./BaseInlineCheckout";
+import {MESSAGES} from "../shared/constants/messages";
+import {getSkyflowTokens, initSkyflowInstance, mountSkyflowFields} from "../helpers/skyflow";
+import {startCheckoutRouter} from "../data/checkoutApi";
+import {getOpenpayDeviceSessionID} from "../data/openPayApi";
+import {getPaymentMethodDetails} from "../shared/catalog/paymentMethodsCatalog";
+import {
+  APM, IEvents,
+  IInlineLiteCheckoutOptions,
+  ILiteCustomizationOptions,
+  InCollectorContainer,
+  TonderAPM
+} from "../types/commons";
+import {
+  ICustomerCardsResponse,
+  IMountCardFieldsRequest,
+  ISaveCardRequest,
+  ISaveCardResponse,
+  ISaveCardSkyflowRequest
+} from "../types/card";
 import {IPaymentMethod} from "../types/paymentMethod";
 import {
   CreateOrderResponse,
   CreatePaymentResponse,
   CustomerRegisterResponse,
-  GetBusinessResponse, IErrorResponse, RegisterCustomerCardResponse, StartCheckoutResponse
+  GetBusinessResponse,
+  IErrorResponse,
+  RegisterCustomerCardResponse,
+  StartCheckoutResponse
 } from "../types/responses";
 import {
   CreateOrderRequest,
-  CreatePaymentRequest, RegisterCustomerCardRequest, StartCheckoutFullRequest,
+  CreatePaymentRequest,
+  RegisterCustomerCardRequest,
+  StartCheckoutFullRequest,
   StartCheckoutIdRequest,
   StartCheckoutRequest,
   TokensRequest
 } from "../types/requests";
 import {ICardFields, IStartCheckoutResponse} from "../types/checkout";
 import {ILiteCheckout} from "../types/liteInlineCheckout";
+import CollectorContainer from "skyflow-js/types/core/external/collect/collect-container";
+import Skyflow from "skyflow-js";
+
+declare const MP_DEVICE_SESSION_ID: string | undefined;
 
 declare global {
   interface Window {
@@ -44,9 +63,15 @@ declare global {
 
 export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
   activeAPMs: APM[] = [];
+  private collectContainer: InCollectorContainer | null;
+  private skyflowInstance: Skyflow | null;
+  private readonly events: IEvents
 
-  constructor({ apiKey, mode, returnUrl, callBack, apiKeyTonder, baseUrlTonder, customization, collectorIds }: IInlineLiteCheckoutOptions) {
+  constructor({ apiKey, mode, returnUrl, callBack, apiKeyTonder, baseUrlTonder, customization, collectorIds, events }: IInlineLiteCheckoutOptions) {
     super({ mode, apiKey, returnUrl, callBack, apiKeyTonder, baseUrlTonder, customization, tdsIframeId: collectorIds && 'tdsIframe' in collectorIds ? collectorIds?.tdsIframe : "tdsIframe"});
+    this.collectContainer = null;
+    this.skyflowInstance = null;
+    this.events = events || {}
   }
 
   public async injectCheckout() {
@@ -169,6 +194,16 @@ export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
     }
   }
 
+  public async mountCardFields(event: IMountCardFieldsRequest): Promise<void> {
+    await this.createSkyflowInstance();
+    this.collectContainer = await mountSkyflowFields({
+        skyflowInstance: this.skyflowInstance!,
+        data: event,
+        customization: this.customization,
+        events: this.events,
+    });
+  }
+
   public async getBusiness(): Promise<GetBusinessResponse> {
     try {
       return await fetchBusiness(
@@ -186,6 +221,19 @@ export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
     }
   }
 
+
+  private async createSkyflowInstance() {
+    if(this.skyflowInstance) return this.skyflowInstance
+    await this._fetchMerchantData();
+    const { vault_id, vault_url } = this.merchantData!;
+    this.skyflowInstance = await initSkyflowInstance({
+      vault_id: vault_id,
+      vault_url: vault_url,
+      baseUrl: this.baseUrl,
+      apiKey: this.apiKeyTonder,
+    })
+  }
+
   // TODO: DEPRECATED
   async getOpenpayDeviceSessionID(
     merchant_id: string,
@@ -240,6 +288,8 @@ export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
     let skyflowTokens;
     if (!payment_method || payment_method === "" || payment_method === null) {
       if (typeof card === "string") {
+        const container = this.collectContainer?.container as CollectorContainer;
+        await container.collect()
         skyflowTokens = {
           skyflow_id: card,
         };

package/src/helpers/mercadopago.ts

@@ -3,9 +3,7 @@ export function injectMercadoPagoSecurity() {
     const script = document.createElement("script");
     script.src = "https://www.mercadopago.com/v2/security.js";
     script.setAttribute("view", "");
-    script.onload = () => {
-      console.log("Mercado Pago script loaded successfully.");
-    };
+    script.onload = () => {};
     script.onerror = (error) => {
       console.error("Error loading Mercado Pago script:", error);
     };

package/src/helpers/skyflow.ts

@@ -1,11 +1,35 @@
-import {ErrorResponse} from "../classes/errorResponse";
+import { ErrorResponse } from "../classes/errorResponse";
 import Skyflow from "skyflow-js";
 import CollectContainer from "skyflow-js/types/core/external/collect/collect-container";
-import {buildErrorResponseFromCatch} from "./utils";
+import { buildErrorResponseFromCatch } from "./utils";
 import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
-import {getVaultToken} from "../data/skyflowApi";
-import {TokensSkyflowRequest} from "../types/requests";
+import { getVaultToken } from "../data/skyflowApi";
+import { TokensSkyflowRequest } from "../types/requests";
+import { CardFieldEnum, IMountCardFieldsRequest } from "../types/card";
+import {
+  IEvents,
+  IInputEvents,
+  ILiteCustomizationOptions,
+  StylesBaseVariant,
+} from "../types/commons";
+import {
+  DEFAULT_SKYFLOW_lABELS,
+  DEFAULT_SKYFLOW_PLACEHOLDERS,
+  lengthMatchRule,
+  regexMatchRule,
+} from "../shared/constants/skyflow.contants";
+import {
+  DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+} from "../shared/styles/skyflow.styles";
+import { get } from "lodash";
 
+/**
+ * [DEPRECATION WARNING]
+ * This function should be deprecated in favor of using mountSkyflowFields for security,
+ * to prevent users from creating their own inputs.
+ */
 export async function getSkyflowTokens({
   baseUrl,
   apiKey,
@@ -19,7 +43,7 @@ export async function getSkyflowTokens({
     getBearerToken: async () => await getVaultToken(baseUrl, apiKey),
     options: {
       logLevel: Skyflow.LogLevel.ERROR,
-      env: Skyflow.Env.DEV,
+      env: Skyflow.Env.DEV, // ⚠️ This should be Env.PROD, but currently it cannot be changed because getSkyflowTokens must be deprecated first, since .setValue does not work in PROD.
     },
   });
 
@@ -52,40 +76,289 @@ export async function getSkyflowTokens({
   }
 }
 
-async function getFieldsPromise(data: any, collectContainer: CollectContainer): Promise<Promise<boolean>[]> {
-    const fields = await getFields(data, collectContainer);
-    if (!fields) return [];
+async function getFieldsPromise(
+  data: any,
+  collectContainer: CollectContainer,
+): Promise<Promise<boolean>[]> {
+  const fields = await getFields(data, collectContainer);
+  if (!fields) return [];
 
-return fields.map((field: { element: CollectElement, key: string }) => {
+  //
+  return fields.map((field: { element: CollectElement; key: string }) => {
     return new Promise((resolve) => {
-        const div = document.createElement("div");
-        div.hidden = true;
-        div.id = `id-${field.key}`;
-        document.querySelector(`body`)?.appendChild(div);
-        setTimeout(() => {
-            field.element.mount(`#id-${field.key}`);
-            setInterval(() => {
-                if (field.element.isMounted()) {
-                    const value = data[field.key];
-                    field.element.update({ value: value });
-                    return resolve(field.element.isMounted());
-                }
-            }, 120);
+      const div = document.createElement("div");
+      div.hidden = true;
+      div.id = `id-${field.key}`;
+      document.querySelector(`body`)?.appendChild(div);
+      setTimeout(() => {
+        field.element.mount(`#id-${field.key}`);
+        setInterval(() => {
+          if (field.element.isMounted()) {
+            const value = data[field.key];
+            field.element.setValue(value);
+            return resolve(field.element.isMounted());
+          }
         }, 120);
+      }, 120);
+    });
+  });
+}
+
+async function getFields(
+  data: any,
+  collectContainer: CollectContainer,
+): Promise<{ element: CollectElement; key: string }[]> {
+  return await Promise.all(
+    Object.keys(data).map(async (key) => {
+      const cardHolderNameElement = await collectContainer.create({
+        table: "cards",
+        column: key,
+        type: Skyflow.ElementType.INPUT_FIELD,
+      });
+      return { element: cardHolderNameElement, key: key };
+    }),
+  );
+}
+
+export async function initSkyflowInstance({
+  baseUrl,
+  apiKey,
+  vault_id,
+  vault_url,
+}: TokensSkyflowRequest): Promise<Skyflow> {
+  return Skyflow.init({
+    vaultID: vault_id,
+    vaultURL: vault_url,
+    getBearerToken: async () => await getVaultToken(baseUrl, apiKey),
+    options: {
+      logLevel: Skyflow.LogLevel.ERROR,
+      env: Skyflow.Env.DEV,
+    },
+  });
+}
+
+export async function mountSkyflowFields(event: {
+  skyflowInstance: Skyflow;
+  data: IMountCardFieldsRequest;
+  customization?: ILiteCustomizationOptions;
+  events?: IEvents;
+}): Promise<{ elements: CollectElement[]; container: CollectContainer }> {
+  const { skyflowInstance, data, customization, events } = event;
+  const collectContainer: CollectContainer = skyflowInstance.container(
+    Skyflow.ContainerType.COLLECT,
+  ) as CollectContainer;
+  const elements: { element: CollectElement; containerId: string }[] = [];
+  const typeByField: Record<
+    CardFieldEnum,
+    (typeof Skyflow.ElementType)[keyof typeof Skyflow.ElementType]
+  > = {
+    [CardFieldEnum.CVV]: Skyflow.ElementType.CVV,
+    [CardFieldEnum.CARD_NUMBER]: Skyflow.ElementType.CARD_NUMBER,
+    [CardFieldEnum.EXPIRATION_MONTH]: Skyflow.ElementType.EXPIRATION_MONTH,
+    [CardFieldEnum.EXPIRATION_YEAR]: Skyflow.ElementType.EXPIRATION_YEAR,
+    [CardFieldEnum.CARDHOLDER_NAME]: Skyflow.ElementType.CARDHOLDER_NAME,
+  };
+
+  const validationsByField = {
+    [CardFieldEnum.CVV]: [regexMatchRule],
+    [CardFieldEnum.CARD_NUMBER]: [regexMatchRule],
+    [CardFieldEnum.EXPIRATION_MONTH]: [regexMatchRule],
+    [CardFieldEnum.EXPIRATION_YEAR]: [regexMatchRule],
+    [CardFieldEnum.CARDHOLDER_NAME]: [lengthMatchRule, regexMatchRule],
+  };
+  const customStyles = {
+    errorStyles:
+      customization?.styles?.cardForm?.errorStyles ||
+      DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+    inputStyles:
+      customization?.styles?.cardForm?.inputStyles ||
+      DEFAULT_SKYFLOW_INPUT_STYLES,
+    labelStyles:
+      customization?.styles?.cardForm?.labelStyles ||
+      DEFAULT_SKYFLOW_lABEL_STYLES,
+  };
+  const labels: Record<string, string> = {
+    name: customization?.labels?.name || DEFAULT_SKYFLOW_lABELS.name,
+    card_number:
+      customization?.labels?.card_number || DEFAULT_SKYFLOW_lABELS.card_number,
+    cvv: customization?.labels?.cvv || DEFAULT_SKYFLOW_lABELS.cvv,
+    expiration_date:
+      customization?.labels?.expiry_date ||
+      DEFAULT_SKYFLOW_lABELS.expiration_date,
+    expiration_month:
+      customization?.labels?.expiration_month ||
+      DEFAULT_SKYFLOW_lABELS.expiration_month,
+    expiration_year:
+      customization?.labels?.expiration_year ||
+      DEFAULT_SKYFLOW_lABELS.expiration_year,
+  };
+  const placeholders: Record<string, string> = {
+    name:
+      customization?.placeholders?.name || DEFAULT_SKYFLOW_PLACEHOLDERS.name,
+    card_number:
+      customization?.placeholders?.card_number ||
+      DEFAULT_SKYFLOW_PLACEHOLDERS.card_number,
+    cvv: customization?.placeholders?.cvv || DEFAULT_SKYFLOW_PLACEHOLDERS.cvv,
+    expiration_month:
+      customization?.placeholders?.expiration_month ||
+      DEFAULT_SKYFLOW_PLACEHOLDERS.expiration_month,
+    expiration_year:
+      customization?.placeholders?.expiration_year ||
+      DEFAULT_SKYFLOW_PLACEHOLDERS.expiration_year,
+  };
+  const eventsByField: Record<CardFieldEnum, IInputEvents | undefined> = {
+    [CardFieldEnum.CVV]: events?.cvvEvents,
+    [CardFieldEnum.CARD_NUMBER]: events?.cardNumberEvents,
+    [CardFieldEnum.EXPIRATION_MONTH]: events?.monthEvents,
+    [CardFieldEnum.EXPIRATION_YEAR]: events?.yearEvents,
+    [CardFieldEnum.CARDHOLDER_NAME]: events?.cardHolderEvents,
+  }
+
+  if ("fields" in data && Array.isArray(data.fields)) {
+    if (data.fields.length > 0 && typeof data.fields[0] === "string") {
+      for (const field of data.fields as CardFieldEnum[]) {
+        const element = collectContainer.create({
+          table: "cards",
+          column: field,
+          type: typeByField[field],
+          validations: validationsByField[field],
+          ...customStyles,
+          label: labels[field],
+          placeholder: placeholders[field],
+          ...(data.card_id ? { skyflowID: data.card_id } : {}),
+        });
+        handleSkyflowElementEvents({
+          element,
+          errorStyles: customStyles.errorStyles,
+          fieldMessage: [CardFieldEnum.CVV, CardFieldEnum.EXPIRATION_MONTH, CardFieldEnum.EXPIRATION_YEAR].includes(field) ? "":labels[field],
+          events: eventsByField[field],
+        });
+        const containerId =
+          `#collect_${String(field)}` +
+          (data.card_id ? `_${data.card_id}` : "");
+        element.mount(containerId);
+        elements.push({ element, containerId });
+      }
+    } else {
+      for (const fieldObj of data.fields as {
+        container_id?: string;
+        field: CardFieldEnum;
+      }[]) {
+        const key = fieldObj.field;
+        const element = collectContainer.create({
+          table: "cards",
+          column: key,
+          type: typeByField[key],
+          validations: validationsByField[key],
+          ...customStyles,
+          label: labels[key],
+          placeholder: placeholders[key],
+          ...(data.card_id ? { skyflowID: data.card_id } : {}),
+        });
+        const containerId =
+          fieldObj.container_id ||
+          `#collect_${String(key)}` + (data.card_id ? `_${data.card_id}` : "");
+        element.mount(containerId);
+        elements.push({ element, containerId });
+      }
+    }
+  }
+
+  return {
+    elements: elements.map((e) => e.element),
+    container: collectContainer,
+  };
+}
+
+function handleSkyflowElementEvents(event: {
+  element: CollectElement;
+  fieldMessage?: string;
+  errorStyles?: StylesBaseVariant;
+  requiredMessage?: string;
+  invalidMessage?: string;
+  events?: IInputEvents;
+}) {
+  const {
+    element,
+    fieldMessage = "",
+    errorStyles = {},
+    requiredMessage = "Campo requerido",
+    invalidMessage = "Campo no válido",
+    events
+  } = event;
+  if ("on" in element) {
+    element.on(Skyflow.EventName.CHANGE, (state: any) => {
+      executeEvent({eventName: "onChange", data: state, events});
+      updateErrorLabel({
+        element,
+        errorStyles,
+        color: "transparent",
+      });
+    });
+
+    element.on(Skyflow.EventName.BLUR, (state: any) => {
+      executeEvent({eventName: "onBlur", data: state, events});
+      if (!state.isValid) {
+        const msj_error = state.isEmpty
+          ? requiredMessage
+          : fieldMessage != ""
+            ? `El campo ${fieldMessage} es inválido`
+            : invalidMessage;
+        element.setError(msj_error);
+      }
+      updateErrorLabel({
+        element,
+        errorStyles,
+      });
+    });
+
+    element.on(Skyflow.EventName.FOCUS, (state: any) => {
+      executeEvent({eventName: "onFocus", data: state, events});
+      updateErrorLabel({
+        element,
+        errorStyles,
+        color: "transparent",
+      });
+      element.resetError();
     });
-})
+  }
 }
 
-async function getFields(data: any, collectContainer: CollectContainer): Promise<{ element: CollectElement, key: string }[]> {
-    return await Promise.all(
-        Object.keys(data).map(async (key) => {
-            const cardHolderNameElement = await collectContainer.create({
-                table: "cards",
-                column: key,
-                type: Skyflow.ElementType.INPUT_FIELD,
-            });
-            return { element: cardHolderNameElement, key: key };
-        })
-    )
+function updateErrorLabel(event: {
+  element: CollectElement;
+  errorStyles?: StylesBaseVariant;
+  color?: string;
+}) {
+  const { element, errorStyles = {}, color = "" } = event;
+  if (Object.keys(errorStyles).length > 0) {
+    element.update({
+      errorTextStyles: {
+        ...errorStyles,
+        base: {
+          // @ts-ignore
+          ...(errorStyles.base && { ...errorStyles.base }),
+          ...(color != "" && { color }),
+        },
+      },
+    });
+  }
 }
 
+const executeEvent = (event: {
+  eventName: "onChange" | "onBlur" | "onFocus";
+  data: any;
+  events?: IInputEvents;
+}) => {
+  const { eventName, data, events } = event;
+  if (events && eventName in events) {
+    const eventHandler = events[eventName];
+    if (typeof eventHandler === "function") {
+      eventHandler({
+        elementType: get(data, "elementType", ""),
+        isEmpty: get(data, "isEmpty", ""),
+        isFocused: get(data, "isFocused", ""),
+        isValid: get(data, "isValid", ""),
+      });
+    }
+  }
+};

package/src/shared/constants/skyflow.contants.ts

@@ -0,0 +1,63 @@
+import Skyflow from "skyflow-js";
+
+const lengthMatchRule = {
+    type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
+    params: {
+        max: 70,
+    },
+};
+const regexEmpty = RegExp('^(?!s*$).+');
+
+const regexMatchRule = {
+    type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
+    params: {
+        regex: regexEmpty,
+        error: 'El campo es requerido', // Optional, default error is 'VALIDATION FAILED'.
+    },
+};
+
+
+
+const getErrorField = (
+    event: {
+        elementType?: string;
+        isEmpty?: boolean;
+        isFocused?: boolean;
+        isValid?: boolean;
+        value?: string;
+    },
+    field: string
+) => {
+    if (event.isEmpty) {
+        return 'El campo es requerido';
+    } else if (!event.isValid && !event.isEmpty) {
+        return `El campo ${field} es inválido`;
+    } else {
+        return '';
+    }
+};
+
+const DEFAULT_SKYFLOW_lABELS = {
+    name: 'Titular de la tarjeta',
+    card_number: 'Número de tarjeta',
+    cvv: 'CVC/CVV',
+    expiration_month: 'Mes',
+    expiration_year: 'Año',
+    expiration_date: 'Fecha de expiración',
+};
+
+const DEFAULT_SKYFLOW_PLACEHOLDERS = {
+    name: 'Nombre como aparece en la tarjeta',
+    card_number: '1234 1234 1234 1234',
+    cvv: '3-4 dígitos',
+    expiration_month: 'MM',
+    expiration_year: 'AA',
+};
+
+export {
+    lengthMatchRule,
+    regexMatchRule,
+    getErrorField,
+    DEFAULT_SKYFLOW_lABELS,
+    DEFAULT_SKYFLOW_PLACEHOLDERS,
+};

package/src/shared/styles/skyflow.styles.ts

@@ -0,0 +1,63 @@
+import {CollectInputStylesVariant, CollectLabelStylesVariant} from "../../types/commons";
+import {LabelStyles} from "skyflow-js/types/utils/common";
+
+const DEFAULT_SKYFLOW_INPUT_STYLES: CollectInputStylesVariant = {
+  base: {
+    border: "1px solid #e0e0e0",
+    padding: "10px 7px",
+    borderRadius: "5px",
+    color: "#1d1d1d",
+    marginTop: "2px",
+    backgroundColor: "white",
+    fontFamily: '"Inter", sans-serif',
+    fontSize: "16px",
+    "&::placeholder": {
+      color: "#ccc",
+    },
+  },
+  complete: {
+    color: "#4caf50",
+  },
+  invalid: {
+    border: "1px solid #f44336",
+  },
+  empty: {},
+  focus: {},
+  global: {
+    "@import":
+      'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
+  },
+};
+
+const DEFAULT_SKYFLOW_lABEL_STYLES: LabelStyles = {
+  base: {
+    fontSize: "12px",
+    fontWeight: "500",
+    fontFamily: '"Inter", sans-serif'
+  },
+};
+
+const DEFAULT_SKYFLOW_ERROR_TEXT_STYLES: CollectLabelStylesVariant = {
+  base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      fontFamily: '"Inter", sans-serif',
+      color: "#f44336",
+  },
+}
+
+const SKYFLOW_HIDDEN_ERROR_TEXT_STYLES = {
+  base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      color: "#f44336",
+      fontFamily: '"Inter", sans-serif'
+  },
+};
+
+export {
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+  DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+  SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+};

package/src/types/card.ts

@@ -33,3 +33,15 @@ export interface ISaveCardRequest {
     expiration_year: string;
     cardholder_name: string;
 }
+export enum CardFieldEnum {
+    CARD_NUMBER = 'card_number',
+    CVV = 'cvv',
+    EXPIRATION_MONTH = 'expiration_month',
+    EXPIRATION_YEAR = 'expiration_year',
+    CARDHOLDER_NAME = 'cardholder_name',
+}
+
+export interface IMountCardFieldsRequest {
+    fields: CardFieldEnum[] | { container_id?: string; field: CardFieldEnum}[],
+    card_id?: string;
+}