tonder-web-sdk 1.16.1 → 1.16.5

package/src/helpers/utils.js

@@ -1,3 +1,7 @@
+import { defaultStyles } from "./styles";
+import get from "lodash.get";
+import { HTML_IDS } from "../shared/constants/htmlTonderIds";
+
 export async function addScripts() {
   try {
     const skyflowScript = document.createElement("script");
@@ -23,7 +27,6 @@ export async function addScripts() {
       openPay2Script.onerror = reject;
       document.head.appendChild(openPay2Script);
     });
-
   } catch (error) {
     console.error("Error loading scripts", error);
   }
@@ -36,88 +39,121 @@ export function toCurrency(value) {
   var formatter = new Intl.NumberFormat("es-MX", {
     style: "currency",
     currency: "MXN",
-    minimumFractionDigits: 2
+    minimumFractionDigits: 2,
   });
   return formatter.format(value);
 }
 
-export function showError(message) {
-  var msgErrorDiv = document.getElementById("msgError");
-  msgErrorDiv.classList.add("error-container");
-  msgErrorDiv.innerHTML = message;
-  setTimeout(function () {
-    try {
-      document.querySelector("#tonderPayButton").disabled = false;
-    } catch (error) {}
-    msgErrorDiv.classList.remove("error-container");
-    msgErrorDiv.innerHTML = "";
-  }, 3000);
-}
+export function showError(
+  message,
+  selectedId = null,
+  containerId = HTML_IDS.msgError,
+  containerTextId = HTML_IDS.msgErrorText,
+) {
+  try {
+    const existSelectedId = selectedId && selectedId !== "new";
+    let msgErrorDiv = document.getElementById(`${containerId}${existSelectedId ? selectedId : ""}`);
+    let msgErrorText = document.getElementById(
+      `${containerTextId}${existSelectedId ? selectedId : ""}`,
+    );
+    msgErrorText.innerHTML = "";
+    msgErrorText.innerHTML = message;
+    msgErrorDiv.style.display = "flex";
 
-export function showMessage(message, containerId) {
-  const msgDiv = document.getElementById(`${containerId}`);
-  if(msgDiv) {
-    msgDiv.classList.add("message-container");
-    msgDiv.innerHTML = message;
     setTimeout(function () {
-      msgDiv.classList.remove("message-container");
-      msgDiv.innerHTML = "";
+      msgErrorDiv.style.display = "none";
+      msgErrorText.innerHTML = "";
     }, 3000);
+  } catch (error) {
+    console.warn("Error showing message error", error);
+  }
+}
+
+export function showMessage(
+  message,
+  selectedId = null,
+  containerId = HTML_IDS.msgNotification,
+  containerTextId = HTML_IDS.msgNotificationText,
+) {
+  try {
+    const existSelectedId = selectedId && selectedId !== "new";
+    const msgDiv = document.getElementById(`${containerId}${existSelectedId ? selectedId : ""}`);
+    if (msgDiv) {
+      let msgText = document.getElementById(
+        `${containerTextId}${existSelectedId ? selectedId : ""}`,
+      );
+      msgDiv.style.display = "flex";
+      msgText.innerHTML = "";
+      msgText.innerHTML = message;
+      setTimeout(function () {
+        msgDiv.style.display = "none";
+        msgText.innerHTML = "";
+      }, 3000);
+    }
+  } catch (error) {
+    console.error("Error showing message", error);
   }
 }
 export function getBrowserInfo() {
   const browserInfo = {
-    javascript_enabled: true,  // Assumed since JavaScript is running
+    javascript_enabled: true, // Assumed since JavaScript is running
     time_zone: new Date().getTimezoneOffset(),
-    language: navigator.language || 'en-US', // Fallback to 'en-US'
+    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,
+    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;
 }
 
-export const mapCards = (card) => {
+export const mapCards = card => {
   const newCard = { ...card.fields };
   const carArr = newCard.card_number.split("-");
   const last = carArr[carArr.length - 1];
   newCard.card_number = `••••${last}`;
   return newCard;
-}
+};
 
-export const getCardType = (scheme) => {
-  if(scheme === "Visa") { // Check if visa
-    return "https://d35a75syrgujp0.cloudfront.net/cards/visa.png"
-  } else if(scheme === "Mastercard") { // Check if master
-    return "https://d35a75syrgujp0.cloudfront.net/cards/mastercard.png"
-  } else if (scheme === "American Express") { // Check if amex
-    return "https://d35a75syrgujp0.cloudfront.net/cards/american_express.png"
+export const getCardType = (scheme, isDark = false) => {
+  if (scheme === "Visa") {
+    // Check if visa
+    return "https://d35a75syrgujp0.cloudfront.net/cards/visa.png";
+  } else if (scheme === "Mastercard") {
+    // Check if master
+    return "https://d35a75syrgujp0.cloudfront.net/cards/mastercard.png";
+  } else if (scheme === "American Express") {
+    // Check if amex
+    return "https://d35a75syrgujp0.cloudfront.net/cards/american_express.png";
   } else {
-    return "https://d35a75syrgujp0.cloudfront.net/cards/default_card.png"
+    return `https://d35a75syrgujp0.cloudfront.net/cards/default_card_tonder${isDark ? "_purple" : ""}.png`;
   }
-}
-export const clearSpace = (text) => {
-  return text.trim().replace(/\s+/g, '');
-}
-
+};
+export const clearSpace = text => {
+  return text.trim().replace(/\s+/g, "");
+};
 
 export function formatPublicErrorResponse(data, error) {
-  let code = 200
+  let code = 200;
   try {
-    code = Number(error?.code || 200)
-  }catch{}
+    code = Number(error?.code || 200);
+  } catch {}
 
   const default_res = {
     status: "error",
     code,
     message: "",
-    detail: error?.body?.detail || error?.body?.error || error.body || "Ocurrio un error inesperado."
-  }
+    detail:
+      error?.body?.detail || error?.body?.error || error.body || "Ocurrio un error inesperado.",
+  };
 
   return {
     ...default_res,
-    ...data
+    ...data,
   };
 }
 
@@ -138,7 +174,7 @@ export function buildErrorResponseFromCatch(e) {
   return {
     code: e?.status ? e.status : e.code,
     body: e?.body,
-    name: e ? typeof e == "string" ? "catch" : e.name : "Error",
+    name: e ? (typeof e == "string" ? "catch" : e.name) : "Error",
     message: e ? (typeof e == "string" ? e : e.message) : "Error",
     stack: typeof e == "string" ? undefined : e.stack,
   };
@@ -146,18 +182,76 @@ export function buildErrorResponseFromCatch(e) {
 
 export function injectMercadoPagoSecurity() {
   try {
-      const script = document.createElement('script');
-      script.src = "https://www.mercadopago.com/v2/security.js";
-      script.setAttribute('view', '');
-      script.onload = () => {
-          console.log("Mercado Pago script loaded successfully.");
-      };
-      script.onerror = (error) => {
-          console.error("Error loading Mercado Pago script:", error);
-      };
-      document.head.appendChild(script);
+    const script = document.createElement("script");
+    script.src = "https://www.mercadopago.com/v2/security.js";
+    script.setAttribute("view", "");
+    script.onload = () => {
+      console.log("Mercado Pago script loaded successfully.");
+    };
+    script.onerror = error => {
+      console.error("Error loading Mercado Pago script:", error);
+    };
+    document.head.appendChild(script);
   } catch (error) {
-      console.error("Error attempting to inject Mercado Pago script:", error);
+    console.error("Error attempting to inject Mercado Pago script:", error);
   }
 }
 
+export function getCardFormLabels(customStyles) {
+  return {
+    labels: {
+      nameLabel: get(customStyles, "labels.nameLabel", defaultStyles.labels.nameLabel),
+      cardLabel: get(customStyles, "labels.cardLabel", defaultStyles.labels.cardLabel),
+      cvvLabel: get(customStyles, "labels.cvvLabel", defaultStyles.labels.cvvLabel),
+      expiryDateLabel: get(
+        customStyles,
+        "labels.expiryDateLabel",
+        defaultStyles.labels.expiryDateLabel,
+      ),
+    },
+    placeholders: {
+      namePlaceholder: get(
+        customStyles,
+        "placeholders.namePlaceholder",
+        defaultStyles.placeholders.namePlaceholder,
+      ),
+      cardPlaceholder: get(
+        customStyles,
+        "placeholders.cardPlaceholder",
+        defaultStyles.placeholders.cardPlaceholder,
+      ),
+      cvvPlaceholder: get(
+        customStyles,
+        "placeholders.cvvPlaceholder",
+        defaultStyles.placeholders.cvvPlaceholder,
+      ),
+      expiryMonthPlaceholder: get(
+        customStyles,
+        "placeholders.expiryMonthPlaceholder",
+        defaultStyles.placeholders.expiryMonthPlaceholder,
+      ),
+      expiryYearPlaceholder: get(
+        customStyles,
+        "placeholders.expiryYearPlaceholder",
+        defaultStyles.placeholders.expiryYearPlaceholder,
+      ),
+    },
+  };
+}
+
+export const executeCallback = async ({ callbacks, callback, data = null, throwError = false }) => {
+  try {
+    if (callbacks && callback in callbacks) {
+      if (data) {
+        await callbacks[callback](data);
+      } else {
+        await callbacks[callback]();
+      }
+    }
+  } catch (e) {
+    console.error(e);
+    if (throwError) {
+      throw e;
+    }
+  }
+};

package/src/helpers/validations.js

@@ -1,54 +1,53 @@
 export function validateCardNumber(cardNumber) {
-    const regex = /^\d{12,19}$/;
-    return regex.test(cardNumber) && luhnCheck(cardNumber);
+  const regex = /^\d{12,19}$/;
+  return regex.test(cardNumber) && luhnCheck(cardNumber);
 }
 
 export function validateCardholderName(name) {
-    const regex = /^([a-zA-Z\\ \\,\\.\\-\\']{2,})$/;
-    return regex.test(name);
+  const regex = /^([a-zA-Z\\ \\,\\.\\-\\']{2,})$/;
+  return regex.test(name);
 }
 
 export function validateCVV(cvv) {
-    const regex = /^\d{3,4}$/;
-    return regex.test(cvv);
+  const regex = /^\d{3,4}$/;
+  return regex.test(cvv);
 }
 
 export function validateExpirationDate(expirationDate) {
-    const regex = /^(0[1-9]|1[0-2])\/\d{2}$/;
-    if (!regex.test(expirationDate)) {
-        return false;
-    }
-    const [month, year] = expirationDate.split('/');
-    const currentDate = new Date();
-    const expiration = new Date(`20${year}`, month - 1);
-    return expiration >= currentDate;
+  const regex = /^(0[1-9]|1[0-2])\/\d{2}$/;
+  if (!regex.test(expirationDate)) {
+    return false;
+  }
+  const [month, year] = expirationDate.split("/");
+  const currentDate = new Date();
+  const expiration = new Date(`20${year}`, month - 1);
+  return expiration >= currentDate;
 }
 
 export function validateExpirationMonth(month) {
-    const regex = /^(0[1-9]|1[0-2])$/;
-    return regex.test(month);
+  const regex = /^(0[1-9]|1[0-2])$/;
+  return regex.test(month);
 }
 
 export function validateExpirationYear(year) {
-    const regex = /^\d{2}$/;
-    if (!regex.test(year)) {
-        return false;
-    }
-    const currentYear = new Date().getFullYear() % 100;
-    return parseInt(year, 10) >= currentYear;
+  const regex = /^\d{2}$/;
+  if (!regex.test(year)) {
+    return false;
+  }
+  const currentYear = new Date().getFullYear() % 100;
+  return parseInt(year, 10) >= currentYear;
 }
 
 const luhnCheck = num => {
-    const arr = `${num}`
-      .split('')
-      .reverse()
-      .map(x => Number.parseInt(x));
-    const lastDigit = arr.shift();
-    let sum = arr.reduce(
-      (acc, val, i) =>
-        i % 2 !== 0 ? acc + val : acc + ((val *= 2) > 9 ? val - 9 : val),
-      0
-    );
-    sum += lastDigit;
-    return sum % 10 === 0;
-  };
+  const arr = `${num}`
+    .split("")
+    .reverse()
+    .map(x => Number.parseInt(x));
+  const lastDigit = arr.shift();
+  let sum = arr.reduce(
+    (acc, val, i) => (i % 2 !== 0 ? acc + val : acc + ((val *= 2) > 9 ? val - 9 : val)),
+    0,
+  );
+  sum += lastDigit;
+  return sum % 10 === 0;
+};

package/src/index-dev.js

@@ -99,7 +99,7 @@ const checkoutData = {
   //   order_id: 123456
   // }
   // Reference from the merchant
-  order_reference: "ORD-123456"
+  order_reference: "ORD-123456",
 };
 
 // localhost
@@ -127,20 +127,50 @@ function setupInlineCheckout() {
   inlineCheckout = new InlineCheckout({
     ...commonConfig,
     customization: {
+      displayMode: "light", // usar para cambiar el aspecto ligth/dark
       saveCards: {
         showSaveCardOption: true, // Usar para mostrar/ocultar el checkbox de guardar tarjeta para futuros pagos
-        autoSave: false,           // Usar para guardar automáticamente la tarjeta (sin necesidad de mostrar el checkbox)
-        showSaved: true           // Usar para mostrar/ocultar el listado de tarjetas guardadas
+        autoSave: false, // Usar para guardar automáticamente la tarjeta (sin necesidad de mostrar el checkbox)
+        showSaved: true, // Usar para mostrar/ocultar el listado de tarjetas guardadas
+      },
+      paymentButton: {
+        show: true, // Usar para mostrar/ocultar el boton de pago
+        showAmount: true, // Usar para concatener el monto junto al texto del botón de pago
+        text: "Pagar", // Usar para cambiar el texto del botón de pago
+      },
+      cancelButton: {
+        show: false, // Usar para mostrar/ocultar el boton de cancelar
+        text: "Cancelar", // Usar para concatener el monto junto al texto del botón de cancelar
+      },
+      paymentMethods: {
+        show: true, // Usar para mostrar/ocultar el listado de métodos de pago
+      },
+      cardForm: {
+        show: true, // Usar para mostrar/ocultar el formulario de tarjeta
+      },
+    },
+    callBack: async response => {
+      console.log("Payment response", JSON.stringify(response, null, 2));
+      if (response.error) {
+        console.log("Payment error", response.error?.details);
+        return;
+      }
+      alert("Payment success");
+    },
+    callbacks: {
+      // Usar para definir la acción a ejecutar cuando el usuario de click en el botón Cancelar
+      onCancel: () => {
+        console.log("onCancel");
       },
     },
   });
   inlineCheckout.configureCheckout({
     secureToken: "eyJhbGc...",
-    ...checkoutData
+    ...checkoutData,
   });
   inlineCheckout.injectCheckout();
   // ['Declined', 'Cancelled', 'Failed', 'Success', 'Pending', 'Authorized']
-  inlineCheckout.verify3dsTransaction().then((response) => {
+  inlineCheckout.verify3dsTransaction().then(response => {
     console.log("Verify 3ds response", response);
   });
 
@@ -165,15 +195,15 @@ function setupLiteInlineCheckout() {
   liteInlineCheckout = new LiteInlineCheckout(commonConfig);
   liteInlineCheckout.configureCheckout({
     customer: checkoutData.customer,
-    secureToken: "eyJhbGc..."
+    secureToken: "eyJhbGc...",
   });
   liteInlineCheckout.injectCheckout().then(() => {
-    liteInlineCheckout.getCustomerCards().then((r) => {
-      console.log('customer cards', r)
+    liteInlineCheckout.getCustomerCards().then(r => {
+      console.log("customer cards", r);
     });
   });
 
-  liteInlineCheckout.verify3dsTransaction().then((response) => {
+  liteInlineCheckout.verify3dsTransaction().then(response => {
     console.log("Verify 3ds response", response);
   });
 
@@ -210,7 +240,7 @@ function setupLiteInlineCheckout() {
 
 function setupCheckout() {
   const mode = getCheckoutMode();
-  document.querySelectorAll(".tab-content").forEach((content) => {
+  document.querySelectorAll(".tab-content").forEach(content => {
     content.style.display = "none";
   });
 
@@ -289,7 +319,7 @@ function loadMaskitoMask() {
 }
 function updateActiveTab() {
   const mode = getCheckoutMode();
-  document.querySelectorAll(".tab").forEach((tab) => {
+  document.querySelectorAll(".tab").forEach(tab => {
     tab.classList.remove("active");
   });
   document.querySelector(`[data-mode="${mode}"]`).classList.add("active");

package/src/index.html

@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <style>
       #checkout-container {
         display: flex;
@@ -109,7 +109,7 @@
       .input-md {
         max-width: 100%;
       }
-      .invalid{
+      .invalid {
         border: 2px solid red !important;
       }
     </style>
@@ -118,8 +118,16 @@
   <body>
     <div class="checkout-container">
       <div class="tab-container">
-        <a href="?mode=inline" class="tab" data-mode="inline" onclick="switchTab('inline'); return false;">Inline Checkout</a>
-        <a href="?mode=lite" class="tab" data-mode="lite" onclick="switchTab('lite'); return false;">Lite Inline Checkout</a>
+        <a
+          href="?mode=inline"
+          class="tab"
+          data-mode="inline"
+          onclick="switchTab('inline'); return false;"
+          >Inline Checkout</a
+        >
+        <a href="?mode=lite" class="tab" data-mode="lite" onclick="switchTab('lite'); return false;"
+          >Lite Inline Checkout</a
+        >
       </div>
 
       <div id="lite-content" class="tab-content">
@@ -130,23 +138,23 @@
         <form id="lite-payment-form" class="card-form">
           <div class="form-group">
             <label for="card-number">Número de Tarjeta</label>
-            <input type="text" id="card-number" placeholder="1234 5678 9012 3456" required>
+            <input type="text" id="card-number" placeholder="1234 5678 9012 3456" required />
           </div>
           <div class="form-group">
             <label for="card-name">Nombre en la Tarjeta</label>
-            <input type="text" id="card-name" placeholder="John Doe" required>
+            <input type="text" id="card-name" placeholder="John Doe" required />
           </div>
           <div class="form-row">
             <div class="form-group">
               <label for="month">Fecha de Expiración</label>
               <div class="form-row">
-                <input class="input-md" type="text" id="month" placeholder="MM" required>
-                <input class="input-md" type="text" id="year" placeholder="AA" required>
+                <input class="input-md" type="text" id="month" placeholder="MM" required />
+                <input class="input-md" type="text" id="year" placeholder="AA" required />
               </div>
             </div>
             <div class="form-group">
               <label for="cvv">CVV</label>
-              <input class="input-md" type="text" id="cvv" placeholder="123" required>
+              <input class="input-md" type="text" id="cvv" placeholder="123" required />
             </div>
           </div>
           <button type="submit" class="btn" id="pay-button-lite">Pagar Ahora</button>

package/src/index.js

@@ -1,15 +1,21 @@
-import { Checkout } from './classes/checkout'
-import { InlineCheckout } from './classes/inlineCheckout'
-import { LiteInlineCheckout } from './classes/LiteInlineCheckout'
-import { validateCVV, validateCardNumber, validateCardholderName, validateExpirationMonth, validateExpirationYear } from "./helpers/validations";
+import { Checkout } from "./classes/checkout";
+import { InlineCheckout } from "./classes/inlineCheckout";
+import { LiteInlineCheckout } from "./classes/LiteInlineCheckout";
+import {
+  validateCVV,
+  validateCardNumber,
+  validateCardholderName,
+  validateExpirationMonth,
+  validateExpirationYear,
+} from "./helpers/validations";
 
 export {
-    Checkout,
-    InlineCheckout,
-    LiteInlineCheckout,
-    validateCVV,
-    validateCardNumber,
-    validateCardholderName,
-    validateExpirationMonth,
-    validateExpirationYear
-}
+  Checkout,
+  InlineCheckout,
+  LiteInlineCheckout,
+  validateCVV,
+  validateCardNumber,
+  validateCardholderName,
+  validateExpirationMonth,
+  validateExpirationYear,
+};

package/src/shared/catalog/commonLogosCatalog.js

@@ -0,0 +1,7 @@
+const COMMON_LOGOS = Object.freeze({
+  pci: "https://d35a75syrgujp0.cloudfront.net/tonder/logo-pci-500.png",
+  tonderBlue: "https://d35a75syrgujp0.cloudfront.net/tonder/logo-tonder-blue.png",
+  tonderWhite: "https://d35a75syrgujp0.cloudfront.net/tonder/logo-tonder-white.png",
+});
+
+export { COMMON_LOGOS };