@tonder.io/ionic-full-sdk 0.0.21-beta → 0.0.23-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.21-beta",
+  "version": "0.0.23-beta",
   "description": "Tonder ionic full SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.js",

package/src/classes/3dsHandler.ts

@@ -11,6 +11,7 @@ export class ThreeDSHandler {
   apiKey?: string
   payload?: any
   successUrl?: Location | string
+  localStorageKey: string = "verify_transaction_status_url"
 
   constructor({
     payload = null,
@@ -24,6 +25,18 @@ export class ThreeDSHandler {
     this.successUrl = successUrl
   }
 
+  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) {
@@ -46,14 +59,14 @@ export class ThreeDSHandler {
         // Expires after 20 minutes
         expires: now.getTime() + 20 * 60 * 1000
       }
-      localStorage.setItem('verify_transaction_status', JSON.stringify(item))
+      this.setStorageItem(item)
     } catch (error) {
      console.log('error: ', error)
     }
   }
 
   getUrlWithExpiration() {
-    const status = localStorage.getItem("verify_transaction_status");
+    const status = this.getStorageItem();
     if(status) {
       const item = JSON.parse(status)
         if (!item) return
@@ -70,11 +83,11 @@ export class ThreeDSHandler {
   }
 
   removeVerifyTransactionUrl() {
-    localStorage.removeItem("verify_transaction_status_url")
+    return this.removeStorageItem()
   }
 
   getVerifyTransactionUrl() {
-    return localStorage.getItem("verify_transaction_status_url") 
+    return this.getStorageItem() 
   }
 
   loadIframe() {

package/src/helpers/skyflow.ts

@@ -77,16 +77,6 @@ export async function initSkyflow(
     }
   }
 
-  const regexJustText = /^[A-Za-z\s]*$/;
-
-  const regexJustTextRule = {
-    type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
-    params: {
-      regex: regexJustText,
-      error: "Debe contener solo letras"
-    }
-  }
-
   const cardHolderNameElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "cardholder_name",
@@ -94,9 +84,47 @@ export async function initSkyflow(
     label: "Titular de la tarjeta",
     placeholder: "Nombre como aparece en la tarjeta",
     type: Skyflow.ElementType.CARDHOLDER_NAME,
-    validations: [regexMatchRule, lengthMatchRule, regexJustTextRule],
+    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",
@@ -112,6 +140,45 @@ export async function initSkyflow(
     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",
@@ -122,6 +189,44 @@ export async function initSkyflow(
     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",
@@ -132,6 +237,44 @@ export async function initSkyflow(
     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",
@@ -142,6 +285,44 @@ export async function initSkyflow(
     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 },

package/src/helpers/template.ts

@@ -55,6 +55,28 @@ ${external ? `` : `<style>
 
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
 
+.error-custom-inputs-tonder {
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  bottom: -1px;
+  width: 100%;
+  font-size: 12px;
+  color: red;
+  font-family: "Inter", sans-serif !important;
+}
+
+.expiration-year .error-custom-inputs-tonder {
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  bottom: 3px;
+  width: 100%;
+  font-size: 12px;
+  color: red;
+  font-family: "Inter", sans-serif !important;
+}
+
 .container-tonder {
   background-color: #F9F9F9;
   margin: 0 auto !important;
@@ -76,10 +98,12 @@ ${external ? `` : `<style>
 }
 
 .expiration-year {
-  padding-top: 25px !important;
+  position: relative !important;
+  padding-top: 24px !important;
 }
 
 .empty-div {
+  position: relative;
   height: 80px !important;
   margin-top: 2px;
   margin-bottom: 4px;