tonder-web-sdk 1.12.0-beta.1 → 1.12.0-beta.11

package/package.json

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

package/src/classes/BaseInlineCheckout.js

@@ -1,20 +1,19 @@
 import { ThreeDSHandler } from "./3dsHandler.js";
-import {createOrder, fetchBusiness, getOpenpayDeviceSessionID, registerOrFetchCustomer} from "../data";
+import {
+  createOrder,
+  fetchBusiness,
+  getOpenpayDeviceSessionID,
+  registerOrFetchCustomer,
+} from "../data";
 import { TONDER_URL_BY_MODE } from "../shared/constants/tonderUrl";
 import { globalLoader } from "./globalLoader";
-import {createPayment, startCheckoutRouter} from "../data/checkoutApi";
-import {getBrowserInfo, injectMercadoPagoSecurity} from "../helpers/utils";
+import { createPayment, startCheckoutRouter } from "../data/checkoutApi";
+import { getBrowserInfo, injectMercadoPagoSecurity } from "../helpers/utils";
 
 export class BaseInlineCheckout {
   baseUrl = "";
-  cartTotal = "0"
-  constructor({
-    mode = "stage",
-    apiKey,
-    returnUrl,
-    callBack = () => {},
-    sdkMode = "full",
-  }) {
+  cartTotal = "0";
+  constructor({ mode = "stage", apiKey, returnUrl, callBack = () => {} }) {
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
     this.callBack = callBack;
@@ -25,22 +24,43 @@ export class BaseInlineCheckout {
       apiKey: apiKey,
       baseUrl: this.baseUrl,
     });
-    this.sdkMode = sdkMode;
   }
 
+  /**
+   * 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>}.
+   * @public
+   */
   configureCheckout(data) {
     if ("customer" in data) this.#handleCustomer(data["customer"]);
   }
 
+  /**
+   * Verifies the 3DS transaction status.
+   * @returns {Promise<import("../../types").ITransaction | void>} The result of the 3DS verification and checkout resumption.
+   * @public
+   */
   async verify3dsTransaction() {
-    globalLoader.show(); // TODO: HOW?
+    globalLoader.show();
     const result3ds = await this.process3ds.verifyTransactionStatus();
     const resultCheckout = await this.#resumeCheckout(result3ds);
     this.process3ds.setPayload(resultCheckout);
-    globalLoader.remove(); // TODO: HOW?
+    globalLoader.remove();
     return this.#handle3dsRedirect(resultCheckout);
   }
 
+  /**
+   * Processes a payment.
+   * @param {import("../../types").IProcessPaymentRequest} data - Payment data including customer, cart, and other relevant information.
+   * @returns {Promise<import("../../types").IStartCheckoutResponse>} A promise that resolves with the payment response or 3DS redirect or is rejected with an error.
+   *
+   * @throws {Error} Throws an error if the checkout process fails. The error object contains
+   * additional `details` property with the response from the server if available.
+   * @property {import("../../types").IStartCheckoutErrorResponse} error.details - The response body from the server when an error occurs.
+   *
+   * @public
+   */
   payment(data) {
     return new Promise(async (resolve, reject) => {
       try {
@@ -92,13 +112,7 @@ export class BaseInlineCheckout {
     );
   }
 
-  async _handleCheckout(
-      {
-    card,
-    payment_method,
-    customer
-  }
-  ) {
+  async _handleCheckout({ card, payment_method, customer }) {
     const { openpay_keys, reference, business } = this.merchantData;
     const total = Number(this.cartTotal);
 

package/src/classes/LiteInlineCheckout.js

@@ -4,81 +4,163 @@ import {
   fetchCustomerCards,
   saveCustomerCard,
   removeCustomerCard,
+  registerOrFetchCustomer,
 } from "../data";
-import { buildErrorResponseFromCatch } from "../helpers/utils";
-import { getVaultToken } from "../data/skyflowApi";
 import { getSkyflowTokens } from "../helpers/skyflow";
+import { getPaymentMethodDetails } from "../shared/catalog/paymentMethodsCatalog";
+import { formatPublicErrorResponse } 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 });
   }
 
+  /**
+   * Initializes and prepares the checkout for use.
+   * This method set up the initial environment.
+   * @returns {Promise<void>} A promise that resolves when the checkout has been initialized.
+   * @throws {Error} If there's any problem during the checkout initialization.
+   * @public
+   */
   async injectCheckout() {
     await this._initializeCheckout();
   }
 
   /**
    * Retrieves the list of cards associated with a customer.
-   * @param {string} authToken - The customer's authentication token.
-   * @param {string} businessId - The business primary key.
-   * @returns {Promise<Object>} A promise that resolves with the customer's card data.
+   * @returns {Promise<import("../../types").ICustomerCardsResponse>} A promise that resolves with the customer's card data.
+   *
+   * @throws {import("../../types").IPublicError} Throws an error object if the operation fails.
+   *
    * @public
    */
-  async getCustomerCards(authToken, businessId) {
-    return await fetchCustomerCards(this.baseUrl, authToken, businessId);
+  async getCustomerCards() {
+    try {
+      const { auth_token } = await this.#getCustomer();
+      return await fetchCustomerCards(
+        this.baseUrl,
+        auth_token,
+        this.merchantData.business.pk,
+      );
+    } catch (error) {
+      throw formatPublicErrorResponse(
+        {
+          message: MESSAGES.getCardsError,
+        },
+        error,
+      );
+    }
   }
 
   /**
    * Saves a card to a customer's account. This method can be used to add a new card
    * or update an existing one.
-   * @param {string} authToken - The customer's authentication token.
-   * @param {string} businessId - The business primary key.
-   * @param {Object} card - The card information to be saved.
-   * @returns {Promise<Object>} A promise that resolves with the saved card data.
+   * @param {import("../../types").ISaveCardRequest} card - The card information to be saved.
+   * @returns {Promise<import("../../types").ISaveCardResponse>} A promise that resolves with the saved card data.
+   *
+   * @throws {import("../../types").IPublicError} Throws an error object if the operation fails.
+   *
    * @public
    */
-  async saveCustomerCard(authToken, businessId, card) {
-    const skyflowTokens = await getSkyflowTokens({
-      vault_id: vault_id,
-      vault_url: vault_url,
-      data: card,
-      baseUrl: this.baseUrl,
-      apiKey: this.apiKeyTonder,
-    });
-    
-    return await saveCustomerCard(
-      this.baseUrl,
-      authToken,
-      businessId,
-      skyflowTokens,
-    );
+  async saveCustomerCard(card) {
+    try {
+      const { auth_token } = await this.#getCustomer();
+      const { vault_id, vault_url, business } = this.merchantData;
+
+      const skyflowTokens = await getSkyflowTokens({
+        vault_id: vault_id,
+        vault_url: vault_url,
+        data: card,
+        baseUrl: this.baseUrl,
+        apiKey: this.apiKeyTonder,
+      });
+
+      return await saveCustomerCard(
+        this.baseUrl,
+        auth_token,
+        business?.pk,
+        skyflowTokens,
+      );
+    } catch (error) {
+      throw formatPublicErrorResponse(
+        {
+          message: MESSAGES.saveCardError,
+        },
+        error,
+      );
+    }
   }
 
   /**
    * Removes a card from a customer's account.
-   * @param {string} authToken - The customer's authentication token.
    * @param {string} skyflowId - The unique identifier of the card to be deleted.
-   * @param {string} businessId - The business primary key.
-   * @returns {Promise<Object>} A promise that resolves when the card is successfully deleted.
+   * @returns {Promise<string>} A promise that resolves when the card is successfully deleted.
+   *
+   * @throws {import("../../types").IPublicError} Throws an error object if the operation fails.
+   *
    * @public
    */
-  async removeCustomerCard(authToken, skyflowId, businessId) {
-    return await removeCustomerCard(
-      this.baseUrl,
-      authToken,
-      skyflowId,
-      businessId,
-    );
+  async removeCustomerCard(skyflowId) {
+    try {
+      const { auth_token } = await this.#getCustomer();
+      const { business } = this.merchantData;
+
+      return await removeCustomerCard(
+        this.baseUrl,
+        auth_token,
+        skyflowId,
+        business?.pk,
+      );
+    } catch (error) {
+      throw formatPublicErrorResponse(
+        {
+          message: MESSAGES.removeCardError,
+        },
+        error,
+      );
+    }
   }
 
   /**
    * Retrieves the list of available Alternative Payment Methods (APMs).
-   * @returns {Promise<Object>} A promise that resolves with the list of APMs.
+   * @returns {Promise<import("../../types").IPaymentMethod[]>} A promise that resolves with the list of APMs.
+   *
+   * @throws {import("../../types").IPublicError} Throws an error object if the operation fails.
+   *
    * @public
    */
-  async getCustomerAPMs() {
-    return await fetchCustomerAPMs(this.baseUrl, this.apiKeyTonder);
+  async getCustomerPaymentMethods() {
+    try {
+      const response = await fetchCustomerAPMs(this.baseUrl, this.apiKeyTonder);
+
+      const apms_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) {
+      throw formatPublicErrorResponse(
+        {
+          message: MESSAGES.getPaymentMethodsError,
+        },
+        error,
+      );
+    }
   }
 
   _setCartTotal(total) {
@@ -92,13 +174,21 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
     );
     const { vault_id, vault_url } = this.merchantData;
     let skyflowTokens;
-    skyflowTokens = await getSkyflowTokens({
-      vault_id: vault_id,
-      vault_url: vault_url,
-      data: card,
-      baseUrl: this.baseUrl,
-      apiKey: this.apiKeyTonder,
-    });
+    if (!payment_method || payment_method !== "" || payment_method === null) {
+      if (typeof payment_method === "string") {
+        skyflowTokens = {
+          skyflow_id: card,
+        };
+      } else {
+        skyflowTokens = await getSkyflowTokens({
+          vault_id: vault_id,
+          vault_url: vault_url,
+          data: card,
+          baseUrl: this.baseUrl,
+          apiKey: this.apiKeyTonder,
+        });
+      }
+    }
 
     return await this._handleCheckout({
       card: skyflowTokens,
@@ -106,4 +196,15 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
       customer,
     });
   }
+
+  async #getCustomer() {
+    if (!!this.#customerData) return this.#customerData;
+
+    this.#customerData = await registerOrFetchCustomer(
+      this.baseUrl,
+      this.apiKeyTonder,
+      this.customer,
+    );
+    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,17 +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";
 
-export class InlineCheckout extends BaseInlineCheckout{
+export class InlineCheckout extends BaseInlineCheckout {
   static injected = false;
   static cardsInjected = false
   static apmsInjected = false
@@ -101,18 +102,23 @@ export class InlineCheckout extends BaseInlineCheckout{
     this.cb = cb
   }
 
-  injectCheckout() {
-    console.log("HERE: 1", InlineCheckout.injected)
+  /**
+   * Injects the checkout into the DOM and initializes it.
+   * Checks for an existing container and sets up an observer if needed.
+   * @returns {void}
+   * @public
+   */
+  async injectCheckout() {
     if (InlineCheckout.injected) return
     const containerTonderCheckout = document.querySelector("#tonder-checkout");
     if (containerTonderCheckout) {
-      this.#mount(containerTonderCheckout)
+      await this.#mount(containerTonderCheckout)
       return;
     }
-    const observer = new MutationObserver((mutations, obs) => {
+    const observer = new MutationObserver(async (mutations, obs) => {
       const containerTonderCheckout = document.querySelector("#tonder-checkout");
       if (containerTonderCheckout) {
-        this.#mount(containerTonderCheckout)
+        await this.#mount(containerTonderCheckout)
         obs.disconnect();
       }
     });
@@ -123,21 +129,21 @@ export class InlineCheckout extends BaseInlineCheckout{
     });
   }
 
-  #mount(containerTonderCheckout) {
-    containerTonderCheckout.innerHTML = cardTemplate({renderPaymentButton: this.renderPaymentButton, customStyles: this.customStyles});
+  async #mount(containerTonderCheckout) {
+    containerTonderCheckout.innerHTML = cardTemplate({ renderPaymentButton: this.renderPaymentButton, customStyles: this.customStyles });
     globalLoader.show()
-    this.#mountTonder();
+    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")
     }
   }
@@ -189,6 +195,21 @@ export class InlineCheckout extends BaseInlineCheckout{
     }
   }
 
+  /**
+   * Removes the checkout from the DOM and cleans up associated resources.
+   *
+   * This method performs the following actions:
+   * 1. Resets the injection status flags for the checkout, cards, and APMs.
+   * 2. Aborts any ongoing requests using the AbortController.
+   * 3. Creates a new AbortController for future use.
+   * 4. Clears any existing injection intervals.
+   *
+   * Note: This method should be called when you want to completely remove
+   * the checkout from the page and reset its state.
+   *
+   * @returns {void}
+   * @public
+   */
   removeCheckout() {
     InlineCheckout.injected = false
     InlineCheckout.cardsInjected = false
@@ -235,39 +256,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("Tarjeta registrada con éxito", 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
       });
 
@@ -287,6 +284,33 @@ export class InlineCheckout extends BaseInlineCheckout{
     }
   };
 
+  async #handleSaveCard(auth_token, businessId, cardTokens) {
+    const saveCard = document.getElementById("save-checkout-card");
+    if (saveCard && "checked" in saveCard && saveCard.checked) {
+      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)
+        }
+      }
+
+      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)
+      }
+    }
+  }
   #loadCardsList(cards, token) {
     if (this.cardsInjected) return;
     const injectInterval = setInterval(() => {
@@ -370,8 +394,7 @@ export class InlineCheckout extends BaseInlineCheckout{
         }
         const businessId = this.merchantData.business.pk
         await removeCustomerCard(this.baseUrl, customerToken, skyflow_id, businessId)
-      } catch {
-      } finally {
+      } catch (error) { } finally {
         this.deletingCards = this.deletingCards.filter(id => id !== skyflow_id);
         this.#refreshCardOnDelete(customerToken)
       }

package/src/data/apmApi.js

@@ -9,7 +9,7 @@ import {
  * @param {string} apiKey - The API key for authentication.
  * @param params - The query params to filter APMs
  * @param {AbortSignal} signal - The abort signal to cancel the request.
- * @returns {Promise<Object>} The available APMs.
+ * @returns {Promise<import("../../types").IPaymentMethodResponse>} The available APMs.
  */
 export async function fetchCustomerAPMs(
   baseUrl,

package/src/data/cardApi.js

@@ -2,14 +2,20 @@ import {
   buildErrorResponse,
   buildErrorResponseFromCatch,
 } from "../helpers/utils";
+import {MESSAGES} from "../shared/constants/messages";
 
 /**
- * Saves/Update a customer's card information.
- * @param {string} baseUrl - The base URL of the  API.
+ * Saves or updates a customer's card information.
+ *
+ * This function sends a POST request to save or update the card information for a customer.
+ *
+ * @param {string} baseUrl - The base URL of the API.
  * @param {string} customerToken - The customer's authentication token.
- * @param {string} businessId - The business ID.
- * @param {Object} data - The card information to be saved.
- * @returns {Promise<Object>} The saved card data.
+ * @param {string | number} businessId - The business ID.
+ * @param {import("../../types").ISaveCardSkyflowRequest} data - The card information to be saved.
+ * @returns {Promise<import("../../types").ISaveCardResponse>} The saved card data.
+ *
+ * @throws {import("../../types").IApiError} Throws an error object if the save/update operation fails.
  */
 export async function saveCustomerCard(
   baseUrl,
@@ -31,7 +37,6 @@ export async function saveCustomerCard(
     if (response.ok) return await response.json();
 
     const res_json = await response.json();
-
     if (response.status === 409) {
       if ((res_json.error = "Card number already exists.")) {
         return {
@@ -54,7 +59,9 @@ export async function saveCustomerCard(
  * @param {string} customerToken - The customer's authentication token.
  * @param {string} skyflowId - The Skyflow ID of the card to be removed.
  * @param {string} businessId - The business ID.
- * @returns {Promise<Object>} The result of the card removal operation.
+ * @returns {Promise<string>} The result of the card removal operation.
+ *
+ * @throws {import("../../types").IApiError} Throws an error object if the operation fails.
  */
 export async function removeCustomerCard(
   baseUrl,
@@ -73,7 +80,8 @@ export async function removeCustomerCard(
       },
     });
 
-    if (response.ok) return await response.json();
+    if(response.status === 204) return MESSAGES.cardSaved;
+    if (response.ok && "json" in response) return await response.json();
     const res_json = await response.json();
 
     throw await buildErrorResponse(response, res_json);
@@ -88,7 +96,9 @@ export async function removeCustomerCard(
  * @param {string} customerToken - The customer's authentication token.
  * @param {string} businessId - The business ID.
  * @param {AbortSignal} signal - The abort signal to cancel the request.
- * @returns {Promise<Object>} The customer's saved cards.
+ * @returns {Promise<import("../../types").ICustomerCardsResponse>} The customer's saved cards.
+ *
+ * @throws {import("../../types").IApiError} Throws an error object if the operation fails.
  */
 export async function fetchCustomerCards(
   baseUrl,
@@ -106,11 +116,11 @@ export async function fetchCustomerCards(
       },
       signal,
     });
-
     if (response.ok) return await response.json();
     const res_json = await response.json();
-    throw await buildErrorResponse(response, res_json);
+
+    throw await buildErrorResponse(response, res_json, MESSAGES.getCardsError);
   } catch (error) {
-    throw buildErrorResponseFromCatch(error);
+    throw buildErrorResponseFromCatch(error, MESSAGES.getCardsError);
   }
 }

package/src/data/checkoutApi.js

@@ -52,10 +52,19 @@ export async function createPayment(baseUrl, apiKey, paymentItems) {
 
 /**
  * Initiates the checkout process.
- * @param {string} baseUrl - The base URL of the  API.
+ *
+ * This function sends a POST request to the checkout router API with the provided
+ * checkout details. If the request is successful, it returns the response data.
+ * If the request fails, it throws an error that includes the status and details of the failure.
+ *
+ * @param {string} baseUrl - The base URL of the API.
  * @param {string} apiKey - The API key for authentication.
- * @param {Object} routerItems - The checkout details.
- * @returns {Promise<Object>} The checkout process result.
+ * @param {import("../../types").IStartCheckoutRequest | import("../../types").IStartCheckoutIdRequest} routerItems - The checkout details to be sent in the request body.
+ * @returns {Promise<import("../../types").IStartCheckoutResponse>} The checkout process result.
+ *
+ * @throws {Error} Throws an error if the checkout process fails. The error object contains
+ * additional `details` property with the response from the server if available.
+ * @property {import("../../types").IStartCheckoutErrorResponse} error.details - The response body from the server when an error occurs.
  */
 export async function startCheckoutRouter(baseUrl, apiKey, routerItems) {
     try {
@@ -70,10 +79,12 @@ export async function startCheckoutRouter(baseUrl, apiKey, routerItems) {
             body: JSON.stringify(data),
         });
         if (response.status >= 200 && response.status <= 299) {
-            const jsonResponse = await response.json();
-            return jsonResponse;
+            return await response.json();
         } else {
-            throw new Error("Failed to start checkout router")
+            const errorResponse = await response.json();
+            const error = new Error("Failed to start checkout router");
+            error.details = errorResponse;
+            throw error;
         }
     } catch (error) {
         throw error