@tonder.io/ionic-full-sdk 0.0.46-beta.9 → 0.0.47-beta.DEV1406.a897fdd

package/src/helpers/skyflow.ts

@@ -1,12 +1,11 @@
 import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
 import { defaultStyles } from "./styles";
-import Skyflow from 'skyflow-js'
+import Skyflow from "skyflow-js";
 import { CollectorIds } from "./template";
 import RevealElement from "skyflow-js/types/core/external/reveal/reveal-element";
 import ComposableElement from "skyflow-js/types/core/external/collect/compose-collect-element";
-import {InCollectorContainer} from "../types/commons";
-
-
+import { InCollectorContainer } from "../types/commons";
+import { getVaultToken } from "@tonder.io/ionic-lite-sdk/dist/data/skyflowApi";
 
 export async function initSkyflow(
   vaultId: string,
@@ -15,80 +14,67 @@ export async function initSkyflow(
   signal: AbortSignal,
   customStyles: any = {},
   collectorIds: CollectorIds,
-  apiKey: string
-): Promise <InCollectorContainer> {
-  const skyflow = await Skyflow.init({
-    vaultID: vaultId,
-    vaultURL: vaultUrl,
-    getBearerToken: async () => {
-      // Pass the signal to the fetch call
-      const response = await fetch(`${baseUrl}/api/v1/vault-token/`, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Token ${apiKey}`,
-        },
-        signal: signal,
-      });
-
-      if (response.ok) {
-        const responseBody = await response.json();
-        return responseBody.token;
-      } else {
-        throw new Error('Failed to retrieve bearer token');
-      }
-    },
-    options: {
-      logLevel: Skyflow.LogLevel.ERROR,
-      env: Skyflow.Env.DEV,
-    },
-  });
+  apiKey: string,
+): Promise<InCollectorContainer> {
+  const skyflow = await initializeSkyflow(
+    vaultId,
+    vaultUrl,
+    baseUrl,
+    apiKey,
+    signal,
+  );
 
   // Create collect Container.
-  const collectContainer = await skyflow.container(
-    Skyflow.ContainerType.COLLECT
-  );
+  const collectContainer = skyflow.container(Skyflow.ContainerType.COLLECT);
 
   // Custom styles for collect elements.
-  var collectStylesOptions: any = Object.keys(customStyles).length === 0 ? defaultStyles : customStyles
+  var collectStylesOptions: any =
+    Object.keys(customStyles).length === 0
+      ? defaultStyles
+      : {
+          ...customStyles,
+          labels: {
+            nameLabel: customStyles?.labels?.nameLabel && customStyles?.labels?.nameLabel !== "" ? customStyles?.labels?.nameLabel: defaultStyles.labels.nameLabel,
+            cardLabel: customStyles?.labels?.cardLabel && customStyles?.labels?.cardLabel !== "" ? customStyles?.labels?.cardLabel: defaultStyles.labels.cardLabel,
+            cvvLabel: customStyles?.labels?.cvvLabel && customStyles?.labels?.cvvLabel !== "" ? customStyles?.labels?.cvvLabel: defaultStyles.labels.cvvLabel,
+            expiryDateLabel: customStyles?.labels?.expiryDateLabel && customStyles?.labels?.expiryDateLabel !== "" ? customStyles?.labels?.expiryDateLabel: defaultStyles.labels.expiryDateLabel,
+          },
+          placeholders: {
+            namePlaceholder: customStyles?.placeholders?.namePlaceholder && customStyles?.placeholders?.namePlaceholder !== "" ? customStyles?.placeholders?.namePlaceholder: defaultStyles.placeholders.namePlaceholder,
+            cardPlaceholder: customStyles?.placeholders?.cardPlaceholder && customStyles?.placeholders?.cardPlaceholder !== "" ? customStyles?.placeholders?.cardPlaceholder: defaultStyles.placeholders.cardPlaceholder,
+            cvvPlaceholder: customStyles?.placeholders?.cvvPlaceholder && customStyles?.placeholders?.cvvPlaceholder !== "" ? customStyles?.placeholders?.cvvPlaceholder: defaultStyles.placeholders.cvvPlaceholder,
+            expiryMonthPlaceholder: customStyles?.placeholders?.expiryMonthPlaceholder && customStyles?.placeholders?.expiryMonthPlaceholder !== "" ? customStyles?.placeholders?.expiryMonthPlaceholder: defaultStyles.placeholders.expiryMonthPlaceholder,
+            expiryYearPlaceholder: customStyles?.placeholders?.expiryYearPlaceholder && customStyles?.placeholders?.expiryYearPlaceholder !== "" ? customStyles?.placeholders?.expiryYearPlaceholder: defaultStyles.placeholders.expiryYearPlaceholder,
+          },
+        };
 
   const stylesForCardNumber = { ...collectStylesOptions.inputStyles.base };
-  stylesForCardNumber.textIndent = '44px';
+  stylesForCardNumber.textIndent = "44px";
 
   const lengthMatchRule = {
     type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
     params: {
       max: 70,
-      error: "El campo nombre del titular debe tener menos de 70 caracteres"
+      error: "El campo nombre del titular debe tener menos de 70 caracteres",
     },
   };
 
-  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 cardHolderNameElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
+  const cardHolderNameElement:
+    | CollectElement
+    | RevealElement
+    | ComposableElement = collectContainer.create({
     table: "cards",
     column: "cardholder_name",
     ...collectStylesOptions,
-    label: "Titular de la tarjeta",
-    placeholder: "Nombre como aparece en la tarjeta",
+    label: collectStylesOptions?.labels?.nameLabel,
+    placeholder: collectStylesOptions?.placeholders?.namePlaceholder,
     type: Skyflow.ElementType.CARDHOLDER_NAME,
     validations: [lengthMatchRule, regexMatchRule],
   });
 
-  if("on" in cardHolderNameElement) {
-
+  if ("on" in cardHolderNameElement) {
     cardHolderNameElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      let element = document.getElementById(
-          "errorCardHolderIdTonder",
-      );
+      let element = document.getElementById("errorCardHolderIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
         element.remove();
@@ -96,13 +82,9 @@ export async function initSkyflow(
     });
 
     cardHolderNameElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      let tonderContainer = document.getElementById(
-        collectorIds.holderName
-      );
+      let tonderContainer = document.getElementById(collectorIds.holderName);
 
-      let element = document.getElementById(
-        "errorCardHolderIdTonder",
-      );
+      let element = document.getElementById("errorCardHolderIdTonder");
 
       if (element) {
         element.remove();
@@ -112,51 +94,43 @@ export async function initSkyflow(
         let errorLabel = document.createElement("div");
         errorLabel.classList.add("error-custom-inputs-tonder");
         errorLabel.id = "errorCardHolderIdTonder";
-        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo titular de la tarjeta es inválido";
+        errorLabel.textContent = state.isEmpty
+          ? "El campo es requerido"
+          : "El campo titular de la tarjeta es inválido";
         tonderContainer?.appendChild(errorLabel);
       }
-
     });
-
   }
 
   // Create collect elements.
-  const cardNumberElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
-    table: "cards",
-    column: "card_number",
-    ...collectStylesOptions,
-    inputStyles: {
-      ...collectStylesOptions.inputStyles,
-      base: stylesForCardNumber
-    },
-    label: "Número de tarjeta",
-    placeholder: "1234 1234 1234 1234",
-    type: Skyflow.ElementType.CARD_NUMBER,
-    validations: [regexMatchRule],
-  });
-
-  if("on" in cardNumberElement) {
+  const cardNumberElement: CollectElement | RevealElement | ComposableElement =
+    collectContainer.create({
+      table: "cards",
+      column: "card_number",
+      ...collectStylesOptions,
+      inputStyles: {
+        ...collectStylesOptions.inputStyles,
+        base: stylesForCardNumber,
+      },
+      label: collectStylesOptions.labels?.cardLabel,
+      placeholder: collectStylesOptions.placeholders?.cardPlaceholder,
+      type: Skyflow.ElementType.CARD_NUMBER,
+      validations: [regexMatchRule],
+    });
 
+  if ("on" in cardNumberElement) {
     cardNumberElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      let element = document.getElementById(
-          "errorCardNumberIdTonder",
-      );
+      let element = document.getElementById("errorCardNumberIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
         element.remove();
       }
-
     });
 
     cardNumberElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      let tonderContainer = document.getElementById(
-        collectorIds.cardNumber
-      );
+      let tonderContainer = document.getElementById(collectorIds.cardNumber);
 
-      let element = document.getElementById(
-        "errorCardNumberIdTonder",
-      );
+      let element = document.getElementById("errorCardNumberIdTonder");
 
       if (element) {
         element.remove();
@@ -166,31 +140,28 @@ export async function initSkyflow(
         let errorLabel = document.createElement("div");
         errorLabel.classList.add("error-custom-inputs-tonder");
         errorLabel.id = "errorCardNumberIdTonder";
-        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo número de tarjeta es inválido";
+        errorLabel.textContent = state.isEmpty
+          ? "El campo es requerido"
+          : "El campo número de tarjeta es inválido";
         tonderContainer?.appendChild(errorLabel);
       }
-
     });
-
   }
 
-  const cvvElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
-    table: "cards",
-    column: "cvv",
-    ...collectStylesOptions,
-    label: "CVC/CVV",
-    placeholder: "3-4 dígitos",
-    type: Skyflow.ElementType.CVV,
-    validations: [regexMatchRule],
-  });
-
-  if("on" in cvvElement) {
+  const cvvElement: CollectElement | RevealElement | ComposableElement =
+    collectContainer.create({
+      table: "cards",
+      column: "cvv",
+      ...collectStylesOptions,
+      label: collectStylesOptions.labels?.cvvLabel,
+      placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
+      type: Skyflow.ElementType.CVV,
+      validations: [regexMatchRule],
+    });
 
+  if ("on" in cvvElement) {
     cvvElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      let element = document.getElementById(
-          "errorCvvIdTonder",
-      );
+      let element = document.getElementById("errorCvvIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
         element.remove();
@@ -198,13 +169,9 @@ export async function initSkyflow(
     });
 
     cvvElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      let tonderContainer = document.getElementById(
-        collectorIds.cvv
-      );
+      let tonderContainer = document.getElementById(collectorIds.cvv);
 
-      let element = document.getElementById(
-        "errorCvvIdTonder",
-      );
+      let element = document.getElementById("errorCvvIdTonder");
 
       if (element) {
         element.remove();
@@ -214,31 +181,27 @@ export async function initSkyflow(
         let errorLabel = document.createElement("div");
         errorLabel.classList.add("error-custom-inputs-tonder");
         errorLabel.id = "errorCvvIdTonder";
-        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo es inválido";
+        errorLabel.textContent = state.isEmpty
+          ? "El campo es requerido"
+          : "El campo es inválido";
         tonderContainer?.appendChild(errorLabel);
       }
-
     });
-
   }
 
-  const expiryMonthElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
-    table: "cards",
-    column: "expiration_month",
-    ...collectStylesOptions,
-    label: "Fecha de expiración",
-    placeholder: "MM",
-    type: Skyflow.ElementType.EXPIRATION_MONTH,
-    validations: [regexMatchRule],
-  });
-
-  if("on" in expiryMonthElement) {
+  const expiryMonthElement: CollectElement | RevealElement | ComposableElement = collectContainer.create({
+      table: "cards",
+      column: "expiration_month",
+      ...collectStylesOptions,
+    label: collectStylesOptions.labels?.expiryDateLabel,
+    placeholder: collectStylesOptions.placeholders?.expiryMonthPlaceholder,
+      type: Skyflow.ElementType.EXPIRATION_MONTH,
+      validations: [regexMatchRule],
+    });
 
+  if ("on" in expiryMonthElement) {
     expiryMonthElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      let element = document.getElementById(
-          "errorExpiryMonthIdTonder",
-      );
+      let element = document.getElementById("errorExpiryMonthIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
         element.remove();
@@ -247,12 +210,10 @@ export async function initSkyflow(
 
     expiryMonthElement.on(Skyflow.EventName.BLUR, (state: any) => {
       let tonderContainer = document.getElementById(
-        collectorIds.expirationMonth
+        collectorIds.expirationMonth,
       );
 
-      let element = document.getElementById(
-        "errorExpiryMonthIdTonder",
-      );
+      let element = document.getElementById("errorExpiryMonthIdTonder");
 
       if (element) {
         element.remove();
@@ -262,31 +223,28 @@ export async function initSkyflow(
         let errorLabel = document.createElement("div");
         errorLabel.classList.add("error-custom-inputs-tonder");
         errorLabel.id = "errorExpiryMonthIdTonder";
-        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo es inválido";
+        errorLabel.textContent = state.isEmpty
+          ? "El campo es requerido"
+          : "El campo es inválido";
         tonderContainer?.appendChild(errorLabel);
       }
-
     });
-
   }
+  console.log("collectStylesOptions ====", collectStylesOptions)
+
+  const expiryYearElement: CollectElement | RevealElement | ComposableElement = collectContainer.create({
+      table: "cards",
+      column: "expiration_year",
+      ...collectStylesOptions,
+      label: "",
+      placeholder: collectStylesOptions.placeholders?.expiryYearPlaceholder,
+      type: Skyflow.ElementType.EXPIRATION_YEAR,
+      validations: [regexMatchRule],
+    });
 
-  const expiryYearElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
-    table: "cards",
-    column: "expiration_year",
-    ...collectStylesOptions,
-    label: "",
-    placeholder: "AA",
-    type: Skyflow.ElementType.EXPIRATION_YEAR,
-    validations: [regexMatchRule],
-  });
-
-  if("on" in expiryYearElement) {
-
+  if ("on" in expiryYearElement) {
     expiryYearElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      let element = document.getElementById(
-          "errorExpiryYearIdTonder",
-      );
+      let element = document.getElementById("errorExpiryYearIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
         element.remove();
@@ -295,12 +253,10 @@ export async function initSkyflow(
 
     expiryYearElement.on(Skyflow.EventName.BLUR, (state: any) => {
       let tonderContainer = document.getElementById(
-        collectorIds.expirationYear
+        collectorIds.expirationYear,
       );
 
-      let element = document.getElementById(
-        "errorExpiryYearIdTonder",
-      );
+      let element = document.getElementById("errorExpiryYearIdTonder");
 
       if (element) {
         element.remove();
@@ -310,44 +266,209 @@ export async function initSkyflow(
         let errorLabel = document.createElement("div");
         errorLabel.classList.add("error-custom-inputs-tonder");
         errorLabel.id = "errorExpiryYearIdTonder";
-        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo es inválido";
+        errorLabel.textContent = state.isEmpty
+          ? "El campo es requerido"
+          : "El campo es inválido";
         tonderContainer?.appendChild(errorLabel);
       }
+    });
+  }
+
+  const elementsConfig = {
+    cardNumber: {
+      element: cardNumberElement,
+      container: `#${collectorIds.cardNumber}`,
+    },
+    cvv: {
+      element: cvvElement,
+      container: `#${collectorIds.cvv}`,
+    },
+    expiryMonth: {
+      element: expiryMonthElement,
+      container: `#${collectorIds.expirationMonth}`,
+    },
+    expiryYear: {
+      element: expiryYearElement,
+      container: `#${collectorIds.expirationYear}`,
+    },
+    cardHolderName: {
+      element: cardHolderNameElement,
+      container: `#${collectorIds.holderName}`,
+    },
+  };
+
+  await mountElements(elementsConfig);
+
+  return {
+    container: collectContainer,
+    elements: {
+      cardHolderNameElement,
+      cardNumberElement,
+      cvvElement,
+      expiryMonthElement,
+      expiryYearElement,
+    },
+  };
+}
+
+export async function initUpdateSkyflow(
+  skyflowId: string,
+  vaultId: string,
+  vaultUrl: string,
+  baseUrl: string,
+  signal: AbortSignal,
+  customStyles: any = {},
+  collectorIds: CollectorIds,
+  apiKey: string,
+) {
+  const skyflow = await initializeSkyflow(
+    vaultId,
+    vaultUrl,
+    baseUrl,
+    apiKey,
+    signal,
+  );
+
+  var collectStylesOptions: any =
+      Object.keys(customStyles).length === 0
+          ? defaultStyles
+          : {
+            ...customStyles,
+            labels: {
+              nameLabel: customStyles?.labels?.nameLabel && customStyles?.labels?.nameLabel !== "" ? customStyles?.labels?.nameLabel: defaultStyles.labels.nameLabel,
+              cardLabel: customStyles?.labels?.cardLabel && customStyles?.labels?.cardLabel !== "" ? customStyles?.labels?.cardLabel: defaultStyles.labels.cardLabel,
+              cvvLabel: customStyles?.labels?.cvvLabel && customStyles?.labels?.cvvLabel !== "" ? customStyles?.labels?.cvvLabel: defaultStyles.labels.cvvLabel,
+              expiryDateLabel: customStyles?.labels?.expiryDateLabel && customStyles?.labels?.expiryDateLabel !== "" ? customStyles?.labels?.expiryDateLabel: defaultStyles.labels.expiryDateLabel,
+            },
+            placeholders: {
+              namePlaceholder: customStyles?.placeholders?.namePlaceholder && customStyles?.placeholders?.namePlaceholder !== "" ? customStyles?.placeholders?.namePlaceholder: defaultStyles.placeholders.namePlaceholder,
+              cardPlaceholder: customStyles?.placeholders?.cardPlaceholder && customStyles?.placeholders?.cardPlaceholder !== "" ? customStyles?.placeholders?.cardPlaceholder: defaultStyles.placeholders.cardPlaceholder,
+              cvvPlaceholder: customStyles?.placeholders?.cvvPlaceholder && customStyles?.placeholders?.cvvPlaceholder !== "" ? customStyles?.placeholders?.cvvPlaceholder: defaultStyles.placeholders.cvvPlaceholder,
+              expiryMonthPlaceholder: customStyles?.placeholders?.expiryMonthPlaceholder && customStyles?.placeholders?.expiryMonthPlaceholder !== "" ? customStyles?.placeholders?.expiryMonthPlaceholder: defaultStyles.placeholders.expiryMonthPlaceholder,
+              expiryYearPlaceholder: customStyles?.placeholders?.expiryYearPlaceholder && customStyles?.placeholders?.expiryYearPlaceholder !== "" ? customStyles?.placeholders?.expiryYearPlaceholder: defaultStyles.placeholders.expiryYearPlaceholder,
+            },
+          };
 
+  // Create collect Container.
+  const collectContainer = skyflow.container(Skyflow.ContainerType.COLLECT);
+  const cvvElement: CollectElement | RevealElement | ComposableElement =
+    collectContainer.create({
+      table: "cards",
+      column: "cvv",
+      ...collectStylesOptions,
+      label: collectStylesOptions.labels?.cvvLabel,
+      placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
+      type: Skyflow.ElementType.CVV,
+      validations: [regexMatchRule],
+      skyflowID: skyflowId,
     });
 
-  }
+  if ("on" in cvvElement) {
+    cvvElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+      let element = document.getElementById(`errorCvvIdTonder${skyflowId}`);
 
-  await mountElements(
-    { id: collectorIds.cardNumber, element: cardNumberElement },
-    { id: collectorIds.cvv, element: cvvElement },
-    { id: collectorIds.expirationMonth, element: expiryMonthElement },
-    { id: collectorIds.expirationYear, element: expiryYearElement },
-    { id: collectorIds.holderName, element: cardHolderNameElement }
-  )
-
-  return { 
-    container: collectContainer, 
-    elements: { 
-      cardHolderNameElement, 
-      cardNumberElement, 
-      cvvElement, 
-      expiryMonthElement, 
-      expiryYearElement 
-    } 
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+    });
+
+    cvvElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.cvv + skyflowId,
+      );
+      let element = document.getElementById("errorCvvIdTonder" + skyflowId);
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        let errorLabel = document.createElement("div");
+        errorLabel.classList.add("error-custom-inputs-tonder");
+        errorLabel.id = "errorCvvIdTonder" + skyflowId;
+        errorLabel.textContent = state.isEmpty
+          ? "El campo es requerido"
+          : "El campo es inválido";
+        tonderContainer?.appendChild(errorLabel);
+      }
+    });
   }
+
+  const elementsConfig = {
+    cvv: {
+      element: cvvElement,
+      container: `#${collectorIds.cvv}${skyflowId}`,
+    },
+  };
+  await mountElements(elementsConfig);
+
+  return {
+    container: collectContainer,
+    elements: {
+      cvvElement,
+    },
+  };
 }
 
-async function mountElements(
-  cardNumberElement: any,
-  cvvElement: any,
-  expiryMonthElement: any,
-  expiryYearElement: any,
-  cardHolderNameElement: any,
+async function initializeSkyflow(
+  vaultId: string,
+  vaultUrl: string,
+  baseUrl: string,
+  apiKey: string,
+  signal: AbortSignal,
 ) {
-  cardNumberElement.element.mount(`#${cardNumberElement.id}`);
-  cvvElement.element.mount(`#${cvvElement.id}`);
-  expiryMonthElement.element.mount(`#${expiryMonthElement.id}`);
-  expiryYearElement.element.mount(`#${expiryYearElement.id}`);
-  cardHolderNameElement.element.mount(`#${cardHolderNameElement.id}`);
+  return Skyflow.init({
+    vaultID: vaultId,
+    vaultURL: vaultUrl,
+    getBearerToken: async () => {
+      // Pass the signal to the fetch call
+      const response = await fetch(`${baseUrl}/api/v1/vault-token/`, {
+        method: "GET",
+        headers: {
+          Authorization: `Token ${apiKey}`,
+        },
+        signal: signal,
+      });
+
+      if (response.ok) {
+        const responseBody = await response.json();
+        return responseBody.token;
+      } else {
+        throw new Error("Failed to retrieve bearer token");
+      }
+    },
+    options: {
+      logLevel: Skyflow.LogLevel.ERROR,
+      env: Skyflow.Env.DEV,
+    },
+  });
+}
+
+async function mountElements(elementsConfig: {
+  [k: string]: { element: any; container: string };
+}) {
+  if (typeof elementsConfig !== "object" || elementsConfig === null) {
+    throw new Error("Invalid configuration object");
+  }
+
+  for (const [elementKey, { element, container }] of Object.entries(
+    elementsConfig,
+  )) {
+    if (element && container) {
+      element.mount(container);
+    } else {
+      console.warn(
+        `Skipping mount for '${elementKey}' due to missing element or container.`,
+      );
+    }
+  }
 }
+
+const regexEmpty = RegExp("^(?!s*$).+");
+const regexMatchRule = {
+  type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
+  params: {
+    regex: regexEmpty,
+    error: "El campo es requerido",
+  },
+};

package/src/helpers/styles.ts

@@ -46,15 +46,16 @@ export const defaultStyles: any = {
     },
   },
   labels: {
-    cardLabel: '',
-    cvvLabel: '',
-    expiryMonthLabel: '',
-    expiryYearLabel: ''
+    nameLabel: 'Titular de la tarjeta',
+    cardLabel: 'Número de tarjeta',
+    cvvLabel: 'CVC/CVV',
+    expiryDateLabel: 'Fecha de expiración',
   },
   placeholders: {
-    cardPlaceholder: '',
-    cvvPlaceholder: '',
-    expiryMonthPlaceholder: '',
-    expiryYearPlaceholder: ''
+    namePlaceholder: 'Nombre como aparece en la tarjeta',
+    cardPlaceholder: '1234 1234 1234 1234',
+    cvvPlaceholder: '3-4 dígitos',
+    expiryMonthPlaceholder: 'MM',
+    expiryYearPlaceholder: 'AA'
   }
 }