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

package/dist/types/commons.d.ts

@@ -1,5 +1,12 @@
 import { ICustomer } from "./customer";
 import { IProcessPaymentRequest, IStartCheckoutResponse } from "./checkout";
+import CollectorContainer from "skyflow-js/types/core/external/collect/collect-container";
+import ComposableContainer from "skyflow-js/types/core/external/collect/compose-collect-container";
+import RevealContainer from "skyflow-js/types/core/external/reveal/reveal-container";
+import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
+import ComposableElement from "skyflow-js/types/core/external/collect/compose-collect-element";
+import RevealElement from "skyflow-js/types/core/external/reveal/reveal-element";
+import { LabelStyles } from "skyflow-js/types/utils/common";
 export type Business = {
     business: {
         pk: number;
@@ -112,6 +119,28 @@ export interface IInlineLiteCheckoutOptions extends IInlineCheckoutBaseOptions {
     collectorIds?: {
         tdsIframe?: string;
     };
+    customization?: ILiteCustomizationOptions;
+    events?: IEvents;
+}
+export interface ICardFormEvents {
+    cardHolderEvents?: IInputEvents;
+    cardNumberEvents?: IInputEvents;
+    cvvEvents?: IInputEvents;
+    monthEvents?: IInputEvents;
+    yearEvents?: IInputEvents;
+}
+export interface IInputEvents {
+    onChange?: (event: IEventSecureInput) => void;
+    onFocus?: (event: IEventSecureInput) => void;
+    onBlur?: (event: IEventSecureInput) => void;
+}
+export interface IEventSecureInput {
+    elementType: string;
+    isEmpty: boolean;
+    isFocused: boolean;
+    isValid: boolean;
+}
+export interface IEvents extends ICardFormEvents {
 }
 export interface IApiError {
     code: string;
@@ -128,3 +157,56 @@ export interface IPublicError {
 export type CustomizationOptions = {
     redirectOnComplete?: boolean;
 };
+export interface InCollectorContainer {
+    container: CollectorContainer | ComposableContainer | RevealContainer;
+    elements: (CollectElement | ComposableElement | RevealElement)[];
+}
+export interface ILiteCustomizationOptions extends CustomizationOptions {
+    styles?: IStyles;
+    labels?: IFormLabels;
+    placeholders?: IFormPlaceholder;
+}
+export interface IFormLabels {
+    name?: string;
+    card_number?: string;
+    cvv?: string;
+    expiry_date?: string;
+    expiration_year?: string;
+    expiration_month?: string;
+}
+export interface IFormPlaceholder {
+    name?: string;
+    card_number?: string;
+    cvv?: string;
+    expiration_month?: string;
+    expiration_year?: string;
+}
+export interface IStyles {
+    cardForm?: ILiteCardFormStyles;
+}
+export interface ILiteCardFormStyles extends StylesBaseVariant, IElementStyle {
+}
+export interface StylesBaseVariant {
+    base?: Record<string, any>;
+}
+export interface IElementStyle {
+    inputStyles?: CollectInputStylesVariant;
+    labelStyles?: LabelStyles;
+    errorStyles?: StylesBaseVariant;
+}
+export interface StylesFocusVariant {
+    focus?: Record<string, any>;
+}
+export interface CollectInputStylesVariant extends StylesBaseVariant, StylesFocusVariant {
+    complete?: Record<string, any>;
+    invalid?: Record<string, any>;
+    empty?: Record<string, any>;
+    cardIcon?: Record<string, any>;
+    dropdownIcon?: Record<string, any>;
+    dropdown?: Record<string, any>;
+    dropdownListItem?: Record<string, any>;
+    global: Record<string, any>;
+}
+export interface CollectLabelStylesVariant extends StylesBaseVariant, StylesFocusVariant {
+    requiredAsterisk?: Record<string, any>;
+}

package/dist/types/liteInlineCheckout.d.ts

@@ -158,4 +158,12 @@ export interface ILiteCheckout {
      * during the payment process.
      */
     getOpenpayDeviceSessionID(merchant_id: string, public_key: string, is_sandbox: boolean): Promise<string | ErrorResponse>;
+    /**
+     * Displays and renders card input fields in the checkout.
+     * Uses the provided configuration to show the required fields in the payment form.
+     * @param {import("./card").IMountCardFieldsRequest} event - Configuration for the card fields to render.
+     * @returns {Promise<void>} Resolves when the fields have been successfully rendered.
+     * @public
+     */
+    mountCardFields(event: import("./card").IMountCardFieldsRequest): Promise<void>;
 }

package/dist/types/requests.d.ts

@@ -66,7 +66,7 @@ export type TokensSkyflowRequest = {
     apiKey: string;
     vault_id: string;
     vault_url: string;
-    data: {
+    data?: {
         [key: string]: any;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-lite-sdk",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "description": "Tonder ionic lite SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
   "license": "ISC",
   "dependencies": {
     "lodash.get": "^4.4.2",
-    "skyflow-js": "^1.34.1",
+    "skyflow-js": "2.4.4",
     "ts-node": "^10.9.2"
   },
   "publishConfig": {

package/src/classes/3dsHandler.ts

@@ -239,7 +239,6 @@ export class ThreeDSHandler {
 
   handleSuccessTransaction(response: any) {
     this.removeVerifyTransactionUrl();
-    console.log('Transacción autorizada.');
     return response;
   }
 

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,288 @@ 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} no es vá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", ""),
+      });
+    }
+  }
+};