tonder-web-sdk 1.15.2 → 1.16.3

package/src/classes/BaseInlineCheckout.js

@@ -13,6 +13,7 @@ import { getBrowserInfo, injectMercadoPagoSecurity } from "../helpers/utils";
 export class BaseInlineCheckout {
   baseUrl = "";
   cartTotal = "0";
+  secureToken = "";
   constructor({ mode = "stage", apiKey, returnUrl, callBack = () => {} }) {
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
@@ -33,8 +34,8 @@ export class BaseInlineCheckout {
    * @public
    */
   configureCheckout(data) {
-    if ("customer" in data) this.#handleCustomer(data["customer"]);
     if ("secureToken" in data) this.#handleSecureToken(data["secureToken"]);
+    this.#setCheckoutData(data);
   }
 
   /**
@@ -49,7 +50,7 @@ export class BaseInlineCheckout {
     this.process3ds.setPayload(resultCheckout);
     const response = await this.#handle3dsRedirect(resultCheckout);
     globalLoader.remove();
-    return response
+    return response;
   }
 
   /**
@@ -66,12 +67,7 @@ export class BaseInlineCheckout {
   payment(data) {
     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);
+        this.#setCheckoutData(data);
         const response = await this._checkout(data);
         this.process3ds.setPayload(response);
         this.callBack(response);
@@ -94,24 +90,15 @@ export class BaseInlineCheckout {
   }
 
   async _getCustomer(customer, signal) {
-    return await registerOrFetchCustomer(
-      this.baseUrl,
-      this.apiKeyTonder,
-      customer,
-      signal,
-    );
+    return await registerOrFetchCustomer(this.baseUrl, this.apiKeyTonder, customer, signal);
   }
 
   async _checkout() {
-    throw new Error(
-      "The #checkout method should be implement in child classes.",
-    );
+    throw new Error("The #checkout method should be implement in child classes.");
   }
 
   _setCartTotal(total) {
-    throw new Error(
-      "The #setCartTotal method should be implement in child classes.",
-    );
+    throw new Error("The #setCartTotal method should be implement in child classes.");
   }
 
   async _handleCheckout({ card, payment_method, customer }) {
@@ -119,11 +106,7 @@ export class BaseInlineCheckout {
     const total = Number(this.cartTotal);
     try {
       let deviceSessionIdTonder;
-      if (
-        !deviceSessionIdTonder &&
-        openpay_keys.merchant_id &&
-        openpay_keys.public_key
-      ) {
+      if (!deviceSessionIdTonder && openpay_keys.merchant_id && openpay_keys.public_key) {
         deviceSessionIdTonder = await getOpenpayDeviceSessionID(
           openpay_keys.merchant_id,
           openpay_keys.public_key,
@@ -144,11 +127,7 @@ export class BaseInlineCheckout {
         is_oneclick: true,
         items: this.cartItems,
       };
-      const jsonResponseOrder = await createOrder(
-        this.baseUrl,
-        this.apiKeyTonder,
-        orderItems,
-      );
+      const jsonResponseOrder = await createOrder(this.baseUrl, this.apiKeyTonder, orderItems);
 
       // Create payment
       const now = new Date();
@@ -214,6 +193,16 @@ export class BaseInlineCheckout {
     }
   }
 
+  #setCheckoutData(data) {
+    if (!data) return;
+    this.#handleCustomer(data.customer);
+    this._setCartTotal(data.cart?.total);
+    this.#setCartItems(data.cart?.items);
+    this.#handleMetadata(data);
+    this.#handleCurrency(data);
+    this.#handleCard(data);
+  }
+
   async #fetchMerchantData() {
     this.merchantData = await fetchBusiness(
       this.baseUrl,
@@ -239,11 +228,7 @@ export class BaseInlineCheckout {
         checkout_id: response?.checkout?.id,
       };
       try {
-        return await startCheckoutRouter(
-          this.baseUrl,
-          this.apiKeyTonder,
-          routerItems,
-        );
+        return await startCheckoutRouter(this.baseUrl, this.apiKeyTonder, routerItems);
       } catch (error) {
         // throw error
       } finally {
@@ -290,7 +275,7 @@ export class BaseInlineCheckout {
   }
 
   async #handle3dsRedirect(response) {
-    console.log('Handling 3DS redirect...');
+    console.log("Handling 3DS redirect...");
     const iframe = response?.next_action?.iframe_resources?.iframe;
     const threeDsChallenge = response?.next_action?.three_ds_challenge;
 

package/src/classes/LiteInlineCheckout.js

@@ -42,11 +42,12 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
       const response = await fetchCustomerCards(
         this.baseUrl,
         auth_token,
+        this.secureToken,
         this.merchantData.business.pk,
       );
       return {
         ...response,
-        cards: response.cards.map((ic) => ({
+        cards: response.cards.map(ic => ({
           ...ic,
           icon: getCardType(ic.fields.card_scheme),
         })),
@@ -87,6 +88,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
       return await saveCustomerCard(
         this.baseUrl,
         auth_token,
+        this.secureToken,
         business?.pk,
         skyflowTokens,
       );
@@ -117,6 +119,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
       return await removeCustomerCard(
         this.baseUrl,
         auth_token,
+        this.secureToken,
         skyflowId,
         business?.pk,
       );
@@ -148,8 +151,8 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
           : [];
 
       return apms_results
-        .filter((apmItem) => apmItem.category.toLowerCase() !== "cards")
-        .map((apmItem) => {
+        .filter(apmItem => apmItem.category.toLowerCase() !== "cards")
+        .map(apmItem => {
           const apm = {
             id: apmItem.pk,
             payment_method: apmItem.payment_method,
@@ -175,10 +178,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
   }
 
   async _checkout({ card, payment_method }) {
-    const customer = await this._getCustomer(
-      this.customer,
-      this.abortController.signal,
-    );
+    const customer = await this._getCustomer(this.customer, this.abortController.signal);
     const { vault_id, vault_url } = this.merchantData;
     let skyflowTokens;
     if (!payment_method || payment_method !== "" || payment_method === null) {
@@ -190,7 +190,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
         skyflowTokens = await getSkyflowTokens({
           vault_id: vault_id,
           vault_url: vault_url,
-          data: {...card, card_number: card.card_number.replace(/\s+/g, '')},
+          data: { ...card, card_number: card.card_number.replace(/\s+/g, "") },
           baseUrl: this.baseUrl,
           apiKey: this.apiKeyTonder,
         });

package/src/classes/checkout.js

@@ -4,80 +4,84 @@ export class Checkout {
   constructor({
     apiKey,
     type = "payment",
-    backgroundColor="#141414",
-    color="#EBEBEB",
-    cb=()=>{},
-    url="http://checkout.tonder.io/#/"
+    backgroundColor = "#141414",
+    color = "#EBEBEB",
+    cb = () => {},
+    url = "http://checkout.tonder.io/#/",
   }) {
-    this.url = url
-    this.apiKey = apiKey
-    this.type = type
-    this.backgroundColor = backgroundColor
-    this.color = color
-    this.params = ""
-    this.order = {}
-    this.buttonText = "Proceder al pago"
-    this.cb = cb
+    this.url = url;
+    this.apiKey = apiKey;
+    this.type = type;
+    this.backgroundColor = backgroundColor;
+    this.color = color;
+    this.params = "";
+    this.order = {};
+    this.buttonText = "Proceder al pago";
+    this.cb = cb;
 
     window.addEventListener("message", this.receiveMessage.bind(this), false);
   }
-  generateButton = (buttonText) => {
-    this.buttonText = buttonText ? buttonText : this.buttonText
-    this.tonderButton = document.createElement('button');
+  generateButton = buttonText => {
+    this.buttonText = buttonText ? buttonText : this.buttonText;
+    this.tonderButton = document.createElement("button");
     this.tonderButton.innerHTML = this.buttonText;
-    this.stylishButton(this.tonderButton)
-    this.tonderButton.onclick = this.openCheckout
-  }
-  getButton = ({buttonText}) => {
-    this.generateButton(buttonText)
-    return this.tonderButton
-  }
-  mountButton = ({buttonText}) => {
-    this.generateButton(buttonText)
-    const entryPoint = document.getElementById("tonder-checkout")
+    this.stylishButton(this.tonderButton);
+    this.tonderButton.onclick = this.openCheckout;
+  };
+  getButton = ({ buttonText }) => {
+    this.generateButton(buttonText);
+    return this.tonderButton;
+  };
+  mountButton = ({ buttonText }) => {
+    this.generateButton(buttonText);
+    const entryPoint = document.getElementById("tonder-checkout");
     try {
-      entryPoint.innerHTML = ""
-      entryPoint.append(this.tonderButton)
-    } catch(error) {
-      console.error(error)
+      entryPoint.innerHTML = "";
+      entryPoint.append(this.tonderButton);
+    } catch (error) {
+      console.error(error);
     }
-  }
-  stylishButton = (element) => {
-    element.style.backgroundColor = this.backgroundColor
-    element.style.color = this.color
-    element.style.display = 'flex'
-    element.style.justifyContent = 'center'
-    element.style.border = 'none'
-    element.style.padding = '1rem'
-    element.style.borderRadius = '10px'
-    element.style.fontSize = '1rem'
-    element.style.width = '100%'
-    element.style.boxShadow = '0 3px 6px 0 rgba(0,0,0,0.16)'
-  }
-  setOrder = ({products, email, shippingCost }) => {
-    let _order = {}
-    if (products) _order.products = products 
-    if (email) _order.email = email 
-    if (shippingCost) _order.shippingCost = shippingCost
-    this.order = {...this.order, ..._order}
-    return this.order
-  }
+  };
+  stylishButton = element => {
+    element.style.backgroundColor = this.backgroundColor;
+    element.style.color = this.color;
+    element.style.display = "flex";
+    element.style.justifyContent = "center";
+    element.style.border = "none";
+    element.style.padding = "1rem";
+    element.style.borderRadius = "10px";
+    element.style.fontSize = "1rem";
+    element.style.width = "100%";
+    element.style.boxShadow = "0 3px 6px 0 rgba(0,0,0,0.16)";
+  };
+  setOrder = ({ products, email, shippingCost }) => {
+    let _order = {};
+    if (products) _order.products = products;
+    if (email) _order.email = email;
+    if (shippingCost) _order.shippingCost = shippingCost;
+    this.order = { ...this.order, ..._order };
+    return this.order;
+  };
   openTabListener = (tab, button) => {
     const tabInterval = setInterval(() => {
       if (tab.closed) {
         clearInterval(tabInterval);
-        button.disabled = false
-        button.innerHTML = this.buttonText
+        button.disabled = false;
+        button.innerHTML = this.buttonText;
       }
-    }, 500)
-  }
+    }, 500);
+  };
   openCheckout = () => {
-    const queryString = this.getUrlParams()
-    const encrypted = AES.encrypt(queryString, 'url-params-encrypt').toString()
+    const queryString = this.getUrlParams();
+    const encrypted = AES.encrypt(queryString, "url-params-encrypt").toString();
     const encodedURL = encodeURIComponent(encrypted);
     this.params = "?" + encodedURL;
-    const newWindow = window.open(this.url + this.params, '_blank', `width=1200,height=$800,left=0,top=0`);
-    this.tonderButton.disabled = true
+    const newWindow = window.open(
+      this.url + this.params,
+      "_blank",
+      `width=1200,height=$800,left=0,top=0`,
+    );
+    this.tonderButton.disabled = true;
     this.tonderButton.innerHTML = `
       <div class="loader"></div>
       <style>
@@ -102,24 +106,24 @@ export class Checkout {
       100% { transform: rotate(360deg); }
     }
       </style>
-      `
-    this.openTabListener(newWindow, this.tonderButton)
-  }
+      `;
+    this.openTabListener(newWindow, this.tonderButton);
+  };
   getUrlParams = () => {
-    const params = { apiKey: this.apiKey, ...this.order, type: this.type}
+    const params = { apiKey: this.apiKey, ...this.order, type: this.type };
     if (params.products) {
-      params.products = JSON.stringify(params.products)
+      params.products = JSON.stringify(params.products);
     }
     const queryString = new URLSearchParams(params).toString();
-    return queryString
-  }
+    return queryString;
+  };
   receiveMessage(event) {
     // Parse data if it is possible, in case of error it will return the raw data.
     try {
-      const data = JSON.parse(event.data)
-      this.cb(data)
-    } catch(error) {
-      this.cb(event.data)
+      const data = JSON.parse(event.data);
+      this.cb(data);
+    } catch (error) {
+      this.cb(event.data);
     }
   }
-}
+}

package/src/classes/globalLoader.js

@@ -1,4 +1,5 @@
-import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
+import { cardTemplateSkeleton } from "../helpers/template-skeleton.js";
+import { HTML_IDS } from "../shared/constants/htmlTonderIds";
 
 class GlobalLoader {
   constructor() {
@@ -7,10 +8,10 @@ class GlobalLoader {
 
   show() {
     this.requestCount++;
-    const checkoutContainer = document.querySelector("#global-loader");
+    const checkoutContainer = document.querySelector(`#${HTML_IDS.globalLoader}`);
     if (checkoutContainer) {
       checkoutContainer.innerHTML = cardTemplateSkeleton;
-      checkoutContainer.style.display = 'block';
+      checkoutContainer.style.display = "block";
     }
   }
 
@@ -18,10 +19,11 @@ class GlobalLoader {
     this.requestCount--;
     if (this.requestCount <= 0) {
       this.requestCount = 0;
-      const loader = document.querySelector('#global-loader');
-      if (loader) {
-        loader.style.display = 'none';
-      }
+      const loaders = document.querySelectorAll(`#${HTML_IDS.globalLoader}`);
+
+      loaders.forEach(loader => {
+        loader.style.display = "none";
+      });
     }
   }
 }