tonder-web-sdk 1.9.0 → 1.9.2-beta.1

package/README.md

@@ -11,7 +11,7 @@ npm i tonder-web-sdk
 
 or using an script tag
 ```html
-<script src="https://zplit-stage.s3.amazonaws.com/v1/bundle.min.js"></script>
+<script src="https://zplit-prod.s3.amazonaws.com/v1/bundle.min.js"></script>
 ```
 
 Add dependencies to the root of the app (index.html)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.9.0",
+  "version": "1.9.2-beta.1",
   "description": "tonder sdk for integrations",
   "main": "src/index.js",
   "scripts": {

package/src/helpers/skyflow.js

@@ -74,8 +74,6 @@ export async function initSkyflow(
 
   handleSkyflowElementEvents(
     cardHolderNameElement,
-    collectorIds.holderName,
-    "errorCardHolderIdTonder",
     "titular de la tarjeta"
   );
 
@@ -96,12 +94,9 @@ export async function initSkyflow(
 
   handleSkyflowElementEvents(
     cardNumberElement,
-    collectorIds.cardNumber,
-    "errorCardNumberIdTonder",
     "número de tarjeta"
   );
 
-
   const cvvElement = await collectContainer.create({
     table: "cards",
     column: "cvv",
@@ -112,12 +107,6 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
-  handleSkyflowElementEvents(
-    cvvElement,
-    collectorIds.cvv,
-    "errorCvvIdTonder"
-  );
-
   const expiryMonthElement = await collectContainer.create({
     table: "cards",
     column: "expiration_month",
@@ -128,12 +117,6 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
-  handleSkyflowElementEvents(
-    expiryMonthElement,
-    collectorIds.expirationMonth,
-    "errorExpiryMonthIdTonder"
-  );
-
   const expiryYearElement = await collectContainer.create({
     table: "cards",
     column: "expiration_year",
@@ -144,12 +127,6 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
-  handleSkyflowElementEvents(
-    expiryYearElement,
-    collectorIds.expirationYear,
-    "errorExpiryYearIdTonder"
-  );
-
   await mountElements(
     cardNumberElement,
     cvvElement,
@@ -185,28 +162,23 @@ async function mountElements(
 }
 
 
-function handleSkyflowElementEvents(element, elementId, errorElementId, fieldMessage= "", requiredMessage = "El campo es requerido", invalidMessage= "El campo es inválido") {
+function handleSkyflowElementEvents(element, fieldMessage= "", requiredMessage = "El campo es requerido", invalidMessage= "El campo es inválido") {
   if ("on" in element) {
     element.on(Skyflow.EventName.CHANGE, (state) => {
-      let errorElement = document.getElementById(errorElementId);
-      if (errorElement && state.isValid && !state.isEmpty) {
-        errorElement.remove();
+      if (state.isValid && !state.isEmpty) {
+        element.resetError();
       }
     });
 
     element.on(Skyflow.EventName.BLUR, (state) => {
-      let container = document.getElementById(elementId);
-      let errorElement = document.getElementById(errorElementId);
-      if (errorElement) {
-        errorElement.remove();
-      }
       if (!state.isValid) {
-        let errorLabel = document.createElement("div");
-        errorLabel.classList.add("error-custom-inputs-tonder");
-        errorLabel.id = errorElementId;
-        errorLabel.textContent = state.isEmpty ? requiredMessage : fieldMessage != "" ?`El campo ${fieldMessage} es inválido`: invalidMessage;
-        container?.appendChild(errorLabel);
+        const msj_error = state.isEmpty ? requiredMessage : fieldMessage != "" ?`El campo ${fieldMessage} es inválido`: invalidMessage;
+        element.setError(msj_error);
       }
     });
+
+    element.on(Skyflow.EventName.FOCUS, (state) => {
+      element.resetError();
+    });
   }
 }

package/src/helpers/template.js

@@ -35,7 +35,7 @@ export const cardTemplate = `
 .container-tonder {
   background-color: #F9F9F9;
   margin: 0 auto !important;
-  padding: 30px 10px 30px 10px;
+  padding: 30px 25px;
   overflow: hidden;
   transition: max-height 0.5s ease-out;
   max-width: 600px;
@@ -134,7 +134,8 @@ export const cardTemplate = `
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%
+  height: 100%;
+  z-index: 1;
 }
 
 @media screen and (max-width: 600px) {
@@ -174,12 +175,13 @@ export const cardTemplate = `
   justify-content: start;
   align-items: center;
   color: #1D1D1D;
-  gap: 33% 20px;
+  gap: 33% 15px;
   margin-top: 10px;
   margin-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
-  width: 90%;
+  width: 100%;
+  position: relative;
 }
 
 .pay-new-card .card-number {
@@ -199,15 +201,14 @@ export const cardTemplate = `
   gap: 33% 20px;
   margin-top: 10px;
   margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
+  width: 100%;
 }
 
 .card_selected {
   position: relative;
   width: 16px;
   height: 16px;
+  min-width: 16px;
   appearance: none;
   cursor: pointer;
   border-radius: 100%;
@@ -240,6 +241,7 @@ export const cardTemplate = `
   position: relative;
   width: 16px;
   height: 16px;
+  min-width: 16px;
   appearance: none;
   cursor: pointer;
   border-radius: 100%;
@@ -284,6 +286,7 @@ export const cardTemplate = `
   opacity: 10;
 }
 
+
 .error-custom-inputs-tonder {
   background-color: white;
   position: absolute;
@@ -337,16 +340,15 @@ export const cardItemsTemplate = (cards) => {
         gap: 33% 20px;
         margin-top: 10px;
         margin-bottom: 10px;
-        padding-left: 10px;
-        padding-right: 10px;
-        width: 90%;
+        width: 100%;
       }
 
       .card-item {
+        position: relative;
         display: flex;
         justify-content: start;
         align-items: center;
-        gap: 33% 20px;
+        gap: 33% 15px;
       }
 
       .card-item .card-number {
@@ -373,10 +375,10 @@ export const cardItemsTemplate = (cards) => {
         background-color: transparent !important;
         color: #D91C1C !important;
       }
-
       .card_selected {
         position: relative;
         width: 16px;
+        min-width: 16px;
         height: 16px;
         appearance: none;
         cursor: pointer;
@@ -410,6 +412,7 @@ export const cardItemsTemplate = (cards) => {
         position: relative;
         width: 16px;
         height: 16px;
+        min-width: 16px;
         appearance: none;
         cursor: pointer;
         border-radius: 100%;

package/.htaccess

@@ -1 +0,0 @@
-DirectoryIndex index.html

package/index.html

@@ -1,178 +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;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div class="checkout-container">
-      <div class="cart-details">
-        <span>Total&nbsp</span>
-        <div id="cart-total">$100</div>
-      </div>
-      <form id="payment-form">
-        <div id="tonder-checkout"></div>
-      </form>
-      <div class="button-container">
-        <button id="pay-button">Pagar</button>
-      </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>
-  <script src="./v1/bundle.min.js"></script>
-  <script>
-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 tarjeta',
-    cardLabel: 'Número de Tarjeta Personalizado',
-    cvvLabel: 'Código de Seguridad',
-    expiryMonthLabel: 'Mes de Expiración',
-    expiryYearLabel: 'Año de Expiración'
-  },
-  placeholders: {
-    cardPlaceholder: '0000 0000 0000 0000',
-    cvvPlaceholder: '123',
-    expiryMonthPlaceholder: 'MM',
-    expiryYearPlaceholder: 'AA'
-  }
-}
-
-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,
-      },
-    ]
-  }
-};
-
-const apiKey = "00d17d61e9240c6e0611fbdb1558e636ed6389db";
-const returnUrl = "http://web-sdk.tonderdemo.website/"
-const inlineCheckout = new TonderSdk.InlineCheckout({
-  apiKey,
-  returnUrl,
-  styles: customStyles
-});
-
-inlineCheckout.injectCheckout();
-
-document.addEventListener('DOMContentLoaded', function() {
-  const payButton = document.getElementById('pay-button');
-  payButton.addEventListener('click', async function() {
-    try {
-      payButton.textContent = 'Procesando...';
-      const response = await inlineCheckout.payment(checkoutData);
-      console.log(response)
-      alert('Pago realizado con éxito');
-    } catch (error) {
-      alert('Error al realizar el pago')
-    } finally {
-      payButton.textContent = 'Pagar';
-    }
-  });
-});
-  </script>
-</html>

package/success.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pago Completado</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            color: #333;
-        }
-    </style>
-</head>
-<body>
-    <h1>Pago completado con éxito</h1>
-</body>
-</html>