tonder-web-sdk 1.12.0-beta.15 → 1.12.0-beta.16

package/.idea/workspace.xml

@@ -13,6 +13,8 @@
       <change beforePath="$PROJECT_DIR$/src/classes/BaseInlineCheckout.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/classes/BaseInlineCheckout.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/classes/LiteInlineCheckout.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/classes/LiteInlineCheckout.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/helpers/utils.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/helpers/utils.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index-dev.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index-dev.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/types/card.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/types/card.d.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/types/index.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/types/index.d.ts" afterDir="false" />
@@ -103,7 +105,7 @@
       <workItem from="1723855727317" duration="20341000" />
       <workItem from="1723952592527" duration="17418000" />
       <workItem from="1724247675743" duration="41003000" />
-      <workItem from="1724435697518" duration="2056000" />
+      <workItem from="1724435697518" duration="6417000" />
     </task>
     <servers />
   </component>

package/README.md

@@ -637,17 +637,31 @@ import { InlineCheckout } from 'tonder-web-sdk';
 export class TonderService {
   private inlineCheckout: InlineCheckout;
 
-  constructor() {
-    this.inlineCheckout = new InlineCheckout({
-      apiKey: 'your-api-key',
-      returnUrl: 'http://your-website.com/checkout',
-      mode: 'development'
-    });
-  }
+    constructor(private sdkParameters: IInlineCheckoutOptions) {
+        this.initializeInlineCheckout();
+    }
 
-  getInlineCheckout(): InlineCheckout {
-    return this.inlineCheckout;
-  }
+    private initializeInlineCheckout(): void {
+        this.inlineCheckout = new InlineCheckout({ ...this.sdkParameters });
+    }
+
+    configureCheckout(customerData: IConfigureCheckout): void {
+        this.inlineCheckout.configureCheckout({ ...customerData });
+    }
+
+    async injectCheckout(): Promise<void> {
+        await this.inlineCheckout.injectCheckout();
+    }
+
+    verify3dsTransaction(): Promise<ITransaction | void> {
+        return this.inlineCheckout.verify3dsTransaction();
+    }
+    
+    // Add more functions, for example for lite sdk: get payment methods
+    
+    // getCustomerPaymentMethods(): Promise<IPaymentMethod[]> {
+    //     return this.liteCheckout.getCustomerPaymentMethods();
+    // }
 }
 
 // checkout.component.ts
@@ -661,7 +675,21 @@ import { TonderService } from './tonder.service';
     <button (click)="pay()" [disabled]="loading">
       {{ loading ? 'Processing...' : 'Pay' }}
     </button>
-  `
+  `,
+    providers: [
+        {
+            provide: TonderInlineService,
+            // Inicialización del SDK de Tonder Inline
+            // Nota: Reemplace estas credenciales con las suyas propias en desarrollo/producción
+            useFactory: () =>
+                new TonderInlineService({
+                    apiKey: "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27",
+                    returnUrl:
+                        "http://localhost:4200/checkout/payment?tabPayment=0",
+                    mode: "development",
+                }),
+        },
+    ],
 })
 export class TonderCheckoutComponent implements OnInit, OnDestroy {
   loading = false;
@@ -669,26 +697,26 @@ export class TonderCheckoutComponent implements OnInit, OnDestroy {
   constructor(private tonderService: TonderService) {}
 
   ngOnInit() {
-    const tonder = this.tonderService.getInlineCheckout();
-    tonder.configureCheckout({ customer: { email: 'example@email.com' } });
-    tonder.injectCheckout();
-    tonder.verify3dsTransaction().then(response => {
-      console.log('Verify 3ds response', response);
-    });
+    this.initCheckout()
   }
 
   ngOnDestroy() {
-    const tonder = this.tonderService.getInlineCheckout();
-    if (tonder.removeCheckout) {
-      tonder.removeCheckout();
-    }
+      // Limpieza del checkout al destruir el componente
+      this.tonderService.removeCheckout();
+  }
+  
+  async initCheckout() {
+      this.tonderService.configureCheckout({ customer: { email: 'example@email.com' } });
+      await this.tonderService.injectCheckout();
+      this.tonderService.verify3dsTransaction().then(response => {
+          console.log('Verify 3ds response', response);
+      });
   }
 
   async pay() {
     this.loading = true;
     try {
-      const tonder = this.tonderService.getInlineCheckout();
-      const response = await tonder.payment(paymentData);
+      const response = await this.tonderService.payment(paymentData);
       console.log('Payment successful:', response);
       alert('Payment successful');
     } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.12.0-beta.15",
+  "version": "1.12.0-beta.16",
   "description": "tonder sdk for integrations",
   "main": "src/index.js",
   "scripts": {
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
+    "@maskito/core": "^3.0.1",
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
     "cypress": "^13.6.2",

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,194 @@ 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: "development",
   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 });
+  inlineCheckout.configureCheckout({ customer: checkoutData.customer });
   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 });
+  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) {
     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 {
       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");
     }
   });
 }
 
 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(4).fill(/\d/),
+      " ",
+      ...Array(4).fill(/\d/),
+      " ",
+      ...Array(4).fill(/\d/),
+      " ",
+      ...Array(4).fill(/\d/),
+      " ",
+      ...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>
 

package/webpack.config.js

@@ -14,6 +14,14 @@ module.exports = (env, argv) => {
       resourceRegExp: /samples\//
     }),
   ];
+
+  if (isProduction) {
+    plugins.push(
+        new webpack.IgnorePlugin({
+          resourceRegExp: /^@maskito\/core$/,
+        })
+    );
+  }
   if (!isProduction) {
     plugins.push(new HtmlWebpackPlugin({
       template: 'src/index.html'