tonder-web-sdk 1.12.3 → 1.14.0

package/package.json

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

package/src/classes/3dsHandler.js

@@ -6,7 +6,8 @@ export class ThreeDSHandler {
   }) {
     this.baseUrl = baseUrl,
     this.apiKey = apiKey,
-    this.payload = payload
+    this.payload = payload,
+    this.isTransactionPending = false
   }
 
   saveVerifyTransactionUrl() {
@@ -127,8 +128,6 @@ export class ThreeDSHandler {
     return response;
   }
 
-  // TODO: the method below needs to be tested with a real 3DS challenge
-  // since we couldn't get a test card that works with this feature
   async handle3dsChallenge(response_json) {
     // Create the form element:
     const form = document.createElement('form');
@@ -139,15 +138,17 @@ export class ThreeDSHandler {
     // Add hidden fields:
     const creqInput = document.createElement('input');
     creqInput.type = 'hidden';
-    creqInput.name = response_json.creq;
+    creqInput.name = 'creq';
     creqInput.value = response_json.creq;
     form.appendChild(creqInput);
 
-    const termUrlInput = document.createElement('input');
-    termUrlInput.type = 'hidden';
-    termUrlInput.name =  response_json.term_url;
-    termUrlInput.value = response_json.TermUrl;
-    form.appendChild(termUrlInput);
+    if (response_json.term_url) {
+      const termUrlInput = document.createElement('input');
+      termUrlInput.type = 'hidden';
+      termUrlInput.name = 'TermUrl';
+      termUrlInput.value = response_json.term_url;
+      form.appendChild(termUrlInput);
+    }
 
     // Append the form to the body:
     document.body.appendChild(form);
@@ -172,6 +173,14 @@ export class ThreeDSHandler {
   }
 
   async verifyTransactionStatus() {
+    console.log('Verificando la transacción...');
+
+    if (this.isTransactionPending) {
+      console.log('La transacción ya está en proceso');
+      return
+    }
+
+    this.isTransactionPending = true
     const verifyUrl = this.getUrlWithExpiration();
 
     if (verifyUrl) {
@@ -199,6 +208,8 @@ export class ThreeDSHandler {
     } else {
       console.log('No verify_transaction_status_url found');
     }
+
+    this.isTransactionPending = false
   }
 
   setPayload = (payload) => {

package/src/classes/BaseInlineCheckout.js

@@ -34,6 +34,7 @@ export class BaseInlineCheckout {
    */
   configureCheckout(data) {
     if ("customer" in data) this.#handleCustomer(data["customer"]);
+    if ("secureToken" in data) this.#handleSecureToken(data["secureToken"]);
   }
 
   /**
@@ -265,6 +266,10 @@ export class BaseInlineCheckout {
     this.customer = customer;
   }
 
+  #handleSecureToken(secureToken) {
+    this.secureToken = secureToken;
+  }
+
   #handleMetadata(data) {
     this.metadata = data?.metadata;
   }
@@ -282,23 +287,19 @@ export class BaseInlineCheckout {
   }
 
   async #handle3dsRedirect(response) {
+    console.log('Handling 3DS redirect...');
     const iframe = response?.next_action?.iframe_resources?.iframe;
+    const threeDsChallenge = response?.next_action?.three_ds_challenge;
 
     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);
-        });
+      try {
+        await this.process3ds.loadIframe();
+        await this.process3ds.verifyTransactionStatus();
+      } catch (error) {
+        console.log("Error loading iframe:", error);
+      }
+    } else if (threeDsChallenge) {
+      await this.process3ds.handle3dsChallenge(threeDsChallenge);
     } else {
       const redirectUrl = this.process3ds.getRedirectUrl();
       if (redirectUrl) {

package/src/classes/inlineCheckout.js

@@ -63,14 +63,14 @@ export class InlineCheckout extends BaseInlineCheckout {
     this.customStyles = styles
     this.abortRefreshCardsController = new AbortController();
     // TODO: Wait until SaveCards is ready (server token).
-    // this.customization = {
-    //   ...this.customization,
-    //   ...(customization || {}),
-    //   saveCards: {
-    //     ...this.customization.saveCards,
-    //     ...(customization?.saveCards || {}),
-    //   },
-    // } 
+    this.customization = {
+      ...this.customization,
+      ...(customization || {}),
+      saveCards: {
+        ...this.customization.saveCards,
+        ...(customization?.saveCards || {}),
+      },
+    } 
   }
 
   #mountPayButton() {
@@ -295,9 +295,13 @@ export class InlineCheckout extends BaseInlineCheckout {
     const saveCard = document.getElementById("save-checkout-card");
     if ((saveCard && "checked" in saveCard && saveCard.checked) || !!this.customization.saveCards?.autoSave) {
       try {
-        await saveCustomerCard(this.baseUrl, auth_token, businessId, {
-          skyflow_id: cardTokens.skyflow_id,
-        });
+        await saveCustomerCard(
+          this.baseUrl,
+          auth_token,
+          this.secureToken,
+          businessId,
+          { skyflow_id: cardTokens.skyflow_id, }
+        );
         showMessage(MESSAGES.cardSaved, this.collectorIds.msgNotification);
       } catch (error) {
         if (error?.message) {
@@ -314,6 +318,7 @@ export class InlineCheckout extends BaseInlineCheckout {
     const cardsResponse = await fetchCustomerCards(
         this.baseUrl,
         token,
+        this.secureToken,
         this.merchantData.business.pk,
     );
     let cards = []
@@ -400,7 +405,13 @@ export class InlineCheckout extends BaseInlineCheckout {
           this.abortRefreshCardsController = new AbortController();
         }
         const businessId = this.merchantData.business.pk
-        await removeCustomerCard(this.baseUrl, customerToken, skyflow_id, businessId)
+        await removeCustomerCard(
+          this.baseUrl,
+          customerToken,
+          this.secureToken,
+          skyflow_id,
+          businessId
+        )
       } catch (error) { } finally {
         this.deletingCards = this.deletingCards.filter(id => id !== skyflow_id);
         this.#refreshCardOnDelete(customerToken)

package/src/data/cardApi.js

@@ -11,6 +11,7 @@ import {MESSAGES} from "../shared/constants/messages";
  *
  * @param {string} baseUrl - The base URL of the API.
  * @param {string} customerToken - The customer's authentication token.
+ * @param {string} secureToken - Token generated by secure-token endpoint.
  * @param {string | number} businessId - The business ID.
  * @param {import("../../types").ISaveCardSkyflowRequest} data - The card information to be saved.
  * @returns {Promise<import("../../types").ISaveCardResponse>} The saved card data.
@@ -20,6 +21,7 @@ import {MESSAGES} from "../shared/constants/messages";
 export async function saveCustomerCard(
   baseUrl,
   customerToken,
+  secureToken,
   businessId,
   data,
 ) {
@@ -28,7 +30,8 @@ export async function saveCustomerCard(
     const response = await fetch(url, {
       method: "POST",
       headers: {
-        Authorization: `Token ${customerToken}`,
+        Authorization: `Bearer ${secureToken}`,
+        "User-Token": customerToken,
         "Content-Type": "application/json",
       },
       body: JSON.stringify(data),
@@ -57,6 +60,7 @@ export async function saveCustomerCard(
  * Removes a customer's card.
  * @param {string} baseUrl - The base URL of the  API.
  * @param {string} customerToken - The customer's authentication token.
+ * @param {string} secureToken - Token generated by secure-token endpoint.
  * @param {string} skyflowId - The Skyflow ID of the card to be removed.
  * @param {string} businessId - The business ID.
  * @returns {Promise<string>} The result of the card removal operation.
@@ -66,6 +70,7 @@ export async function saveCustomerCard(
 export async function removeCustomerCard(
   baseUrl,
   customerToken,
+  secureToken,
   skyflowId = "",
   businessId,
 ) {
@@ -75,8 +80,9 @@ export async function removeCustomerCard(
     const response = await fetch(url, {
       method: "DELETE",
       headers: {
-        Authorization: `Token ${customerToken}`,
+        Authorization: `Bearer ${secureToken}`,
         "Content-Type": "application/json",
+        "User-Token": customerToken,
       },
     });
 
@@ -94,6 +100,7 @@ export async function removeCustomerCard(
  * Fetches a customer's saved cards.
  * @param {string} baseUrl - The base URL of the  API.
  * @param {string} customerToken - The customer's authentication token.
+ * @param {string} secureToken - Token generated by secure-token endpoint.
  * @param {string} businessId - The business ID.
  * @param {AbortSignal} signal - The abort signal to cancel the request.
  * @returns {Promise<import("../../types").ICustomerCardsResponse>} The customer's saved cards.
@@ -103,6 +110,7 @@ export async function removeCustomerCard(
 export async function fetchCustomerCards(
   baseUrl,
   customerToken,
+  secureToken,
   businessId,
   signal= null,
 ) {
@@ -111,12 +119,21 @@ export async function fetchCustomerCards(
     const response = await fetch(url, {
       method: "GET",
       headers: {
-        Authorization: `Token ${customerToken}`,
-        "Content-Type": "application/json",
+        Authorization: `Bearer ${secureToken}`,
+        "User-Token": customerToken,
       },
       signal,
     });
     if (response.ok) return await response.json();
+    if (response.status === 401) {
+      return {
+        code: 401,
+        body: {},
+        name: "",
+        message: "Unauthorized",
+      };
+    }
+
     const res_json = await response.json();
 
     throw await buildErrorResponse(response, res_json, MESSAGES.getCardsError);

package/src/index-dev.js

@@ -113,7 +113,6 @@ const commonConfig = {
   styles: customStyles,
 };
 
-let checkout;
 let inlineCheckout;
 let liteInlineCheckout;
 
@@ -133,7 +132,10 @@ function setupInlineCheckout() {
       },
     },
   });
-  inlineCheckout.configureCheckout({ customer: checkoutData.customer });
+  inlineCheckout.configureCheckout({
+    customer: checkoutData.customer,
+    secureToken: "eyJhbGc..."
+  });
   inlineCheckout.injectCheckout();
   // ['Declined', 'Cancelled', 'Failed', 'Success', 'Pending', 'Authorized']
   inlineCheckout.verify3dsTransaction().then((response) => {
@@ -159,7 +161,10 @@ function setupInlineCheckout() {
 function setupLiteInlineCheckout() {
   loadMaskitoMask();
   liteInlineCheckout = new LiteInlineCheckout(commonConfig);
-  liteInlineCheckout.configureCheckout({ customer: checkoutData.customer });
+  liteInlineCheckout.configureCheckout({
+    customer: checkoutData.customer,
+    secureToken: "eyJhbGc..."
+  });
   liteInlineCheckout.injectCheckout().then(() => {});
   liteInlineCheckout.verify3dsTransaction().then((response) => {
     console.log("Verify 3ds response", response);

package/types/common.d.ts

@@ -9,6 +9,7 @@ export interface IInlineCheckoutBaseOptions {
 
 export interface IConfigureCheckout {
   customer: ICustomer;
+  secureToken: string;
 }
 
 export interface IApiError {