tonder-web-sdk 1.12.0-beta.9 → 1.14.0

package/src/helpers/validations.js

@@ -0,0 +1,54 @@
+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,5 +1,7 @@
-import { InlineCheckout } from './classes/inlineCheckout'
-import {LiteInlineCheckout} from "./classes/LiteInlineCheckout";
+import { InlineCheckout } from "./classes/inlineCheckout";
+import { LiteInlineCheckout } from "./classes/LiteInlineCheckout";
+import { Maskito } from "@maskito/core";
+import { validateCardNumber } from "./helpers/validations";
 
 const customStyles = {
   inputStyles: {
@@ -10,15 +12,15 @@ const customStyles = {
       color: "#333333",
       backgroundColor: "#f0f0f0",
       fontFamily: '"Arial", sans-serif',
-      fontSize: '14px',
-      '&::placeholder': {
+      fontSize: "14px",
+      "&::placeholder": {
         color: "#888888",
       },
     },
     cardIcon: {
-      position: 'absolute',
-      left: '6px',
-      bottom: 'calc(50% - 12px)',
+      position: "absolute",
+      left: "6px",
+      bottom: "calc(50% - 12px)",
     },
     complete: {
       color: "#4caf50",
@@ -29,39 +31,40 @@ const customStyles = {
       border: "1px solid #f44336",
     },
     global: {
-      '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
-    }
+      "@import":
+        'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
+    },
   },
   labelStyles: {
     base: {
-      fontSize: '14px',
-      fontWeight: 'bold',
+      fontSize: "14px",
+      fontWeight: "bold",
       fontFamily: '"Inter", sans-serif',
       color: "#4a90e2",
     },
   },
   errorTextStyles: {
     base: {
-      fontSize: '12px',
-      fontWeight: '500',
+      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',
+    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'
-  }
-}
+    namePlaceholder: "Nombre como aparece en la tarjeta",
+    cardPlaceholder: "0000 0000 0000 0000",
+    cvvPlaceholder: "123",
+    expiryMonthPlaceholder: "Mes",
+    expiryYearPlaceholder: "Año",
+  },
+};
 
 const checkoutData = {
   customer: {
@@ -75,7 +78,7 @@ const checkoutData = {
     email: "adrian@email.com",
     phone: "8161234567",
   },
-  currency: 'mxn',
+  currency: "mxn",
   cart: {
     total: 399,
     items: [
@@ -89,7 +92,7 @@ const checkoutData = {
         name: "T-Shirt",
         amount_total: 399,
       },
-    ]
+    ],
   },
   // card: { "skyflow_id": "53ca875c-16fd-4395-8ac9-c756613dbaf9" },
   // metadata: {
@@ -97,122 +100,201 @@ const checkoutData = {
   // }
 };
 
-
-
 // localhost
 const apiKey = "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27";
-const returnUrl = "http://127.0.0.1:8080/"
+const returnUrl = "http://127.0.0.1:8080/";
 // stage
 // const apiKey = "8365683bdc33dd6d50fe2397188d79f1a6765852";
 
-
 const commonConfig = {
-  mode: 'development',
+  mode: "stage",
   apiKey,
-  returnUrl: returnUrl+"?mode="+getCheckoutMode(),
-  styles: customStyles
+  returnUrl: returnUrl + "?mode=" + getCheckoutMode(),
+  styles: customStyles,
 };
 
-let checkout;
 let inlineCheckout;
 let liteInlineCheckout;
 
-
 function getCheckoutMode() {
   const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get('mode') || 'inline';
+  return urlParams.get("mode") || "inline";
 }
 
 function setupInlineCheckout() {
-  inlineCheckout = new InlineCheckout({...commonConfig});
-  inlineCheckout.configureCheckout({customer: checkoutData.customer})
+  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({
+    customer: checkoutData.customer,
+    secureToken: "eyJhbGc..."
+  });
   inlineCheckout.injectCheckout();
   // ['Declined', 'Cancelled', 'Failed', 'Success', 'Pending', 'Authorized']
-  inlineCheckout.verify3dsTransaction().then(response => {
-    console.log('Verify 3ds response', response)
-  })
+  inlineCheckout.verify3dsTransaction().then((response) => {
+    console.log("Verify 3ds response", response);
+  });
 
-  const payButton = document.getElementById('pay-button');
-  payButton.addEventListener('click', async function () {
+  const payButton = document.getElementById("pay-button");
+  payButton.addEventListener("click", async function () {
     try {
-      payButton.textContent = 'Procesando...';
+      payButton.textContent = "Procesando...";
       const response = await inlineCheckout.payment(checkoutData);
-      console.log("Respuesta del pago:", response)
-      alert('Pago realizado con éxito');
+      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')
+      alert("Error al realizar el pago");
     } finally {
-      payButton.textContent = 'Pagar';
+      payButton.textContent = "Pagar";
     }
   });
 }
 
 function setupLiteInlineCheckout() {
-    liteInlineCheckout = new LiteInlineCheckout(commonConfig);
-    liteInlineCheckout.configureCheckout({customer: checkoutData.customer})
-    liteInlineCheckout.injectCheckout().then(() => {});
-    liteInlineCheckout.verify3dsTransaction().then(response => {
-      console.log('Verify 3ds response', response)
-    })
-
-  const liteForm = document.getElementById('lite-payment-form');
-  liteForm.addEventListener('submit', async function(event) {
+  loadMaskitoMask();
+  liteInlineCheckout = new LiteInlineCheckout(commonConfig);
+  liteInlineCheckout.configureCheckout({
+    customer: checkoutData.customer,
+    secureToken: "eyJhbGc..."
+  });
+  liteInlineCheckout.injectCheckout().then(() => {});
+  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
+      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
+        card: cardData,
       };
       const response = await liteInlineCheckout.payment(paymentData);
       console.log("Respuesta del pago:", response);
-      alert('Pago realizado con éxito');
+      alert("Pago realizado con éxito");
     } catch (error) {
       console.error("Error en el pago:", error);
-      alert('Error al realizar el pago');
+      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';
+  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()
+  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.querySelectorAll(".tab").forEach((tab) => {
+    tab.classList.remove("active");
   });
-  document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
+  document.querySelector(`[data-mode="${mode}"]`).classList.add("active");
 }
 
 function switchTab(mode) {
   window.location.href = `${window.location.pathname}?mode=${mode}`;
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("DOMContentLoaded", function () {
   setupCheckout();
   updateActiveTab();
 });
 
-window.switchTab = switchTab;
+window.switchTab = switchTab;

package/src/index.html

@@ -109,6 +109,9 @@
       .input-md {
         max-width: 100%;
       }
+      .invalid{
+        border: 2px solid red !important;
+      }
     </style>
   </head>
 
@@ -146,7 +149,7 @@
               <input class="input-md" type="text" id="cvv" placeholder="123" required>
             </div>
           </div>
-          <button type="submit" class="btn">Pagar Ahora</button>
+          <button type="submit" class="btn" id="pay-button-lite">Pagar Ahora</button>
         </form>
       </div>
       <div id="inline-content" class="tab-content">

package/src/index.js

@@ -1,9 +1,15 @@
 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
+    LiteInlineCheckout,
+    validateCVV,
+    validateCardNumber,
+    validateCardholderName,
+    validateExpirationMonth,
+    validateExpirationYear
 }

package/types/{card.ts → card.d.ts}

@@ -1,5 +1,6 @@
 export interface ICard {
     fields: ICardSkyflowFields;
+    icon?: string;
 }
 
 export interface ICardSkyflowFields {

package/types/{checkout.ts → checkout.d.ts}

@@ -92,7 +92,7 @@ export interface IItem {
     price_unit: number;
     discount: number;
     taxes: number;
-    product_reference: number;
+    product_reference: string | number;
     name: string;
     amount_total: number;
 }

package/types/{common.ts → common.d.ts}

@@ -9,6 +9,7 @@ export interface IInlineCheckoutBaseOptions {
 
 export interface IConfigureCheckout {
   customer: ICustomer;
+  secureToken: string;
 }
 
 export interface IApiError {

package/types/{customer.ts → customer.d.ts}

@@ -8,4 +8,5 @@ export type ICustomer = {
     postCode?: string;
     email: string;
     phone?: string;
+    address?: string;
 };

package/types/index.d.ts

@@ -6,6 +6,6 @@ export * from './transaction';
 export * from './paymentMethod';
 export * from './inlineCheckout';
 export * from './liteInlineCheckout';
-
+export * from './validations';
 
 

package/types/inlineCheckout.d.ts

@@ -5,18 +5,70 @@ import {ITransaction} from "./transaction";
 export class InlineCheckout {
     constructor(options: IInlineCheckoutOptions);
 
-    configureCheckout(data: IConfigureCheckout): Promise<void>;
+    /**
+     * The configureCheckout function allows you to set initial information, such as the customer's email, which is used to retrieve a list of saved cards.
+     * @param {import("../types").IConfigureCheckout} data - Configuration data including customer information and potentially other settings.
+     * @returns {void}.
+     * @public
+     */
+    configureCheckout(data: IConfigureCheckout): void;
 
+    /**
+     * Injects the checkout into the DOM and initializes it.
+     * Checks for an existing container and sets up an observer if needed.
+     * @returns {void}
+     * @public
+     */
     injectCheckout(): Promise<void>;
 
+    /**
+     * Processes a payment.
+     * @param {import("../types").IProcessPaymentRequest} data - Payment data including customer, cart, and other relevant information.
+     * @returns {Promise<import("../types").IStartCheckoutResponse>} A promise that resolves with the payment response or 3DS redirect or is rejected with an error.
+     *
+     * @throws {Error} Throws an error if the checkout process fails. The error object contains
+     * additional `details` property with the response from the server if available.
+     * @property {import("../types").IStartCheckoutErrorResponse} error.details - The response body from the server when an error occurs.
+     *
+     * @public
+     */
     payment(data: IProcessPaymentRequest): Promise<IStartCheckoutResponse>;
 
+    /**
+     * Verifies the 3DS transaction status.
+     * @returns {Promise<import("../types").ITransaction | void>} The result of the 3DS verification and checkout resumption.
+     * @public
+     */
     verify3dsTransaction(): Promise<ITransaction | void>;
 
+    /**
+     * Removes the checkout from the DOM and cleans up associated resources.
+     *
+     * This method performs the following actions:
+     * 1. Resets the injection status flags for the checkout, cards, and APMs.
+     * 2. Aborts any ongoing requests using the AbortController.
+     * 3. Creates a new AbortController for future use.
+     * 4. Clears any existing injection intervals.
+     *
+     * Note: This method should be called when you want to completely remove
+     * the checkout from the page and reset its state.
+     *
+     * @returns {void}
+     * @public
+     */
     removeCheckout(): void;
 }
 
+export type CustomizationOptions = {
+    saveCards?: {
+        showSaveCardOption?: boolean;
+        showSaved?: boolean;
+        autoSave?: boolean;
+    }
+}
+
 export interface IInlineCheckoutOptions extends IInlineCheckoutBaseOptions{
     styles?: Record<string, string>;
     renderPaymentButton?: boolean;
+    customization?: CustomizationOptions;
 }

package/types/liteInlineCheckout.d.ts

@@ -7,31 +7,88 @@ import {ITransaction} from "./transaction";
 export class LiteInlineCheckout {
     constructor(options: IInlineLiteCheckoutOptions);
 
+    /**
+     * The configureCheckout function allows you to set initial information, such as the customer's email, which is used to retrieve a list of saved cards.
+     * @param {import("../types").IConfigureCheckout} data - Configuration data including customer information and potentially other settings.
+     * @returns {Promise<void>}.
+     * @public
+     */
     configureCheckout(data: IConfigureCheckout): void;
 
+    /**
+     * Initializes and prepares the checkout for use.
+     * This method set up the initial environment.
+     * @returns {Promise<void>} A promise that resolves when the checkout has been initialized.
+     * @throws {Error} If there's any problem during the checkout initialization.
+     * @public
+     */
     injectCheckout(): Promise<void>;
 
+    /**
+     * Processes a payment.
+     * @param {import("../types").IProcessPaymentRequest} data - Payment data including customer, cart, and other relevant information.
+     * @returns {Promise<import("../types").IStartCheckoutResponse>} A promise that resolves with the payment response or 3DS redirect or is rejected with an error.
+     *
+     * @throws {Error} Throws an error if the checkout process fails. The error object contains
+     * additional `details` property with the response from the server if available.
+     * @property {import("../types").IStartCheckoutErrorResponse} error.details - The response body from the server when an error occurs.
+     *
+     * @public
+     */
     payment(data: IProcessPaymentRequest): Promise<IStartCheckoutResponse>;
 
+    /**
+     * Verifies the 3DS transaction status.
+     * @returns {Promise<import("../types").ITransaction | void>} The result of the 3DS verification and checkout resumption.
+     * @public
+     */
     verify3dsTransaction(): Promise<ITransaction | void>;
 
-    getCustomerCards(
-        authToken: string,
-        businessId: string | number,
-    ): Promise<ICustomerCardsResponse>;
+    /**
+     * Retrieves the list of cards associated with a customer.
+     * @returns {Promise<import("../types").ICustomerCardsResponse>} A promise that resolves with the customer's card data.
+     *
+     * @throws {import("../types").IPublicError} Throws an error object if the operation fails.
+     *
+     * @public
+     */
+    getCustomerCards(): Promise<ICustomerCardsResponse>;
 
+    /**
+     * Saves a card to a customer's account. This method can be used to add a new card
+     * or update an existing one.
+     * @param {import("../types").ISaveCardRequest} card - The card information to be saved.
+     * @returns {Promise<import("../types").ISaveCardResponse>} A promise that resolves with the saved card data.
+     *
+     * @throws {import("../types").IPublicError} Throws an error object if the operation fails.
+     *
+     * @public
+     */
     saveCustomerCard(
-        authToken: string,
-        businessId: string,
         card: ISaveCardRequest,
     ): Promise<ISaveCardResponse>;
 
+    /**
+     * Removes a card from a customer's account.
+     * @param {string} skyflowId - The unique identifier of the card to be deleted.
+     * @returns {Promise<string>} A promise that resolves when the card is successfully deleted.
+     *
+     * @throws {import("../types").IPublicError} Throws an error object if the operation fails.
+     *
+     * @public
+     */
     removeCustomerCard(
-        authToken: string,
         skyflowId: string,
-        businessId: string,
     ): Promise<void>;
 
+    /**
+     * Retrieves the list of available Alternative Payment Methods (APMs).
+     * @returns {Promise<import("../types").IPaymentMethod[]>} A promise that resolves with the list of APMs.
+     *
+     * @throws {import("../types").IPublicError} Throws an error object if the operation fails.
+     *
+     * @public
+     */
     getCustomerPaymentMethods(): Promise<IPaymentMethod[]>;
 }
 

package/types/validations.d.ts

@@ -0,0 +1,11 @@
+export declare function validateCardNumber(cardNumber: string): boolean;
+
+export declare function validateCardholderName(name: string): boolean;
+
+export declare function validateCVV(cvv: string): boolean;
+
+export declare function validateExpirationMonth(month: string): boolean;
+
+export declare function validateExpirationYear(year: string): boolean;
+
+export declare function validateExpirationDateParts(month: string, year: string): boolean;