tonder-web-sdk 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "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,
@@ -274,6 +308,7 @@ export class InlineCheckout {
 
   removeCheckout() {
     InlineCheckout.injected = false
+    InlineCheckout.cardsInjected = false
     // Cancel all requests
     this.abortController.abort();
     this.abortController = new AbortController();
@@ -285,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) {
@@ -319,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,
@@ -401,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.js

@@ -1,14 +1,33 @@
+import { getCardType } from "./utils";
+
 export const cardTemplate = `
 <div class="container-tonder">
+  <div id="cardsListContainer" class="cards-list-container"></div>
+  <div class="pay-new-card">
+    <input checked id="new" class="card_selected" name="card_selected" type="radio"/>
+    <label class="card-item-label-new" for="new">
+      <img class="card-image" src="${getCardType("XXXX")}" />
+      <div class="card-number">Pagar con tarjeta</div>
+    </label>
+  </div>
   <div id="global-loader" class="global-loader"></div>
-  <div id="collectCardholderName" class="empty-div"></div>
-  <div id="collectCardNumber" class="empty-div"></div>
-  <div class="collect-row">
-    <div id="collectExpirationMonth" class="empty-div"></div>
-    <div id="collectExpirationYear" class="expiration-year"></div>
-    <div id="collectCvv" class="empty-div"></div>
+  <div class="container-form">
+    <div id="collectCardholderName" class="empty-div"></div>
+    <div id="collectCardNumber" class="empty-div"></div>
+    <div class="collect-row">
+      <div id="collectExpirationMonth" class="empty-div"></div>
+      <div id="collectExpirationYear" class="expiration-year"></div>
+      <div id="collectCvv" class="empty-div"></div>
+    </div>
+    <div class="checkbox">
+      <input id="save-checkout-card" type="checkbox">
+      <label for="save-checkout-card">
+        Guardar tarjeta para futuros pagos
+      </label>
+    </div>
+    <div id="msgError"></div>
+    <div id="msgNotification"></div>
   </div>
-  <div id="msgError"></div>
   <button id="tonderPayButton" class="pay-button">Pagar</button>
 </div>
 
@@ -57,6 +76,16 @@ export const cardTemplate = `
   text-align: left !important;
 }
 
+.message-container{
+  color: #3bc635 !important;
+  background-color: #DAFCE4 !important;
+  margin-bottom: 13px !important;
+  font-size: 80% !important;
+  padding: 8px 10px !important;
+  border-radius: 10px !important;
+  text-align: left !important;
+}
+
 .pay-button {
   font-size: 16px;
   font-weight: bold;
@@ -117,5 +146,297 @@ export const cardTemplate = `
   }
 }
 
+.checkbox label {
+  margin-left: 10px;
+  font-size: '12px';
+  font-weight: '500';
+  color: #1D1D1D;
+}
+
+.checkbox {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  text-align: left;
+  padding: 0 10px;
+}
+
+.cards-list-container {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 10px 0px 10px;
+  gap: 33% 20px;
+}
+
+.pay-new-card {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
+.pay-new-card .card-number {
+  font-size: 16px;
+}
+.card-image {
+  width: 39px;
+  height: 24px;
+  text-align: left;
+}
+
+.card-item-label-new {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
+.card_selected {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 100%;
+  border: 1px #3bc635 solid;
+  color: #3bc635;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:before {
+  width: 8px;
+  height: 8px;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  background-color: #3bc635;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:checked {
+  border: 1px #3bc635 solid;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 100%;
+  color: #3bc635;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:checked:before {
+  content: "";
+  border: 1px #3bc635 solid;
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  background-color: #3bc635;
+  opacity: 50;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:hover:before {
+  width: 8px;
+  height: 8px;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  background-color: #3bc635;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  opacity: 10;
+}
 </style>
 `
+
+export const cardItemsTemplate = (cards) => {
+  
+  const cardItemsHTML = cards.reduce((total, card) => {
+    return `${total}
+    <div class="card-item" id="card_container-${card.skyflow_id}">
+        <input id="${card.skyflow_id}" class="card_selected" name="card_selected" type="radio"/>
+        <label class="card-item-label" for="${card.skyflow_id}">
+          <img class="card-image" src="${getCardType(card.card_scheme)}" />
+          <div class="card-number">${card.card_number}</div>
+          <div class="card-expiration">Exp. ${card.expiration_month}/${card.expiration_year}</div>
+          <div class="card-delete-icon">
+            <button id="delete_button_${card.skyflow_id}" class="card-delete-button">
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+                <path fill="currentColor" d="M292.309-140.001q-30.308 0-51.308-21t-21-51.308V-720h-40v-59.999H360v-35.384h240v35.384h179.999V-720h-40v507.691q0 30.308-21 51.308t-51.308 21H292.309ZM376.155-280h59.999v-360h-59.999v360Zm147.691 0h59.999v-360h-59.999v360Z"/>
+              </svg>
+            </button>
+          </div>
+        </label>
+    </div>`
+  }, ``);
+
+  const cardItemStyle = `
+    <style>
+      .card-item-label {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #1D1D1D;
+        gap: 33% 20px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+        width: 90%;
+      }
+
+      .card-item {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        gap: 33% 20px;
+      }
+
+      .card-item .card-number {
+        font-size: 16px;
+      }
+
+      .card-item .card-expiration {
+        font-size: 16px;
+      }
+
+      .card-image {
+        width: 39px;
+        height: 24px;
+        text-align: left;
+      }
+
+      .card-delete-button {
+        background-color: transparent !important;
+        color: #000000 !important;
+        border: none;
+      }
+
+      .card-delete-button:hover {
+        background-color: transparent !important;
+        color: #D91C1C !important;
+      }
+
+      .card_selected {
+        position: relative;
+        width: 16px;
+        height: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        border: 1px #3bc635 solid;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 0;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked {
+        border: 1px #3bc635 solid;
+        position: relative;
+        width: 16px;
+        height: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked:before {
+        content: "";
+        border: 1px #3bc635 solid;
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 50;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:hover:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        opacity: 10;
+      }
+
+    </style>
+  `
+  const cardItem = `
+  ${cardItemsHTML}
+  ${cardItemStyle}
+  `
+  return cardItem;
+}