tonder-web-sdk 1.11.11 → 1.12.0-beta.0

package/src/index-dev.js

@@ -1,4 +1,5 @@
 import { InlineCheckout } from './classes/inlineCheckout'
+import {LiteInlineCheckout} from "./classes/LiteInlineCheckout";
 
 const customStyles = {
   inputStyles: {
@@ -96,31 +97,43 @@ const checkoutData = {
   // }
 };
 
+
+
 // localhost
 const apiKey = "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27";
 const returnUrl = "http://127.0.0.1:8080/"
-const successUrl = "http://127.0.0.1:8080/success"
 // stage
 // const apiKey = "8365683bdc33dd6d50fe2397188d79f1a6765852";
 
-const inlineCheckout = new InlineCheckout({
-  mode: 'stage',
+
+const commonConfig = {
+  mode: 'development',
   apiKey,
   returnUrl,
-  successUrl,
   styles: customStyles
-});
-inlineCheckout.configureCheckout({customer: checkoutData.customer})
-inlineCheckout.injectCheckout();
-//
-// ['Declined', 'Cancelled', 'Failed', 'Success', 'Pending', 'Authorized']
-inlineCheckout.verify3dsTransaction().then(response => {
-  console.log('Verify 3ds response', response)
-})
+};
+
+let checkout;
+let inlineCheckout;
+let liteInlineCheckout;
+
+
+function getCheckoutMode() {
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get('mode') || 'inline';
+}
+
+function setupInlineCheckout() {
+  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)
+  })
 
-document.addEventListener('DOMContentLoaded', function() {
   const payButton = document.getElementById('pay-button');
-  payButton.addEventListener('click', async function() {
+  payButton.addEventListener('click', async function () {
     try {
       payButton.textContent = 'Procesando...';
       const response = await inlineCheckout.payment(checkoutData);
@@ -132,4 +145,73 @@ document.addEventListener('DOMContentLoaded', function() {
       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) {
+    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 {
+      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');
+    }
+  });
+}
+
+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 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

@@ -35,20 +35,131 @@
         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%;
+      }
     </style>
   </head>
 
   <body>
     <div class="checkout-container">
-      <div class="cart-details">
-        <span>Total&nbsp</span>
-        <div id="cart-total">$399</div>
+      <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">Pagar Ahora</button>
+        </form>
       </div>
-      <form id="payment-form">
-        <div id="tonder-checkout"></div>
-      </form>
-      <div class="button-container">
-        <button id="pay-button">Pagar</button>
+      <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>

package/src/shared/constants/paymentMethodAPM.js

@@ -0,0 +1,63 @@
+const PAYMENT_METHOD_APM = Object.freeze({
+  SORIANA: "SORIANA",
+  OXXO: "OXXO",
+  SPEI: "SPEI",
+  CODI: "CODI",
+  MERCADOPAGO: "MERCADOPAGO",
+  PAYPAL: "PAYPAL",
+  COMERCIALMEXICANA: "COMERCIALMEXICANA",
+  BANCOMER: "BANCOMER",
+  WALMART: "WALMART",
+  BODEGA: "BODEGA",
+  SAMSCLUB: "SAMSCLUB",
+  SUPERAMA: "SUPERAMA",
+  CALIMAX: "CALIMAX",
+  EXTRA: "EXTRA",
+  CIRCULOK: "CIRCULOK",
+  SEVEN11: "7ELEVEN",
+  TELECOMM: "TELECOMM",
+  BANORTE: "BANORTE",
+  BENAVIDES: "BENAVIDES",
+  DELAHORRO: "DELAHORRO",
+  ELASTURIANO: "ELASTURIANO",
+  WALDOS: "WALDOS",
+  ALSUPER: "ALSUPER",
+  KIOSKO: "KIOSKO",
+  STAMARIA: "STAMARIA",
+  LAMASBARATA: "LAMASBARATA",
+  FARMROMA: "FARMROMA",
+  FARMUNION: "FARMUNION",
+  FARMATODO: "FARMATODO",
+  SFDEASIS: "SFDEASIS",
+  FARM911: "FARM911",
+  FARMECONOMICAS: "FARMECONOMICAS",
+  FARMMEDICITY: "FARMMEDICITY",
+  RIANXEIRA: "RIANXEIRA",
+  WESTERNUNION: "WESTERNUNION",
+  ZONAPAGO: "ZONAPAGO",
+  CAJALOSANDES: "CAJALOSANDES",
+  CAJAPAITA: "CAJAPAITA",
+  CAJASANTA: "CAJASANTA",
+  CAJASULLANA: "CAJASULLANA",
+  CAJATRUJILLO: "CAJATRUJILLO",
+  EDPYME: "EDPYME",
+  KASNET: "KASNET",
+  NORANDINO: "NORANDINO",
+  QAPAQ: "QAPAQ",
+  RAIZ: "RAIZ",
+  PAYSER: "PAYSER",
+  WUNION: "WUNION",
+  BANCOCONTINENTAL: "BANCOCONTINENTAL",
+  GMONEY: "GMONEY",
+  GOPAY: "GOPAY",
+  WU: "WU",
+  PUNTOSHEY: "PUNTOSHEY",
+  AMPM: "AMPM",
+  JUMBOMARKET: "JUMBOMARKET",
+  SMELPUEBLO: "SMELPUEBLO",
+  BAM: "BAM",
+  REFACIL: "REFACIL",
+  ACYVALORES: "ACYVALORES",
+});
+
+export { PAYMENT_METHOD_APM };

package/src/shared/constants/tonderUrl.js

@@ -0,0 +1,8 @@
+const TONDER_URL_BY_MODE = Object.freeze({
+  production: "https://app.tonder.io",
+  sandbox: "https://sandbox.tonder.io",
+  stage: "https://stage.tonder.io",
+  development: "http://localhost:8000",
+});
+
+export { TONDER_URL_BY_MODE };

package/types/index.d.ts

@@ -0,0 +1,14 @@
+export interface InlineCheckoutOptions {
+    mode?: string;
+    apiKey: string;
+    returnUrl: string;
+    renderPaymentButton?: boolean;
+    callBack?: (response: any) => void;
+    styles?: Record<string, string>;
+  }
+  
+  export class InlineCheckout {
+    constructor(options: InlineCheckoutOptions);
+    injectCheckout(): void;
+  }
+