tonder-web-sdk 1.16.3 → 1.16.6-beta.DEV-1433.2

package/src/helpers/utils.js

@@ -1,257 +0,0 @@
-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");
-    skyflowScript.src = "https://js.skyflow.com/v1/index.js";
-    await new Promise((resolve, reject) => {
-      skyflowScript.onload = resolve;
-      skyflowScript.onerror = reject;
-      document.head.appendChild(skyflowScript);
-    });
-
-    const openPay1Script = document.createElement("script");
-    openPay1Script.src = "https://openpay.s3.amazonaws.com/openpay.v1.min.js";
-    await new Promise((resolve, reject) => {
-      openPay1Script.onload = resolve;
-      openPay1Script.onerror = reject;
-      document.head.appendChild(openPay1Script);
-    });
-
-    const openPay2Script = document.createElement("script");
-    openPay2Script.src = "https://openpay.s3.amazonaws.com/openpay-data.v1.min.js";
-    await new Promise((resolve, reject) => {
-      openPay2Script.onload = resolve;
-      openPay2Script.onerror = reject;
-      document.head.appendChild(openPay2Script);
-    });
-  } catch (error) {
-    console.error("Error loading scripts", error);
-  }
-}
-
-export function toCurrency(value) {
-  if (isNaN(parseFloat(value))) {
-    return value;
-  }
-  var formatter = new Intl.NumberFormat("es-MX", {
-    style: "currency",
-    currency: "MXN",
-    minimumFractionDigits: 2,
-  });
-  return formatter.format(value);
-}
-
-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";
-
-    setTimeout(function () {
-      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
-    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;
-}
-
-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, 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_tonder${isDark ? "_purple" : ""}.png`;
-  }
-};
-export const clearSpace = text => {
-  return text.trim().replace(/\s+/g, "");
-};
-
-export function formatPublicErrorResponse(data, error) {
-  let code = 200;
-  try {
-    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.",
-  };
-
-  return {
-    ...default_res,
-    ...data,
-  };
-}
-
-export async function buildErrorResponse(response, resJson) {
-  let status = response.status.toString();
-  let message = resJson.detail || "Error";
-
-  return {
-    code: status,
-    body: resJson,
-    name: status,
-    message: message,
-    stack: undefined,
-  };
-}
-
-export function buildErrorResponseFromCatch(e) {
-  return {
-    code: e?.status ? e.status : e.code,
-    body: e?.body,
-    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,
-  };
-}
-
-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);
-  } catch (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,53 +0,0 @@
-export function validateCardNumber(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);
-}
-
-export function validateCVV(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;
-}
-
-export function validateExpirationMonth(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 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;
-};

package/src/index-dev.js

@@ -1,329 +0,0 @@
-import { InlineCheckout } from "./classes/inlineCheckout";
-import { LiteInlineCheckout } from "./classes/LiteInlineCheckout";
-import { Maskito } from "@maskito/core";
-import { validateCardNumber } from "./helpers/validations";
-
-const customStyles = {
-  inputStyles: {
-    base: {
-      border: "2px dashed #4a90e2",
-      padding: "12px 8px",
-      borderRadius: "8px",
-      color: "#333333",
-      backgroundColor: "#f0f0f0",
-      fontFamily: '"Arial", sans-serif',
-      fontSize: "14px",
-      "&::placeholder": {
-        color: "#888888",
-      },
-    },
-    cardIcon: {
-      position: "absolute",
-      left: "6px",
-      bottom: "calc(50% - 12px)",
-    },
-    complete: {
-      color: "#4caf50",
-    },
-    empty: {},
-    focus: {},
-    invalid: {
-      border: "1px solid #f44336",
-    },
-    global: {
-      "@import":
-        'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
-    },
-  },
-  labelStyles: {
-    base: {
-      fontSize: "14px",
-      fontWeight: "bold",
-      fontFamily: '"Inter", sans-serif',
-      color: "#4a90e2",
-    },
-  },
-  errorTextStyles: {
-    base: {
-      fontSize: "12px",
-      fontWeight: "500",
-      color: "#e74c3c",
-      fontFamily: '"Inter", sans-serif',
-    },
-  },
-  labels: {
-    nameLabel: "Nombre de la de Tarjeta",
-    cardLabel: "Número de Tarjeta",
-    cvvLabel: "Código de Seguridad",
-    expiryDateLabel: "Fecha de Expiración",
-  },
-  placeholders: {
-    namePlaceholder: "Nombre como aparece en la tarjeta",
-    cardPlaceholder: "0000 0000 0000 0000",
-    cvvPlaceholder: "123",
-    expiryMonthPlaceholder: "Mes",
-    expiryYearPlaceholder: "Año",
-  },
-};
-
-const checkoutData = {
-  customer: {
-    firstName: "Adrian",
-    lastName: "Martinez",
-    country: "Mexico",
-    address: "Pinos 507, Col El Tecuan",
-    city: "Durango",
-    state: "Durango",
-    postCode: "34105",
-    email: "adrian@email.com",
-    phone: "8161234567",
-  },
-  currency: "mxn",
-  cart: {
-    total: 399,
-    items: [
-      {
-        description: "Black T-Shirt",
-        quantity: 1,
-        price_unit: 1,
-        discount: 0,
-        taxes: 0,
-        product_reference: 1,
-        name: "T-Shirt",
-        amount_total: 399,
-      },
-    ],
-  },
-  // card: { "skyflow_id": "53ca875c-16fd-4395-8ac9-c756613dbaf9" },
-  // metadata: {
-  //   order_id: 123456
-  // }
-  // Reference from the merchant
-  order_reference: "ORD-123456",
-};
-
-// localhost
-const apiKey = "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27";
-const returnUrl = "http://localhost:8080/";
-// stage
-// const apiKey = "8365683bdc33dd6d50fe2397188d79f1a6765852";
-
-const commonConfig = {
-  mode: "stage",
-  apiKey,
-  returnUrl: returnUrl + "?mode=" + getCheckoutMode(),
-  styles: customStyles,
-};
-
-let inlineCheckout;
-let liteInlineCheckout;
-
-function getCheckoutMode() {
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get("mode") || "inline";
-}
-
-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
-      },
-      paymentButton: {
-        show: false, // 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
-      },
-    },
-    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,
-  });
-  inlineCheckout.injectCheckout();
-  // ['Declined', 'Cancelled', 'Failed', 'Success', 'Pending', 'Authorized']
-  inlineCheckout.verify3dsTransaction().then(response => {
-    console.log("Verify 3ds response", response);
-  });
-
-  const payButton = document.getElementById("pay-button");
-  payButton.addEventListener("click", async function () {
-    try {
-      payButton.textContent = "Procesando...";
-      const response = await inlineCheckout.payment(checkoutData);
-      console.log("Respuesta del pago:", response);
-      alert("Pago realizado con éxito");
-    } catch (error) {
-      console.log("Error en el pago:", error.details);
-      alert("Error al realizar el pago");
-    } finally {
-      payButton.textContent = "Pagar";
-    }
-  });
-}
-
-function setupLiteInlineCheckout() {
-  loadMaskitoMask();
-  liteInlineCheckout = new LiteInlineCheckout(commonConfig);
-  liteInlineCheckout.configureCheckout({
-    customer: checkoutData.customer,
-    secureToken: "eyJhbGc...",
-  });
-  liteInlineCheckout.injectCheckout().then(() => {
-    liteInlineCheckout.getCustomerCards().then(r => {
-      console.log("customer cards", r);
-    });
-  });
-
-  liteInlineCheckout.verify3dsTransaction().then(response => {
-    console.log("Verify 3ds response", response);
-  });
-
-  const liteForm = document.getElementById("lite-payment-form");
-  const payButton = document.getElementById("pay-button-lite");
-  liteForm.addEventListener("submit", async function (event) {
-    event.preventDefault();
-
-    const cardData = {
-      card_number: document.getElementById("card-number").value,
-      cardholder_name: document.getElementById("card-name").value,
-      expiration_month: document.getElementById("month").value,
-      expiration_year: document.getElementById("year").value,
-      cvv: document.getElementById("cvv").value,
-    };
-
-    try {
-      payButton.textContent = "Procesando...";
-      const paymentData = {
-        ...checkoutData,
-        card: cardData,
-      };
-      const response = await liteInlineCheckout.payment(paymentData);
-      console.log("Respuesta del pago:", response);
-      alert("Pago realizado con éxito");
-    } catch (error) {
-      console.error("Error en el pago:", error);
-      alert("Error al realizar el pago");
-    } finally {
-      payButton.textContent = "Pagar Ahora";
-    }
-  });
-}
-
-function setupCheckout() {
-  const mode = getCheckoutMode();
-  document.querySelectorAll(".tab-content").forEach(content => {
-    content.style.display = "none";
-  });
-
-  if (mode === "inline") {
-    document.getElementById("inline-content").style.display = "block";
-    setupInlineCheckout();
-  } else {
-    document.getElementById("lite-content").style.display = "block";
-    setupLiteInlineCheckout();
-  }
-}
-
-function loadMaskitoMask() {
-  const cardNumberInput = document.getElementById("card-number");
-  const monthInput = document.getElementById("month");
-  const yearInput = document.getElementById("year");
-  const cvvInput = document.getElementById("cvv");
-  const nameInput = document.getElementById("card-name");
-
-  // Definir las opciones para las máscaras
-  const cardNumberOptions = {
-    mask: [
-      ...Array(4).fill(/\d/),
-      " ",
-      ...Array(4).fill(/\d/),
-      " ",
-      ...Array(4).fill(/\d/),
-      " ",
-      ...Array(4).fill(/\d/),
-      " ",
-      ...Array(3).fill(/\d/),
-    ],
-  };
-
-  const monthOptions = {
-    mask: [/[0-1]/, /\d/],
-  };
-
-  const yearOptions = {
-    mask: [/\d/, /\d/],
-  };
-
-  const nameOptions = {
-    mask: /^[a-zA-Z\s]*$/,
-  };
-
-  const cvvOptions = {
-    mask: [...Array(3).fill(/\d/)],
-  };
-
-  // Aplicar Maskito a cada campo
-  const cardNumberMask = new Maskito(cardNumberInput, cardNumberOptions);
-  const monthMask = new Maskito(monthInput, monthOptions);
-  const yearMask = new Maskito(yearInput, yearOptions);
-  const cvvMask = new Maskito(cvvInput, cvvOptions);
-  const nameMask = new Maskito(nameInput, nameOptions);
-
-  cardNumberInput.addEventListener("input", () => {
-    const cardNumber = cardNumberInput.value.replace(/\s+/g, "");
-    if (!validateCardNumber(cardNumber)) {
-      cardNumberInput.setCustomValidity("Número de tarjeta inválido");
-      cardNumberInput.classList.add("invalid");
-    } else {
-      cardNumberInput.setCustomValidity("");
-      cardNumberInput.classList.remove("invalid");
-    }
-  });
-
-  window.addEventListener("beforeunload", () => {
-    cardNumberMask.destroy();
-    monthMask.destroy();
-    yearMask.destroy();
-    cvvMask.destroy();
-    nameMask.destroy();
-  });
-}
-function updateActiveTab() {
-  const mode = getCheckoutMode();
-  document.querySelectorAll(".tab").forEach(tab => {
-    tab.classList.remove("active");
-  });
-  document.querySelector(`[data-mode="${mode}"]`).classList.add("active");
-}
-
-function switchTab(mode) {
-  window.location.href = `${window.location.pathname}?mode=${mode}`;
-}
-
-document.addEventListener("DOMContentLoaded", function () {
-  setupCheckout();
-  updateActiveTab();
-});
-
-window.switchTab = switchTab;