@tonder.io/ionic-full-sdk 0.0.9 → 0.0.11-beta

package/src/helpers/skyflow.ts

@@ -1,172 +1,172 @@
-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,
-    },
-  };
-
-  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],
-  });
-
-  if("setError" in cardHolderNameElement) {
-    cardHolderNameElement.setError('Inválido')
-  }
-
-  // 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,
-  });
-
-  if("setError" in cardNumberElement) {
-    cardNumberElement.setError('Inválido')
-  }
-
-  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,
-  });
-  
-  if("setError" in cvvElement) {
-    cvvElement.setError('Inválido')
-  }
-
-  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,
-  });
-
-  if("setError" in expiryMonthElement) {
-    expiryMonthElement.setError('Inválido')
-  }
-
-  const expiryYearElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
-    table: "cards",
-    column: "expiration_year",
-    ...collectStylesOptions,
-    label: "",
-    placeholder: "AA",
-    type: Skyflow.ElementType.EXPIRATION_YEAR,
-  });
-
-  if("setError" in expiryYearElement) {
-    expiryYearElement.setError('Inválido')
-  }
-
-  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,
+    },
+  };
+
+  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],
+  });
+
+  if("setError" in cardHolderNameElement) {
+    cardHolderNameElement.setError('Inválido')
+  }
+
+  // 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,
+  });
+
+  if("setError" in cardNumberElement) {
+    cardNumberElement.setError('Inválido')
+  }
+
+  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,
+  });
+  
+  if("setError" in cvvElement) {
+    cvvElement.setError('Inválido')
+  }
+
+  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,
+  });
+
+  if("setError" in expiryMonthElement) {
+    expiryMonthElement.setError('Inválido')
+  }
+
+  const expiryYearElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
+    table: "cards",
+    column: "expiration_year",
+    ...collectStylesOptions,
+    label: "",
+    placeholder: "AA",
+    type: Skyflow.ElementType.EXPIRATION_YEAR,
+  });
+
+  if("setError" in expiryYearElement) {
+    expiryYearElement.setError('Inválido')
+  }
+
+  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}`);
+}

package/src/helpers/styles.ts

@@ -1,60 +1,60 @@
-export const defaultStyles: any = {
-  inputStyles: {
-    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",
-      },
-    },
-    cardIcon: {
-      position: 'absolute',
-      left: '6px',
-      bottom: 'calc(50% - 12px)',
-    },
-    complete: {
-      color: "#4caf50",
-    },
-    empty: {},
-    focus: {},
-    invalid: {
-      border: "1px solid #f44336",
-    },
-    global: {
-      '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
-    }
-  },
-  labelStyles: {
-    base: {
-      fontSize: '12px',
-      fontWeight: '500',
-      fontFamily: '"Inter", sans-serif'
-    },
-  },
-  errorTextStyles: {
-    base: {
-      fontSize: '12px',
-      fontWeight: '500',
-      color: "#f44336",
-      fontFamily: '"Inter", sans-serif'
-    },
-  },
-  labels: {
-    cardLabel: '',
-    cvvLabel: '',
-    expiryMonthLabel: '',
-    expiryYearLabel: ''
-  },
-  placeholders: {
-    cardPlaceholder: '',
-    cvvPlaceholder: '',
-    expiryMonthPlaceholder: '',
-    expiryYearPlaceholder: ''
-  }
-}
+export const defaultStyles: any = {
+  inputStyles: {
+    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",
+      },
+    },
+    cardIcon: {
+      position: 'absolute',
+      left: '6px',
+      bottom: 'calc(50% - 12px)',
+    },
+    complete: {
+      color: "#4caf50",
+    },
+    empty: {},
+    focus: {},
+    invalid: {
+      border: "1px solid #f44336",
+    },
+    global: {
+      '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
+    }
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      fontFamily: '"Inter", sans-serif'
+    },
+  },
+  errorTextStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      color: "#f44336",
+      fontFamily: '"Inter", sans-serif'
+    },
+  },
+  labels: {
+    cardLabel: '',
+    cvvLabel: '',
+    expiryMonthLabel: '',
+    expiryYearLabel: ''
+  },
+  placeholders: {
+    cardPlaceholder: '',
+    cvvPlaceholder: '',
+    expiryMonthPlaceholder: '',
+    expiryYearPlaceholder: ''
+  }
+}