tonder-web-sdk 1.12.0-beta.8 → 1.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.12.0-beta.8",
+  "version": "1.12.3",
   "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/classes/BaseInlineCheckout.js

@@ -13,12 +13,7 @@ import { getBrowserInfo, injectMercadoPagoSecurity } from "../helpers/utils";
 export class BaseInlineCheckout {
   baseUrl = "";
   cartTotal = "0";
-  constructor({
-    mode = "stage",
-    apiKey,
-    returnUrl,
-    callBack = () => {},
-  }) {
+  constructor({ mode = "stage", apiKey, returnUrl, callBack = () => {} }) {
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
     this.callBack = callBack;
@@ -34,7 +29,7 @@ export class BaseInlineCheckout {
   /**
    * 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>}.
+   * @returns {void}.
    * @public
    */
   configureCheckout(data) {
@@ -75,7 +70,6 @@ export class BaseInlineCheckout {
         this.#handleMetadata(data);
         this.#handleCurrency(data);
         this.#handleCard(data);
-        console.log("data", data)
         const response = await this._checkout(data);
         this.process3ds.setPayload(response);
         this.callBack(response);
@@ -121,7 +115,6 @@ export class BaseInlineCheckout {
   async _handleCheckout({ card, payment_method, customer }) {
     const { openpay_keys, reference, business } = this.merchantData;
     const total = Number(this.cartTotal);
-
     try {
       let deviceSessionIdTonder;
       if (

package/src/classes/LiteInlineCheckout.js

@@ -8,13 +8,12 @@ import {
 } from "../data";
 import { getSkyflowTokens } from "../helpers/skyflow";
 import { getPaymentMethodDetails } from "../shared/catalog/paymentMethodsCatalog";
-import { formatPublicErrorResponse } from "../helpers/utils";
+import { formatPublicErrorResponse, getCardType } from "../helpers/utils";
 import { MESSAGES } from "../shared/constants/messages";
 
 export class LiteInlineCheckout extends BaseInlineCheckout {
   #customerData;
   constructor({ mode = "stage", apiKey, returnUrl, callBack = () => {} }) {
-
     super({ mode, apiKey, returnUrl, callBack });
   }
 
@@ -40,11 +39,18 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
   async getCustomerCards() {
     try {
       const { auth_token } = await this.#getCustomer();
-      return await fetchCustomerCards(
+      const response = await fetchCustomerCards(
         this.baseUrl,
         auth_token,
         this.merchantData.business.pk,
       );
+      return {
+        ...response,
+        cards: response.cards.map((ic) => ({
+          ...ic,
+          icon: getCardType(ic.fields.card_scheme),
+        })),
+      };
     } catch (error) {
       throw formatPublicErrorResponse(
         {
@@ -104,22 +110,22 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
    * @public
    */
   async removeCustomerCard(skyflowId) {
-    try{
+    try {
       const { auth_token } = await this.#getCustomer();
       const { business } = this.merchantData;
 
       return await removeCustomerCard(
-          this.baseUrl,
-          auth_token,
-          skyflowId,
-          business?.pk,
+        this.baseUrl,
+        auth_token,
+        skyflowId,
+        business?.pk,
       );
-    }catch (error){
+    } catch (error) {
       throw formatPublicErrorResponse(
-          {
-            message: MESSAGES.removeCardError,
-          },
-          error,
+        {
+          message: MESSAGES.removeCardError,
+        },
+        error,
       );
     }
   }
@@ -137,29 +143,29 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
       const response = await fetchCustomerAPMs(this.baseUrl, this.apiKeyTonder);
 
       const apms_results =
-          response && "results" in response && response["results"].length > 0
-              ? response["results"]
-              : [];
+        response && "results" in response && response["results"].length > 0
+          ? response["results"]
+          : [];
 
       return apms_results
-          .filter((apmItem) => apmItem.category.toLowerCase() !== "cards")
-          .map((apmItem) => {
-            const apm = {
-              id: apmItem.pk,
-              payment_method: apmItem.payment_method,
-              priority: apmItem.priority,
-              category: apmItem.category,
-              ...getPaymentMethodDetails(apmItem.payment_method),
-            };
-            return apm;
-          })
-          .sort((a, b) => a.priority - b.priority);
-    }catch (error){
+        .filter((apmItem) => apmItem.category.toLowerCase() !== "cards")
+        .map((apmItem) => {
+          const apm = {
+            id: apmItem.pk,
+            payment_method: apmItem.payment_method,
+            priority: apmItem.priority,
+            category: apmItem.category,
+            ...getPaymentMethodDetails(apmItem.payment_method),
+          };
+          return apm;
+        })
+        .sort((a, b) => a.priority - b.priority);
+    } catch (error) {
       throw formatPublicErrorResponse(
-          {
-            message: MESSAGES.getPaymentMethodsError,
-          },
-          error,
+        {
+          message: MESSAGES.getPaymentMethodsError,
+        },
+        error,
       );
     }
   }
@@ -169,7 +175,6 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
   }
 
   async _checkout({ card, payment_method }) {
-    console.log("_checkout", card, payment_method)
     const customer = await this._getCustomer(
       this.customer,
       this.abortController.signal,
@@ -177,7 +182,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
     const { vault_id, vault_url } = this.merchantData;
     let skyflowTokens;
     if (!payment_method || payment_method !== "" || payment_method === null) {
-      if (typeof payment_method === "string") {
+      if (typeof card === "string") {
         skyflowTokens = {
           skyflow_id: card,
         };
@@ -185,7 +190,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
         skyflowTokens = await getSkyflowTokens({
           vault_id: vault_id,
           vault_url: vault_url,
-          data: card,
+          data: {...card, card_number: card.card_number.replace(/\s+/g, '')},
           baseUrl: this.baseUrl,
           apiKey: this.apiKeyTonder,
         });
@@ -200,13 +205,13 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
   }
 
   async #getCustomer() {
-    if(!!this.#customerData) return this.#customerData;
+    if (!!this.#customerData) return this.#customerData;
 
     this.#customerData = await registerOrFetchCustomer(
-        this.baseUrl,
-        this.apiKeyTonder,
-        this.customer,
+      this.baseUrl,
+      this.apiKeyTonder,
+      this.customer,
     );
-    return this.#customerData
+    return this.#customerData;
   }
 }

package/src/classes/inlineCheckout.js

@@ -1,4 +1,4 @@
-import {apmItemsTemplate, cardItemsTemplate, cardTemplate} from '../helpers/template.js'
+import { apmItemsTemplate, cardItemsTemplate, cardTemplate } from '../helpers/template.js'
 import {
   clearSpace,
   injectMercadoPagoSecurity,
@@ -6,18 +6,18 @@ import {
   showError,
   showMessage
 } from '../helpers/utils';
-import {initSkyflow} from '../helpers/skyflow'
-import {globalLoader} from './globalLoader.js';
-import {BaseInlineCheckout} from "./BaseInlineCheckout";
+import { initSkyflow } from '../helpers/skyflow'
+import { globalLoader } from './globalLoader.js';
+import { BaseInlineCheckout } from "./BaseInlineCheckout";
 import {
   fetchCustomerCards,
   removeCustomerCard,
   saveCustomerCard,
   fetchCustomerAPMs
 } from "../data";
-import {MESSAGES} from "../shared/constants/messages";
+import { MESSAGES } from "../shared/constants/messages";
 
-export class InlineCheckout extends BaseInlineCheckout{
+export class InlineCheckout extends BaseInlineCheckout {
   static injected = false;
   static cardsInjected = false
   static apmsInjected = false
@@ -42,19 +42,35 @@ export class InlineCheckout extends BaseInlineCheckout{
     msgNotification: "msgNotification",
     apmsListContainer: "apmsListContainer"
   }
-
+  customization = {
+    saveCards: {
+      showSaveCardOption: false,
+      showSaved: false,
+      autoSave: false
+    }
+  }
   constructor({
     mode = "stage",
     apiKey,
     returnUrl,
     renderPaymentButton = false,
     callBack = () => { },
-    styles
+    styles,
+    customization,
   }) {
     super({ mode, apiKey, returnUrl, callBack });
     this.renderPaymentButton = renderPaymentButton;
     this.customStyles = styles
-    this.abortRefreshCardsController = new AbortController()
+    this.abortRefreshCardsController = new AbortController();
+    // TODO: Wait until SaveCards is ready (server token).
+    // this.customization = {
+    //   ...this.customization,
+    //   ...(customization || {}),
+    //   saveCards: {
+    //     ...this.customization.saveCards,
+    //     ...(customization?.saveCards || {}),
+    //   },
+    // } 
   }
 
   #mountPayButton() {
@@ -130,20 +146,20 @@ export class InlineCheckout extends BaseInlineCheckout{
   }
 
   async #mount(containerTonderCheckout) {
-    containerTonderCheckout.innerHTML = cardTemplate({renderPaymentButton: this.renderPaymentButton, customStyles: this.customStyles});
+    containerTonderCheckout.innerHTML = cardTemplate({ renderPaymentButton: this.renderPaymentButton, customStyles: this.customStyles, customization: this.customization });
     globalLoader.show()
     await this.#mountTonder();
     InlineCheckout.injected = true;
   }
 
   async #mountAPMs() {
-    try{
+    try {
       const apms = await fetchCustomerAPMs(this.baseUrl, this.apiKeyTonder);
-      if(apms && apms['results'] && apms['results'].length > 0){
+      if (apms && apms['results'] && apms['results'].length > 0) {
         this.apmsData = apms['results']
         this.#loadAPMList(apms['results'])
       }
-    }catch(e){
+    } catch (e) {
       console.warn("Error getting APMS")
     }
   }
@@ -160,16 +176,7 @@ export class InlineCheckout extends BaseInlineCheckout{
         const customerResponse = await this._getCustomer({ email: this.email });
         if ("auth_token" in customerResponse) {
           const { auth_token } = customerResponse
-          const cards = await fetchCustomerCards(
-            this.baseUrl,
-            auth_token,
-            this.merchantData.business.pk
-          );
-
-          if ("cards" in cards) {
-            const cardsMapped = cards.cards.map(mapCards)
-            this.#loadCardsList(cardsMapped, auth_token)
-          }
+          await this.#loadCardsList(auth_token)
         }
       }
 
@@ -256,39 +263,15 @@ export class InlineCheckout extends BaseInlineCheckout{
       )
       const { auth_token } = customerData;
       if (auth_token && this.email) {
-        const saveCard = document.getElementById("save-checkout-card");
-        if (saveCard && "checked" in saveCard && saveCard.checked) {
-          try {
-            await saveCustomerCard(this.baseUrl, auth_token, business.pk, {
-              skyflow_id: cardTokens.skyflow_id,
-            });
-            showMessage(MESSAGES.cardSaved, this.collectorIds.msgNotification);
-          } catch (error) {
-            if (error?.message) {
-              showError(error.message)
-            }
-          }
-
-          this.cardsInjected = false;
-
-          const cards = await fetchCustomerCards(
-            this.baseUrl,
-              auth_token,
-            this.merchantData.business.pk,
-          );
-          if ("cards" in cards) {
-            const cardsMapped = cards.cards.map((card) => mapCards(card))
-            this.#loadCardsList(cardsMapped, auth_token)
-          }
-        }
+        await this.#handleSaveCard(auth_token, business.pk, cardTokens)
       }
 
-      const selected_apm = this.apmsData ? this.apmsData.find((iapm) => iapm.pk ===  this.radioChecked):{};
+      const selected_apm = this.apmsData ? this.apmsData.find((iapm) => iapm.pk === this.radioChecked) : {};
 
       const jsonResponseRouter = await this._handleCheckout({
-        ...( selected_apm && Object.keys(selected_apm).length > 0
-            ? {payment_method: selected_apm.payment_method}
-            : {card: cardTokens}),
+        ...(selected_apm && Object.keys(selected_apm).length > 0
+          ? { payment_method: selected_apm.payment_method }
+          : { card: cardTokens }),
         customer: customerData
       });
 
@@ -308,17 +291,44 @@ export class InlineCheckout extends BaseInlineCheckout{
     }
   };
 
-  #loadCardsList(cards, token) {
-    if (this.cardsInjected) return;
-    const injectInterval = setInterval(() => {
-      const queryElement = document.querySelector(`#${this.collectorIds.cardsListContainer}`);
-      if (queryElement && InlineCheckout.injected) {
-        queryElement.innerHTML = cardItemsTemplate(cards)
-        clearInterval(injectInterval)
-        this.#mountRadioButtons(token)
-        this.cardsInjected = true
+  async #handleSaveCard(auth_token, businessId, cardTokens) {
+    const saveCard = document.getElementById("save-checkout-card");
+    if ((saveCard && "checked" in saveCard && saveCard.checked) || !!this.customization.saveCards?.autoSave) {
+      try {
+        await saveCustomerCard(this.baseUrl, auth_token, businessId, {
+          skyflow_id: cardTokens.skyflow_id,
+        });
+        showMessage(MESSAGES.cardSaved, this.collectorIds.msgNotification);
+      } catch (error) {
+        if (error?.message) {
+          showError(error.message)
+        }
       }
-    }, 500);
+
+      await this.#loadCardsList(auth_token)
+    }
+  }
+  async #loadCardsList(token) {
+    if(this.cardsInjected || !this.customization.saveCards?.showSaved) return;
+    this.cardsInjected = false
+    const cardsResponse = await fetchCustomerCards(
+        this.baseUrl,
+        token,
+        this.merchantData.business.pk,
+    );
+    let cards = []
+    if("cards" in cardsResponse) {
+      cards = cardsResponse.cards.map(mapCards)
+      const injectInterval = setInterval(() => {
+        const queryElement = document.querySelector(`#${this.collectorIds.cardsListContainer}`);
+        if (queryElement && InlineCheckout.injected) {
+          queryElement.innerHTML = cardItemsTemplate(cards)
+          clearInterval(injectInterval)
+          this.#mountRadioButtons(token)
+          this.cardsInjected = true
+        }
+      }, 500);
+    }
   }
 
   #loadAPMList(apms) {
@@ -391,7 +401,7 @@ export class InlineCheckout extends BaseInlineCheckout{
         }
         const businessId = this.merchantData.business.pk
         await removeCustomerCard(this.baseUrl, customerToken, skyflow_id, businessId)
-      } catch(error) {} finally {
+      } catch (error) { } finally {
         this.deletingCards = this.deletingCards.filter(id => id !== skyflow_id);
         this.#refreshCardOnDelete(customerToken)
       }
@@ -399,17 +409,7 @@ export class InlineCheckout extends BaseInlineCheckout{
   }
   async #refreshCardOnDelete(customerToken) {
     if (this.deletingCards.length > 0) return;
-    this.cardsInjected = false
-    const cards = await fetchCustomerCards(
-      this.baseUrl,
-      customerToken,
-      this.merchantData.business.pk,
-      this.abortRefreshCardsController.signal
-    )
-    if ("cards" in cards) {
-      const cardsMapped = cards.cards.map(mapCards)
-      this.#loadCardsList(cardsMapped, customerToken)
-    }
+    await this.#loadCardsList(customerToken)
   }
   #unmountForm() {
     InlineCheckout.injected = false

package/src/helpers/template.js

@@ -3,7 +3,10 @@ import {getPaymentMethodDetails} from "../shared/catalog/paymentMethodsCatalog";
 
 export const cardTemplate = (data) => `
 <div class="container-tonder">
-  <div id="cardsListContainer" class="cards-list-container"></div>
+  ${ data.customization?.saveCards?.showSaved ?
+    `<div id="cardsListContainer" class="cards-list-container"></div>`
+    :``
+  }
   <div class="pay-new-card">
     <input checked id="new" class="card_selected" name="card_selected" type="radio"/>
     <label class="card-item-label-new" for="new">
@@ -20,12 +23,17 @@ export const cardTemplate = (data) => `
       <div id="collectExpirationYear" class="expiration-year"></div>
       <div id="collectCvv" class="empty-div"></div>
     </div>
+    ${!!data.customization?.saveCards?.showSaveCardOption 
+    ? `
     <div class="checkbox" id="save-card-container">
       <input id="save-checkout-card" type="checkbox">
       <label for="save-checkout-card">
         Guardar tarjeta para futuros pagos
       </label>
     </div>
+    `
+    :``}
+
     <div id="msgError"></div>
     <div id="msgNotification"></div>
   </div>