@tonder.io/ionic-full-sdk 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "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.6",
+    "@tonder.io/ionic-lite-sdk": "^0.0.12",
     "crypto-js": "^4.1.1",
     "skyflow-js": "^1.34.1"
   },

package/src/classes/3dsHandler.ts

@@ -42,9 +42,7 @@ export class ThreeDSHandler {
   redirectTo3DS() {
     const url = this.payload?.next_action?.redirect_to_url?.url
     if (url) {
-      this.saveVerifyTransactionUrl()
-      window.open('@tonder/ionic-full-sdk://', '_system')
-      // window.open(url, '_blank');
+      this.saveVerifyTransactionUrl();
       return true
     } else {
       console.log('No redirection found');

package/src/classes/inlineCheckout.ts

@@ -19,11 +19,8 @@ export type InlineCheckoutConstructor = {
   renderPaymentButton: boolean,
   callBack?: (params: any) => void,
   styles?: any,
-  form?: any,
-  totalElement?: any,
   containerId?: string,
-  collectorIds?: CollectorIds,
-  platforms?: string[]
+  collectorIds?: CollectorIds
 }
 
 export class InlineCheckout {
@@ -71,8 +68,7 @@ export class InlineCheckout {
     callBack = () => {},
     styles,
     containerId,
-    collectorIds,
-    platforms
+    collectorIds
   }: InlineCheckoutConstructor) {
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
@@ -80,7 +76,6 @@ export class InlineCheckout {
     this.renderPaymentButton = renderPaymentButton;
     this.callBack = callBack;
     this.customStyles = styles
-    this.platforms = platforms
 
     this.abortController = new AbortController()
 
@@ -154,7 +149,12 @@ export class InlineCheckout {
         this.setCartItems(data.cart?.items)
         const response: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
         if (response) {
-          const process3ds = new ThreeDSHandler({ payload: response });
+          const process3ds = new ThreeDSHandler({ 
+            payload: response, 
+            baseUrl: this.baseUrl,
+            apiKey: this.apiKeyTonder,
+            successUrl: this.successUrl
+          });
           this.callBack(response);
           if (!process3ds.redirectTo3DS()) {
             resolve(response);
@@ -292,7 +292,7 @@ export class InlineCheckout {
 
           if("cards" in cards) {
 
-            const cardsMapped: Card[] = cards.cards.records.map(record => ({ ...record.fields }))
+            const cardsMapped: Card[] = cards.cards.map(card => ({ ...card.fields }))
   
             this.loadCardsList(cardsMapped)
 
@@ -365,47 +365,51 @@ export class InlineCheckout {
   }
 
   async #checkout() {
+
     try {
-      const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
-      if(selector){
-        selector.disabled = true;
-      }
-    } catch (error) {
-    }
 
-    if(this.merchantData) {
+      try {
+
+        const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+        
+        if(selector){
+          selector.disabled = true;
+          selector.innerHTML = "Cargando..."
+        }
+
+      } catch (error) { }
+
+      if(this.merchantData) {
 
-      if("openpay_keys" in this.merchantData) {
+        if("openpay_keys" in this.merchantData) {
 
-        const { openpay_keys, reference, business } = this.merchantData
+          const { openpay_keys, reference, business } = this.merchantData
 
-        const total = Number(this.cartTotal)
+          const total = Number(this.cartTotal)
 
-        let cardTokensSkyflowTonder: any = null;
+          let cardTokensSkyflowTonder: any = null;
 
-        if(this.radioChecked === "new") {
+          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) {
+            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)
-              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
+            cardTokensSkyflowTonder = {
+              skyflow_id: this.radioChecked
+            }
+            
           }
-          
-        }
-
-        try {
 
           let deviceSessionIdTonder: any;
 
@@ -436,7 +440,7 @@ export class InlineCheckout {
 
                 if("cards" in cards) {
 
-                  const cardsMapped: Card[] = cards.cards.records.map(record => ({ ...record.fields }))
+                  const cardsMapped: Card[] = cards.cards.map(card => ({ ...card.fields }))
         
                   this.loadCardsList(cardsMapped)
 
@@ -505,7 +509,6 @@ export class InlineCheckout {
                 const jsonResponseRouter = await this.liteCheckout.startCheckoutRouter(
                   routerItems
                 );
-    
                 if (jsonResponseRouter) {
                   try {
                     const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
@@ -521,14 +524,16 @@ export class InlineCheckout {
               }
             }
           }
-        } catch (error) {
-          console.log(error);
-          showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-          throw error;
         }
-
+      } else {
+        showError("No se han configurado los datos del proveedor de servicio", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
       }
-      
+    } catch (error) {
+      console.log(error);
+      showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+      throw error;
+    } finally {
+      this.fetchingPayment = false;
     }
   };
 }

package/src/helpers/template.ts

@@ -122,6 +122,10 @@ ${external ? `` : `<style>
   display: none;
 }
 
+.pay-button:disabled, pay-button[disabled] {
+  background-color: #B9B9B9;
+}
+
 .lds-dual-ring {
   display: inline-block;
   width: 14px;