@tonder.io/ionic-full-sdk 0.0.31-beta → 0.0.32-beta

package/src/helpers/skyflow.ts

@@ -1,358 +1,358 @@
-import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
-import { defaultStyles } from "./styles";
-import Skyflow from 'skyflow-js'
-import { CollectorIds } from "./template";
-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 RevealElement from "skyflow-js/types/core/external/reveal/reveal-element";
-import ComposableElement from "skyflow-js/types/core/external/collect/compose-collect-element";
-
-export type InCollectorContainer = { 
-  container: CollectorContainer | ComposableContainer | RevealContainer, 
-  elements: { [ index: string ]: CollectElement | ComposableElement | RevealElement }
-}
-
-export async function initSkyflow(
-  vaultId: string,
-  vaultUrl: string,
-  baseUrl: string,
-  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,
-    },
-  });
-
-  // Create collect Container.
-  const collectContainer = await skyflow.container(
-    Skyflow.ContainerType.COLLECT
-  );
-
-  // Custom styles for collect elements.
-  var collectStylesOptions: any = Object.keys(customStyles).length === 0 ? defaultStyles : customStyles
-
-  const stylesForCardNumber = { ...collectStylesOptions.inputStyles.base };
-  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"
-    },
-  };
-
-  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({
-    table: "cards",
-    column: "cardholder_name",
-    ...collectStylesOptions,
-    label: "Titular de la tarjeta",
-    placeholder: "Nombre como aparece en la tarjeta",
-    type: Skyflow.ElementType.CARDHOLDER_NAME,
-    validations: [lengthMatchRule, regexMatchRule],
-  });
-
-  if("on" in cardHolderNameElement) {
-
-    cardHolderNameElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      let element = document.getElementById(
-          "errorCardHolderIdTonder",
-      );
-
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-
-    cardHolderNameElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      let tonderContainer = document.getElementById(
-        collectorIds.holderName
-      );
-
-      let element = document.getElementById(
-        "errorCardHolderIdTonder",
-      );
-
-      if (element) {
-        element.remove();
-      }
-
-      if (!state.isValid) {
-        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";
-        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) {
-
-    cardNumberElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      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 element = document.getElementById(
-        "errorCardNumberIdTonder",
-      );
-
-      if (element) {
-        element.remove();
-      }
-
-      if (!state.isValid) {
-        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";
-        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) {
-
-    cvvElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      let element = document.getElementById(
-          "errorCvvIdTonder",
-      );
-
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-
-    cvvElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      let tonderContainer = document.getElementById(
-        collectorIds.cvv
-      );
-
-      let element = document.getElementById(
-        "errorCvvIdTonder",
-      );
-
-      if (element) {
-        element.remove();
-      }
-
-      if (!state.isValid) {
-        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";
-        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) {
-
-    expiryMonthElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      let element = document.getElementById(
-          "errorExpiryMonthIdTonder",
-      );
-
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-
-    expiryMonthElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      let tonderContainer = document.getElementById(
-        collectorIds.expirationMonth
-      );
-
-      let element = document.getElementById(
-        "errorExpiryMonthIdTonder",
-      );
-
-      if (element) {
-        element.remove();
-      }
-
-      if (!state.isValid) {
-        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";
-        tonderContainer?.appendChild(errorLabel);
-      }
-
-    });
-
-  }
-
-  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) {
-
-    expiryYearElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-
-      let element = document.getElementById(
-          "errorExpiryYearIdTonder",
-      );
-
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-
-    expiryYearElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      let tonderContainer = document.getElementById(
-        collectorIds.expirationYear
-      );
-
-      let element = document.getElementById(
-        "errorExpiryYearIdTonder",
-      );
-
-      if (element) {
-        element.remove();
-      }
-
-      if (!state.isValid) {
-        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";
-        tonderContainer?.appendChild(errorLabel);
-      }
-
-    });
-
-  }
-
-  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 
-    } 
-  }
-}
-
-async function mountElements(
-  cardNumberElement: any,
-  cvvElement: any,
-  expiryMonthElement: any,
-  expiryYearElement: any,
-  cardHolderNameElement: any,
-) {
-  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}`);
-}
+import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
+import { defaultStyles } from "./styles";
+import Skyflow from 'skyflow-js'
+import { CollectorIds } from "./template";
+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 RevealElement from "skyflow-js/types/core/external/reveal/reveal-element";
+import ComposableElement from "skyflow-js/types/core/external/collect/compose-collect-element";
+
+export type InCollectorContainer = { 
+  container: CollectorContainer | ComposableContainer | RevealContainer, 
+  elements: { [ index: string ]: CollectElement | ComposableElement | RevealElement }
+}
+
+export async function initSkyflow(
+  vaultId: string,
+  vaultUrl: string,
+  baseUrl: string,
+  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,
+    },
+  });
+
+  // Create collect Container.
+  const collectContainer = await skyflow.container(
+    Skyflow.ContainerType.COLLECT
+  );
+
+  // Custom styles for collect elements.
+  var collectStylesOptions: any = Object.keys(customStyles).length === 0 ? defaultStyles : customStyles
+
+  const stylesForCardNumber = { ...collectStylesOptions.inputStyles.base };
+  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"
+    },
+  };
+
+  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({
+    table: "cards",
+    column: "cardholder_name",
+    ...collectStylesOptions,
+    label: "Titular de la tarjeta",
+    placeholder: "Nombre como aparece en la tarjeta",
+    type: Skyflow.ElementType.CARDHOLDER_NAME,
+    validations: [lengthMatchRule, regexMatchRule],
+  });
+
+  if("on" in cardHolderNameElement) {
+
+    cardHolderNameElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      let element = document.getElementById(
+          "errorCardHolderIdTonder",
+      );
+
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+    });
+
+    cardHolderNameElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.holderName
+      );
+
+      let element = document.getElementById(
+        "errorCardHolderIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        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";
+        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) {
+
+    cardNumberElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      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 element = document.getElementById(
+        "errorCardNumberIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        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";
+        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) {
+
+    cvvElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      let element = document.getElementById(
+          "errorCvvIdTonder",
+      );
+
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+    });
+
+    cvvElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.cvv
+      );
+
+      let element = document.getElementById(
+        "errorCvvIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        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";
+        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) {
+
+    expiryMonthElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      let element = document.getElementById(
+          "errorExpiryMonthIdTonder",
+      );
+
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+    });
+
+    expiryMonthElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.expirationMonth
+      );
+
+      let element = document.getElementById(
+        "errorExpiryMonthIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        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";
+        tonderContainer?.appendChild(errorLabel);
+      }
+
+    });
+
+  }
+
+  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) {
+
+    expiryYearElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      let element = document.getElementById(
+          "errorExpiryYearIdTonder",
+      );
+
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+    });
+
+    expiryYearElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.expirationYear
+      );
+
+      let element = document.getElementById(
+        "errorExpiryYearIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        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";
+        tonderContainer?.appendChild(errorLabel);
+      }
+
+    });
+
+  }
+
+  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 
+    } 
+  }
+}
+
+async function mountElements(
+  cardNumberElement: any,
+  cvvElement: any,
+  expiryMonthElement: any,
+  expiryYearElement: any,
+  cardHolderNameElement: any,
+) {
+  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}`);
+}