tonder-web-sdk 1.12.0-beta.9 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.12.0-beta.9",
+  "version": "1.14.0",
   "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/3dsHandler.js

@@ -6,7 +6,8 @@ export class ThreeDSHandler {
   }) {
     this.baseUrl = baseUrl,
     this.apiKey = apiKey,
-    this.payload = payload
+    this.payload = payload,
+    this.isTransactionPending = false
   }
 
   saveVerifyTransactionUrl() {
@@ -127,8 +128,6 @@ export class ThreeDSHandler {
     return response;
   }
 
-  // TODO: the method below needs to be tested with a real 3DS challenge
-  // since we couldn't get a test card that works with this feature
   async handle3dsChallenge(response_json) {
     // Create the form element:
     const form = document.createElement('form');
@@ -139,15 +138,17 @@ export class ThreeDSHandler {
     // Add hidden fields:
     const creqInput = document.createElement('input');
     creqInput.type = 'hidden';
-    creqInput.name = response_json.creq;
+    creqInput.name = 'creq';
     creqInput.value = response_json.creq;
     form.appendChild(creqInput);
 
-    const termUrlInput = document.createElement('input');
-    termUrlInput.type = 'hidden';
-    termUrlInput.name =  response_json.term_url;
-    termUrlInput.value = response_json.TermUrl;
-    form.appendChild(termUrlInput);
+    if (response_json.term_url) {
+      const termUrlInput = document.createElement('input');
+      termUrlInput.type = 'hidden';
+      termUrlInput.name = 'TermUrl';
+      termUrlInput.value = response_json.term_url;
+      form.appendChild(termUrlInput);
+    }
 
     // Append the form to the body:
     document.body.appendChild(form);
@@ -172,6 +173,14 @@ export class ThreeDSHandler {
   }
 
   async verifyTransactionStatus() {
+    console.log('Verificando la transacción...');
+
+    if (this.isTransactionPending) {
+      console.log('La transacción ya está en proceso');
+      return
+    }
+
+    this.isTransactionPending = true
     const verifyUrl = this.getUrlWithExpiration();
 
     if (verifyUrl) {
@@ -199,6 +208,8 @@ export class ThreeDSHandler {
     } else {
       console.log('No verify_transaction_status_url found');
     }
+
+    this.isTransactionPending = false
   }
 
   setPayload = (payload) => {

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,11 +29,12 @@ 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) {
     if ("customer" in data) this.#handleCustomer(data["customer"]);
+    if ("secureToken" in data) this.#handleSecureToken(data["secureToken"]);
   }
 
   /**
@@ -75,7 +71,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 +116,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 (
@@ -272,6 +266,10 @@ export class BaseInlineCheckout {
     this.customer = customer;
   }
 
+  #handleSecureToken(secureToken) {
+    this.secureToken = secureToken;
+  }
+
   #handleMetadata(data) {
     this.metadata = data?.metadata;
   }
@@ -289,23 +287,19 @@ export class BaseInlineCheckout {
   }
 
   async #handle3dsRedirect(response) {
+    console.log('Handling 3DS redirect...');
     const iframe = response?.next_action?.iframe_resources?.iframe;
+    const threeDsChallenge = response?.next_action?.three_ds_challenge;
 
     if (iframe) {
-      this.process3ds
-        .loadIframe()
-        .then(() => {
-          //TODO: Check if this will be necessary on the frontend side
-          // after some the tests in production, since the 3DS process
-          // doesn't works properly on the sandbox environment
-          // setTimeout(() => {
-          //   process3ds.verifyTransactionStatus();
-          // }, 10000);
-          this.process3ds.verifyTransactionStatus();
-        })
-        .catch((error) => {
-          console.log("Error loading iframe:", error);
-        });
+      try {
+        await this.process3ds.loadIframe();
+        await this.process3ds.verifyTransactionStatus();
+      } catch (error) {
+        console.log("Error loading iframe:", error);
+      }
+    } else if (threeDsChallenge) {
+      await this.process3ds.handle3dsChallenge(threeDsChallenge);
     } else {
       const redirectUrl = this.process3ds.getRedirectUrl();
       if (redirectUrl) {

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,49 @@ 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,
+          this.secureToken,
+          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.secureToken,
+        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) {
@@ -390,8 +405,14 @@ export class InlineCheckout extends BaseInlineCheckout{
           this.abortRefreshCardsController = new AbortController();
         }
         const businessId = this.merchantData.business.pk
-        await removeCustomerCard(this.baseUrl, customerToken, skyflow_id, businessId)
-      } catch(error) {} finally {
+        await removeCustomerCard(
+          this.baseUrl,
+          customerToken,
+          this.secureToken,
+          skyflow_id,
+          businessId
+        )
+      } catch (error) { } finally {
         this.deletingCards = this.deletingCards.filter(id => id !== skyflow_id);
         this.#refreshCardOnDelete(customerToken)
       }
@@ -399,17 +420,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/data/cardApi.js

@@ -11,6 +11,7 @@ import {MESSAGES} from "../shared/constants/messages";
  *
  * @param {string} baseUrl - The base URL of the API.
  * @param {string} customerToken - The customer's authentication token.
+ * @param {string} secureToken - Token generated by secure-token endpoint.
  * @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.
@@ -20,6 +21,7 @@ import {MESSAGES} from "../shared/constants/messages";
 export async function saveCustomerCard(
   baseUrl,
   customerToken,
+  secureToken,
   businessId,
   data,
 ) {
@@ -28,7 +30,8 @@ export async function saveCustomerCard(
     const response = await fetch(url, {
       method: "POST",
       headers: {
-        Authorization: `Token ${customerToken}`,
+        Authorization: `Bearer ${secureToken}`,
+        "User-Token": customerToken,
         "Content-Type": "application/json",
       },
       body: JSON.stringify(data),
@@ -57,6 +60,7 @@ export async function saveCustomerCard(
  * Removes a customer's card.
  * @param {string} baseUrl - The base URL of the  API.
  * @param {string} customerToken - The customer's authentication token.
+ * @param {string} secureToken - Token generated by secure-token endpoint.
  * @param {string} skyflowId - The Skyflow ID of the card to be removed.
  * @param {string} businessId - The business ID.
  * @returns {Promise<string>} The result of the card removal operation.
@@ -66,6 +70,7 @@ export async function saveCustomerCard(
 export async function removeCustomerCard(
   baseUrl,
   customerToken,
+  secureToken,
   skyflowId = "",
   businessId,
 ) {
@@ -75,8 +80,9 @@ export async function removeCustomerCard(
     const response = await fetch(url, {
       method: "DELETE",
       headers: {
-        Authorization: `Token ${customerToken}`,
+        Authorization: `Bearer ${secureToken}`,
         "Content-Type": "application/json",
+        "User-Token": customerToken,
       },
     });
 
@@ -94,6 +100,7 @@ export async function removeCustomerCard(
  * Fetches a customer's saved cards.
  * @param {string} baseUrl - The base URL of the  API.
  * @param {string} customerToken - The customer's authentication token.
+ * @param {string} secureToken - Token generated by secure-token endpoint.
  * @param {string} businessId - The business ID.
  * @param {AbortSignal} signal - The abort signal to cancel the request.
  * @returns {Promise<import("../../types").ICustomerCardsResponse>} The customer's saved cards.
@@ -103,6 +110,7 @@ export async function removeCustomerCard(
 export async function fetchCustomerCards(
   baseUrl,
   customerToken,
+  secureToken,
   businessId,
   signal= null,
 ) {
@@ -111,12 +119,21 @@ export async function fetchCustomerCards(
     const response = await fetch(url, {
       method: "GET",
       headers: {
-        Authorization: `Token ${customerToken}`,
-        "Content-Type": "application/json",
+        Authorization: `Bearer ${secureToken}`,
+        "User-Token": customerToken,
       },
       signal,
     });
     if (response.ok) return await response.json();
+    if (response.status === 401) {
+      return {
+        code: 401,
+        body: {},
+        name: "",
+        message: "Unauthorized",
+      };
+    }
+
     const res_json = await response.json();
 
     throw await buildErrorResponse(response, res_json, MESSAGES.getCardsError);