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

package/package.json

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

package/src/classes/3dsHandler.ts

@@ -27,7 +27,45 @@ export class ThreeDSHandler {
   saveVerifyTransactionUrl() {
     const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url
     if (url) {
-      localStorage.setItem("verify_transaction_status_url", url)
+      this.saveUrlWithExpiration(url)
+    } else {
+      const url = this.payload?.next_action?.iframe_resources?.verify_transaction_status_url
+      if (url) {
+        this.saveUrlWithExpiration(url)
+      } else {
+        console.log('No verify_transaction_status_url found');
+      }
+    }
+  }
+
+  saveUrlWithExpiration(url: string) {
+    try {
+      const now = new Date()
+      const item = {
+        url: url,
+        // Expires after 20 minutes
+        expires: now.getTime() + 20 * 60 * 1000
+      }
+      localStorage.setItem('verify_transaction_status', JSON.stringify(item))
+    } catch (error) {
+     console.log('error: ', error)
+    }
+  }
+
+  getUrlWithExpiration() {
+    const status = localStorage.getItem("verify_transaction_status");
+    if(status) {
+      const item = JSON.parse(status)
+        if (!item) return
+        const now = new Date()
+        if (now.getTime() > item.expires) {
+          this.removeVerifyTransactionUrl()
+          return null
+        } else {
+          return item.url
+        }
+    } else {
+      return null
     }
   }
 
@@ -39,17 +77,54 @@ export class ThreeDSHandler {
     return localStorage.getItem("verify_transaction_status_url") 
   }
 
-  redirectTo3DS() {
-    const url = this.payload?.next_action?.redirect_to_url?.url
+  loadIframe() {
+    const iframe = this.payload?.next_action?.iframe_resources?.iframe
+
+    if (iframe) {
+      return new Promise((resolve, reject) => {
+        const iframe = this.payload?.next_action?.iframe_resources?.iframe
+
+        if (iframe) {
+          this.saveVerifyTransactionUrl()
+          const container = document.createElement('div')
+          container.innerHTML = iframe
+          document.body.appendChild(container)
+
+          // Create and append the script tag manually
+          const script = document.createElement('script')
+          script.textContent = 'document.getElementById("tdsMmethodForm").submit();'
+          container.appendChild(script)
+
+          // Resolve the promise when the iframe is loaded
+          const iframeElement = document.getElementById('tdsMmethodTgtFrame')
+          if(iframeElement) {
+            iframeElement.onload = () => resolve(true)
+          } else {
+            console.log('No redirection found');
+            reject(false)
+          }
+        } else {
+          console.log('No redirection found');
+          reject(false)
+        }
+      })
+    }
+  }
+
+  getRedirectUrl() {
+    return this.payload?.next_action?.redirect_to_url?.url
+  }
+
+  redirectToChallenge() {
+    const url = this.getRedirectUrl()
     if (url) {
-      this.saveVerifyTransactionUrl();
-      return true
+      this.saveVerifyTransactionUrl()
+      window.location = url;
     } else {
       console.log('No redirection found');
-      return false
     }
   }
-
+  
   // Returns an object
   // https://example.com/?name=John&age=30&city=NewYork
   // { name: "John", age: "30", city: "NewYork" }
@@ -64,8 +139,63 @@ export class ThreeDSHandler {
     return parameters;
   }
 
+  handleSuccessTransaction(response: any) {
+    this.removeVerifyTransactionUrl();
+    if(this.successUrl) {
+      window.location = this.successUrl as Location;
+    }
+    console.log('Transacción autorizada exitosamente.');
+    return response;
+  }
+
+  handleDeclinedTransaction(response: any) {
+    this.removeVerifyTransactionUrl();
+    console.log('Transacción rechazada.');
+    throw new Error("Transacción rechazada.");
+  }
+
+  // TODO: the method below needs to be tested with a real 3DS challenge
+  // since we couldn't get a test card that works with this feature
+  async handle3dsChallenge(response_json: any) {
+    // Create the form element:
+    const form = document.createElement('form');
+    form.name = 'frm';
+    form.method = 'POST';
+    form.action = response_json.redirect_post_url;
+
+    // Add hidden fields:
+    const creqInput = document.createElement('input');
+    creqInput.type = 'hidden';
+    creqInput.name = response_json.creq;
+    creqInput.value = response_json.creq;
+    form.appendChild(creqInput);
+
+    const termUrlInput = document.createElement('input');
+    termUrlInput.type = 'hidden';
+    termUrlInput.name =  response_json.term_url;
+    termUrlInput.value = response_json.TermUrl;
+    form.appendChild(termUrlInput);
+
+    // Append the form to the body:
+    document.body.appendChild(form);
+    form.submit();
+
+    await this.verifyTransactionStatus();
+  }
+
+  async handleTransactionResponse(response: any) {
+    const response_json = await response.json();
+    if (response_json.status === "Pending") {
+      return await this.handle3dsChallenge(response_json);
+    } else if (["Success", "Authorized"].includes(response_json.status)) {
+      return this.handleSuccessTransaction(response);
+    } else {
+      return this.handleDeclinedTransaction(response);
+    }
+  }
+
   async verifyTransactionStatus() {
-    const verifyUrl = this.getVerifyTransactionUrl();
+    const verifyUrl = this.getUrlWithExpiration();
 
     if (verifyUrl) {
       const url = `${this.baseUrl}${verifyUrl}`;
@@ -79,23 +209,19 @@ export class ThreeDSHandler {
           // body: JSON.stringify(data),
         });
 
-        if (response.status === 200) {
-          this.removeVerifyTransactionUrl();
-          //@ts-ignore
-          window.location = this.successUrl
-          console.log('La transacción se verificó con éxito.');
-          return response;
-        } else {
+        if (response.status !== 200) {
           console.error('La verificación de la transacción falló.');
-          return null;
+          return
         }
+
+        return await this.handleTransactionResponse(response);
       } catch (error) {
         console.error('Error al verificar la transacción:', error);
         return error;
       }
     } else {
       console.log('No verify_transaction_status_url found');
-      return null;
     }
   }
+
 }

package/src/classes/inlineCheckout.ts

@@ -3,7 +3,8 @@ import { LiteCheckout } from '@tonder.io/ionic-lite-sdk';
 import {
   showError,
   showMessage,
-  mapCards
+  mapCards,
+  getBrowserInfo
 } from '../helpers/utils';
 import { initSkyflow } from '../helpers/skyflow'
 import { ThreeDSHandler } from './3dsHandler';
@@ -62,6 +63,9 @@ export class InlineCheckout {
   radioChecked: string | null
   fetchingPayment: boolean
   isOpenPaySandbox: boolean = true
+  metadata = {}
+  card: { skyflow_id: string } | null= null
+  currency: string = ""
 
   constructor ({
     apiKey,
@@ -155,12 +159,26 @@ export class InlineCheckout {
     }
   }
 
+  #handleMetadata(data: { metadata: any }) {
+    this.metadata = data?.metadata
+  }
+
+  #handleCurrency(data: { currency: string }) {
+    this.currency = data?.currency
+  }
+
+  #handleCard(data: { skyflow_id: string }) {
+    this.card = data
+  }
+
   payment(data: any) {
     return new Promise(async (resolve, reject) => {
       try {
         this.#handleCustomer(data.customer)
         this.setCartTotal(data.cart?.total)
         this.setCartItems(data.cart?.items)
+        this.#handleMetadata(data)
+        this.#handleCurrency(data)
         const response: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
         if (response) {
           const process3ds = new ThreeDSHandler({ 
@@ -170,10 +188,28 @@ export class InlineCheckout {
             successUrl: this.successUrl
           });
           this.callBack(response);
-          if (!process3ds.redirectTo3DS()) {
-            resolve(response);
-          } else {
-            resolve(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);
+              }
+            }
           }
         }
       } catch (error) {
@@ -231,6 +267,7 @@ export class InlineCheckout {
       this.#unmountForm();
     }
     this.radioChecked = radio.id;
+    this.#handleCard({ skyflow_id: radio.id });
   }
 
   #handleCustomer(customer: Customer) {
@@ -405,6 +442,23 @@ 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 {
@@ -426,31 +480,9 @@ export class InlineCheckout {
 
           const { openpay_keys, reference, business } = this.merchantData
 
-          const total = Number(this.cartTotal)
-
-          let cardTokensSkyflowTonder: any = null;
-
-          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 {
+          const total = Number(this.cartTotal);
 
-            cardTokensSkyflowTonder = {
-              skyflow_id: this.radioChecked
-            }
-            
-          }
+          const cardTokens: any = await this.#getCardTokens()
 
           let deviceSessionIdTonder: any;
 
@@ -474,7 +506,7 @@ export class InlineCheckout {
 
               if(saveCard && "checked" in saveCard && saveCard.checked) {
 
-                await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
+                await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokens.skyflow_id });
                 
                 this.cardsInjected = false;
 
@@ -528,8 +560,8 @@ export class InlineCheckout {
     
                 // Checkout router
                 const routerItems: StartCheckoutRequest = {
-                  card: cardTokensSkyflowTonder,
-                  name: cardTokensSkyflowTonder.cardholder_name,
+                  card: cardTokens,
+                  name: cardTokens.cardholder_name,
                   last_name: "",
                   email_client: this.email,
                   phone_number: this.phone,
@@ -547,11 +579,15 @@ export class InlineCheckout {
                   business_id: business.pk,
                   payment_id: ("pk" in jsonResponsePayment) && jsonResponsePayment.pk,
                   source: 'sdk',
+                  metadata: this.metadata,
+                  browser_info: getBrowserInfo(),
+                  currency: this.currency
                 };
                 
                 const jsonResponseRouter = await this.liteCheckout.startCheckoutRouter(
                   routerItems
                 );
+                
                 if (jsonResponseRouter) {
                   try {
                     const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);

package/src/helpers/utils.ts

@@ -133,4 +133,17 @@ export const mapCards = (card: CardResponse) => {
   const last = carArr[carArr.length - 1];
   newCard.card_number = `••••${last}`;
   return newCard;
+}
+
+export const getBrowserInfo = () => {
+  const browserInfo = {
+    javascript_enabled: true,  // Assumed since JavaScript is running
+    time_zone: new Date().getTimezoneOffset(),
+    language: navigator.language || 'en-US', // Fallback to 'en-US'
+    color_depth: window.screen ? window.screen.colorDepth : null,
+    screen_width: window.screen ? window.screen.width * window.devicePixelRatio || window.screen.width : null,
+    screen_height: window.screen ? window.screen.height * window.devicePixelRatio || window.screen.height : null,
+    user_agent: navigator.userAgent,
+  };
+  return browserInfo;
 }