tonder-web-sdk 1.9.2 → 1.11.0-beta.0

package/README.md

@@ -139,6 +139,7 @@ const checkoutData = {
 const apiKey = "4c87c36e697e65ddfe288be0afbe7967ea0ab865";
 const returnUrl = "http://my-website:8080/checkout"
 const successUrl = "http://my-website:8080/success"
+
 // if using script tag, it should be initialized like this
 // new TonderSdk.InlineCheckout
 const inlineCheckout = new InlineCheckout({
@@ -148,8 +149,22 @@ const inlineCheckout = new InlineCheckout({
   styles: customStyles
 });
 
+// The configureCheckout function allows you to set initial information, 
+// such as the customer's email, which is used to retrieve a list of saved cards.
+inlineCheckout.configureCheckout({customer: {email: "example@email.com"}});
+
+
 inlineCheckout.injectCheckout();
 
+// To verify a 3ds transaction you can use the following method
+// It should be called after the injectCheckout method
+// The response status will be one of the following
+// ['Declined', 'Cancelled', 'Failed', 'Success', 'Pending', 'Authorized']
+
+inlineCheckout.verify3dsTransaction().then(response => {
+  console.log('Verify 3ds response', response)
+})
+
 const response = await inlineCheckout.payment(checkoutData);
 ```
 
@@ -163,7 +178,7 @@ const response = await inlineCheckout.payment(checkoutData);
 | mode            | string        | 'stage' 'production' 'sandbox', default 'stage'     |
 | apiKey          | string        | You can take this from you Tonder Dashboard         |
 | backgroundColor | string        | Hex color #000000                                   |
-| returnUrl       | string        |                                                     |
+| returnUrl       | string        | url where the checkout form is mounted (3ds)         |
 | successUrl      | string        |                                                     |
 | backgroundColor | string        |                                                     |
 

package/package.json

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

package/src/classes/3dsHandler.js

@@ -39,6 +39,18 @@ export class ThreeDSHandler {
     }
   }
 
+  saveCheckoutId(checkoutId) {
+    localStorage.setItem('checkout_id', JSON.stringify(checkoutId))
+  }
+
+  removeCheckoutId() {
+    localStorage.removeItem("checkout_id")
+  }
+
+  getCurrentCheckoutId() {
+    return JSON.parse(localStorage.getItem("checkout_id"));
+  }
+
   getUrlWithExpiration() {
     const item = JSON.parse(localStorage.getItem("verify_transaction_status"))
     if (!item) return
@@ -117,17 +129,17 @@ export class ThreeDSHandler {
     return parameters;
   }
 
+  // TODO: Remove this duplication
   handleSuccessTransaction(response) {
     this.removeVerifyTransactionUrl();
-    window.location = this.successUrl
-    console.log('Transacción autorizada exitosamente.');
+    // window.location = this.successUrl
+    console.log('Transacción autorizada');
     return response;
   }
 
   handleDeclinedTransaction(response) {
     this.removeVerifyTransactionUrl();
-    console.log('Transacción rechazada.');
-    throw new Error("Transacción rechazada.");
+    return response;
   }
 
   // TODO: the method below needs to be tested with a real 3DS challenge
@@ -159,15 +171,18 @@ export class ThreeDSHandler {
     await this.verifyTransactionStatus();
   }
 
+  // TODO: This method could be removed
   async handleTransactionResponse(response) {
     const response_json = await response.json();
 
-    if (response_json.status === "Pending") {
+    // Azul property
+    if (response_json.status === "Pending" && response_json.redirect_post_url) {
       return await this.handle3dsChallenge(response_json);
     } else if (["Success", "Authorized"].includes(response_json.status)) {
-      return this.handleSuccessTransaction(response);
+      return this.handleSuccessTransaction(response_json);
     } else {
-      return this.handleDeclinedTransaction(response);
+      this.handleDeclinedTransaction();
+      return response_json
     }
   }
 
@@ -185,19 +200,23 @@ export class ThreeDSHandler {
           },
           // body: JSON.stringify(data),
         });
-
         if (response.status !== 200) {
           console.error('La verificación de la transacción falló.');
-          return
+          this.removeVerifyTransactionUrl();
+          return response
         }
 
         return await this.handleTransactionResponse(response);
       } catch (error) {
         console.error('Error al verificar la transacción:', error);
-        return error;
+        this.removeVerifyTransactionUrl();
       }
     } else {
       console.log('No verify_transaction_status_url found');
     }
   }
+
+  setPayload = (payload) => {
+    this.payload = payload
+  }
 }

package/src/classes/inlineCheckout.js

@@ -1,4 +1,4 @@
-import { cardItemsTemplate, cardTemplate } from '../helpers/template.js'
+import { apmItemsTemplate, cardItemsTemplate, cardTemplate } from '../helpers/template.js'
 import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
 import {
   getBusiness,
@@ -9,13 +9,15 @@ import {
   getOpenpayDeviceSessionID,
   getCustomerCards,
   registerCard,
-  deleteCustomerCard
+  deleteCustomerCard,
+  getCustomerAPMs
 } from '../data/api';
 import {
   showError,
   getBrowserInfo,
   mapCards,
   showMessage,
+  clearSpace
 } from '../helpers/utils';
 import { initSkyflow } from '../helpers/skyflow'
 import { ThreeDSHandler } from './3dsHandler.js';
@@ -24,6 +26,9 @@ import { ThreeDSHandler } from './3dsHandler.js';
 export class InlineCheckout {
   static injected = false;
   static cardsInjected = false
+  static apmsInjected = false
+  static apmsData = [];
+  deletingCards = [];
   customer = {}
   items = []
   baseUrl = null
@@ -41,8 +46,8 @@ export class InlineCheckout {
     cvv: "collectCvv",
     tonderPayButton: "tonderPayButton",
     msgError: "msgError",
-    msgNotification: "msgNotification"
-
+    msgNotification: "msgNotification",
+    apmsListContainer: "apmsListContainer"
   }
 
   constructor({
@@ -64,6 +69,7 @@ export class InlineCheckout {
     this.baseUrl = this.#getBaseUrl()
 
     this.abortController = new AbortController()
+    this.abortRefreshCardsController = new AbortController()
     this.process3ds = new ThreeDSHandler(
       { apiKey: apiKey, baseUrl: this.baseUrl, successUrl: successUrl }
     )
@@ -76,7 +82,7 @@ export class InlineCheckout {
       'stage': 'https://stage.tonder.io',
       'development': 'http://localhost:8000',
     };
- 
+
     return modeUrls[this.mode] || modeUrls['stage']
   }
 
@@ -110,6 +116,31 @@ export class InlineCheckout {
     }
   }
 
+  async handle3dsRedirect(response) {
+    const iframe = response?.next_action?.iframe_resources?.iframe
+
+    if (iframe) {
+      this.process3ds.loadIframe().then(() => {
+        //TODO: Check if this will be necessary on the frontend side
+        // after some the tests in production, since the 3DS process
+        // doesn't works properly on the sandbox environment
+        // setTimeout(() => {
+        //   process3ds.verifyTransactionStatus();
+        // }, 10000);
+        this.process3ds.verifyTransactionStatus();
+      }).catch((error) => {
+        console.log('Error loading iframe:', error)
+      })
+    } else {
+      const redirectUrl = this.process3ds.getRedirectUrl()
+      if (redirectUrl) {
+        this.process3ds.redirectToChallenge()
+      } else {
+        return response;
+      }
+    }
+  }
+
   payment(data) {
     return new Promise(async (resolve, reject) => {
       try {
@@ -120,36 +151,12 @@ export class InlineCheckout {
         this.#handleCurrency(data)
         this.#handleCard(data)
         const response = await this.#checkout()
-        if (response) {
-          const process3ds = new ThreeDSHandler({
-            baseUrl: this.baseUrl,
-            apiKey: this.apiKeyTonder,
-            payload: response,
-          });
-          this.callBack(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);
-            }
-          }
+        this.process3ds.setPayload(response)
+        this.process3ds.saveCheckoutId(response.checkout_id)
+        this.callBack(response);
+        const payload = await this.handle3dsRedirect(response)
+        if (payload) {
+          resolve(response);
         }
       } catch (error) {
         reject(error);
@@ -158,7 +165,6 @@ export class InlineCheckout {
   }
 
   #handleCustomer(customer) {
-    console.log('customer: ', customer)
     if (!customer) return
 
     this.firstName = customer?.firstName
@@ -186,15 +192,15 @@ export class InlineCheckout {
   }
 
   setCartItems(items) {
-    console.log('items: ', items)
     this.cartItems = items
   }
 
-  setCustomerEmail (email) {
-    this.email = email
+  configureCheckout(data) {
+    if ('customer' in data)
+      this.#handleCustomer(data['customer'])
   }
+  
   setCartTotal(total) {
-    console.log('total: ', total)
     this.cartTotal = total
     this.#updatePayButton()
   }
@@ -211,7 +217,6 @@ export class InlineCheckout {
 
   injectCheckout() {
     if (InlineCheckout.injected) return
-    this.process3ds.verifyTransactionStatus()
     const containerTonderCheckout = document.querySelector("#tonder-checkout");
     if (containerTonderCheckout) {
       this.#mount(containerTonderCheckout)
@@ -228,15 +233,40 @@ export class InlineCheckout {
       childList: true,
       subtree: true,
       attributeFilter: ['id']
-  });
+    });
+  }
+
+  async verify3dsTransaction () {
+    const result3ds = await this.process3ds.verifyTransactionStatus()
+    const resultCheckout = await this.resumeCheckout(result3ds)
+    this.process3ds.setPayload(resultCheckout)
+    if (resultCheckout?.is_route_finished && resultCheckout?.provider === 'tonder') {
+      return resultCheckout
+    }
+    return this.handle3dsRedirect(resultCheckout)
   }
 
+  async resumeCheckout(response) {
+    if (["Failed", "Declined", "Cancelled"].includes(response?.status)) {
+      const routerItems = {
+        // TODO: Replace this with reponse.checkout_id
+        checkout_id: this.process3ds.getCurrentCheckoutId(),
+      };
+      const routerResponse = await startCheckoutRouter(
+        this.baseUrl,
+        this.apiKeyTonder,
+        routerItems
+      );
+      return routerResponse
+    }
+    return response
+  }
 
   #addGlobalLoader() {
     let checkoutContainer = document.querySelector("#global-loader");
     if (checkoutContainer) {
-        checkoutContainer.innerHTML = cardTemplateSkeleton;
-        checkoutContainer.style.display = 'block';
+      checkoutContainer.innerHTML = cardTemplateSkeleton;
+      checkoutContainer.style.display = 'block';
     }
   }
 
@@ -247,8 +277,8 @@ export class InlineCheckout {
     }
   }
 
-  #mount(containerTonderCheckout){
-    containerTonderCheckout.innerHTML = cardTemplate;
+  #mount(containerTonderCheckout) {
+    containerTonderCheckout.innerHTML = cardTemplate({renderPaymentButton: this.renderPaymentButton, customStyles: this.customStyles});
     this.#addGlobalLoader();
     this.#mountTonder();
     InlineCheckout.injected = true;
@@ -267,25 +297,45 @@ export class InlineCheckout {
     return await customerRegister(this.baseUrl, this.apiKeyTonder, customer, signal);
   }
 
+  async #mountAPMs(){
+    try{
+      const apms = await getCustomerAPMs(this.baseUrl, this.apiKeyTonder, "?status=active&page_size=10000");
+      if(apms && apms['results'] && apms['results'].length > 0){
+        this.apmsData = apms['results']
+        this.#loadAPMList(apms['results'])
+      }
+    }catch(e){
+      console.warn("Error getting APMS")
+    }
+  }
   async #mountTonder(getCards = true) {
     this.#mountPayButton()
-    try{    
+    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) {
+      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);
+          const saveCardCheckbox = document.getElementById('save-card-container');
 
-          if("cards" in cards) {
-            const cardsMapped = cards.cards.map(mapCards)
-            this.#loadCardsList(cardsMapped, auth_token)
+          saveCardCheckbox.style.display = 'none';
+          if (this.mode !== 'production') {
+            const cards = await getCustomerCards(this.baseUrl, auth_token);
+            saveCardCheckbox.style.display = '';
+
+            if ("cards" in cards) {
+              const cardsMapped = cards.cards.map(mapCards)
+              this.#loadCardsList(cardsMapped, auth_token)
+            }
           }
+
+
         }
       }
+      this.#mountAPMs();
 
       this.collectContainer = await initSkyflow(
         vault_id,
@@ -299,7 +349,7 @@ export class InlineCheckout {
       setTimeout(() => {
         this.#removeGlobalLoader()
       }, 800)
-    }catch(e){
+    } catch (e) {
       if (e && e.name !== 'AbortError') {
         this.#removeGlobalLoader()
         showError("No se pudieron cargar los datos del comercio.")
@@ -310,6 +360,7 @@ export class InlineCheckout {
   removeCheckout() {
     InlineCheckout.injected = false
     InlineCheckout.cardsInjected = false
+    InlineCheckout.apmsInjected = false
     // Cancel all requests
     this.abortController.abort();
     this.abortController = new AbortController();
@@ -340,9 +391,9 @@ export class InlineCheckout {
     const total = Number(this.cartTotal)
 
     let cardTokens = null;
-    if(this.radioChecked === "new" || this.radioChecked === undefined){
+    if (this.radioChecked === "new" || this.radioChecked === undefined) {
       cardTokens = await this.#getCardTokens();
-    }else{
+    } else {
       cardTokens = {
         skyflow_id: this.radioChecked
       }
@@ -358,24 +409,24 @@ export class InlineCheckout {
       }
 
       const { id, auth_token } = await this.getCustomer(
-        this.customer, 
+        this.customer,
         this.abortController.signal
       )
-      if(auth_token && this.email){
+      if (auth_token && this.email) {
         const saveCard = document.getElementById("save-checkout-card");
-        if(saveCard && "checked" in saveCard && saveCard.checked){
+        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) {
+          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 = {
@@ -389,7 +440,6 @@ export class InlineCheckout {
         is_oneclick: true,
         items: this.cartItems,
       };
-      console.log('orderItems: ', orderItems)
       const jsonResponseOrder = await createOrder(
         this.baseUrl,
         this.apiKeyTonder,
@@ -413,9 +463,10 @@ export class InlineCheckout {
         paymentItems
       );
 
+      const selected_apm = this.apmsData ? this.apmsData.find((iapm) => iapm.pk ===  this.radioChecked):{};
+
       // Checkout router
       const routerItems = {
-        card: cardTokens,
         name: this.firstName || "",
         last_name: this.lastName || "",
         email_client: this.email,
@@ -437,6 +488,10 @@ export class InlineCheckout {
         metadata: this.metadata,
         browser_info: getBrowserInfo(),
         currency: this.currency,
+        ...( !!selected_apm 
+          ? {payment_method: selected_apm.payment_method}
+          : {card: cardTokens}
+        )
       };
       const jsonResponseRouter = await startCheckoutRouter(
         this.baseUrl,
@@ -460,8 +515,8 @@ export class InlineCheckout {
     }
   };
 
-  #loadCardsList (cards, token) {
-    if(this.cardsInjected) return;
+  #loadCardsList(cards, token) {
+    if (this.cardsInjected) return;
     const injectInterval = setInterval(() => {
       const queryElement = document.querySelector(`#${this.collectorIds.cardsListContainer}`);
       if (queryElement && InlineCheckout.injected) {
@@ -473,7 +528,25 @@ export class InlineCheckout {
     }, 500);
   }
 
-  #mountRadioButtons (token) {
+  #loadAPMList(apms) {
+    if (this.apmsInjected) return;
+    const injectInterval = setInterval(() => {
+      const queryElement = document.querySelector(`#${this.collectorIds.apmsListContainer}`);
+      if (queryElement && InlineCheckout.injected) {
+        const filteredAndSortedApms = apms
+          .filter((apm) =>
+            clearSpace(apm.category.toLowerCase()) !== 'cards' && apm.status.toLowerCase() === 'active')
+          .sort((a, b) => a.priority - b.priority);
+  
+        queryElement.innerHTML = apmItemsTemplate(filteredAndSortedApms);
+        clearInterval(injectInterval);
+        this.#mountRadioButtons();
+        this.apmsInjected = true;
+      }
+    }, 500);
+  }
+  
+  #mountRadioButtons(token = '') {
     const radioButtons = document.getElementsByName(`card_selected`);
     for (const radio of radioButtons) {
       radio.style.display = "block";
@@ -490,14 +563,14 @@ export class InlineCheckout {
     }
   }
 
-  async #handleRadioButtonClick (radio) {
-    if(radio.id === this.radioChecked ||  ( radio.id === "new" && this.radioChecked === undefined)) return;
+  async #handleRadioButtonClick(radio) {
+    if (radio.id === this.radioChecked || (radio.id === "new" && this.radioChecked === undefined)) return;
     const containerForm = document.querySelector(".container-form");
-    if(containerForm) {
+    if (containerForm) {
       containerForm.style.display = radio.id === "new" ? "block" : "none";
     }
-    if(radio.id === "new") {
-      if(this.radioChecked !== radio.id) {
+    if (radio.id === "new") {
+      if (this.radioChecked !== radio.id) {
         this.#addGlobalLoader()
         this.#mountTonder(false);
         InlineCheckout.injected = true;
@@ -508,32 +581,45 @@ export class InlineCheckout {
     this.radioChecked = radio.id;
   }
 
-  async #handleDeleteCardButtonClick (customerToken, button) {
+  async #handleDeleteCardButtonClick(customerToken, button) {
     const id = button.attributes.getNamedItem("id")
     const skyflow_id = id?.value?.split("_")?.[2]
-    if(skyflow_id) {
+    if (skyflow_id) {
       const cardClicked = document.querySelector(`#card_container-${skyflow_id}`);
-      if(cardClicked) {
+      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)
+      try {
+        this.deletingCards.push(skyflow_id);
+        if (this.abortRefreshCardsController) {
+          this.abortRefreshCardsController.abort();
+          this.abortRefreshCardsController = new AbortController();
+        }
+        await deleteCustomerCard(this.baseUrl, customerToken, skyflow_id)
+      } catch {
+      } finally {
+        this.deletingCards = this.deletingCards.filter(id => id !== skyflow_id);
+        this.#refreshCardOnDelete(customerToken)
       }
     }
   }
-
-  #unmountForm () {
+  async #refreshCardOnDelete(customerToken) {
+    if (this.deletingCards.length > 0) return;
+    this.cardsInjected = false
+    const cards = await getCustomerCards(this.baseUrl, customerToken, "", this.abortRefreshCardsController.signal)
+    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()
+    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

@@ -145,7 +145,7 @@ export async function deleteCustomerCard(baseUrlTonder, customerToken, skyflowId
       headers: {
         'Authorization': `Token ${customerToken}`,
         'Content-Type': 'application/json'
-      },
+      }
     });
 
     if (response.ok) return true;
@@ -154,7 +154,7 @@ export async function deleteCustomerCard(baseUrlTonder, customerToken, skyflowId
     throw buildErrorResponseFromCatch(error);
   }
 }
-export async function getCustomerCards(baseUrlTonder, customerToken, query = "") {
+export async function getCustomerCards(baseUrlTonder, customerToken, query = "", signal) {
   try {
     const response = await fetch(`${baseUrlTonder}/api/v1/cards/${query}`, {
       method: 'GET',
@@ -162,6 +162,28 @@ export async function getCustomerCards(baseUrlTonder, customerToken, query = "")
         'Authorization': `Token ${customerToken}`,
         'Content-Type': 'application/json'
       },
+      signal
+    });
+
+    if (response.ok) return await response.json();
+    throw await buildErrorResponse(response);
+  } catch (error) {
+    throw buildErrorResponseFromCatch(error);
+  }
+}
+
+export async function getCustomerAPMs(baseUrlTonder, apiKeyTonder, query = "", signal) {
+  try {
+    const response = await fetch(
+      // `${baseUrlTonder}/api/v1/payment_methods${query}`,
+      `http://localhost:8000/api/v1/payment_methods${query}`,
+      {
+      method: 'GET',
+      headers: {
+        Authorization: `Token ${apiKeyTonder}`,
+        'Content-Type': 'application/json'
+      },
+      signal
     });
 
     if (response.ok) return await response.json();