@tonder.io/ionic-full-sdk 0.0.48-beta.DEV-1610.2 → 0.0.49-beta.DEV-1630.1

package/src/helpers/skyflow.ts

@@ -4,8 +4,8 @@ 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 { getVaultToken } from "@tonder.io/ionic-lite-sdk/dist/data/skyflowApi";
+import {IEvents, IInputEvents, InCollectorContainer} from "../types/commons";
+import get from "lodash.get";
 
 export async function initSkyflow(
   vaultId: string,
@@ -15,6 +15,7 @@ export async function initSkyflow(
   customStyles: any = {},
   collectorIds: CollectorIds,
   apiKey: string,
+  events?: IEvents
 ): Promise<InCollectorContainer> {
   const skyflow = await initializeSkyflow(
     vaultId,
@@ -74,6 +75,8 @@ export async function initSkyflow(
 
   if ("on" in cardHolderNameElement) {
     cardHolderNameElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+      executeEvent( "onChange", state, events?.cardHolderEvents)
+
       let element = document.getElementById("errorCardHolderIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
@@ -82,6 +85,8 @@ export async function initSkyflow(
     });
 
     cardHolderNameElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      executeEvent( "onBlur", state, events?.cardHolderEvents)
+
       let tonderContainer = document.getElementById(collectorIds.holderName);
 
       let element = document.getElementById("errorCardHolderIdTonder");
@@ -100,6 +105,11 @@ export async function initSkyflow(
         tonderContainer?.appendChild(errorLabel);
       }
     });
+
+    cardHolderNameElement.on(Skyflow.EventName.FOCUS, (state: any) => {
+      executeEvent( "onFocus", state, events?.cardHolderEvents)
+    });
+
   }
 
   // Create collect elements.
@@ -120,6 +130,7 @@ export async function initSkyflow(
 
   if ("on" in cardNumberElement) {
     cardNumberElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+      executeEvent( "onChange", state, events?.cardNumberEvents)
       let element = document.getElementById("errorCardNumberIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
@@ -128,6 +139,8 @@ export async function initSkyflow(
     });
 
     cardNumberElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      executeEvent( "onBlur", state, events?.cardNumberEvents)
+
       let tonderContainer = document.getElementById(collectorIds.cardNumber);
 
       let element = document.getElementById("errorCardNumberIdTonder");
@@ -146,6 +159,11 @@ export async function initSkyflow(
         tonderContainer?.appendChild(errorLabel);
       }
     });
+
+    cardNumberElement.on(Skyflow.EventName.FOCUS, (state: any) => {
+      executeEvent( "onFocus", state, events?.cardNumberEvents)
+    });
+
   }
 
   const cvvElement: CollectElement | RevealElement | ComposableElement =
@@ -161,6 +179,7 @@ export async function initSkyflow(
 
   if ("on" in cvvElement) {
     cvvElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+      executeEvent( "onChange", state, events?.cvvEvents)
       let element = document.getElementById("errorCvvIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
@@ -169,6 +188,7 @@ export async function initSkyflow(
     });
 
     cvvElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      executeEvent( "onBlur", state, events?.cvvEvents)
       let tonderContainer = document.getElementById(collectorIds.cvv);
 
       let element = document.getElementById("errorCvvIdTonder");
@@ -187,6 +207,10 @@ export async function initSkyflow(
         tonderContainer?.appendChild(errorLabel);
       }
     });
+
+    cvvElement.on(Skyflow.EventName.FOCUS, (state: any) => {
+      executeEvent( "onFocus", state, events?.cvvEvents)
+    });
   }
 
   const expiryMonthElement: CollectElement | RevealElement | ComposableElement = collectContainer.create({
@@ -201,6 +225,7 @@ export async function initSkyflow(
 
   if ("on" in expiryMonthElement) {
     expiryMonthElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+      executeEvent( "onChange", state, events?.monthEvents)
       let element = document.getElementById("errorExpiryMonthIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
@@ -209,6 +234,7 @@ export async function initSkyflow(
     });
 
     expiryMonthElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      executeEvent( "onBlur", state, events?.monthEvents)
       let tonderContainer = document.getElementById(
         collectorIds.expirationMonth,
       );
@@ -229,8 +255,11 @@ export async function initSkyflow(
         tonderContainer?.appendChild(errorLabel);
       }
     });
+
+    expiryMonthElement.on(Skyflow.EventName.FOCUS, (state: any) => {
+      executeEvent( "onFocus", state, events?.monthEvents)
+    });
   }
-  console.log("collectStylesOptions ====", collectStylesOptions)
 
   const expiryYearElement: CollectElement | RevealElement | ComposableElement = collectContainer.create({
       table: "cards",
@@ -244,6 +273,7 @@ export async function initSkyflow(
 
   if ("on" in expiryYearElement) {
     expiryYearElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+      executeEvent( "onChange", state, events?.yearEvents)
       let element = document.getElementById("errorExpiryYearIdTonder");
 
       if (element && state.isValid && !state.isEmpty) {
@@ -252,6 +282,7 @@ export async function initSkyflow(
     });
 
     expiryYearElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      executeEvent( "onBlur", state, events?.yearEvents)
       let tonderContainer = document.getElementById(
         collectorIds.expirationYear,
       );
@@ -272,6 +303,10 @@ export async function initSkyflow(
         tonderContainer?.appendChild(errorLabel);
       }
     });
+
+    expiryYearElement.on(Skyflow.EventName.FOCUS, (state: any) => {
+      executeEvent( "onFocus", state, events?.yearEvents)
+    });
   }
 
   const elementsConfig = {
@@ -320,6 +355,7 @@ export async function initUpdateSkyflow(
   customStyles: any = {},
   collectorIds: CollectorIds,
   apiKey: string,
+  events?: IEvents
 ) {
   const skyflow = await initializeSkyflow(
     vaultId,
@@ -365,6 +401,7 @@ export async function initUpdateSkyflow(
 
   if ("on" in cvvElement) {
     cvvElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+      executeEvent( "onChange", state, events?.cvvEvents)
       let element = document.getElementById(`errorCvvIdTonder${skyflowId}`);
 
       if (element && state.isValid && !state.isEmpty) {
@@ -373,6 +410,7 @@ export async function initUpdateSkyflow(
     });
 
     cvvElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      executeEvent( "onBlur", state, events?.cvvEvents)
       let tonderContainer = document.getElementById(
         collectorIds.cvv + skyflowId,
       );
@@ -393,6 +431,10 @@ export async function initUpdateSkyflow(
         tonderContainer?.appendChild(errorLabel);
       }
     });
+
+    cvvElement.on(Skyflow.EventName.FOCUS, (state: any) => {
+      executeEvent( "onFocus", state, events?.cvvEvents)
+    });
   }
 
   const elementsConfig = {
@@ -473,3 +515,16 @@ const regexMatchRule = {
     error: "El campo es requerido",
   },
 };
+const executeEvent = (eventName: "onChange" | "onBlur" | "onFocus", data: any, events?: IInputEvents, ) => {
+  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/helpers/utils.ts

@@ -61,7 +61,6 @@ export function showError(
     msgErrorText!.innerHTML = "";
     msgErrorText!.innerHTML = message;
     msgErrorDiv!.style.display = "flex";
-    console.log("msgErrorDiv", msgErrorDiv)
     setTimeout(function () {
       msgErrorDiv!.style.display = "none";
       msgErrorText!.innerHTML = "";

package/src/types/commons.ts

@@ -94,11 +94,31 @@ export interface IInlineCustomizationOptions extends CustomizationOptions {
         autoSave?: boolean;
     }
 }
+export interface IEventSecureInput {
+    elementType: string;
+    isEmpty: boolean;
+    isFocused: boolean;
+    isValid: boolean;
+}
+export interface IInputEvents {
+    onChange?: (event: IEventSecureInput) => void;
+    onFocus?: (event: IEventSecureInput) => void;
+    onBlur?: (event: IEventSecureInput) => void;
+}
 
+export interface ICardFormEvents {
+    cardHolderEvents?: IInputEvents;
+    cardNumberEvents?: IInputEvents;
+    cvvEvents?: IInputEvents;
+    monthEvents?: IInputEvents;
+    yearEvents?: IInputEvents;
+}
+export interface IEvents extends ICardFormEvents {}
 export interface IInlineCheckoutOptions extends IInlineCheckoutBaseOptions{
     styles?: Record<string, string>;
     renderPaymentButton?: boolean;
     customization?: IInlineCustomizationOptions;
+    events?: IEvents;
     renderSaveCardButton?: boolean,
     containerId?: string,
     collectorIds?: CollectorIds,

package/src/classes/3dsHandler.ts

@@ -1,326 +0,0 @@
-
-import {CustomizationOptions} from "@tonder.io/ionic-lite-sdk/dist/types/commons";
-
-type ThreeDSHandlerContructor = {
-  payload?: any,
-  apiKey?: string,
-  baseUrl?: string,
-  customization?: CustomizationOptions,
-  tdsIframeId?: string, 
-  callBack?: (params: any) => any
-}
-
-export class ThreeDSHandler {
-
-  baseUrl?: string
-  apiKey?: string
-  payload?: any
-  localStorageKey: string = "verify_transaction_status_url"
-  customization?: CustomizationOptions
-  callBack?: (params: any) => any
-  tdsIframeId?: string
-
-  constructor({
-    payload = null,
-    apiKey,
-    baseUrl,
-    customization,
-    tdsIframeId,
-    callBack
-  }: ThreeDSHandlerContructor) {
-    this.baseUrl = baseUrl,
-    this.apiKey = apiKey,
-    this.payload = payload
-    this.customization = customization
-    this.tdsIframeId = tdsIframeId
-    this.callBack = callBack;
-  }
-
-  setStorageItem (data: any) {
-    return localStorage.setItem(this.localStorageKey, JSON.stringify(data))
-  }
-
-  getStorageItem () {
-    return localStorage.getItem(this.localStorageKey)
-  }
-
-  removeStorageItem () {
-    return localStorage.removeItem(this.localStorageKey)
-  }
-
-  saveVerifyTransactionUrl() {
-    const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url
-    if (url) {
-      this.saveUrlWithExpiration(url)
-    } else {
-      const url = this.payload?.next_action?.iframe_resources?.verify_transaction_status_url
-      if (url) {
-        this.saveUrlWithExpiration(url)
-      } else {
-        console.log('No verify_transaction_status_url found');
-      }
-    }
-  }
-
-  saveUrlWithExpiration(url: string) {
-    try {
-      const now = new Date()
-      const item = {
-        url: url,
-        // Expires after 20 minutes
-        expires: now.getTime() + 20 * 60 * 1000
-      }
-      this.setStorageItem(item)
-    } catch (error) {
-     console.log('error: ', error)
-    }
-  }
-
-  getUrlWithExpiration() {
-    const status = this.getStorageItem();
-    if(status) {
-      const item = JSON.parse(status)
-        if (!item) return
-        const now = new Date()
-        if (now.getTime() > item.expires) {
-          this.removeVerifyTransactionUrl()
-          return null
-        } else {
-          return item.url
-        }
-    } else {
-      return null
-    }
-  }
-
-  removeVerifyTransactionUrl() {
-    return this.removeStorageItem()
-  }
-
-  getVerifyTransactionUrl() {
-    return this.getStorageItem()
-  }
-
-  loadIframe() {
-    const iframe = this.payload?.next_action?.iframe_resources?.iframe
-
-    if (iframe) {
-      return new Promise((resolve, reject) => {
-        const iframe = this.payload?.next_action?.iframe_resources?.iframe
-
-        if (iframe) {
-          this.saveVerifyTransactionUrl()
-          const container = document.createElement('div')
-          container.innerHTML = iframe
-          document.body.appendChild(container)
-
-          // Create and append the script tag manually
-          const script = document.createElement('script')
-          script.textContent = 'document.getElementById("tdsMmethodForm").submit();'
-          container.appendChild(script)
-
-          // Resolve the promise when the iframe is loaded
-          const iframeElement = document.getElementById('tdsMmethodTgtFrame')
-          if(iframeElement) {
-            iframeElement.onload = () => resolve(true)
-          } else {
-            console.log('No redirection found');
-            reject(false)
-          }
-        } else {
-          console.log('No redirection found');
-          reject(false)
-        }
-      })
-    }
-  }
-
-  getRedirectUrl() {
-    return this.payload?.next_action?.redirect_to_url?.url
-  }
-
-  redirectToChallenge() {
-    const url = this.getRedirectUrl()
-    if (url) {
-      this.saveVerifyTransactionUrl()
-      if(this.customization) {
-        if(this.customization?.redirectOnComplete) {
-          window.location = url;
-        } else {
-          const iframe = document.querySelector(`#${this.tdsIframeId}`)
-          if(iframe) {
-  
-            iframe.setAttribute("src", url);
-            iframe.setAttribute("style", "display: block");
-            
-            const self = this;
-  
-            const listenerHandler = async (event: any) => {
-  
-              const checkStatus = (result: any) => result?.transaction_status !== "Pending";
-  
-              const executeAction = () => {
-                if(iframe) {
-                  iframe.setAttribute("style", "display: none");
-                }
-                if(self.callBack) self.callBack(self.payload);
-                iframe.removeEventListener("load", listenerHandler);
-              }
-  
-              const chainPromises = async (promise: Promise<any>) => {
-                const result = await new Promise((resolve, reject) => resolve(promise))
-                if(result) {
-                  if(checkStatus(result)) {
-                    return executeAction()
-                  } else {
-                    const timer = setTimeout(async () => {
-                      clearTimeout(timer);
-                      await chainPromises(self.requestTransactionStatus());
-                    }, 5000)
-                  }
-                }
-              }
-  
-              await chainPromises(self.requestTransactionStatus())
-            }
-  
-            iframe.addEventListener("load", listenerHandler)
-  
-          } else {
-            console.log('No iframe found');
-          }
-        }
-      } else {
-        window.location = url;
-      }
-    } else {
-      console.log('No redirection found');
-    }
-  }
-  
-  // Returns an object
-  // https://example.com/?name=John&age=30&city=NewYork
-  // { name: "John", age: "30", city: "NewYork" }
-  getURLParameters() {
-    const parameters: any = {};
-    const urlParams: any = new URLSearchParams(window.location.search);
-
-    for (const [key, value] of urlParams) {
-      parameters[key] = value;
-    }
-
-    return parameters;
-  }
-
-  handleSuccessTransaction(response: any) {
-    this.removeVerifyTransactionUrl();
-    console.log('Transacción autorizada.');
-    return response;
-  }
-
-  handleDeclinedTransaction(response: any) {
-    this.removeVerifyTransactionUrl();
-    return response;
-  }
-
-  // TODO: the method below needs to be tested with a real 3DS challenge
-  // since we couldn't get a test card that works with this feature
-  async handle3dsChallenge(response_json: any) {
-    // Create the form element:
-    const form = document.createElement('form');
-    form.name = 'frm';
-    form.method = 'POST';
-    form.action = response_json.redirect_post_url;
-
-    // Add hidden fields:
-    const creqInput = document.createElement('input');
-    creqInput.type = 'hidden';
-    creqInput.name = response_json.creq;
-    creqInput.value = response_json.creq;
-    form.appendChild(creqInput);
-
-    const termUrlInput = document.createElement('input');
-    termUrlInput.type = 'hidden';
-    termUrlInput.name =  response_json.term_url;
-    termUrlInput.value = response_json.TermUrl;
-    form.appendChild(termUrlInput);
-
-    // Append the form to the body:
-    document.body.appendChild(form);
-    form.submit();
-
-    await this.verifyTransactionStatus();
-  }
-
-  // TODO: This method could be removed
-  async handleTransactionResponse(response: any) {
-    const response_json = await response.json();
-    if (response_json.status === "Pending"  && response_json.redirect_post_url) {
-      return await this.handle3dsChallenge(response_json);
-    } else if (["Success", "Authorized"].includes(response_json.status)) {
-      return this.handleSuccessTransaction(response_json);
-    } else {
-      this.handleDeclinedTransaction(response);
-      return response_json
-    }
-  }
-
-  async requestTransactionStatus() {
-
-    const verifyUrl = this.getUrlWithExpiration();
-    console.log('verifyUrls: ', verifyUrl);
-    const url = verifyUrl.startsWith("https://") ? verifyUrl : `${this.baseUrl}${verifyUrl}`;
-    const response = await fetch(url, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Token ${this.apiKey}`,
-      },
-      // body: JSON.stringify(data),
-    });
-
-    if (response.status !== 200) {
-      console.error('La verificación de la transacción falló.');
-      return null;
-    } else {
-      const response_json = await response.json();
-      return response_json;
-    }
-
-  }
-
-  async verifyTransactionStatus() {
-    const verifyUrl = this.getUrlWithExpiration();
-
-    if (verifyUrl) {
-      const url = verifyUrl.startsWith("https://") ? verifyUrl : `${this.baseUrl}${verifyUrl}`;
-      try {
-        const response = await fetch(url, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Token ${this.apiKey}`,
-          },
-          // body: JSON.stringify(data),
-        });
-
-        if (response.status !== 200) {
-          console.error('La verificación de la transacción falló.');
-          this.removeVerifyTransactionUrl();
-          return response
-        }
-
-        return await this.handleTransactionResponse(response);
-      } catch (error) {
-        console.error('Error al verificar la transacción:', error);
-        this.removeVerifyTransactionUrl();
-      }
-    } else {
-      console.log('No verify_transaction_status_url found');
-    }
-  }
-
-  setPayload = (payload: any) => {
-    this.payload = payload
-  }
-}