@tonder.io/ionic-full-sdk 0.0.33-beta → 0.0.34-beta

package/package.json

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

package/src/classes/3dsHandler.ts

@@ -65,6 +65,19 @@ export class ThreeDSHandler {
     }
   }
 
+  saveCheckoutId(checkoutId: any) {
+    localStorage.setItem('checkout_id', JSON.stringify(checkoutId))
+  }
+
+  removeCheckoutId() {
+    localStorage.removeItem("checkout_id")
+  }
+
+  getCurrentCheckoutId() {
+    const checkout_id = localStorage.getItem("checkout_id")
+    return checkout_id ? JSON.parse(checkout_id):null; // TODO: JSON.parse de una string?
+  }
+
   getUrlWithExpiration() {
     const status = this.getStorageItem();
     if(status) {
@@ -154,14 +167,13 @@ export class ThreeDSHandler {
 
   handleSuccessTransaction(response: any) {
     this.removeVerifyTransactionUrl();
-    console.log('Transacción autorizada exitosamente.');
+    console.log('Transacción autorizada.');
     return response;
   }
 
   handleDeclinedTransaction(response: any) {
     this.removeVerifyTransactionUrl();
-    console.log('Transacción rechazada.');
-    throw new Error("Transacción rechazada.");
+    return response;
   }
 
   // TODO: the method below needs to be tested with a real 3DS challenge
@@ -193,14 +205,16 @@ export class ThreeDSHandler {
     await this.verifyTransactionStatus();
   }
 
+  // TODO: This method could be removed
   async handleTransactionResponse(response: any) {
     const response_json = await response.json();
-    if (response_json.status === "Pending") {
+    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);
+      return this.handleSuccessTransaction(response_json);
     } else {
-      return this.handleDeclinedTransaction(response);
+      this.handleDeclinedTransaction(response);
+      return response_json
     }
   }
 
@@ -221,17 +235,21 @@ export class ThreeDSHandler {
 
         if (response.status !== 200) {
           console.error('La verificación de la transacción falló.');
-          return
+          this.removeVerifyTransactionUrl();
+          return response
         }
 
         return await this.handleTransactionResponse(response);
       } catch (error) {
         console.error('Error al verificar la transacción:', error);
-        return error;
+        this.removeVerifyTransactionUrl();
       }
     } else {
       console.log('No verify_transaction_status_url found');
     }
   }
 
+  setPayload = (payload: any) => {
+    this.payload = payload
+  }
 }

package/src/classes/inlineCheckout.ts

@@ -215,6 +215,31 @@ export class InlineCheckout {
     this.card = data?.card
   }
 
+  async handle3dsRedirect(response: ErrorResponse | StartCheckoutResponse | false | undefined) {
+    const iframe = response && 'next_action' in response ? response?.next_action?.iframe_resources?.iframe:null
+
+    if (iframe) {
+      this.process3ds.loadIframe()!.then(() => {
+        //TODO: Check if this will be necessary on the frontend side
+        // after some the tests in production, since the 3DS process
+        // doesn't works properly on the sandbox environment
+        // setTimeout(() => {
+        //   process3ds.verifyTransactionStatus();
+        // }, 10000);
+        this.process3ds.verifyTransactionStatus();
+      }).catch((error) => {
+        console.log('Error loading iframe:', error)
+      })
+    } else {
+      const redirectUrl = this.process3ds.getRedirectUrl()
+      if (redirectUrl) {
+        this.process3ds.redirectToChallenge()
+      } else {
+        return response;
+      }
+    }
+  }
+
   payment(data: any) {
     return new Promise(async (resolve, reject) => {
       try {
@@ -225,37 +250,12 @@ export class InlineCheckout {
         this.#handleCurrency(data)
         this.#handleCard(data)
         const response: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
-        if (response) {
-          const process3ds = new ThreeDSHandler({ 
-            payload: response, 
-            baseUrl: this.baseUrl,
-            apiKey: this.apiKeyTonder,
-            successUrl: this.successUrl
-          });
-          this.callBack(response);
-          if("next_action" in response) {
-            const iframe = response?.next_action?.iframe_resources?.iframe
-            if (iframe) {
-              process3ds.loadIframe()?.then(() => {
-                //TODO: Check if this will be necessary on the frontend side
-                // after some the tests in production, since the 3DS process
-                // doesn't works properly on the sandbox environment
-                // setTimeout(() => {
-                //   process3ds.verifyTransactionStatus();
-                // }, 10000);
-                process3ds.verifyTransactionStatus();
-              }).catch((error) => {
-                console.log('Error loading iframe:', error)
-              })
-            } else {
-              const redirectUrl = process3ds.getRedirectUrl()
-              if (redirectUrl) {
-                process3ds.redirectToChallenge()
-              } else {
-                resolve(response);
-              }
-            }
-          }
+        this.process3ds.setPayload(response)
+        this.process3ds.saveCheckoutId(response && 'checkout_id' in response ? response.checkout_id:"")
+        this.callBack(response);
+        const payload = await this.handle3dsRedirect(response)
+        if (payload) {
+          resolve(response);
         }
       } catch (error) {
         reject(error);
@@ -358,7 +358,6 @@ export class InlineCheckout {
 
   injectCheckout() {
     if (this.injected) return
-    this.process3ds.verifyTransactionStatus()
     const injectInterval = setInterval(() => {
       const queryElement = document.querySelector(`#${this.containerId}`)
       if (queryElement) {
@@ -370,6 +369,30 @@ export class InlineCheckout {
     }, 500);
   }
 
+  async verify3dsTransaction () {
+    const result3ds = await this.process3ds.verifyTransactionStatus()
+    const resultCheckout = await this.resumeCheckout(result3ds)
+    this.process3ds.setPayload(resultCheckout)
+    if (resultCheckout && 'is_route_finished' in resultCheckout && 'provider' in resultCheckout && resultCheckout.provider === 'tonder') {
+      return resultCheckout
+    }
+    return this.handle3dsRedirect(resultCheckout)
+  }
+
+  async resumeCheckout(response: any) {
+    if (["Failed", "Declined", "Cancelled"].includes(response?.status)) {
+      const routerItems = {
+        // TODO: Replace this with reponse.checkout_id
+        checkout_id: this.process3ds.getCurrentCheckoutId(),
+      };
+      const routerResponse = await this.liteCheckout.handleCheckoutRouter(
+        routerItems
+      );
+      return routerResponse
+    }
+    return response
+  }
+
   loadCardsList (cards: Card[], token: string) {
     if(this.cardsInjected) return;
     const injectInterval = setInterval(() => {
@@ -701,7 +724,7 @@ export class InlineCheckout {
                   currency: this.currency
                 };
                 
-                const jsonResponseRouter = await this.liteCheckout.startCheckoutRouter(
+                const jsonResponseRouter = await this.liteCheckout.handleCheckoutRouter(
                   routerItems
                 );
                 

package/src/index-dev.js

@@ -102,7 +102,9 @@ const inlineCheckout = new InlineCheckout({
 });
 
 inlineCheckout.injectCheckout();
-
+inlineCheckout.verify3dsTransaction().then(response => {
+  console.log('Verify 3ds response', response)
+})
 document.addEventListener('DOMContentLoaded', function() {
   const payButton = document.getElementById('pay-button');
   payButton.addEventListener('click', async function() {