tonder-web-sdk 1.12.3 → 1.15.2

package/package.json

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

package/src/classes/3dsHandler.js

@@ -4,8 +4,8 @@ export class ThreeDSHandler {
     apiKey,
     baseUrl,
   }) {
-    this.baseUrl = baseUrl,
-    this.apiKey = apiKey,
+    this.baseUrl = baseUrl
+    this.apiKey = apiKey
     this.payload = payload
   }
 
@@ -60,12 +60,12 @@ export class ThreeDSHandler {
 
   loadIframe() {
     const iframe = this.payload?.next_action?.iframe_resources?.iframe
-
     if (iframe) {
       return new Promise((resolve, reject) => {
         const iframe = this.payload?.next_action?.iframe_resources?.iframe
 
         if (iframe) {
+          // TODO: This is not working for Azul
           this.saveVerifyTransactionUrl()
           const container = document.createElement('div')
           container.innerHTML = iframe
@@ -127,8 +127,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,27 +137,26 @@ 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);
     form.submit();
-
-    await this.verifyTransactionStatus();
   }
 
-  // TODO: This method could be removed
+  // TODO: This works for Azul
   async handleTransactionResponse(response) {
     const response_json = await response.json();
-
     // Azul property
     if (response_json.status === "Pending" && response_json.redirect_post_url) {
       return await this.handle3dsChallenge(response_json);
@@ -173,7 +170,6 @@ export class ThreeDSHandler {
 
   async verifyTransactionStatus() {
     const verifyUrl = this.getUrlWithExpiration();
-
     if (verifyUrl) {
       const url = `${this.baseUrl}${verifyUrl}`;
       try {

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"]);
   }
 
   /**
@@ -46,8 +47,9 @@ export class BaseInlineCheckout {
     const result3ds = await this.process3ds.verifyTransactionStatus();
     const resultCheckout = await this.#resumeCheckout(result3ds);
     this.process3ds.setPayload(resultCheckout);
+    const response = await this.#handle3dsRedirect(resultCheckout);
     globalLoader.remove();
-    return this.#handle3dsRedirect(resultCheckout);
+    return response
   }
 
   /**
@@ -158,6 +160,7 @@ export class BaseInlineCheckout {
         amount: total,
         date: dateString,
         order_id: jsonResponseOrder.id,
+        customer_order_reference: this.order_reference ? this.order_reference : reference,
       };
       const jsonResponsePayment = await createPayment(
         this.baseUrl,
@@ -222,7 +225,7 @@ export class BaseInlineCheckout {
 
   async #resumeCheckout(response) {
     // Stop the routing process if the transaction is either hard declined or successful
-    if (response?.decline?.error_type === "Hard") {
+    if (response?.decline?.error_type === "Hard" || !!response?.checkout?.is_route_finished) {
       return response;
     }
 
@@ -265,8 +268,13 @@ export class BaseInlineCheckout {
     this.customer = customer;
   }
 
+  #handleSecureToken(secureToken) {
+    this.secureToken = secureToken;
+  }
+
   #handleMetadata(data) {
     this.metadata = data?.metadata;
+    this.order_reference = data?.order_reference;
   }
 
   #handleCurrency(data) {
@@ -282,23 +290,22 @@ 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();
+        const res = await this.process3ds.verifyTransactionStatus();
+        return res;
+      } catch (error) {
+        console.log("Error loading iframe:", error);
+      }
+    } else if (threeDsChallenge) {
+      await this.process3ds.handle3dsChallenge(threeDsChallenge);
+      const res = await this.process3ds.verifyTransactionStatus();
+      return res;
     } 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

@@ -98,11 +98,13 @@ const checkoutData = {
   // metadata: {
   //   order_id: 123456
   // }
+  // Reference from the merchant
+  order_reference: "ORD-123456"
 };
 
 // localhost
 const apiKey = "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27";
-const returnUrl = "http://127.0.0.1:8080/";
+const returnUrl = "http://localhost:8080/";
 // stage
 // const apiKey = "8365683bdc33dd6d50fe2397188d79f1a6765852";
 
@@ -113,7 +115,6 @@ const commonConfig = {
   styles: customStyles,
 };
 
-let checkout;
 let inlineCheckout;
 let liteInlineCheckout;
 
@@ -133,7 +134,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 +163,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 {