tonder-web-sdk 1.11.0-beta.1 → 1.11.0-beta.3

package/.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.12" project-jdk-type="Python SDK" />
+</project>

package/package.json

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

package/src/classes/3dsHandler.js

@@ -39,18 +39,6 @@ export class ThreeDSHandler {
     }
   }
 
-  saveCheckoutId(checkoutId) {
-    localStorage.setItem('checkout_id', JSON.stringify(checkoutId))
-  }
-
-  removeCheckoutId() {
-    localStorage.removeItem("checkout_id")
-  }
-
-  getCurrentCheckoutId() {
-    return JSON.parse(localStorage.getItem("checkout_id"));
-  }
-
   getUrlWithExpiration() {
     const item = JSON.parse(localStorage.getItem("verify_transaction_status"))
     if (!item) return

package/src/classes/globalLoader.js

@@ -0,0 +1,29 @@
+import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
+
+class GlobalLoader {
+  constructor() {
+    this.requestCount = 0;
+  }
+
+  show() {
+    this.requestCount++;
+    const checkoutContainer = document.querySelector("#global-loader");
+    if (checkoutContainer) {
+      checkoutContainer.innerHTML = cardTemplateSkeleton;
+      checkoutContainer.style.display = 'block';
+    }
+  }
+
+  remove() {
+    this.requestCount--;
+    if (this.requestCount <= 0) {
+      this.requestCount = 0;
+      const loader = document.querySelector('#global-loader');
+      if (loader) {
+        loader.style.display = 'none';
+      }
+    }
+  }
+}
+
+export const globalLoader = new GlobalLoader();

package/src/classes/inlineCheckout.js

@@ -21,6 +21,7 @@ import {
 } from '../helpers/utils';
 import { initSkyflow } from '../helpers/skyflow'
 import { ThreeDSHandler } from './3dsHandler.js';
+import { globalLoader } from './globalLoader.js';
 
 
 export class InlineCheckout {
@@ -152,7 +153,6 @@ export class InlineCheckout {
         this.#handleCard(data)
         const response = await this.#checkout()
         this.process3ds.setPayload(response)
-        this.process3ds.saveCheckoutId(response.checkout_id)
         this.callBack(response);
         const payload = await this.handle3dsRedirect(response)
         if (payload) {
@@ -248,38 +248,24 @@ export class InlineCheckout {
 
   async resumeCheckout(response) {
     if (["Failed", "Declined", "Cancelled"].includes(response?.status)) {
+      globalLoader.show()
       const routerItems = {
-        // TODO: Replace this with reponse.checkout_id
-        checkout_id: this.process3ds.getCurrentCheckoutId(),
+        checkout_id: response.checkout?.id,
       };
       const routerResponse = await startCheckoutRouter(
         this.baseUrl,
         this.apiKeyTonder,
         routerItems
       );
+      globalLoader.remove()
       return routerResponse
     }
     return response
   }
 
-  #addGlobalLoader() {
-    let checkoutContainer = document.querySelector("#global-loader");
-    if (checkoutContainer) {
-      checkoutContainer.innerHTML = cardTemplateSkeleton;
-      checkoutContainer.style.display = 'block';
-    }
-  }
-
-  #removeGlobalLoader() {
-    const loader = document.querySelector('#global-loader');
-    if (loader) {
-      loader.style.display = 'none';
-    }
-  }
-
   #mount(containerTonderCheckout) {
     containerTonderCheckout.innerHTML = cardTemplate({renderPaymentButton: this.renderPaymentButton, customStyles: this.customStyles});
-    this.#addGlobalLoader();
+    globalLoader.show()
     this.#mountTonder();
     InlineCheckout.injected = true;
   }
@@ -308,7 +294,8 @@ export class InlineCheckout {
       console.warn("Error getting APMS")
     }
   }
-  async #mountTonder(getCards = true) {
+
+  async #mountTonder(getCards = false) {
     this.#mountPayButton()
     try {
       const {
@@ -319,23 +306,16 @@ export class InlineCheckout {
         const customerResponse = await this.getCustomer({ email: this.email });
         if ("auth_token" in customerResponse) {
           const { auth_token } = customerResponse
-          const saveCardCheckbox = document.getElementById('save-card-container');
-
-          saveCardCheckbox.style.display = 'none';
-          if (this.mode !== 'production') {
-            const cards = await getCustomerCards(this.baseUrl, auth_token);
-            saveCardCheckbox.style.display = '';
+          const cards = await getCustomerCards(this.baseUrl, auth_token);
 
-            if ("cards" in cards) {
-              const cardsMapped = cards.cards.map(mapCards)
-              this.#loadCardsList(cardsMapped, auth_token)
-            }
+          if ("cards" in cards) {
+            const cardsMapped = cards.cards.map(mapCards)
+            this.#loadCardsList(cardsMapped, auth_token)
           }
-
-
         }
       }
-      this.#mountAPMs();
+      
+      await this.#mountAPMs();
 
       this.collectContainer = await initSkyflow(
         vault_id,
@@ -347,11 +327,11 @@ export class InlineCheckout {
         this.collectorIds
       );
       setTimeout(() => {
-        this.#removeGlobalLoader()
+        globalLoader.remove()
       }, 800)
     } catch (e) {
       if (e && e.name !== 'AbortError') {
-        this.#removeGlobalLoader()
+        globalLoader.remove()
         showError("No se pudieron cargar los datos del comercio.")
       }
     }
@@ -488,7 +468,7 @@ export class InlineCheckout {
         metadata: this.metadata,
         browser_info: getBrowserInfo(),
         currency: this.currency,
-        ...( !!selected_apm 
+        ...( !!selected_apm
           ? {payment_method: selected_apm.payment_method}
           : {card: cardTokens}
         )
@@ -537,7 +517,7 @@ export class InlineCheckout {
           .filter((apm) =>
             clearSpace(apm.category.toLowerCase()) !== 'cards' && apm.status.toLowerCase() === 'active')
           .sort((a, b) => a.priority - b.priority);
-  
+
         queryElement.innerHTML = apmItemsTemplate(filteredAndSortedApms);
         clearInterval(injectInterval);
         this.#mountRadioButtons();
@@ -545,7 +525,7 @@ export class InlineCheckout {
       }
     }, 500);
   }
-  
+
   #mountRadioButtons(token = '') {
     const radioButtons = document.getElementsByName(`card_selected`);
     for (const radio of radioButtons) {
@@ -571,7 +551,7 @@ export class InlineCheckout {
     }
     if (radio.id === "new") {
       if (this.radioChecked !== radio.id) {
-        this.#addGlobalLoader()
+        globalLoader.show()
         this.#mountTonder(false);
         InlineCheckout.injected = true;
       }

package/src/helpers/template.js

@@ -19,12 +19,6 @@ export const cardTemplate = (data) => `
       <div id="collectExpirationYear" class="expiration-year"></div>
       <div id="collectCvv" class="empty-div"></div>
     </div>
-    <div class="checkbox" id="save-card-container">
-      <input id="save-checkout-card" type="checkbox">
-      <label for="save-checkout-card">
-        Guardar tarjeta para pagos futuros
-      </label>
-    </div>
     <div id="msgError"></div>
     <div id="msgNotification"></div>
   </div>
@@ -186,6 +180,8 @@ export const cardTemplate = (data) => `
   flex-direction: column;
   padding: ;
   gap: 33% 20px;
+  max-height: 300px;
+  overflow-y: auto;
 }
 .pay-new-card {
   display: flex;
@@ -485,14 +481,18 @@ export const cardItemsTemplate = (cards) => {
 }
 
 export const apmItemsTemplate = (apms) => {
-  
+
   const apmItemsHTML = apms.reduce((total, apm) => {
     const apm_data = getAPMType(apm.payment_method);
     return `${total}
     <div class="apm-item" id="card_container-${apm.pk}">
         <input id="${apm.pk}" class="card_selected" name="card_selected" type="radio"/>
         <label class="apm-item-label" for="${apm.pk}">
-          <img class="apm-image" src="${apm_data.icon}" />
+          
+          <div class="apm-image">
+            <div class="apm-image-border"></div>
+            <img src="${apm_data.icon}" />
+          </div>
           <div class="apm-name">${apm_data.label}</div>
         </label>
     </div>`
@@ -528,13 +528,26 @@ export const apmItemsTemplate = (apms) => {
       .apm-item .apm-name {
         font-size: 16px;
       }
-
       .apm-image {
+        width: 30px;
+        height: 30px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .apm-image img {
         width: auto;
         height: 30px;
-        text-align: left;
-        border: 1px solid #e2e8f0;
-        border-radius: 8px;
+      }
+      .apm-image-border{
+        position: absolute;
+        border: 1px solid #bababa36;
+        border-radius: 4px;
+        pointer-events: none;
+        box-sizing: border-box;
+        width: 100%;
+        height: 97%;
       }
 
       .card_selected {

package/src/index-dev.js

@@ -104,7 +104,7 @@ const successUrl = "http://127.0.0.1:8080/success"
 // const apiKey = "8365683bdc33dd6d50fe2397188d79f1a6765852";
 
 const inlineCheckout = new InlineCheckout({
-  mode: 'development',
+  mode: 'stage',
   apiKey,
   returnUrl,
   successUrl,