@tonder.io/ionic-full-sdk 0.0.14-beta → 0.0.16-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.14-beta",
+  "version": "0.0.16-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 = {}
+  currency: string = ""
 
   constructor ({
     apiKey,
@@ -155,12 +159,27 @@ export class InlineCheckout {
     }
   }
 
+  #handleMetadata(data: { metadata: any }) {
+    this.metadata = data?.metadata
+  }
+
+  #handleCurrency(data: { currency: string }) {
+    this.currency = data?.currency
+  }
+
+  #handleCard(data: { card: string }) {
+    this.card = data?.card
+  }
+
   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)
+        this.#handleCard(data)
         const response: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
         if (response) {
           const process3ds = new ThreeDSHandler({ 
@@ -169,11 +188,30 @@ export class InlineCheckout {
             apiKey: this.apiKeyTonder,
             successUrl: this.successUrl
           });
+          console.log("response", response);
           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) {
@@ -547,11 +585,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/skyflow.ts

@@ -63,9 +63,20 @@ export async function initSkyflow(
     type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
     params: {
       max: 70,
+      error: "El campo nombre del titular debe tener menos de 70 caracteres"
     },
   };
 
+  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: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "cardholder_name",
@@ -73,13 +84,9 @@ export async function initSkyflow(
     label: "Titular de la tarjeta",
     placeholder: "Nombre como aparece en la tarjeta",
     type: Skyflow.ElementType.CARDHOLDER_NAME,
-    validations: [lengthMatchRule],
+    validations: [regexMatchRule, lengthMatchRule],
   });
 
-  if("setError" in cardHolderNameElement) {
-    cardHolderNameElement.setError('Inválido')
-  }
-
   // Create collect elements.
   const cardNumberElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
@@ -92,12 +99,9 @@ export async function initSkyflow(
     label: "Número de tarjeta",
     placeholder: "1234 1234 1234 1234",
     type: Skyflow.ElementType.CARD_NUMBER,
+    validations: [regexMatchRule],
   });
 
-  if("setError" in cardNumberElement) {
-    cardNumberElement.setError('Inválido')
-  }
-
   const cvvElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "cvv",
@@ -105,11 +109,8 @@ export async function initSkyflow(
     label: "CVC/CVV",
     placeholder: "3-4 dígitos",
     type: Skyflow.ElementType.CVV,
+    validations: [regexMatchRule],
   });
-  
-  if("setError" in cvvElement) {
-    cvvElement.setError('Inválido')
-  }
 
   const expiryMonthElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
@@ -118,12 +119,9 @@ export async function initSkyflow(
     label: "Fecha de expiración",
     placeholder: "MM",
     type: Skyflow.ElementType.EXPIRATION_MONTH,
+    validations: [regexMatchRule],
   });
 
-  if("setError" in expiryMonthElement) {
-    expiryMonthElement.setError('Inválido')
-  }
-
   const expiryYearElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "expiration_year",
@@ -131,12 +129,9 @@ export async function initSkyflow(
     label: "",
     placeholder: "AA",
     type: Skyflow.ElementType.EXPIRATION_YEAR,
+    validations: [regexMatchRule],
   });
 
-  if("setError" in expiryYearElement) {
-    expiryYearElement.setError('Inválido')
-  }
-
   await mountElements(
     { id: collectorIds.cardNumber, element: cardNumberElement },
     { id: collectorIds.cvv, element: cvvElement },

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;
 }