tonder-web-sdk 1.16.1 → 1.16.6-beta.DEV-1433.1

package/src/helpers/utils.js

@@ -1,163 +0,0 @@
-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) {
-  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 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 = "";
-    }, 3000);
-  }
-}
-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) => {
-  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"
-  }
-}
-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);
-  }
-}
-

package/src/helpers/validations.js

@@ -1,54 +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,307 +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: {
-      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
-      },
-    },
-  });
-  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;

package/src/index.html

@@ -1,172 +0,0 @@
-<!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">
-    <style>
-      #checkout-container {
-        display: flex;
-        justify-content: center;
-      }
-      #pay-button {
-        padding: 10px 20px;
-        margin-top: 30px;
-        background-color: #4a90e2;
-        color: white;
-        border: none;
-        border-radius: 5px;
-        font-size: 16px;
-        cursor: pointer;
-        transition: background-color 0.3s;
-      }
-      #payButton:hover {
-        background-color: #357abd;
-      }
-      .cart-details {
-        font-size: 3rem;
-        font-weight: bold;
-        padding: 2rem;
-        display: flex;
-        justify-content: center;
-      }
-      .button-container {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-      }
-      .tab-container {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 20px;
-      }
-      .tab {
-        padding: 10px 20px;
-        cursor: pointer;
-        background-color: #f1f1f1;
-        border: 1px solid #ccc;
-        border-bottom: none;
-        margin-right: 5px;
-      }
-      .tab.active {
-        background-color: #fff;
-        border-bottom: 1px solid #4a90e2;
-      }
-      .tab-content {
-        display: none;
-        width: 100%;
-      }
-      .card-form {
-        max-width: 400px;
-        margin: 0 auto;
-      }
-      .form-group {
-        margin-bottom: 1.5rem;
-      }
-      .form-group label {
-        display: block;
-        margin-bottom: 0.5rem;
-        font-weight: 500;
-      }
-      .form-group input {
-        width: 100%;
-        padding: 0.75rem;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 1rem;
-        transition: border-color 0.3s ease;
-      }
-      .form-group input:focus {
-        outline: none;
-        border-color: #4a90e2;
-      }
-      .form-row {
-        display: flex;
-        gap: 3rem;
-      }
-      .form-row .form-group {
-        flex: 1;
-      }
-      .btn {
-        display: inline-block;
-        padding: 0.75rem 1.5rem;
-        background-color: #4a90e2;
-        color: #fff;
-        border: none;
-        border-radius: 4px;
-        font-size: 1rem;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-      }
-      .btn:hover {
-        background-color: #357abd;
-      }
-      .cart-details {
-        text-align: center;
-        font-size: 1.5rem;
-        margin-bottom: 2rem;
-      }
-      .input-md {
-        max-width: 100%;
-      }
-      .invalid{
-        border: 2px solid red !important;
-      }
-    </style>
-  </head>
-
-  <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>
-      </div>
-
-      <div id="lite-content" class="tab-content">
-        <div class="cart-details">
-          <span>Total&nbsp;</span>
-          <div id="cart-total-lite">$399</div>
-        </div>
-        <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>
-          </div>
-          <div class="form-group">
-            <label for="card-name">Nombre en la Tarjeta</label>
-            <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>
-              </div>
-            </div>
-            <div class="form-group">
-              <label for="cvv">CVV</label>
-              <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>
-        </form>
-      </div>
-      <div id="inline-content" class="tab-content">
-        <div class="cart-details">
-          <span>Total&nbsp</span>
-          <div id="cart-total">$399</div>
-        </div>
-        <form id="payment-form">
-          <div id="tonder-checkout"></div>
-        </form>
-        <div class="button-container">
-          <button id="pay-button">Pagar</button>
-        </div>
-      </div>
-    </div>
-  </body>
-  <script src="https://js.skyflow.com/v1/index.js"></script>
-  <script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
-  <script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
-</html>