tonder-web-sdk 1.4.0 → 1.8.0

package/README.md

@@ -160,6 +160,7 @@ const response = await inlineCheckout.payment(checkoutData);
 ## Configuration
 | Property        | Type          | Description                                         |
 |:---------------:|:-------------:|:---------------------------------------------------:|
+| mode            | string        | 'stage' 'production' 'sandbox', default 'stage'     |
 | apiKey          | string        | You can take this from you Tonder Dashboard         |
 | backgroundColor | string        | Hex color #000000                                   |
 | returnUrl       | string        |                                                     |

package/package.json

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

package/src/classes/inlineCheckout.js

@@ -1,15 +1,21 @@
-import { cardTemplate } from '../helpers/template.js'
+import { cardItemsTemplate, cardTemplate } from '../helpers/template.js'
+import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
 import {
   getBusiness,
   customerRegister,
   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';
@@ -17,22 +23,36 @@ import { ThreeDSHandler } from './3dsHandler.js';
 
 export class InlineCheckout {
   static injected = false;
+  static cardsInjected = false
   customer = {}
   items = []
-  baseUrl = process.env.BASE_URL || "http://localhost:8000";
+  baseUrl = null
   collectContainer = null
   merchantData = {}
   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",
     apiKey,
     returnUrl,
     successUrl,
     renderPaymentButton = false,
     callBack = () => { },
-    styles,
+    styles
   }) {
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
@@ -40,6 +60,8 @@ export class InlineCheckout {
     this.renderPaymentButton = renderPaymentButton;
     this.callBack = callBack;
     this.customStyles = styles
+    this.mode = mode
+    this.baseUrl = this.#getBaseUrl()
 
     this.abortController = new AbortController()
     this.process3ds = new ThreeDSHandler(
@@ -47,6 +69,17 @@ export class InlineCheckout {
     )
   }
 
+  #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() {
     if (!this.renderPaymentButton) return;
 
@@ -157,6 +190,9 @@ export class InlineCheckout {
     this.cartItems = items
   }
 
+  setCustomerEmail (email) {
+    this.email = email
+  }
   setCartTotal(total) {
     console.log('total: ', total)
     this.cartTotal = total
@@ -176,14 +212,46 @@ export class InlineCheckout {
   injectCheckout() {
     if (InlineCheckout.injected) return
     this.process3ds.verifyTransactionStatus()
-    const injectInterval = setInterval(() => {
-      if (document.querySelector("#tonder-checkout")) {
-        document.querySelector("#tonder-checkout").innerHTML = cardTemplate;
-        this.#mountTonder();
-        clearInterval(injectInterval);
-        InlineCheckout.injected = true
+    const containerTonderCheckout = document.querySelector("#tonder-checkout");
+    if (containerTonderCheckout) {
+      this.#mount(containerTonderCheckout)
+      return;
+    }
+    const observer = new MutationObserver((mutations, obs) => {
+      const containerTonderCheckout = document.querySelector("#tonder-checkout");
+      if (containerTonderCheckout) {
+        this.#mount(containerTonderCheckout)
+        obs.disconnect();
       }
-    }, 500);
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributeFilter: ['id']
+  });
+  }
+
+
+  #addGlobalLoader() {
+    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.style.display = 'none';
+    }
+  }
+
+  #mount(containerTonderCheckout){
+    containerTonderCheckout.innerHTML = cardTemplate;
+    this.#addGlobalLoader();
+    this.#mountTonder();
+    InlineCheckout.injected = true;
   }
 
   async #fetchMerchantData() {
@@ -199,26 +267,48 @@ 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)
+          }
+        }
+      }
 
-    const {
-      vault_id,
-      vault_url,
-    } = await this.#fetchMerchantData();
-
-    this.collectContainer = await initSkyflow(
-      vault_id,
-      vault_url,
-      this.baseUrl,
-      this.apiKeyTonder,
-      this.abortController.signal,
-      this.customStyles,
-    );
+      this.collectContainer = await initSkyflow(
+        vault_id,
+        vault_url,
+        this.baseUrl,
+        this.apiKeyTonder,
+        this.abortController.signal,
+        this.customStyles,
+      );
+      setTimeout(() => {
+        this.#removeGlobalLoader()
+      }, 800)
+    }catch(e){
+      if (e && e.name !== 'AbortError') {
+        this.#removeGlobalLoader()
+        showError("No se pudieron cargar los datos del comercio.")
+      }
+    }
   }
 
   removeCheckout() {
     InlineCheckout.injected = false
+    InlineCheckout.cardsInjected = false
     // Cancel all requests
     this.abortController.abort();
     this.abortController = new AbortController();
@@ -230,7 +320,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) {
@@ -264,7 +354,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,
@@ -346,4 +452,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,
@@ -121,7 +122,16 @@ export async function initSkyflow(
     cardHolderNameElement,
   )
 
-  return collectContainer
+  return {
+    container: collectContainer,
+    elements: { 
+      cardHolderNameElement, 
+      cardNumberElement, 
+      cvvElement, 
+      expiryMonthElement, 
+      expiryYearElement 
+    } 
+  }
 }
 
 async function mountElements(

package/src/helpers/template-skeleton.js

@@ -0,0 +1,59 @@
+export const cardTemplateSkeleton = `
+<div class="container-tonder-skeleton">
+  <div class="skeleton-loader"></div>
+  <div class="skeleton-loader"></div>
+  <div class="collect-row-skeleton">
+    <div class="skeleton-loader skeleton-loader-item"></div>
+    <div class="skeleton-loader skeleton-loader-item"></div>
+    <div class="skeleton-loader skeleton-loader-item"></div>
+  </div>
+</div>
+
+<style>
+.container-tonder-skeleton {
+  background-color: #F9F9F9;
+  margin: 0 auto !important;
+  padding: 30px 10px 30px 10px;
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+  max-width: 600px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 45px;
+}
+
+.collect-row-skeleton {
+  display: flex !important;
+  justify-content: space-between !important;
+  margin-left: 10px !important;
+  margin-right: 10px !important;
+  gap: 10px;
+}
+.skeleton-loader {
+  height: 45px !important;
+  border-radius: 8px;
+  margin-top: 2px;
+  margin-bottom: 4px;
+  margin-left: 10px !important;
+  margin-right: 10px !important;
+  background-color: #e0e0e0;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+.skeleton-loader-item{
+  width: 35%;
+  margin: 0 !important;
+}
+@keyframes pulse {
+  0% {
+    background-color: #e0e0e0;
+  }
+  50% {
+    background-color: #f0f0f0;
+  }
+  100% {
+    background-color: #e0e0e0;
+  }
+}
+</style>
+`