tonder-web-sdk 1.11.12 → 1.12.0-beta.0

package/src/classes/inlineCheckout.js

@@ -1,31 +1,22 @@
-import { apmItemsTemplate, cardItemsTemplate, cardTemplate } from '../helpers/template.js'
-import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
+import {apmItemsTemplate, cardItemsTemplate, cardTemplate} from '../helpers/template.js'
 import {
-  getBusiness,
-  customerRegister,
-  createOrder,
-  createPayment,
-  startCheckoutRouter,
-  getOpenpayDeviceSessionID,
-  getCustomerCards,
-  registerCard,
-  deleteCustomerCard,
-  getCustomerAPMs
-} from '../data/api';
-import {
-  showError,
-  getBrowserInfo,
-  mapCards,
-  showMessage,
   clearSpace,
-  injectMercadoPagoSecurity
+  injectMercadoPagoSecurity,
+  mapCards,
+  showError,
+  showMessage
 } from '../helpers/utils';
-import { initSkyflow } from '../helpers/skyflow'
-import { ThreeDSHandler } from './3dsHandler.js';
-import { globalLoader } from './globalLoader.js';
-
+import {initSkyflow} from '../helpers/skyflow'
+import {globalLoader} from './globalLoader.js';
+import {BaseInlineCheckout} from "./BaseInlineCheckout";
+import {
+  fetchCustomerCards,
+  removeCustomerCard,
+  saveCustomerCard,
+  fetchCustomerAPMs
+} from "../data";
 
-export class InlineCheckout {
+export class InlineCheckout extends BaseInlineCheckout{
   static injected = false;
   static cardsInjected = false
   static apmsInjected = false
@@ -33,7 +24,6 @@ export class InlineCheckout {
   deletingCards = [];
   customer = {}
   items = []
-  baseUrl = null
   collectContainer = null
   merchantData = {}
   cartTotal = null
@@ -56,36 +46,14 @@ export class InlineCheckout {
     mode = "stage",
     apiKey,
     returnUrl,
-    successUrl,
     renderPaymentButton = false,
     callBack = () => { },
     styles
   }) {
-    this.apiKeyTonder = apiKey;
-    this.returnUrl = returnUrl;
-    this.successUrl = successUrl;
+    super({ mode, apiKey, returnUrl, callBack });
     this.renderPaymentButton = renderPaymentButton;
-    this.callBack = callBack;
     this.customStyles = styles
-    this.mode = mode
-    this.baseUrl = this.#getBaseUrl()
-
-    this.abortController = new AbortController()
     this.abortRefreshCardsController = new AbortController()
-    this.process3ds = new ThreeDSHandler(
-      { apiKey: apiKey, baseUrl: this.baseUrl, successUrl: successUrl }
-    )
-  }
-
-  #getBaseUrl() {
-    const modeUrls = {
-      'production': 'https://app.tonder.io',
-      'sandbox': 'https://sandbox.tonder.io',
-      'stage': 'https://stage.tonder.io',
-      'development': 'http://localhost:8000',
-    };
-
-    return modeUrls[this.mode] || modeUrls['stage']
   }
 
   #mountPayButton() {
@@ -118,90 +86,7 @@ export class InlineCheckout {
     }
   }
 
-  async handle3dsRedirect(response) {
-    const iframe = response?.next_action?.iframe_resources?.iframe
-
-    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)
-      })
-    } else {
-      const redirectUrl = this.process3ds.getRedirectUrl()
-      if (redirectUrl) {
-        this.process3ds.redirectToChallenge()
-      } else {
-        return response;
-      }
-    }
-  }
-
-  payment(data) {
-    return new Promise(async (resolve, reject) => {
-      try {
-        this.#handleCustomer(data.customer)
-        this.setCartTotal(data.cart?.total)
-        this.setCartItems(data.cart?.items)
-        this.#handleMetadata(data)
-        this.#handleCurrency(data)
-        this.#handleCard(data)
-        const response = await this.#checkout()
-        this.process3ds.setPayload(response)
-        this.callBack(response);
-        const payload = await this.handle3dsRedirect(response)
-        if (payload) {
-          resolve(response);
-        }
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  #handleCustomer(customer) {
-    if (!customer) return
-
-    this.firstName = customer?.firstName
-    this.lastName = customer?.lastName
-    this.country = customer?.country
-    this.address = customer?.street
-    this.city = customer?.city
-    this.state = customer?.state
-    this.postCode = customer?.postCode
-    this.email = customer?.email
-    this.phone = customer?.phone
-    this.customer = customer
-  }
-
-  #handleMetadata(data) {
-    this.metadata = data?.metadata
-  }
-
-  #handleCurrency(data) {
-    this.currency = data?.currency
-  }
-
-  #handleCard(data) {
-    this.card = data?.card
-  }
-
-  setCartItems(items) {
-    this.cartItems = items
-  }
-
-  configureCheckout(data) {
-    if ('customer' in data)
-      this.#handleCustomer(data['customer'])
-  }
-  
-  setCartTotal(total) {
+  _setCartTotal(total) {
     this.cartTotal = total
     this.#updatePayButton()
   }
@@ -237,47 +122,6 @@ export class InlineCheckout {
     });
   }
 
-  async verify3dsTransaction () {
-    globalLoader.show()
-    const result3ds = await this.process3ds.verifyTransactionStatus()
-    const resultCheckout = await this.resumeCheckout(result3ds)
-    this.process3ds.setPayload(resultCheckout)
-    globalLoader.remove()
-    return this.handle3dsRedirect(resultCheckout)
-  }
-
-
-  async resumeCheckout(response) {
-    // Stop the routing process if the transaction is either hard declined or successful
-    if (response?.decline?.error_type === "Hard") {
-      return response
-    }
-
-    if (["Success", "Authorized"].includes(response?.transaction_status)) {
-      return response;
-    }
-
-    if (response) {
-      globalLoader.show()
-      const routerItems = {
-        checkout_id: response?.checkout?.id,
-      };
-      try {
-        const routerResponse = await startCheckoutRouter(
-          this.baseUrl,
-          this.apiKeyTonder,
-          routerItems
-        );
-        return routerResponse
-      } catch (error) {
-        // throw error
-      } finally {
-        globalLoader.remove()
-      }
-      return response
-    }
-  }
-
   #mount(containerTonderCheckout) {
     containerTonderCheckout.innerHTML = cardTemplate({renderPaymentButton: this.renderPaymentButton, customStyles: this.customStyles});
     globalLoader.show()
@@ -285,22 +129,9 @@ export class InlineCheckout {
     InlineCheckout.injected = true;
   }
 
-  async #fetchMerchantData() {
-    this.merchantData = await getBusiness(
-      this.baseUrl,
-      this.apiKeyTonder,
-      this.abortController.signal
-    );
-    return this.merchantData
-  }
-
-  async getCustomer(customer, signal) {
-    return await customerRegister(this.baseUrl, this.apiKeyTonder, customer, signal);
-  }
-
   async #mountAPMs() {
     try{
-      const apms = await getCustomerAPMs(this.baseUrl, this.apiKeyTonder, "?status=active&page_size=10000");
+      const apms = await fetchCustomerAPMs(this.baseUrl, this.apiKeyTonder);
       if(apms && apms['results'] && apms['results'].length > 0){
         this.apmsData = apms['results']
         this.#loadAPMList(apms['results'])
@@ -310,19 +141,23 @@ export class InlineCheckout {
     }
   }
 
-  async #mountTonder(getCards = false) {
+  async #mountTonder(getCards = true) {
     this.#mountPayButton()
+    await this._initializeCheckout()
     try {
       const {
         vault_id,
-        vault_url,
-        mercado_pago
-      } = await this.#fetchMerchantData();
+        vault_url
+      } = this.merchantData;
       if (this.email && getCards) {
-        const customerResponse = await this.getCustomer({ email: this.email });
+        const customerResponse = await this._getCustomer({ email: this.email });
         if ("auth_token" in customerResponse) {
           const { auth_token } = customerResponse
-          const cards = await getCustomerCards(this.baseUrl, auth_token);
+          const cards = await fetchCustomerCards(
+            this.baseUrl,
+            auth_token,
+            this.merchantData.business.pk
+          );
 
           if ("cards" in cards) {
             const cardsMapped = cards.cards.map(mapCards)
@@ -330,9 +165,6 @@ export class InlineCheckout {
           }
         }
       }
-      if (!!mercado_pago && !!mercado_pago.active){
-        injectMercadoPagoSecurity()
-      }
 
       await this.#mountAPMs();
 
@@ -380,16 +212,14 @@ export class InlineCheckout {
     }
   }
 
-  async #checkout() {
+  async _checkout() {
     try {
       document.querySelector("#tonderPayButton").disabled = true;
     } catch (error) {
     }
+    const { business } = this.merchantData
+    let cardTokens;
 
-    const { openpay_keys, reference, business } = this.merchantData
-    const total = Number(this.cartTotal)
-
-    let cardTokens = null;
     if (this.radioChecked === "new" || this.radioChecked === undefined) {
       cardTokens = await this.#getCardTokens();
     } else {
@@ -398,107 +228,47 @@ export class InlineCheckout {
       }
     }
     try {
-      let deviceSessionIdTonder;
-      if (openpay_keys.merchant_id && openpay_keys.public_key) {
-        deviceSessionIdTonder = await getOpenpayDeviceSessionID(
-          openpay_keys.merchant_id,
-          openpay_keys.public_key,
-          this.abortController.signal
-        );
-      }
-
-      const { id, auth_token } = await this.getCustomer(
+      const customerData = await this._getCustomer(
         this.customer,
         this.abortController.signal
       )
+      const { auth_token } = customerData;
       if (auth_token && this.email) {
         const saveCard = document.getElementById("save-checkout-card");
         if (saveCard && "checked" in saveCard && saveCard.checked) {
-          await registerCard(this.baseUrl, auth_token, { skyflow_id: cardTokens.skyflow_id });
+          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 getCustomerCards(this.baseUrl, auth_token);
+          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)
           }
-
-          showMessage("Tarjeta registrada con éxito", this.collectorIds.msgNotification);
-
         }
       }
-      var orderItems = {
-        business: this.apiKeyTonder,
-        client: auth_token,
-        billing_address_id: null,
-        shipping_address_id: null,
-        amount: total,
-        status: "A",
-        reference: reference,
-        is_oneclick: true,
-        items: this.cartItems,
-      };
-      const jsonResponseOrder = await createOrder(
-        this.baseUrl,
-        this.apiKeyTonder,
-        orderItems
-      );
-
-      // Create payment
-      const now = new Date();
-      const dateString = now.toISOString();
-
-      var paymentItems = {
-        business_pk: business.pk,
-        client_id: id,
-        amount: total,
-        date: dateString,
-        order_id: jsonResponseOrder.id,
-      };
-      const jsonResponsePayment = await createPayment(
-        this.baseUrl,
-        this.apiKeyTonder,
-        paymentItems
-      );
 
       const selected_apm = this.apmsData ? this.apmsData.find((iapm) => iapm.pk ===  this.radioChecked):{};
-      
-      // Checkout router
-      const routerItems = {
-        name: this.firstName || "",
-        last_name: this.lastName || "",
-        email_client: this.email,
-        phone_number: this.phone,
-        return_url: this.returnUrl,
-        id_product: "no_id",
-        quantity_product: 1,
-        id_ship: "0",
-        instance_id_ship: "0",
-        amount: total,
-        title_ship: "shipping",
-        description: "transaction",
-        device_session_id: deviceSessionIdTonder ? deviceSessionIdTonder : null,
-        token_id: "",
-        order_id: jsonResponseOrder.id,
-        business_id: business.pk,
-        payment_id: jsonResponsePayment.pk,
-        source: 'sdk',
-        metadata: this.metadata,
-        browser_info: getBrowserInfo(),
-        currency: this.currency,
-        ...( selected_apm && Object.keys(selected_apm).length > 0
-          ? {payment_method: selected_apm.payment_method}
-          : {card: cardTokens}
-        ),
-        ...(typeof MP_DEVICE_SESSION_ID !== "undefined" ? {mp_device_session_id: MP_DEVICE_SESSION_ID}:{})
-      };
 
-      const jsonResponseRouter = await startCheckoutRouter(
-        this.baseUrl,
-        this.apiKeyTonder,
-        routerItems
-      );
+      const jsonResponseRouter = await this._handleCheckout({
+        ...( selected_apm && Object.keys(selected_apm).length > 0
+            ? {payment_method: selected_apm.payment_method}
+            : {card: cardTokens}),
+        customer: customerData
+      });
 
       if (jsonResponseRouter) {
         try {
@@ -559,6 +329,7 @@ export class InlineCheckout {
     for (const cardButton of cardsButtons) {
       cardButton.addEventListener("click", (event) => {
         event.preventDefault();
+        event.stopImmediatePropagation();
         this.#handleDeleteCardButtonClick(token, cardButton)
       }, false);
     }
@@ -596,7 +367,8 @@ export class InlineCheckout {
           this.abortRefreshCardsController.abort();
           this.abortRefreshCardsController = new AbortController();
         }
-        await deleteCustomerCard(this.baseUrl, customerToken, skyflow_id)
+        const businessId = this.merchantData.business.pk
+        await removeCustomerCard(this.baseUrl, customerToken, skyflow_id, businessId)
       } catch {
       } finally {
         this.deletingCards = this.deletingCards.filter(id => id !== skyflow_id);
@@ -607,7 +379,12 @@ export class InlineCheckout {
   async #refreshCardOnDelete(customerToken) {
     if (this.deletingCards.length > 0) return;
     this.cardsInjected = false
-    const cards = await getCustomerCards(this.baseUrl, customerToken, "", this.abortRefreshCardsController.signal)
+    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)

package/src/data/apmApi.js

@@ -0,0 +1,44 @@
+import {
+  buildErrorResponse,
+  buildErrorResponseFromCatch,
+} from "../helpers/utils";
+
+/**
+ * Fetches Alternative Payment Methods (APMs) of a customer.
+ * @param {string} baseUrl - The base URL of the  API.
+ * @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.
+ */
+export async function fetchCustomerAPMs(
+  baseUrl,
+  apiKey,
+  params = {
+    status: "active",
+    pagesize: "10000",
+  },
+  signal = null,
+) {
+  try {
+    const queryString = new URLSearchParams(params).toString();
+
+    const response = await fetch(
+      `${baseUrl}/api/v1/payment_methods?${queryString}`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Token ${apiKey}`,
+          "Content-Type": "application/json",
+        },
+        signal,
+      },
+    );
+
+    if (response.ok) return await response.json();
+    const res_json = await response.json();
+    throw await buildErrorResponse(response, res_json);
+  } catch (error) {
+    throw buildErrorResponseFromCatch(error);
+  }
+}

package/src/data/businessApi.js

@@ -0,0 +1,19 @@
+/**
+ * Fetches business information.
+ * @param {string} baseUrl - The base URL of the Tonder API.
+ * @param {string} apiKey - The API key for authentication.
+ * @param {AbortSignal} signal - The abort signal to cancel the request.
+ * @returns {Promise<Object>} The business information.
+ */
+export async function fetchBusiness(baseUrl, apiKey, signal) {
+  const getBusiness = await fetch(
+    `${baseUrl}/api/v1/payments/business/${apiKey}`,
+    {
+      headers: {
+        Authorization: `Token ${apiKey}`,
+      },
+      signal: signal,
+    },
+  );
+  return await getBusiness.json();
+}

package/src/data/cardApi.js

@@ -0,0 +1,116 @@
+import {
+  buildErrorResponse,
+  buildErrorResponseFromCatch,
+} from "../helpers/utils";
+
+/**
+ * Saves/Update a customer's card information.
+ * @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.
+ */
+export async function saveCustomerCard(
+  baseUrl,
+  customerToken,
+  businessId,
+  data,
+) {
+  try {
+    const url = `${baseUrl}/api/v1/business/${businessId}/cards/`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        Authorization: `Token ${customerToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    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 {
+          code: 200,
+          body: res_json,
+          name: "",
+          message: res_json.error,
+        };
+      }
+    }
+    throw await buildErrorResponse(response, res_json);
+  } catch (error) {
+    throw buildErrorResponseFromCatch(error);
+  }
+}
+
+/**
+ * Removes a customer's card.
+ * @param {string} baseUrl - The base URL of the  API.
+ * @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.
+ */
+export async function removeCustomerCard(
+  baseUrl,
+  customerToken,
+  skyflowId = "",
+  businessId,
+) {
+  try {
+    const url = `${baseUrl}/api/v1/business/${businessId}/cards/${skyflowId}`;
+
+    const response = await fetch(url, {
+      method: "DELETE",
+      headers: {
+        Authorization: `Token ${customerToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (response.ok) return await response.json();
+    const res_json = await response.json();
+
+    throw await buildErrorResponse(response, res_json);
+  } catch (error) {
+    throw buildErrorResponseFromCatch(error);
+  }
+}
+
+/**
+ * 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} businessId - The business ID.
+ * @param {AbortSignal} signal - The abort signal to cancel the request.
+ * @returns {Promise<Object>} The customer's saved cards.
+ */
+export async function fetchCustomerCards(
+  baseUrl,
+  customerToken,
+  businessId,
+  signal= null,
+) {
+  try {
+    const url = `${baseUrl}/api/v1/business/${businessId}/cards/`;
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: `Token ${customerToken}`,
+        "Content-Type": "application/json",
+      },
+      signal,
+    });
+
+    if (response.ok) return await response.json();
+    const res_json = await response.json();
+    throw await buildErrorResponse(response, res_json);
+  } catch (error) {
+    throw buildErrorResponseFromCatch(error);
+  }
+}