@tonder.io/ionic-full-sdk 0.0.17-beta → 0.0.18-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.17-beta",
+  "version": "0.0.18-beta",
   "description": "Tonder ionic full SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.js",
@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tonder.io/ionic-lite-sdk": "^0.0.25-beta",
+    "@tonder.io/ionic-lite-sdk": "^0.0.26-beta",
     "crypto-js": "^4.1.1",
     "skyflow-js": "^1.34.1"
   },

package/src/classes/inlineCheckout.ts

@@ -64,7 +64,7 @@ export class InlineCheckout {
   fetchingPayment: boolean
   isOpenPaySandbox: boolean = true
   metadata = {}
-  card: { skyflow_id: string } | null= null
+  card = {}
   currency: string = ""
 
   constructor ({
@@ -167,8 +167,8 @@ export class InlineCheckout {
     this.currency = data?.currency
   }
 
-  #handleCard(data: { skyflow_id: string }) {
-    this.card = data
+  #handleCard(data: { card: string }) {
+    this.card = data?.card
   }
 
   payment(data: any) {
@@ -179,6 +179,7 @@ export class InlineCheckout {
         this.setCartItems(data.cart?.items)
         this.#handleMetadata(data)
         this.#handleCurrency(data)
+        this.#handleCard(data)
         const response: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
         if (response) {
           const process3ds = new ThreeDSHandler({ 
@@ -187,6 +188,7 @@ export class InlineCheckout {
             apiKey: this.apiKeyTonder,
             successUrl: this.successUrl
           });
+          console.log("response", response);
           this.callBack(response);
           if("next_action" in response) {
             const iframe = response?.next_action?.iframe_resources?.iframe
@@ -267,7 +269,6 @@ export class InlineCheckout {
       this.#unmountForm();
     }
     this.radioChecked = radio.id;
-    this.#handleCard({ skyflow_id: radio.id });
   }
 
   #handleCustomer(customer: Customer) {
@@ -442,23 +443,6 @@ export class InlineCheckout {
 
   }
 
-  async #getCardTokens() {
-    if (this.card?.skyflow_id) return this.card
-    if(this.collectContainer && "container" in this.collectContainer && "collect" in this.collectContainer.container) {
-      try {
-        const collectResponseSkyflowTonder: any = await this.collectContainer?.container.collect();
-        const cardTokens = await collectResponseSkyflowTonder["records"][0]["fields"];
-        return cardTokens;
-      } catch (error) {
-        showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-        throw error;
-      }
-    } else {
-      showError("Ocurrió un error al conectar con skyflow", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-      throw "Ocurrió un error al conectar con skyflow";
-    }
-  }
-
   async #checkout() {
 
     try {
@@ -480,9 +464,31 @@ export class InlineCheckout {
 
           const { openpay_keys, reference, business } = this.merchantData
 
-          const total = Number(this.cartTotal);
+          const total = Number(this.cartTotal)
+
+          let cardTokensSkyflowTonder: any = null;
 
-          const cardTokens: any = await this.#getCardTokens()
+          if(this.radioChecked === "new") {
+
+            if(this.collectContainer && "container" in this.collectContainer && "collect" in this.collectContainer.container) {
+              try {
+                const collectResponseSkyflowTonder: any = await this.collectContainer?.container.collect();
+                cardTokensSkyflowTonder = await collectResponseSkyflowTonder["records"][0]["fields"];
+              } catch (error) {
+                showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+                throw error;
+              }
+            } else {
+              showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+            }
+            
+          } else {
+
+            cardTokensSkyflowTonder = {
+              skyflow_id: this.radioChecked
+            }
+            
+          }
 
           let deviceSessionIdTonder: any;
 
@@ -506,7 +512,7 @@ export class InlineCheckout {
 
               if(saveCard && "checked" in saveCard && saveCard.checked) {
 
-                await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokens.skyflow_id });
+                await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
                 
                 this.cardsInjected = false;
 
@@ -560,8 +566,8 @@ export class InlineCheckout {
     
                 // Checkout router
                 const routerItems: StartCheckoutRequest = {
-                  card: cardTokens,
-                  name: cardTokens.cardholder_name,
+                  card: cardTokensSkyflowTonder,
+                  name: cardTokensSkyflowTonder.cardholder_name,
                   last_name: "",
                   email_client: this.email,
                   phone_number: this.phone,

package/src/helpers/skyflow.ts

@@ -77,6 +77,16 @@ 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",
@@ -84,7 +94,7 @@ export async function initSkyflow(
     label: "Titular de la tarjeta",
     placeholder: "Nombre como aparece en la tarjeta",
     type: Skyflow.ElementType.CARDHOLDER_NAME,
-    validations: [regexMatchRule, lengthMatchRule],
+    validations: [regexMatchRule, lengthMatchRule, regexJustTextRule],
   });
 
   // Create collect elements.

package/src/helpers/template.ts

@@ -182,7 +182,7 @@ ${external ? `` : `<style>
 
 .checkbox {
   margin-top: 10px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
   width: 100%;
   text-align: left;
 }