tonder-web-sdk 1.7.0 → 1.8.1

package/package.json

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

package/src/classes/inlineCheckout.js

@@ -1,4 +1,4 @@
-import { cardTemplate } from '../helpers/template.js'
+import { cardItemsTemplate, cardTemplate } from '../helpers/template.js'
 import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
 import {
   getBusiness,
@@ -6,11 +6,16 @@ import {
   createOrder,
   createPayment,
   startCheckoutRouter,
-  getOpenpayDeviceSessionID
+  getOpenpayDeviceSessionID,
+  getCustomerCards,
+  registerCard,
+  deleteCustomerCard
 } from '../data/api';
 import {
   showError,
   getBrowserInfo,
+  mapCards,
+  showMessage,
 } from '../helpers/utils';
 import { initSkyflow } from '../helpers/skyflow'
 import { ThreeDSHandler } from './3dsHandler.js';
@@ -18,6 +23,7 @@ import { ThreeDSHandler } from './3dsHandler.js';
 
 export class InlineCheckout {
   static injected = false;
+  static cardsInjected = false
   customer = {}
   items = []
   baseUrl = null
@@ -26,6 +32,18 @@ export class InlineCheckout {
   cartTotal = null
   metadata = {}
   card = {}
+  collectorIds = {
+    cardsListContainer: "cardsListContainer",
+    holderName: "collectCardholderName",
+    cardNumber: "collectCardNumber",
+    expirationMonth: "collectExpirationMonth",
+    expirationYear: "collectExpirationYear",
+    cvv: "collectCvv",
+    tonderPayButton: "tonderPayButton",
+    msgError: "msgError",
+    msgNotification: "msgNotification"
+
+  }
 
   constructor({
     mode = "stage",
@@ -34,7 +52,7 @@ export class InlineCheckout {
     successUrl,
     renderPaymentButton = false,
     callBack = () => { },
-    styles,
+    styles
   }) {
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
@@ -172,6 +190,9 @@ export class InlineCheckout {
     this.cartItems = items
   }
 
+  setCustomerEmail (email) {
+    this.email = email
+  }
   setCartTotal(total) {
     console.log('total: ', total)
     this.cartTotal = total
@@ -215,13 +236,14 @@ export class InlineCheckout {
     let checkoutContainer = document.querySelector("#global-loader");
     if (checkoutContainer) {
         checkoutContainer.innerHTML = cardTemplateSkeleton;
+        checkoutContainer.style.display = 'block';
     }
   }
 
   #removeGlobalLoader() {
     const loader = document.querySelector('#global-loader');
     if (loader) {
-      loader.remove();
+      loader.style.display = 'none';
     }
   }
 
@@ -245,13 +267,25 @@ export class InlineCheckout {
     return await customerRegister(this.baseUrl, this.apiKeyTonder, customer, signal);
   }
 
-  async #mountTonder() {
+  async #mountTonder(getCards = true) {
     this.#mountPayButton()
     try{    
       const {
         vault_id,
         vault_url,
       } = await this.#fetchMerchantData();
+      if(this.email && getCards){
+        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);
+
+          if("cards" in cards) {
+            const cardsMapped = cards.cards.map(mapCards)
+            this.#loadCardsList(cardsMapped, auth_token)
+          }
+        }
+      }
 
       this.collectContainer = await initSkyflow(
         vault_id,
@@ -260,6 +294,7 @@ export class InlineCheckout {
         this.apiKeyTonder,
         this.abortController.signal,
         this.customStyles,
+        this.collectorIds
       );
       setTimeout(() => {
         this.#removeGlobalLoader()
@@ -274,6 +309,7 @@ export class InlineCheckout {
 
   removeCheckout() {
     InlineCheckout.injected = false
+    InlineCheckout.cardsInjected = false
     // Cancel all requests
     this.abortController.abort();
     this.abortController = new AbortController();
@@ -285,7 +321,7 @@ export class InlineCheckout {
   async #getCardTokens() {
     if (this.card?.skyflow_id) return this.card
     try {
-      const collectResponse = await this.collectContainer.collect();
+      const collectResponse = await this.collectContainer.container.collect();
       const cardTokens = await collectResponse["records"][0]["fields"];
       return cardTokens;
     } catch (error) {
@@ -303,8 +339,14 @@ export class InlineCheckout {
     const { openpay_keys, reference, business } = this.merchantData
     const total = Number(this.cartTotal)
 
-    const cardTokens = await this.#getCardTokens();
-
+    let cardTokens = null;
+    if(this.radioChecked === "new"){
+      cardTokens = await this.#getCardTokens();
+    }else{
+      cardTokens = {
+        skyflow_id: this.radioChecked
+      }
+    }
     try {
       let deviceSessionIdTonder;
       if (openpay_keys.merchant_id && openpay_keys.public_key) {
@@ -319,7 +361,23 @@ export class InlineCheckout {
         this.customer, 
         this.abortController.signal
       )
+      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 });
+                
+          this.cardsInjected = false;
+
+          const cards = await getCustomerCards(this.baseUrl, auth_token);
+          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,
@@ -401,4 +459,81 @@ export class InlineCheckout {
       throw error;
     }
   };
+
+  #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
+      }
+    }, 500);
+  }
+
+  #mountRadioButtons (token) {
+    const radioButtons = document.getElementsByName(`card_selected`);
+    for (const radio of radioButtons) {
+      radio.style.display = "block";
+      radio.onclick = async (event) => {
+        await this.#handleRadioButtonClick(radio);
+      };
+    }
+    const cardsButtons = document.getElementsByClassName("card-delete-button");
+    for (const cardButton of cardsButtons) {
+      cardButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        this.#handleDeleteCardButtonClick(token, cardButton)
+      }, false);
+    }
+  }
+
+  async #handleRadioButtonClick (radio) {
+    if(radio.id === this.radioChecked ||  ( radio.id === "new" && this.radioChecked === undefined)) return;
+    const containerForm = document.querySelector(".container-form");
+    if(containerForm) {
+      containerForm.style.display = radio.id === "new" ? "block" : "none";
+    }
+    if(radio.id === "new") {
+      if(this.radioChecked !== radio.id) {
+        this.#addGlobalLoader()
+        this.#mountTonder(false);
+        InlineCheckout.injected = true;
+      }
+    } else {
+      this.#unmountForm();
+    }
+    this.radioChecked = radio.id;
+  }
+
+  async #handleDeleteCardButtonClick (customerToken, button) {
+    const id = button.attributes.getNamedItem("id")
+    const skyflow_id = id?.value?.split("_")?.[2]
+    if(skyflow_id) {
+      const cardClicked = document.querySelector(`#card_container-${skyflow_id}`);
+      if(cardClicked) {
+        cardClicked.style.display = "none"
+      }
+      await deleteCustomerCard(this.baseUrl, customerToken, skyflow_id)
+      this.cardsInjected = false
+      const cards = await getCustomerCards(this.baseUrl, customerToken)
+      if("cards" in cards) {
+        const cardsMapped = cards.cards.map(mapCards)
+        this.#loadCardsList(cardsMapped, customerToken)
+      }
+    }
+  }
+
+  #unmountForm () {
+    InlineCheckout.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()
+    }
+  }
 }

package/src/data/api.js

@@ -1,3 +1,5 @@
+import { buildErrorResponse, buildErrorResponseFromCatch } from "../helpers/utils";
+
 export async function getOpenpayDeviceSessionID(merchant_id, public_key, signal) {
   let openpay = await window.OpenPay;
   openpay.setId(merchant_id);
@@ -107,3 +109,64 @@ export async function startCheckoutRouter(baseUrlTonder, apiKeyTonder, routerIte
     throw error
   }
 }
+
+export async function registerCard(baseUrlTonder, customerToken, data) {
+  try {
+    const response = await fetch(`${baseUrlTonder}/api/v1/cards/`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Token ${customerToken}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    });
+
+    if (response.ok) return await response.json();
+    if (response.status === 409){
+      const res_json = await response.json()
+      if(res_json.error = 'Card number already exists.'){
+        return {
+          code: 200,
+          body: res_json,
+          name: '',
+          message: res_json.error,
+        }
+      }
+    }
+    throw await buildErrorResponse(response);
+  } catch (error) {
+    throw buildErrorResponseFromCatch(error);
+  }
+}
+export async function deleteCustomerCard(baseUrlTonder, customerToken, skyflowId = "") {
+  try {
+    const response = await fetch(`${baseUrlTonder}/api/v1/cards/${skyflowId}`, {
+      method: 'DELETE',
+      headers: {
+        'Authorization': `Token ${customerToken}`,
+        'Content-Type': 'application/json'
+      },
+    });
+
+    if (response.ok) return true;
+    throw await buildErrorResponse(response);
+  } catch (error) {
+    throw buildErrorResponseFromCatch(error);
+  }
+}
+export async function getCustomerCards(baseUrlTonder, customerToken, query = "") {
+  try {
+    const response = await fetch(`${baseUrlTonder}/api/v1/cards/${query}`, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Token ${customerToken}`,
+        'Content-Type': 'application/json'
+      },
+    });
+
+    if (response.ok) return await response.json();
+    throw await buildErrorResponse(response);
+  } catch (error) {
+    throw buildErrorResponseFromCatch(error);
+  }
+}

package/src/helpers/skyflow.js

@@ -6,7 +6,8 @@ export async function initSkyflow(
   baseUrl,
   apiKey,
   signal,
-  customStyles = {}
+  customStyles = {},
+  collectorIds,
 ) {
   const skyflow = await Skyflow.init({
     vaultID: vaultId,
@@ -51,6 +52,15 @@ export async function initSkyflow(
       max: 70,
     },
   };
+  const regexEmpty = RegExp("^(?!\s*$).+");
+
+  const regexMatchRule = {
+    type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
+    params: {
+      regex: regexEmpty,
+      error: "El campo es requerido" // Optional, default error is 'VALIDATION FAILED'.
+    }
+  }
 
   const cardHolderNameElement = await collectContainer.create({
     table: "cards",
@@ -59,10 +69,15 @@ export async function initSkyflow(
     label: collectStylesOptions.labels?.nameLabel,
     placeholder: collectStylesOptions.placeholders?.namePlaceholder,
     type: Skyflow.ElementType.CARDHOLDER_NAME,
-    validations: [lengthMatchRule],
+    validations: [lengthMatchRule, regexMatchRule],
   });
 
-  cardHolderNameElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    cardHolderNameElement,
+    collectorIds.holderName,
+    "errorCardHolderIdTonder",
+    "titular de la tarjeta"
+  );
 
   // Create collect elements.
   const cardNumberElement = await collectContainer.create({
@@ -76,9 +91,16 @@ export async function initSkyflow(
     label: collectStylesOptions.labels?.cardLabel,
     placeholder: collectStylesOptions.placeholders?.cardPlaceholder,
     type: Skyflow.ElementType.CARD_NUMBER,
+    validations: [regexMatchRule],
   });
 
-  cardNumberElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    cardNumberElement,
+    collectorIds.cardNumber,
+    "errorCardNumberIdTonder",
+    "número de tarjeta"
+  );
+
 
   const cvvElement = await collectContainer.create({
     table: "cards",
@@ -87,9 +109,14 @@ export async function initSkyflow(
     label: collectStylesOptions.labels?.cvvLabel,
     placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
     type: Skyflow.ElementType.CVV,
+    validations: [regexMatchRule],
   });
 
-  cvvElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    cvvElement,
+    collectorIds.cvv,
+    "errorCvvIdTonder"
+  );
 
   const expiryMonthElement = await collectContainer.create({
     table: "cards",
@@ -98,9 +125,14 @@ export async function initSkyflow(
     label: collectStylesOptions.labels?.expiryDateLabel,
     placeholder: collectStylesOptions.placeholders?.expiryMonthPlaceholder,
     type: Skyflow.ElementType.EXPIRATION_MONTH,
+    validations: [regexMatchRule],
   });
 
-  expiryMonthElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    expiryMonthElement,
+    collectorIds.expirationMonth,
+    "errorExpiryMonthIdTonder"
+  );
 
   const expiryYearElement = await collectContainer.create({
     table: "cards",
@@ -109,9 +141,14 @@ export async function initSkyflow(
     label: "",
     placeholder: collectStylesOptions.placeholders?.expiryYearPlaceholder,
     type: Skyflow.ElementType.EXPIRATION_YEAR,
+    validations: [regexMatchRule],
   });
 
-  expiryYearElement.setError('Inválido')
+  handleSkyflowElementEvents(
+    expiryYearElement,
+    collectorIds.expirationYear,
+    "errorExpiryYearIdTonder"
+  );
 
   await mountElements(
     cardNumberElement,
@@ -121,7 +158,16 @@ export async function initSkyflow(
     cardHolderNameElement,
   )
 
-  return collectContainer
+  return {
+    container: collectContainer,
+    elements: { 
+      cardHolderNameElement, 
+      cardNumberElement, 
+      cvvElement, 
+      expiryMonthElement, 
+      expiryYearElement 
+    } 
+  }
 }
 
 async function mountElements(
@@ -137,3 +183,30 @@ async function mountElements(
   expiryYearElement.mount("#collectExpirationYear");
   cardHolderNameElement.mount("#collectCardholderName");
 }
+
+
+function handleSkyflowElementEvents(element, elementId, errorElementId, fieldMessage= "", requiredMessage = "El campo es requerido", invalidMessage= "El campo es inválido") {
+  if ("on" in element) {
+    element.on(Skyflow.EventName.CHANGE, (state) => {
+      let errorElement = document.getElementById(errorElementId);
+      if (errorElement && state.isValid && !state.isEmpty) {
+        errorElement.remove();
+      }
+    });
+
+    element.on(Skyflow.EventName.BLUR, (state) => {
+      let container = document.getElementById(elementId);
+      let errorElement = document.getElementById(errorElementId);
+      if (errorElement) {
+        errorElement.remove();
+      }
+      if (!state.isValid) {
+        let errorLabel = document.createElement("div");
+        errorLabel.classList.add("error-custom-inputs-tonder");
+        errorLabel.id = errorElementId;
+        errorLabel.textContent = state.isEmpty ? requiredMessage : fieldMessage != "" ?`El campo ${fieldMessage} es inválido`: invalidMessage;
+        container?.appendChild(errorLabel);
+      }
+    });
+  }
+}