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

package/.idea/workspace.xml

@@ -5,19 +5,15 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="37fc62e5-7dd0-4a2e-b68c-304069cdf5bd" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/.idea/prettier.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/classes/BaseInlineCheckout.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/classes/LiteInlineCheckout.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/data/apmApi.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/data/businessApi.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/data/cardApi.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/data/checkoutApi.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/data/customerApi.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/data/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/data/openPayApi.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/data/skyflowApi.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/shared/constants/paymentMethodAPM.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/shared/constants/tonderUrl.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/shared/catalog/paymentMethodsCatalog.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/types/card.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/types/checkout.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/types/common.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/types/customer.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/types/inlineCheckout.d.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/types/liteInlineCheckout.d.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/types/paymentMethod.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/types/transaction.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
@@ -25,9 +21,11 @@
       <change beforePath="$PROJECT_DIR$/src/data/api.js" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/src/helpers/constants.js" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/src/helpers/skyflow.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/helpers/skyflow.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/helpers/template.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/helpers/template.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/helpers/utils.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/helpers/utils.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index-dev.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index-dev.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/v1/bundle.min.js" beforeDir="false" afterPath="$PROJECT_DIR$/v1/bundle.min.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -59,25 +57,25 @@
     <option name="openDirectoriesWithSingleClick" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "Node.js.index-dev.js.executor": "Run",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "git-widget-placeholder": "develop",
-    "last_opened_file_path": "/Users/davidhernandezalmagro/Desktop/Tonder/tonder-sdk/src/shared/constants",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "prettierjs.PrettierConfiguration.Package": "/Users/davidhernandezalmagro/Desktop/Tonder/tonder-sdk/node_modules/prettier",
-    "settings.editor.selected.configurable": "settings.javascript.prettier",
-    "ts.external.directory.path": "/Applications/WebStorm.app/Contents/plugins/javascript-impl/jsLanguageServicesImpl/external",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;Node.js.index-dev.js.executor&quot;: &quot;Run&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;develop&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/Users/davidhernandezalmagro/Desktop/Tonder/tonder-sdk/src/shared/constants&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;/Users/davidhernandezalmagro/Desktop/Tonder/tonder-sdk/node_modules/prettier&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;settings.javascript.prettier&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/Applications/WebStorm.app/Contents/plugins/javascript-impl/jsLanguageServicesImpl/external&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/src/shared/constants" />
@@ -112,6 +110,7 @@
       <workItem from="1723774667217" duration="11739000" />
       <workItem from="1723855727317" duration="20341000" />
       <workItem from="1723952592527" duration="17418000" />
+      <workItem from="1724247675743" duration="28428000" />
     </task>
     <servers />
   </component>
@@ -134,13 +133,19 @@
       <breakpoints>
         <line-breakpoint enabled="true" type="javascript">
           <url>file://$PROJECT_DIR$/src/classes/inlineCheckout.js</url>
-          <line>151</line>
+          <line>158</line>
           <option name="timeStamp" value="1" />
         </line-breakpoint>
         <line-breakpoint enabled="true" type="javascript">
           <url>file://$PROJECT_DIR$/src/shared/constants/paymentMethodAPM.js</url>
           <option name="timeStamp" value="15" />
         </line-breakpoint>
+        <line-breakpoint enabled="true" type="javascript">
+          <url>file://$PROJECT_DIR$/src/classes/inlineCheckout.js</url>
+          <line>110</line>
+          <properties lambdaOrdinal="-1" />
+          <option name="timeStamp" value="17" />
+        </line-breakpoint>
       </breakpoints>
     </breakpoint-manager>
   </component>

package/package.json

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

package/src/classes/BaseInlineCheckout.js

@@ -1,19 +1,23 @@
 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"
+  cartTotal = "0";
   constructor({
     mode = "stage",
     apiKey,
     returnUrl,
     callBack = () => {},
-    sdkMode = "full",
   }) {
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
@@ -25,22 +29,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> | void} 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 +117,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,164 @@ 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 +175,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 !== "") {
+      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 +197,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

@@ -15,6 +15,7 @@ import {
   saveCustomerCard,
   fetchCustomerAPMs
 } from "../data";
+import {MESSAGES} from "../shared/constants/messages";
 
 export class InlineCheckout extends BaseInlineCheckout{
   static injected = 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,10 +129,10 @@ export class InlineCheckout extends BaseInlineCheckout{
     });
   }
 
-  #mount(containerTonderCheckout) {
+  async #mount(containerTonderCheckout) {
     containerTonderCheckout.innerHTML = cardTemplate({renderPaymentButton: this.renderPaymentButton, customStyles: this.customStyles});
     globalLoader.show()
-    this.#mountTonder();
+    await this.#mountTonder();
     InlineCheckout.injected = true;
   }
 
@@ -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
@@ -238,10 +259,10 @@ export class InlineCheckout extends BaseInlineCheckout{
         const saveCard = document.getElementById("save-checkout-card");
         if (saveCard && "checked" in saveCard && saveCard.checked) {
           try {
-            await saveCustomerCard(this.baseUrl, auth_token, business.pk, {
+            await saveCustomerCard(this.baseUrl, auth_token, 6655555, {
               skyflow_id: cardTokens.skyflow_id,
             });
-            showMessage("Tarjeta registrada con éxito", this.collectorIds.msgNotification);
+            showMessage(MESSAGES.cardSaved, this.collectorIds.msgNotification);
           } catch (error) {
             if (error?.message) {
               showError(error.message)
@@ -370,8 +391,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);
   }
 }