tonder-web-sdk 1.12.0-beta.10 → 1.12.0-beta.12

package/package.json

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

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);

package/src/classes/LiteInlineCheckout.js

@@ -14,7 +14,6 @@ import { MESSAGES } from "../shared/constants/messages";
 export class LiteInlineCheckout extends BaseInlineCheckout {
   #customerData;
   constructor({ mode = "stage", apiKey, returnUrl, callBack = () => {} }) {
-
     super({ mode, apiKey, returnUrl, callBack });
   }
 
@@ -104,22 +103,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 +136,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 +168,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,
@@ -200,13 +198,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
@@ -130,20 +130,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 });
     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")
     }
   }
@@ -256,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(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,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(() => {
@@ -391,7 +394,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)
       }

package/types/inlineCheckout.d.ts

@@ -5,14 +5,57 @@ import {ITransaction} from "./transaction";
 export class InlineCheckout {
     constructor(options: IInlineCheckoutOptions);
 
-    configureCheckout(data: IConfigureCheckout): Promise<void>;
+    /**
+     * 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 {void}.
+     * @public
+     */
+    configureCheckout(data: IConfigureCheckout): void;
 
+    /**
+     * Injects the checkout into the DOM and initializes it.
+     * Checks for an existing container and sets up an observer if needed.
+     * @returns {void}
+     * @public
+     */
     injectCheckout(): Promise<void>;
 
+    /**
+     * 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: IProcessPaymentRequest): Promise<IStartCheckoutResponse>;
 
+    /**
+     * Verifies the 3DS transaction status.
+     * @returns {Promise<import("../../types").ITransaction | void>} The result of the 3DS verification and checkout resumption.
+     * @public
+     */
     verify3dsTransaction(): Promise<ITransaction | void>;
 
+    /**
+     * 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(): void;
 }
 

package/types/liteInlineCheckout.d.ts

@@ -7,24 +7,88 @@ import {ITransaction} from "./transaction";
 export class LiteInlineCheckout {
     constructor(options: IInlineLiteCheckoutOptions);
 
+    /**
+     * 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: IConfigureCheckout): void;
 
+    /**
+     * 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
+     */
     injectCheckout(): Promise<void>;
 
+    /**
+     * 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: IProcessPaymentRequest): Promise<IStartCheckoutResponse>;
 
+    /**
+     * Verifies the 3DS transaction status.
+     * @returns {Promise<import("../../types").ITransaction | void>} The result of the 3DS verification and checkout resumption.
+     * @public
+     */
     verify3dsTransaction(): Promise<ITransaction | void>;
 
+    /**
+     * Retrieves the list of cards associated with a customer.
+     * @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
+     */
     getCustomerCards(): Promise<ICustomerCardsResponse>;
 
+    /**
+     * Saves a card to a customer's account. This method can be used to add a new card
+     * or update an existing one.
+     * @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
+     */
     saveCustomerCard(
         card: ISaveCardRequest,
     ): Promise<ISaveCardResponse>;
 
+    /**
+     * Removes a card from a customer's account.
+     * @param {string} skyflowId - The unique identifier of the card to be 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
+     */
     removeCustomerCard(
         skyflowId: string,
     ): Promise<void>;
 
+    /**
+     * Retrieves the list of available Alternative Payment Methods (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
+     */
     getCustomerPaymentMethods(): Promise<IPaymentMethod[]>;
 }