tonder-web-sdk 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "tonder sdk for integrations",
   "main": "src/index.js",
   "scripts": {

package/src/classes/inlineCheckout.js

@@ -294,6 +294,7 @@ export class InlineCheckout {
         this.apiKeyTonder,
         this.abortController.signal,
         this.customStyles,
+        this.collectorIds
       );
       setTimeout(() => {
         this.#removeGlobalLoader()
@@ -338,8 +339,14 @@ export class InlineCheckout {
     const { openpay_keys, reference, business } = this.merchantData
     const total = Number(this.cartTotal)
 
-    const cardTokens = await this.#getCardTokens();
-
+    let cardTokens = null;
+    if(this.radioChecked === "new" || this.radioChecked === undefined){
+      cardTokens = await this.#getCardTokens();
+    }else{
+      cardTokens = {
+        skyflow_id: this.radioChecked
+      }
+    }
     try {
       let deviceSessionIdTonder;
       if (openpay_keys.merchant_id && openpay_keys.public_key) {

package/src/helpers/skyflow.js

@@ -52,6 +52,15 @@ export async function initSkyflow(
       max: 70,
     },
   };
+  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 = await collectContainer.create({
     table: "cards",
@@ -60,10 +69,15 @@ export async function initSkyflow(
     label: collectStylesOptions.labels?.nameLabel,
     placeholder: collectStylesOptions.placeholders?.namePlaceholder,
     type: Skyflow.ElementType.CARDHOLDER_NAME,
-    validations: [lengthMatchRule],
+    validations: [lengthMatchRule, regexMatchRule],
   });
 
-  cardHolderNameElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    cardHolderNameElement,
+    collectorIds.holderName,
+    "errorCardHolderIdTonder",
+    "titular de la tarjeta"
+  );
 
   // Create collect elements.
   const cardNumberElement = await collectContainer.create({
@@ -77,9 +91,16 @@ export async function initSkyflow(
     label: collectStylesOptions.labels?.cardLabel,
     placeholder: collectStylesOptions.placeholders?.cardPlaceholder,
     type: Skyflow.ElementType.CARD_NUMBER,
+    validations: [regexMatchRule],
   });
 
-  cardNumberElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    cardNumberElement,
+    collectorIds.cardNumber,
+    "errorCardNumberIdTonder",
+    "número de tarjeta"
+  );
+
 
   const cvvElement = await collectContainer.create({
     table: "cards",
@@ -88,9 +109,14 @@ export async function initSkyflow(
     label: collectStylesOptions.labels?.cvvLabel,
     placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
     type: Skyflow.ElementType.CVV,
+    validations: [regexMatchRule],
   });
 
-  cvvElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    cvvElement,
+    collectorIds.cvv,
+    "errorCvvIdTonder"
+  );
 
   const expiryMonthElement = await collectContainer.create({
     table: "cards",
@@ -99,9 +125,14 @@ export async function initSkyflow(
     label: collectStylesOptions.labels?.expiryDateLabel,
     placeholder: collectStylesOptions.placeholders?.expiryMonthPlaceholder,
     type: Skyflow.ElementType.EXPIRATION_MONTH,
+    validations: [regexMatchRule],
   });
 
-  expiryMonthElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    expiryMonthElement,
+    collectorIds.expirationMonth,
+    "errorExpiryMonthIdTonder"
+  );
 
   const expiryYearElement = await collectContainer.create({
     table: "cards",
@@ -110,9 +141,14 @@ export async function initSkyflow(
     label: "",
     placeholder: collectStylesOptions.placeholders?.expiryYearPlaceholder,
     type: Skyflow.ElementType.EXPIRATION_YEAR,
+    validations: [regexMatchRule],
   });
 
-  expiryYearElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    expiryYearElement,
+    collectorIds.expirationYear,
+    "errorExpiryYearIdTonder"
+  );
 
   await mountElements(
     cardNumberElement,
@@ -147,3 +183,30 @@ async function mountElements(
   expiryYearElement.mount("#collectExpirationYear");
   cardHolderNameElement.mount("#collectCardholderName");
 }
+
+
+function handleSkyflowElementEvents(element, elementId, errorElementId, fieldMessage= "", requiredMessage = "El campo es requerido", invalidMessage= "El campo es inválido") {
+  if ("on" in element) {
+    element.on(Skyflow.EventName.CHANGE, (state) => {
+      let errorElement = document.getElementById(errorElementId);
+      if (errorElement && state.isValid && !state.isEmpty) {
+        errorElement.remove();
+      }
+    });
+
+    element.on(Skyflow.EventName.BLUR, (state) => {
+      let container = document.getElementById(elementId);
+      let errorElement = document.getElementById(errorElementId);
+      if (errorElement) {
+        errorElement.remove();
+      }
+      if (!state.isValid) {
+        let errorLabel = document.createElement("div");
+        errorLabel.classList.add("error-custom-inputs-tonder");
+        errorLabel.id = errorElementId;
+        errorLabel.textContent = state.isEmpty ? requiredMessage : fieldMessage != "" ?`El campo ${fieldMessage} es inválido`: invalidMessage;
+        container?.appendChild(errorLabel);
+      }
+    });
+  }
+}

package/src/helpers/template.js

@@ -55,10 +55,12 @@ export const cardTemplate = `
 }
 
 .expiration-year {
+  position: relative !important;
   padding-top: 25px !important;
 }
 
 .empty-div {
+  position: relative;
   height: 80px !important;
   margin-top: 2px;
   margin-bottom: 4px;
@@ -281,6 +283,26 @@ export const cardTemplate = `
   transition-duration: 150ms;
   opacity: 10;
 }
+
+.error-custom-inputs-tonder {
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  bottom: -4px;
+  width: 100%;
+  font-size: 12px;
+  color: red;
+}
+
+.expiration-year .error-custom-inputs-tonder {
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  bottom: 3px;
+  width: 100%;
+  font-size: 12px;
+  color: red;
+}
 </style>
 `
 

package/src/index-dev.js

@@ -91,9 +91,9 @@ const checkoutData = {
     ]
   },
   // card: { "skyflow_id": "53ca875c-16fd-4395-8ac9-c756613dbaf9" },
-  metadata: {
-    order_id: 123456
-  }
+  // metadata: {
+  //   order_id: 123456
+  // }
 };
 
 // localhost
@@ -110,7 +110,7 @@ const inlineCheckout = new InlineCheckout({
   successUrl,
   styles: customStyles
 });
-
+inlineCheckout.setCustomerEmail(checkoutData.customer.email)
 inlineCheckout.injectCheckout();
 
 document.addEventListener('DOMContentLoaded', function() {