@tonder.io/ionic-full-sdk 0.0.25-beta → 0.0.26-beta

package/src/classes/inlineCheckout.ts

@@ -1,623 +1,735 @@
-import { Card, cardItemsTemplate, cardTemplate, CollectorIds } from '../helpers/template'
-import { LiteCheckout } from '@tonder.io/ionic-lite-sdk';
-import {
-  showError,
-  showMessage,
-  mapCards,
-  getBrowserInfo
-} from '../helpers/utils';
-import { initSkyflow } from '../helpers/skyflow'
-import { ThreeDSHandler } from './3dsHandler';
-import { ErrorResponse } from '@tonder.io/ionic-lite-sdk/dist/classes/errorResponse';
-import { Business, Customer, PaymentData, OrderItem } from '@tonder.io/ionic-lite-sdk/dist/types/commons';
-import { CustomerRegisterResponse, StartCheckoutResponse } from '@tonder.io/ionic-lite-sdk/dist/types/responses';
-import { StartCheckoutRequest, CreatePaymentRequest, CreateOrderRequest } from '@tonder.io/ionic-lite-sdk/dist/types/requests';
-import { InCollectorContainer } from '../helpers/skyflow';
-
-export type InlineCheckoutConstructor = {
-  returnUrl: string,
-  apiKey: string,
-  successUrl?: string,
-  renderPaymentButton: boolean,
-  callBack?: (params: any) => void,
-  styles?: any,
-  containerId?: string,
-  collectorIds?: CollectorIds,
-  isOpenPaySandbox?: boolean
-}
-
-export class InlineCheckout {
-  paymentData = {}
-  items = []
-  baseUrl = "https://stage.tonder.io";
-  collectContainer: InCollectorContainer | null = null;
-  cartTotal?: string | null | number
-  apiKeyTonder: string
-  returnUrl?: string
-  successUrl?: string
-  renderPaymentButton: boolean
-  callBack: (params: any) => void
-  customStyles: any
-  abortController: AbortController
-  process3ds: ThreeDSHandler
-  cb?: () => void
-  firstName?: string
-  lastName?: string
-  country?: string
-  address?: string
-  city?: string
-  state?: string
-  postCode?: string
-  email?: string
-  phone?: string
-  merchantData?: Business | ErrorResponse
-  cartItems?: any
-  injectInterval: any
-  containerId: string
-  injected: boolean
-  cardsInjected: boolean
-  collectorIds: CollectorIds
-  platforms?: string[]
-  liteCheckout: LiteCheckout
-  clientCards: Card[]
-  radioChecked: string | null
-  fetchingPayment: boolean
-  isOpenPaySandbox: boolean = true
-  metadata = {}
-  card = {}
-  currency: string = ""
-
-  constructor ({
-    apiKey,
-    returnUrl,
-    successUrl,
-    renderPaymentButton = false,
-    callBack = () => {},
-    styles,
-    containerId,
-    collectorIds,
-    isOpenPaySandbox
-  }: InlineCheckoutConstructor) {
-    this.apiKeyTonder = apiKey;
-    this.returnUrl = returnUrl;
-    this.successUrl = successUrl;
-    this.renderPaymentButton = renderPaymentButton;
-    this.callBack = callBack;
-    this.customStyles = styles
-
-    this.abortController = new AbortController()
-
-    this.liteCheckout = new LiteCheckout({
-      apiKeyTonder: apiKey,
-      baseUrlTonder: this.baseUrl,
-      signal: this.abortController.signal
-    })
-
-    this.process3ds = new ThreeDSHandler({ 
-      apiKey: apiKey, 
-      baseUrl: this.baseUrl, 
-      successUrl: successUrl 
-    })
-    this.containerId = containerId ? containerId : "tonder-checkout"
-    this.injected = false;
-    this.cardsInjected = false;
-    this.collectorIds = collectorIds ? collectorIds : {
-      cardsListContainer: "cardsListContainer",
-      holderName: "collectCardholderName",
-      cardNumber: "collectCardNumber",
-      expirationMonth: "collectExpirationMonth",
-      expirationYear: "collectExpirationYear",
-      cvv: "collectCvv",
-      tonderPayButton: "tonderPayButton",
-      msgError: "msgError",
-      msgNotification: "msgNotification"
-    }
-    this.clientCards = []
-    this.radioChecked = "new"
-    this.collectContainer = null;
-
-    this.fetchingPayment = false;
-
-    this.isOpenPaySandbox = isOpenPaySandbox === undefined ? true : isOpenPaySandbox
-  }
-
-  #mountPayButton() {
-    if (!this.renderPaymentButton) return;
-
-    const payButton: HTMLElement | null = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
-    
-    if (!payButton) {
-      console.error("Pay button not found");
-      return;
-    }
-
-    const LOCALE_MONEY = "en-Latn-US";
-
-    payButton.style.display = "block";
-    
-    const inCartTotal = Intl.NumberFormat(LOCALE_MONEY, { minimumFractionDigits: 2 }).format(this.cartTotal as number);
-    
-    payButton.textContent = `Pagar $${inCartTotal}`;
-    
-    payButton.onclick = async (event) => {
-      event.preventDefault();
-      await this.#handlePaymentClick(payButton);
-    };
-
-  }
-
-  async #handlePaymentClick(payButton: any) {
-    const prevButtonContent = payButton.innerHTML;
-    payButton.innerHTML = `<div class="lds-dual-ring"></div>`;
-    try {
-      const response = await this.payment(this.paymentData);
-      this.callBack(response);
-    } catch (error) {
-      console.error("Payment error:", error);
-    } finally {
-      payButton.innerHTML = prevButtonContent;
-    }
-  }
-
-  #handleMetadata(data: { metadata: any }) {
-    this.metadata = data?.metadata
-  }
-
-  #handleCurrency(data: { currency: string }) {
-    this.currency = data?.currency
-  }
-
-  #handleCard(data: { card: string }) {
-    this.card = data?.card
-  }
-
-  payment(data: any) {
-    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: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
-        if (response) {
-          const process3ds = new ThreeDSHandler({ 
-            payload: response, 
-            baseUrl: this.baseUrl,
-            apiKey: this.apiKeyTonder,
-            successUrl: this.successUrl
-          });
-          this.callBack(response);
-          if("next_action" in response) {
-            const iframe = response?.next_action?.iframe_resources?.iframe
-            if (iframe) {
-              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);
-                process3ds.verifyTransactionStatus();
-              }).catch((error) => {
-                console.log('Error loading iframe:', error)
-              })
-            } else {
-              const redirectUrl = process3ds.getRedirectUrl()
-              if (redirectUrl) {
-                process3ds.redirectToChallenge()
-              } else {
-                resolve(response);
-              }
-            }
-          }
-        }
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  #mountRadioButtons (token: string) {
-    const radioButtons: NodeListOf<HTMLElement> = document.getElementsByName(`card_selected`);
-    for (const radio of radioButtons) {
-      radio.style.display = "block";
-      radio.onclick = async (event) => {
-        //event.preventDefault();
-        await this.#handleRadioButtonClick(radio);
-      };
-    }
-    const cardsButtons: HTMLCollectionOf<Element> = document.getElementsByClassName("card-delete-button");
-    for (const cardButton of cardsButtons) {
-      cardButton.addEventListener("click", (event) => {
-        event.preventDefault();
-        this.#handleDeleteCardButtonClick(token, cardButton)
-      }, false);
-    }
-  }
-
-  async #handleDeleteCardButtonClick (customerToken: string, button: Element) {
-    const id = button.attributes.getNamedItem("id")
-    const skyflow_id = id?.value?.split("_")?.[2]
-    if(skyflow_id) {
-      const cardClicked: HTMLElement | null = document.querySelector(`#card_container-${skyflow_id}`);
-      if(cardClicked) {
-        cardClicked.style.display = "none"
-      }
-      await this.liteCheckout.deleteCustomerCard(customerToken, skyflow_id)
-      this.cardsInjected = false
-      const cards = await this.liteCheckout.getCustomerCards(customerToken)
-      if("cards" in cards) {
-        const cardsMapped: Card[] = cards.cards.map(mapCards)
-        this.loadCardsList(cardsMapped, customerToken)
-      }
-    }
-  }
-
-  async #handleRadioButtonClick (radio: HTMLElement) {
-    const containerForm: HTMLElement | null = document.querySelector(".container-form");
-    if(containerForm) {
-      containerForm.style.display = radio.id === "new" ? "block" : "none";
-    }
-    if(radio.id === "new") {
-      if(this.radioChecked !== radio.id) {
-        await this.#mountForm();
-      }
-    } else {
-      this.#unmountForm();
-    }
-    this.radioChecked = radio.id;
-  }
-
-  #handleCustomer(customer: 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
-  }
-
-  setCartItems (items: OrderItem[]) {
-    this.cartItems = items
-  }
-
-  setCustomerEmail (email: string) {
-    this.email = email
-  }
-
-  setPaymentData (data?: PaymentData) {
-    if (!data) return
-    this.paymentData = data
-  }
-
-  setCartTotal (total: string | number) {
-    this.cartTotal = total
-    this.#updatePayButton()
-  }
-
-  #updatePayButton() {
-    const payButton = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
-    if (!payButton) return
-    payButton.textContent = `Pagar $${this.cartTotal}`;
-  }
-
-  setCallback (cb: any) {
-    this.cb = cb
-  }
-
-  injectCheckout() {
-    if (this.injected) return
-    this.process3ds.verifyTransactionStatus()
-    const injectInterval = setInterval(() => {
-      const queryElement = document.querySelector(`#${this.containerId}`)
-      if (queryElement) {
-        queryElement.innerHTML = cardTemplate(this.customStyles ? true : false, this.collectorIds)
-        this.#mountTonder();
-        clearInterval(injectInterval);
-        this.injected = true
-      }
-    }, 500);
-  }
-
-  loadCardsList (cards: Card[], token: string) {
-    if(this.cardsInjected) return;
-    const injectInterval = setInterval(() => {
-      const queryElement = document.querySelector(`#${this.collectorIds.cardsListContainer}`);
-      if (queryElement && this.injected) {
-        queryElement.innerHTML = cardItemsTemplate(this.customStyles ? true : false, cards)
-        clearInterval(injectInterval)
-        this.#mountRadioButtons(token)
-        this.cardsInjected = true
-      }
-    }, 500);
-  }
-
-  async #fetchMerchantData() {
-    this.merchantData = await this.liteCheckout.getBusiness();
-    return this.merchantData
-  }
-
-  async getCustomer(email: string) {
-    return await this.liteCheckout.customerRegister(email);
-  }
-
-  async #mountTonder() {
-
-    this.#mountPayButton()
-
-    const result = await this.#fetchMerchantData();
-
-    if(result && "vault_id" in result) {
-      
-      const { vault_id, vault_url } = result;
-
-      if(this.email) {
-
-        const customerResponse : CustomerRegisterResponse | ErrorResponse = await this.getCustomer(this.email);
-
-        if("auth_token" in customerResponse) {
-
-          const { auth_token } = customerResponse
-
-          const cards = await this.liteCheckout.getCustomerCards(auth_token);
-
-          if("cards" in cards) {
-
-            const cardsMapped: Card[] = cards.cards.map(mapCards)
-  
-            this.loadCardsList(cardsMapped, auth_token)
-
-          }
-
-        }
-        
-      }
-
-      this.collectContainer = await initSkyflow(
-        vault_id,
-        vault_url,
-        this.baseUrl,
-        this.abortController.signal,
-        this.customStyles,
-        this.collectorIds,
-        this.apiKeyTonder
-      );
-
-    }
-
-  }
-
-  removeCheckout() {
-
-    this.injected = false
-    this.cardsInjected = false
-    // Cancel all requests
-    this.abortController.abort(); 
-    this.abortController = new AbortController();
-    clearInterval(this.injectInterval);
-    console.log("InlineCheckout removed from DOM and cleaned up.");
-
-  }
-
-  #unmountForm () {
-
-    this.injected = false
-    
-    if(this.collectContainer) {
-      if("unmount" in this.collectContainer.elements.cardHolderNameElement) this.collectContainer.elements.cardHolderNameElement.unmount() 
-      if("unmount" in this.collectContainer.elements.cardNumberElement) this.collectContainer.elements.cardNumberElement.unmount()
-      if("unmount" in this.collectContainer.elements.expiryYearElement) this.collectContainer.elements.expiryYearElement.unmount()
-      if("unmount" in this.collectContainer.elements.expiryMonthElement) this.collectContainer.elements.expiryMonthElement.unmount()
-      if("unmount" in this.collectContainer.elements.cvvElement) this.collectContainer.elements.cvvElement.unmount()
-    }
-
-  }
-
-  async #mountForm () {
-
-    const result = await this.#fetchMerchantData();
-
-    if(result && "vault_id" in result) {
-      
-      const { vault_id, vault_url } = result;
-
-      this.collectContainer = await initSkyflow(
-        vault_id,
-        vault_url,
-        this.baseUrl,
-        this.abortController.signal,
-        this.customStyles,
-        this.collectorIds,
-        this.apiKeyTonder
-      );
-
-    }
-
-  }
-
-  async #checkout() {
-
-    try {
-
-      try {
-
-        const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
-        
-        if(selector){
-          selector.disabled = true;
-          selector.innerHTML = "Cargando..."
-        }
-
-      } catch (error) { }
-
-      if(this.merchantData) {
-
-        if("openpay_keys" in this.merchantData) {
-
-          const { openpay_keys, reference, business } = this.merchantData
-
-          const total = Number(this.cartTotal)
-
-          let cardTokensSkyflowTonder: any = null;
-
-          if(this.radioChecked === "new") {
-
-            if(this.collectContainer && "container" in this.collectContainer && "collect" in this.collectContainer.container) {
-              try {
-                const collectResponseSkyflowTonder: any = await this.collectContainer?.container.collect();
-                cardTokensSkyflowTonder = await collectResponseSkyflowTonder["records"][0]["fields"];
-              } catch (error) {
-                showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-                throw error;
-              }
-            } else {
-              showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-            }
-            
-          } else {
-
-            cardTokensSkyflowTonder = {
-              skyflow_id: this.radioChecked
-            }
-            
-          }
-
-          let deviceSessionIdTonder: any;
-
-          if (openpay_keys.merchant_id && openpay_keys.public_key) {
-            deviceSessionIdTonder = await this.liteCheckout.getOpenpayDeviceSessionID(
-              openpay_keys.merchant_id,
-              openpay_keys.public_key,
-              this.isOpenPaySandbox
-            );
-          }
-
-          if(this.email) {
-
-            const customerResponse : CustomerRegisterResponse | ErrorResponse = await this.getCustomer(this.email);
-
-            if("auth_token" in customerResponse) {
-
-              const { auth_token, id: cutomerId } = customerResponse;
-
-              const saveCard: HTMLElement | null = document.getElementById("save-checkout-card");
-
-              if(saveCard && "checked" in saveCard && saveCard.checked) {
-
-                await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
-                
-                this.cardsInjected = false;
-
-                const cards = await this.liteCheckout.getCustomerCards(auth_token);
-
-                if("cards" in cards) {
-
-                  const cardsMapped: Card[] = cards.cards.map((card) => mapCards(card))
-        
-                  this.loadCardsList(cardsMapped, auth_token)
-
-                }
-
-                showMessage("Tarjeta registrada con éxito", this.collectorIds.msgNotification);
-                
-              }
-              
-              const orderItems: CreateOrderRequest = {
-                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 this.liteCheckout.createOrder(
-                orderItems
-              );
-
-              // Create payment
-              const now = new Date();
-              const dateString = now.toISOString();
-
-              if("id" in jsonResponseOrder) {
-
-                const paymentItems: CreatePaymentRequest = {
-                  business_pk: business.pk,
-                  amount: total,
-                  date: dateString,
-                  order_id: jsonResponseOrder.id,
-                  client_id: cutomerId
-                };
-
-                const jsonResponsePayment = await this.liteCheckout.createPayment(
-                  paymentItems
-                );
-    
-                // Checkout router
-                const routerItems: StartCheckoutRequest = {
-                  card: cardTokensSkyflowTonder,
-                  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: ("id" in jsonResponseOrder) && jsonResponseOrder.id,
-                  business_id: business.pk,
-                  payment_id: ("pk" in jsonResponsePayment) && jsonResponsePayment.pk,
-                  source: 'sdk',
-                  metadata: this.metadata,
-                  browser_info: getBrowserInfo(),
-                  currency: this.currency
-                };
-                
-                const jsonResponseRouter = await this.liteCheckout.startCheckoutRouter(
-                  routerItems
-                );
-                
-                if (jsonResponseRouter) {
-                  try {
-                    const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
-                    if(selector) {
-                      selector.disabled = false;
-                    }
-                  } catch {}
-                  return jsonResponseRouter;
-                } else {
-                  showError("No se ha podido procesar el pago", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-                  return false;
-                }
-              }
-            }
-          }
-        }
-      } else {
-        showError("No se han configurado los datos del proveedor de servicio", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-      }
-    } catch (error) {
-      console.log(error);
-      showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-      throw error;
-    } finally {
-      this.fetchingPayment = false;
-    }
-  };
+import { Card, cardItemsTemplate, cardTemplate, CollectorIds } from '../helpers/template'
+import { LiteCheckout } from '@tonder.io/ionic-lite-sdk';
+import {
+  showError,
+  showMessage,
+  mapCards,
+  getBrowserInfo
+} from '../helpers/utils';
+import { initSkyflow } from '../helpers/skyflow'
+import { ThreeDSHandler } from './3dsHandler';
+import { ErrorResponse } from '@tonder.io/ionic-lite-sdk/dist/classes/errorResponse';
+import { Business, Customer, PaymentData, OrderItem } from '@tonder.io/ionic-lite-sdk/dist/types/commons';
+import { CustomerRegisterResponse, StartCheckoutResponse } from '@tonder.io/ionic-lite-sdk/dist/types/responses';
+import { StartCheckoutRequest, CreatePaymentRequest, CreateOrderRequest } from '@tonder.io/ionic-lite-sdk/dist/types/requests';
+import { InCollectorContainer } from '../helpers/skyflow';
+
+export type InlineCheckoutConstructor = {
+  returnUrl: string,
+  apiKey: string,
+  successUrl?: string,
+  renderPaymentButton: boolean,
+  renderSaveCardButton: boolean,
+  callBack?: (params: any) => void,
+  styles?: any,
+  containerId?: string,
+  collectorIds?: CollectorIds,
+  isOpenPaySandbox?: boolean,
+  isEnrollmentCard?: boolean
+}
+
+export class InlineCheckout {
+  paymentData = {}
+  items = []
+  baseUrl = "https://stage.tonder.io";
+  collectContainer: InCollectorContainer | null = null;
+  cartTotal?: string | null | number
+  apiKeyTonder: string
+  returnUrl?: string
+  successUrl?: string
+  renderPaymentButton: boolean
+  renderSaveCardButton: boolean
+  callBack: (params: any) => void
+  customStyles: any
+  abortController: AbortController
+  process3ds: ThreeDSHandler
+  cb?: () => void
+  firstName?: string
+  lastName?: string
+  country?: string
+  address?: string
+  city?: string
+  state?: string
+  postCode?: string
+  email?: string
+  phone?: string
+  merchantData?: Business | ErrorResponse
+  cartItems?: any
+  injectInterval: any
+  containerId: string
+  injected: boolean
+  cardsInjected: boolean
+  collectorIds: CollectorIds
+  platforms?: string[]
+  liteCheckout: LiteCheckout
+  clientCards: Card[]
+  radioChecked: string | null
+  fetchingPayment: boolean
+  isOpenPaySandbox: boolean = true
+  metadata = {}
+  card = {}
+  currency: string = ""
+  isEnrollmentCard: boolean = false
+
+  constructor ({
+    apiKey,
+    returnUrl,
+    successUrl,
+    renderPaymentButton = false,
+    callBack = () => {},
+    styles,
+    containerId,
+    collectorIds,
+    isOpenPaySandbox,
+    isEnrollmentCard,
+    renderSaveCardButton = false,
+  }: InlineCheckoutConstructor) {
+    this.apiKeyTonder = apiKey;
+    this.returnUrl = returnUrl;
+    this.successUrl = successUrl;
+    this.renderPaymentButton = renderPaymentButton;
+    this.renderSaveCardButton = renderSaveCardButton;
+    this.callBack = callBack;
+    this.customStyles = styles
+
+    this.abortController = new AbortController()
+
+    this.liteCheckout = new LiteCheckout({
+      apiKeyTonder: apiKey,
+      baseUrlTonder: this.baseUrl,
+      signal: this.abortController.signal
+    })
+
+    this.process3ds = new ThreeDSHandler({ 
+      apiKey: apiKey, 
+      baseUrl: this.baseUrl, 
+      successUrl: successUrl 
+    })
+    this.containerId = containerId ? containerId : "tonder-checkout"
+    this.injected = false;
+    this.cardsInjected = false;
+    this.collectorIds = collectorIds ? collectorIds : {
+      cardsListContainer: "cardsListContainer",
+      holderName: "collectCardholderName",
+      cardNumber: "collectCardNumber",
+      expirationMonth: "collectExpirationMonth",
+      expirationYear: "collectExpirationYear",
+      cvv: "collectCvv",
+      tonderPayButton: "tonderPayButton",
+      msgError: "msgError",
+      msgNotification: "msgNotification",
+      tonderSaveCardButton: "tonderSaveCardButton"
+    }
+    this.clientCards = []
+    this.radioChecked = "new"
+    this.collectContainer = null;
+
+    this.fetchingPayment = false;
+
+    this.isOpenPaySandbox = isOpenPaySandbox === undefined ? true : isOpenPaySandbox
+    this.isEnrollmentCard = isEnrollmentCard === undefined ? false : isEnrollmentCard
+  }
+
+  #mountPayButton() {
+    if (!this.renderPaymentButton) return;
+
+    const payButton: HTMLElement | null = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+    
+    if (!payButton) {
+      console.error("Pay button not found");
+      return;
+    }
+
+    const LOCALE_MONEY = "en-Latn-US";
+
+    payButton.style.display = "block";
+    
+    const inCartTotal = Intl.NumberFormat(LOCALE_MONEY, { minimumFractionDigits: 2 }).format(this.cartTotal as number);
+    
+    payButton.textContent = `Pagar $${inCartTotal}`;
+    
+    payButton.onclick = async (event) => {
+      event.preventDefault();
+      await this.#handlePaymentClick(payButton);
+    };
+
+  }
+
+  async #handlePaymentClick(payButton: any) {
+    const prevButtonContent = payButton.innerHTML;
+    payButton.innerHTML = `<div class="lds-dual-ring"></div>`;
+    try {
+      const response = await this.payment(this.paymentData);
+      this.callBack(response);
+    } catch (error) {
+      console.error("Payment error:", error);
+    } finally {
+      payButton.innerHTML = prevButtonContent;
+    }
+  }
+
+  #mountSaveCardButton() {
+    if (!this.renderSaveCardButton) return;
+
+    const saveButton: HTMLElement | null = document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);
+    
+    if (!saveButton) {
+      console.error("Save button not found");
+      return;
+    }
+
+
+    saveButton.style.display = "block";
+    
+    saveButton.textContent = `Guardar`;
+    
+    saveButton.onclick = async (event) => {
+      event.preventDefault();
+      await this.#handleSaveCardClick(saveButton);
+    };
+
+  }
+
+  async #handleSaveCardClick(saveButton: any) {
+    const prevButtonContent = saveButton.innerHTML;
+    saveButton.innerHTML = `<div class="lds-dual-ring"></div>`;
+    try {
+      const response = await this.saveCard();
+      this.callBack(response);
+    } catch (error) {
+      console.error("Save card error:", error);
+    } finally {
+      saveButton.innerHTML = prevButtonContent;
+    }
+  }
+
+  #handleMetadata(data: { metadata: any }) {
+    this.metadata = data?.metadata
+  }
+
+  #handleCurrency(data: { currency: string }) {
+    this.currency = data?.currency
+  }
+
+  #handleCard(data: { card: string }) {
+    this.card = data?.card
+  }
+
+  payment(data: any) {
+    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: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
+        if (response) {
+          const process3ds = new ThreeDSHandler({ 
+            payload: response, 
+            baseUrl: this.baseUrl,
+            apiKey: this.apiKeyTonder,
+            successUrl: this.successUrl
+          });
+          this.callBack(response);
+          if("next_action" in response) {
+            const iframe = response?.next_action?.iframe_resources?.iframe
+            if (iframe) {
+              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);
+                process3ds.verifyTransactionStatus();
+              }).catch((error) => {
+                console.log('Error loading iframe:', error)
+              })
+            } else {
+              const redirectUrl = process3ds.getRedirectUrl()
+              if (redirectUrl) {
+                process3ds.redirectToChallenge()
+              } else {
+                resolve(response);
+              }
+            }
+          }
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  #mountRadioButtons (token: string) {
+    const radioButtons: NodeListOf<HTMLElement> = document.getElementsByName(`card_selected`);
+    for (const radio of radioButtons) {
+      radio.style.display = "block";
+      radio.onclick = async (event) => {
+        //event.preventDefault();
+        await this.#handleRadioButtonClick(radio);
+      };
+    }
+    const cardsButtons: HTMLCollectionOf<Element> = document.getElementsByClassName("card-delete-button");
+    for (const cardButton of cardsButtons) {
+      cardButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        this.#handleDeleteCardButtonClick(token, cardButton)
+      }, false);
+    }
+  }
+
+  async #handleDeleteCardButtonClick (customerToken: string, button: Element) {
+    const id = button.attributes.getNamedItem("id")
+    const skyflow_id = id?.value?.split("_")?.[2]
+    if(skyflow_id) {
+      const cardClicked: HTMLElement | null = document.querySelector(`#card_container-${skyflow_id}`);
+      if(cardClicked) {
+        cardClicked.style.display = "none"
+      }
+      await this.liteCheckout.deleteCustomerCard(customerToken, skyflow_id)
+      this.cardsInjected = false
+      const cards = await this.liteCheckout.getCustomerCards(customerToken)
+      if("cards" in cards) {
+        const cardsMapped: Card[] = cards.cards.map(mapCards)
+        this.loadCardsList(cardsMapped, customerToken)
+      }
+    }
+  }
+
+  async #handleRadioButtonClick (radio: HTMLElement) {
+    const containerForm: HTMLElement | null = document.querySelector(".container-form");
+    if(containerForm) {
+      containerForm.style.display = radio.id === "new" ? "block" : "none";
+    }
+    if(radio.id === "new") {
+      if(this.radioChecked !== radio.id) {
+        await this.#mountForm();
+      }
+    } else {
+      this.#unmountForm();
+    }
+    this.radioChecked = radio.id;
+  }
+
+  #handleCustomer(customer: 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
+  }
+
+  setCartItems (items: OrderItem[]) {
+    this.cartItems = items
+  }
+
+  setCustomerEmail (email: string) {
+    this.email = email
+  }
+
+  setPaymentData (data?: PaymentData) {
+    if (!data) return
+    this.paymentData = data
+  }
+
+  setCartTotal (total: string | number) {
+    this.cartTotal = total
+    this.#updatePayButton()
+  }
+
+  #updatePayButton() {
+    const payButton = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+    if (!payButton) return
+    payButton.textContent = `Pagar $${this.cartTotal}`;
+  }
+
+  setCallback (cb: any) {
+    this.cb = cb
+  }
+
+  injectCheckout() {
+    if (this.injected) return
+    this.process3ds.verifyTransactionStatus()
+    const injectInterval = setInterval(() => {
+      const queryElement = document.querySelector(`#${this.containerId}`)
+      if (queryElement) {
+        queryElement.innerHTML = cardTemplate(this.customStyles ? true : false, this.collectorIds, this.isEnrollmentCard)
+        this.#mountTonder();
+        clearInterval(injectInterval);
+        this.injected = true
+      }
+    }, 500);
+  }
+
+  loadCardsList (cards: Card[], token: string) {
+    if(this.cardsInjected) return;
+    const injectInterval = setInterval(() => {
+      const queryElement = document.querySelector(`#${this.collectorIds.cardsListContainer}`);
+      if (queryElement && this.injected) {
+        queryElement.innerHTML = cardItemsTemplate(this.customStyles ? true : false, cards)
+        clearInterval(injectInterval)
+        this.#mountRadioButtons(token)
+        this.cardsInjected = true
+      }
+    }, 500);
+  }
+
+  async #fetchMerchantData() {
+    this.merchantData = await this.liteCheckout.getBusiness();
+    return this.merchantData
+  }
+
+  async getCustomer(email: string) {
+    return await this.liteCheckout.customerRegister(email);
+  }
+
+  async #mountTonder() {
+    if(this.isEnrollmentCard){
+      this.#mountSaveCardButton()
+    }else{
+      this.#mountPayButton()
+    }
+
+    const result = await this.#fetchMerchantData();
+
+    if(result && "vault_id" in result) {
+      
+      const { vault_id, vault_url } = result;
+
+      if(this.email && !this.isEnrollmentCard) {
+
+        const customerResponse : CustomerRegisterResponse | ErrorResponse = await this.getCustomer(this.email);
+
+        if("auth_token" in customerResponse) {
+
+          const { auth_token } = customerResponse
+
+          const cards = await this.liteCheckout.getCustomerCards(auth_token);
+
+          if("cards" in cards) {
+
+            const cardsMapped: Card[] = cards.cards.map(mapCards)
+  
+            this.loadCardsList(cardsMapped, auth_token)
+
+          }
+
+        }
+        
+      }
+
+      this.collectContainer = await initSkyflow(
+        vault_id,
+        vault_url,
+        this.baseUrl,
+        this.abortController.signal,
+        this.customStyles,
+        this.collectorIds,
+        this.apiKeyTonder
+      );
+
+    }
+
+  }
+
+  removeCheckout() {
+
+    this.injected = false
+    this.cardsInjected = false
+    // Cancel all requests
+    this.abortController.abort(); 
+    this.abortController = new AbortController();
+    clearInterval(this.injectInterval);
+    console.log("InlineCheckout removed from DOM and cleaned up.");
+
+  }
+
+  #unmountForm () {
+
+    this.injected = false
+    
+    if(this.collectContainer) {
+      if("unmount" in this.collectContainer.elements.cardHolderNameElement) this.collectContainer.elements.cardHolderNameElement.unmount() 
+      if("unmount" in this.collectContainer.elements.cardNumberElement) this.collectContainer.elements.cardNumberElement.unmount()
+      if("unmount" in this.collectContainer.elements.expiryYearElement) this.collectContainer.elements.expiryYearElement.unmount()
+      if("unmount" in this.collectContainer.elements.expiryMonthElement) this.collectContainer.elements.expiryMonthElement.unmount()
+      if("unmount" in this.collectContainer.elements.cvvElement) this.collectContainer.elements.cvvElement.unmount()
+    }
+
+  }
+
+  async #mountForm () {
+
+    const result = await this.#fetchMerchantData();
+
+    if(result && "vault_id" in result) {
+      
+      const { vault_id, vault_url } = result;
+
+      this.collectContainer = await initSkyflow(
+        vault_id,
+        vault_url,
+        this.baseUrl,
+        this.abortController.signal,
+        this.customStyles,
+        this.collectorIds,
+        this.apiKeyTonder
+      );
+
+    }
+
+  }
+
+  async #getCardTokens(tonderButton: string){
+    console.log("this.collectContainer: ", this.collectContainer)
+    if(this.collectContainer && "container" in this.collectContainer && "collect" in this.collectContainer.container) {
+      try {
+        const collectResponseSkyflowTonder: any = await this.collectContainer?.container.collect();
+        return await collectResponseSkyflowTonder["records"][0]["fields"];
+      } catch (error) {
+        showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, tonderButton)
+        throw error;
+      }
+    } else {
+      showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, tonderButton)
+    }
+  }
+  async #updateSaveCardButton(disabled = false, text = "Guardar"){
+    try {
+
+      const selector: any = document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);
+      
+      if(selector){
+        selector.disabled = disabled;
+        selector.innerHTML = text
+      }
+
+    } catch (error) { }
+  }
+  async #validateAndSaveCard(){
+
+    if(this.email){
+      try{
+        if(this.merchantData && "openpay_keys" in this.merchantData) {
+          const cardTokensSkyflowTonder: any = await this.#getCardTokens(this.collectorIds.tonderSaveCardButton);
+          const customerResponse : CustomerRegisterResponse | ErrorResponse = await this.getCustomer(this.email);
+  
+          if("auth_token" in customerResponse) {
+            const { auth_token, id: cutomerId } = customerResponse;
+            console.log("cardTokensSkyflowTonder: ", cardTokensSkyflowTonder)
+            await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
+            showMessage("Tarjeta registrada con éxito", this.collectorIds.msgNotification);
+          }
+        }else{
+          showError("No se han configurado los datos del proveedor de servicio", this.collectorIds.msgError, this.collectorIds.tonderSaveCardButton)
+        }
+      } catch (error) {
+        console.log(error);
+        showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderSaveCardButton)
+        throw error;
+      } finally {}
+    }
+
+  }
+
+  async saveCard(){
+    return new Promise(async(resolve, reject) => {
+      try{
+        this.#updateSaveCardButton(true, "Guardando...")
+        await this.#validateAndSaveCard()
+        this.#updateSaveCardButton(false)
+        resolve("Tarjeta registrada con éxito");
+      }catch(error){
+        reject(error);
+      }
+    })
+
+  }
+  async #checkout() {
+
+    try {
+
+      try {
+
+        const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+        
+        if(selector){
+          selector.disabled = true;
+          selector.innerHTML = "Cargando..."
+        }
+
+      } catch (error) { }
+
+      if(this.merchantData) {
+
+        if("openpay_keys" in this.merchantData) {
+
+          const { openpay_keys, reference, business } = this.merchantData
+
+          const total = Number(this.cartTotal)
+
+          let cardTokensSkyflowTonder: any = null;
+
+          if(this.radioChecked === "new") {
+
+            if(this.collectContainer && "container" in this.collectContainer && "collect" in this.collectContainer.container) {
+              try {
+                const collectResponseSkyflowTonder: any = await this.collectContainer?.container.collect();
+                cardTokensSkyflowTonder = await collectResponseSkyflowTonder["records"][0]["fields"];
+              } catch (error) {
+                showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+                throw error;
+              }
+            } else {
+              showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+            }
+            
+          } else {
+
+            cardTokensSkyflowTonder = {
+              skyflow_id: this.radioChecked
+            }
+            
+          }
+
+          let deviceSessionIdTonder: any;
+
+          if (openpay_keys.merchant_id && openpay_keys.public_key) {
+            deviceSessionIdTonder = await this.liteCheckout.getOpenpayDeviceSessionID(
+              openpay_keys.merchant_id,
+              openpay_keys.public_key,
+              this.isOpenPaySandbox
+            );
+          }
+
+          if(this.email) {
+
+            const customerResponse : CustomerRegisterResponse | ErrorResponse = await this.getCustomer(this.email);
+
+            if("auth_token" in customerResponse) {
+
+              const { auth_token, id: cutomerId } = customerResponse;
+
+              const saveCard: HTMLElement | null = document.getElementById("save-checkout-card");
+
+              if(saveCard && "checked" in saveCard && saveCard.checked) {
+
+                await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
+                
+                this.cardsInjected = false;
+
+                const cards = await this.liteCheckout.getCustomerCards(auth_token);
+
+                if("cards" in cards) {
+
+                  const cardsMapped: Card[] = cards.cards.map((card) => mapCards(card))
+        
+                  this.loadCardsList(cardsMapped, auth_token)
+
+                }
+
+                showMessage("Tarjeta registrada con éxito", this.collectorIds.msgNotification);
+                
+              }
+              
+              const orderItems: CreateOrderRequest = {
+                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 this.liteCheckout.createOrder(
+                orderItems
+              );
+
+              // Create payment
+              const now = new Date();
+              const dateString = now.toISOString();
+
+              if("id" in jsonResponseOrder) {
+
+                const paymentItems: CreatePaymentRequest = {
+                  business_pk: business.pk,
+                  amount: total,
+                  date: dateString,
+                  order_id: jsonResponseOrder.id,
+                  client_id: cutomerId
+                };
+
+                const jsonResponsePayment = await this.liteCheckout.createPayment(
+                  paymentItems
+                );
+    
+                // Checkout router
+                const routerItems: StartCheckoutRequest = {
+                  card: cardTokensSkyflowTonder,
+                  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: ("id" in jsonResponseOrder) && jsonResponseOrder.id,
+                  business_id: business.pk,
+                  payment_id: ("pk" in jsonResponsePayment) && jsonResponsePayment.pk,
+                  source: 'sdk',
+                  metadata: this.metadata,
+                  browser_info: getBrowserInfo(),
+                  currency: this.currency
+                };
+                
+                const jsonResponseRouter = await this.liteCheckout.startCheckoutRouter(
+                  routerItems
+                );
+                
+                if (jsonResponseRouter) {
+                  try {
+                    const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+                    if(selector) {
+                      selector.disabled = false;
+                    }
+                  } catch {}
+                  return jsonResponseRouter;
+                } else {
+                  showError("No se ha podido procesar el pago", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+                  return false;
+                }
+              }
+            }
+          }
+        }
+      } else {
+        showError("No se han configurado los datos del proveedor de servicio", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+      }
+    } catch (error) {
+      console.log(error);
+      showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+      throw error;
+    } finally {
+      this.fetchingPayment = false;
+    }
+  };
 }