tonder-web-sdk 1.9.2 → 1.10.2

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.10.2",
   "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

@@ -24,6 +24,7 @@ import { ThreeDSHandler } from './3dsHandler.js';
 export class InlineCheckout {
   static injected = false;
   static cardsInjected = false
+  deletingCards = [];
   customer = {}
   items = []
   baseUrl = null
@@ -42,7 +43,6 @@ export class InlineCheckout {
     tonderPayButton: "tonderPayButton",
     msgError: "msgError",
     msgNotification: "msgNotification"
-
   }
 
   constructor({
@@ -64,6 +64,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 +77,7 @@ export class InlineCheckout {
       'stage': 'https://stage.tonder.io',
       'development': 'http://localhost:8000',
     };
- 
+
     return modeUrls[this.mode] || modeUrls['stage']
   }
 
@@ -110,6 +111,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 +146,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 +160,6 @@ export class InlineCheckout {
   }
 
   #handleCustomer(customer) {
-    console.log('customer: ', customer)
     if (!customer) return
 
     this.firstName = customer?.firstName
@@ -186,15 +187,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 +212,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 +228,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,7 +272,7 @@ export class InlineCheckout {
     }
   }
 
-  #mount(containerTonderCheckout){
+  #mount(containerTonderCheckout) {
     containerTonderCheckout.innerHTML = cardTemplate;
     this.#addGlobalLoader();
     this.#mountTonder();
@@ -269,20 +294,28 @@ export class InlineCheckout {
 
   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) {
+      console.log("this.email : ", this.email )
+      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';
+          console.log("mode: ", this.mode)
+          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)
+            }
           }
         }
       }
@@ -299,7 +332,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.")
@@ -340,9 +373,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 +391,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 +422,6 @@ export class InlineCheckout {
         is_oneclick: true,
         items: this.cartItems,
       };
-      console.log('orderItems: ', orderItems)
       const jsonResponseOrder = await createOrder(
         this.baseUrl,
         this.apiKeyTonder,
@@ -460,8 +492,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 +505,7 @@ export class InlineCheckout {
     }, 500);
   }
 
-  #mountRadioButtons (token) {
+  #mountRadioButtons(token) {
     const radioButtons = document.getElementsByName(`card_selected`);
     for (const radio of radioButtons) {
       radio.style.display = "block";
@@ -490,14 +522,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 +540,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,7 @@ export async function getCustomerCards(baseUrlTonder, customerToken, query = "")
         'Authorization': `Token ${customerToken}`,
         'Content-Type': 'application/json'
       },
+      signal
     });
 
     if (response.ok) return await response.json();

package/src/helpers/template.js

@@ -19,7 +19,7 @@ export const cardTemplate = `
       <div id="collectExpirationYear" class="expiration-year"></div>
       <div id="collectCvv" class="empty-div"></div>
     </div>
-    <div class="checkbox">
+    <div class="checkbox" id="save-card-container">
       <input id="save-checkout-card" type="checkbox">
       <label for="save-checkout-card">
         Guardar tarjeta para futuros pagos

package/src/index-dev.js

@@ -97,21 +97,26 @@ const checkoutData = {
 };
 
 // localhost
-const apiKey = "4c87c36e697e65ddfe288be0afbe7967ea0ab865";
+const apiKey = "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27";
 const returnUrl = "http://127.0.0.1:8080/"
 const successUrl = "http://127.0.0.1:8080/success"
 // stage
 // const apiKey = "8365683bdc33dd6d50fe2397188d79f1a6765852";
 
 const inlineCheckout = new InlineCheckout({
-  mode: 'development',
+  mode: 'stage',
   apiKey,
   returnUrl,
   successUrl,
   styles: customStyles
 });
-inlineCheckout.setCustomerEmail(checkoutData.customer.email)
+inlineCheckout.configureCheckout({customer: checkoutData.customer})
 inlineCheckout.injectCheckout();
+//
+// ['Declined', 'Cancelled', 'Failed', 'Success', 'Pending', 'Authorized']
+inlineCheckout.verify3dsTransaction().then(response => {
+  console.log('Verify 3ds response', response)
+})
 
 document.addEventListener('DOMContentLoaded', function() {
   const payButton = document.getElementById('pay-button');