tonder-web-sdk 1.16.1 → 1.16.3

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/.prettierignore

@@ -0,0 +1,8 @@
+# Ignore artifacts:
+build
+coverage
+webpack.config.js
+v1
+README.md
+samples
+cypress

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

package/README.md

@@ -7,8 +7,10 @@ Tonder SDK helps to integrate the services Tonder offers in your own website
 1. [Installation](#installation)
 2. [Usage](#usage)
    - [InlineCheckout](#inlinecheckout)
-   - [LiteInlineCheckout](#Liteinlinecheckout)
-3. [Configuration Options](#configuration-options)
+   - [LiteCheckout](#litecheckout)
+3. [Configuration Options](#configuration)
+   - [Inline Options](#inline-options)
+   - [Lite Options](#lite-options)
 4. [Styling InlineCheckout](#styling-inlinecheckout)
 5. [Payment Data Structure](#payment-data-structure)
 6. [Field Validation Functions](#field-validation-functions)
@@ -148,25 +150,116 @@ const paymentResponse = await LiteInlineCheckout.payment(paymentData);
 const verificationResult = await LiteInlineCheckout.verify3dsTransaction();
 ```
 
-## Configuration Options
+## Configuration
+### Inline Options
 
-Both InlineCheckout and LiteInlineCheckout accept the following configuration options:
+|   Property    |         Type         | Required | Description                        | Default                                                                                                                                                                                                                                                                                |                                  Description                                  |
+|:-------------:|:--------------------:|----------|------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------:|
+|     mode      |        string        | Yes      | Environment mode for the SDK       | stage                                                                                                                                                                                                                                                                                  | Environment mode. Options: 'stage', 'production', 'sandbox'. Default: 'stage' |
+|    apiKey     |        string        | Yes      | Your Tonder Public API key         |                                                                                                                                                                                                                                                                                        |                    Your API key from the Tonder Dashboard                     |
+|   returnUrl   |        string        | Yes      | URL for 3DS redirect completion    |                                                                                                                                                                                                                                                                                        |             URL where the checkout form is mounted (used for 3DS)             |
+|    styles     |        object        | No       |                                    |                                                                                                                                                                                                                                                                                        |        (InlineCheckout only) Custom styles for the checkout interface         |
+| customization | CustomizationOptions | No       | UI customization options           | `{displayMode: 'light',saveCards: {showSaveCardOption: false,showSaved: false,autoSave: false,},paymentButton: {show: false,text: "Pagar",showAmount: true,},cancelButton: {show: false,text: "Cancelar",},paymentMethods: {show: true,},cardForm: {show: true,},showMessages: true,}` |               Object to customize the checkout behavior and UI.               |
+|   callbacks   |   IInlineCallbacks   | No       | Payment process callback functions |
+<details>
+<summary>View Interface Definition</summary>
 
-|                  Property                  |  Type   |                                                                 Description                                                                 |
-|:------------------------------------------:|:-------:|:-------------------------------------------------------------------------------------------------------------------------------------------:|
-|                    mode                    | string  |                                Environment mode. Options: 'stage', 'production', 'sandbox'. Default: 'stage'                                |
-|                   apiKey                   | string  |                                                   Your API key from the Tonder Dashboard                                                    |
-|                 returnUrl                  | string  |                                            URL where the checkout form is mounted (used for 3DS)                                            |
-|            renderPaymentButton             | boolean |                                                   View the default Tonder payment button                                                    |
-|                   styles                   | object  |                                       (InlineCheckout only) Custom styles for the checkout interface                                        |
-|               customization                | object  | Object to customize the checkout behavior and UI. Default value `{saveCards: {showSaved: true, showSaveCardOption: true, autoSave: false}}` |
-|     customization.saveCards.showSaved      | boolean |                                         Show saved cards in the checkout UI. Default value: `true`                                          |
-| customization.saveCards.showSaveCardOption | object  |                                 Show the option to save the card for future payments. Default value: `true`                                 |
-|      customization.saveCards.autoSave      | object  |                         Automatically save the card without showing the option to the user. Default value: `false`                          |
+```typescript
+interface IInlineCheckoutBaseOptions {
+  mode?: "production" | "sandbox" | "stage" | "development";
+  apiKey: string;
+  returnUrl: string;
+  callBack?: (response: any) => void;
+}
+interface IInlineCheckoutOptions extends IInlineCheckoutBaseOptions {
+  styles?: Record<string, string>;
+  customization?: CustomizationOptions;
+  callbacks?: IInlineCallbacks;
+}
+```
+</details>
 
 > **Important Note about SaveCard functionality**: 
 > To properly implement the SaveCard feature, you must use a SecureToken. For detailed implementation instructions and best practices, please refer to our official documentation on [How to use SecureToken for secure card saving](https://docs.tonder.io/integration/sdks/secure-token#how-to-use-securetoken-for-secure-card-saving).
 
+### Inline Callbacks Structure
+
+| Callback   | Required | Parameters | Description                                | Return        |
+|------------|----------|------------|--------------------------------------------|---------------|
+| `onCancel` | No       | none       | Called when user clicked the cancel button | Promise<void> |
+<details>
+<summary>View Interface Definition</summary>
+
+```typescript
+interface IInlineCallbacks extends IBaseCallback {
+  onCancel?: () => Promise<void>;
+}
+```
+</details>
+
+### Inline Customization Options
+
+| Option                       | Type    | Default    | Description                                                                               |
+|------------------------------|---------|------------|-------------------------------------------------------------------------------------------|
+| **saveCards**                |
+| saveCards.showSaveCardOption | boolean | true       | Shows a checkbox allowing users to choose whether to save their card for future purchases |
+| saveCards.showSaved          | boolean | true       | Displays a list of previously saved cards for the customer                                |
+| saveCards.autoSave           | boolean | false      | Automatically saves the card without showing the save option to the user                  |
+| **paymentButton**            |
+| paymentButton.show           | boolean | true       | Controls the visibility of the payment button                                             |
+| paymentButton.text           | string  | 'Pagar'    | Custom text to display on the payment button                                              |
+| paymentButton.showAmount     | boolean | true       | Shows the payment amount on the button (e.g., "Pay $100")                                 |
+| **cancelButton**             |
+| cancelButton.show            | boolean | true       | Controls the visibility of the cancel button                                              |
+| cancelButton.text            | string  | 'Cancelar' | Custom text to display on the cancel button                                               |
+| **paymentMethods**           |
+| paymentMethods.show          | boolean | true       | Controls the visibility of alternative payment methods section                            |
+| **cardForm**                 |
+| cardForm.show                | boolean | true       | Controls the visibility of the card input form                                            |
+| **General**                  |
+| showMessages                 | boolean | true       | Controls the visibility of error and success messages                                     |
+| displayMode                  | string  | light      | Controls the display mode light or dark                                                   |
+
+<details>
+<summary>View Interface Definition</summary>
+
+```typescript
+export type CustomizationOptions = {
+  displayMode?: "light" | "dark";
+  saveCards?: {
+    showSaveCardOption?: boolean;
+    showSaved?: boolean;
+    autoSave?: boolean;
+  };
+  paymentButton?: {
+    show?: boolean;
+    text?: string;
+    showAmount?: boolean;
+  };
+  cancelButton?: {
+    show?: boolean;
+    text?: string;
+  };
+  paymentMethods?: {
+    show?: boolean;
+  };
+  cardForm?: {
+    show?: boolean;
+  };
+  showMessages?: boolean;
+};
+```
+</details>
+
+## Lite Options
+
+| Property  |  Type  | Required | Description                     | Default |                                  Description                                  |
+|:---------:|:------:|----------|---------------------------------|---------|:-----------------------------------------------------------------------------:|
+|   mode    | string | Yes      | Environment mode for the SDK    | stage   | Environment mode. Options: 'stage', 'production', 'sandbox'. Default: 'stage' |
+|  apiKey   | string | Yes      | Your Tonder Public API key      |         |                    Your API key from the Tonder Dashboard                     |
+| returnUrl | string | Yes      | URL for 3DS redirect completion |         |             URL where the checkout form is mounted (used for 3DS)             |
+
+
 ## Styling InlineCheckout
 
 You can customize the appearance of InlineCheckout by passing a `styles` object:
@@ -453,7 +546,11 @@ const inlineCheckout = new InlineCheckout({
   apiKey,
   returnUrl,
   styles: customStyles,
-  renderPaymentButton: true, // activate default Tonder Payment button
+  customization: {
+    paymentButton: {
+      show: true
+    }
+  }, // activate default Tonder Payment button
   callBack: (response) => {
       console.log('Payment response', response)
   }  

package/eslint.config.mjs

@@ -0,0 +1,15 @@
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginPrettier from "eslint-plugin-prettier";
+
+export default [
+  eslintConfigPrettier,
+  {
+    files: ["src/**/*.js"],
+    plugins: {
+      prettier: eslintPluginPrettier,
+    },
+    rules: {
+      "prettier/prettier": "error",
+    },
+  },
+];

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.16.1",
+  "version": "1.16.3",
   "description": "tonder sdk for integrations",
   "main": "src/index.js",
   "scripts": {
     "start": "webpack-dev-server",
-    "build": "webpack --config webpack.config.js --mode production"
+    "build": "webpack --config webpack.config.js --mode production",
+    "prepare": "husky install",
+    "format": "prettier --write .",
+    "lint": "eslint 'src/**/*.js'",
+    "lint:fix": "eslint 'src/**/*.js' --fix"
   },
   "author": "",
   "types": "types/index.d.ts",
@@ -13,7 +17,8 @@
   "dependencies": {
     "accordion-js": "^3.4.0",
     "crypto-js": "^4.1.1",
-    "dotenv": "^16.3.1"
+    "dotenv": "^16.3.1",
+    "lodash.get": "^4.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -22,12 +27,23 @@
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
     "cypress": "^13.6.2",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "html-webpack-plugin": "^5.5.3",
-    "prettier": "^3.3.3",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.4.1",
+    "prettier": "3.4.2",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npm run format",
+      "npm run lint:fix"
+    ]
   }
 }

package/src/classes/3dsHandler.js

@@ -1,103 +1,99 @@
 export class ThreeDSHandler {
-  constructor({
-    payload = null,
-    apiKey,
-    baseUrl,
-  }) {
-    this.baseUrl = baseUrl
-    this.apiKey = apiKey
-    this.payload = payload
+  constructor({ payload = null, apiKey, baseUrl }) {
+    this.baseUrl = baseUrl;
+    this.apiKey = apiKey;
+    this.payload = payload;
   }
 
   saveVerifyTransactionUrl() {
-    const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url
+    const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url;
     if (url) {
-      this.saveUrlWithExpiration(url)
+      this.saveUrlWithExpiration(url);
     } else {
-      const url = this.payload?.next_action?.iframe_resources?.verify_transaction_status_url
+      const url = this.payload?.next_action?.iframe_resources?.verify_transaction_status_url;
       if (url) {
-        this.saveUrlWithExpiration(url)
+        this.saveUrlWithExpiration(url);
       } else {
-        console.log('No verify_transaction_status_url found');
+        console.log("No verify_transaction_status_url found");
       }
     }
   }
 
   saveUrlWithExpiration(url) {
     try {
-      const now = new Date()
+      const now = new Date();
       const item = {
         url: url,
         // Expires after 20 minutes
-        expires: now.getTime() + 20 * 60 * 1000
-      }
-      localStorage.setItem('verify_transaction_status', JSON.stringify(item))
+        expires: now.getTime() + 20 * 60 * 1000,
+      };
+      localStorage.setItem("verify_transaction_status", JSON.stringify(item));
     } catch (error) {
-     console.log('error: ', error)
+      console.log("error: ", error);
     }
   }
 
   getUrlWithExpiration() {
-    const item = JSON.parse(localStorage.getItem("verify_transaction_status"))
-    if (!item) return
+    const item = JSON.parse(localStorage.getItem("verify_transaction_status"));
+    if (!item) return;
 
-    const now = new Date()
+    const now = new Date();
     if (now.getTime() > item.expires) {
-      this.removeVerifyTransactionUrl()
-      return null
+      this.removeVerifyTransactionUrl();
+      return null;
     } else {
-      return item.url
+      return item.url;
     }
   }
 
   removeVerifyTransactionUrl() {
-    localStorage.removeItem("verify_transaction_status")
+    localStorage.removeItem("verify_transaction_status");
   }
 
   getVerifyTransactionUrl() {
-    return localStorage.getItem("verify_transaction_status") 
+    return localStorage.getItem("verify_transaction_status");
   }
 
   loadIframe() {
-    const iframe = this.payload?.next_action?.iframe_resources?.iframe
+    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
+        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
-          document.body.appendChild(container)
+          this.saveVerifyTransactionUrl();
+          const container = document.createElement("div");
+          container.innerHTML = iframe;
+          document.body.appendChild(container);
 
           // Create and append the script tag manually
-          const script = document.createElement('script')
-          script.textContent = 'document.getElementById("tdsMmethodForm").submit();'
-          container.appendChild(script)
+          const script = document.createElement("script");
+          script.textContent = 'document.getElementById("tdsMmethodForm").submit();';
+          container.appendChild(script);
 
           // Resolve the promise when the iframe is loaded
-          const iframeElement = document.getElementById('tdsMmethodTgtFrame')
-          iframeElement.onload = () => resolve(true)
+          const iframeElement = document.getElementById("tdsMmethodTgtFrame");
+          iframeElement.onload = () => resolve(true);
         } else {
-          console.log('No redirection found');
-          reject(false)
+          console.log("No redirection found");
+          reject(false);
         }
-      })
+      });
     }
   }
 
   getRedirectUrl() {
-    return this.payload?.next_action?.redirect_to_url?.url
+    return this.payload?.next_action?.redirect_to_url?.url;
   }
 
   redirectToChallenge() {
-    const url = this.getRedirectUrl()
+    const url = this.getRedirectUrl();
     if (url) {
-      this.saveVerifyTransactionUrl()
+      this.saveVerifyTransactionUrl();
       window.location = url;
     } else {
-      console.log('No redirection found');
+      console.log("No redirection found");
     }
   }
 
@@ -118,7 +114,7 @@ export class ThreeDSHandler {
   // TODO: Remove this duplication
   handleSuccessTransaction(response) {
     this.removeVerifyTransactionUrl();
-    console.log('Transacción autorizada');
+    console.log("Transacción autorizada");
     return response;
   }
 
@@ -129,22 +125,22 @@ export class ThreeDSHandler {
 
   async handle3dsChallenge(response_json) {
     // Create the form element:
-    const form = document.createElement('form');
-    form.name = 'frm';
-    form.method = 'POST';
+    const form = document.createElement("form");
+    form.name = "frm";
+    form.method = "POST";
     form.action = response_json.redirect_post_url;
 
     // Add hidden fields:
-    const creqInput = document.createElement('input');
-    creqInput.type = 'hidden';
-    creqInput.name = 'creq';
+    const creqInput = document.createElement("input");
+    creqInput.type = "hidden";
+    creqInput.name = "creq";
     creqInput.value = response_json.creq;
     form.appendChild(creqInput);
 
     if (response_json.term_url) {
-      const termUrlInput = document.createElement('input');
-      termUrlInput.type = 'hidden';
-      termUrlInput.name = 'TermUrl';
+      const termUrlInput = document.createElement("input");
+      termUrlInput.type = "hidden";
+      termUrlInput.name = "TermUrl";
       termUrlInput.value = response_json.term_url;
       form.appendChild(termUrlInput);
     }
@@ -164,7 +160,7 @@ export class ThreeDSHandler {
       return this.handleSuccessTransaction(response_json);
     } else {
       this.handleDeclinedTransaction();
-      return response_json
+      return response_json;
     }
   }
 
@@ -182,22 +178,22 @@ export class ThreeDSHandler {
           // body: JSON.stringify(data),
         });
         if (response.status !== 200) {
-          console.error('La verificación de la transacción falló.');
+          console.error("La verificación de la transacción falló.");
           this.removeVerifyTransactionUrl();
-          return response
+          return response;
         }
 
         return await this.handleTransactionResponse(response);
       } catch (error) {
-        console.error('Error al verificar la transacción:', error);
+        console.error("Error al verificar la transacción:", error);
         this.removeVerifyTransactionUrl();
       }
     } else {
-      console.log('No verify_transaction_status_url found');
+      console.log("No verify_transaction_status_url found");
     }
   }
 
-  setPayload = (payload) => {
-    this.payload = payload
-  }
+  setPayload = payload => {
+    this.payload = payload;
+  };
 }

package/src/classes/BaseInlineCheckout.js

@@ -35,7 +35,7 @@ export class BaseInlineCheckout {
    */
   configureCheckout(data) {
     if ("secureToken" in data) this.#handleSecureToken(data["secureToken"]);
-    this.#setCheckoutData(data)
+    this.#setCheckoutData(data);
   }
 
   /**
@@ -50,7 +50,7 @@ export class BaseInlineCheckout {
     this.process3ds.setPayload(resultCheckout);
     const response = await this.#handle3dsRedirect(resultCheckout);
     globalLoader.remove();
-    return response
+    return response;
   }
 
   /**
@@ -67,7 +67,7 @@ export class BaseInlineCheckout {
   payment(data) {
     return new Promise(async (resolve, reject) => {
       try {
-        this.#setCheckoutData(data)
+        this.#setCheckoutData(data);
         const response = await this._checkout(data);
         this.process3ds.setPayload(response);
         this.callBack(response);
@@ -90,24 +90,15 @@ export class BaseInlineCheckout {
   }
 
   async _getCustomer(customer, signal) {
-    return await registerOrFetchCustomer(
-      this.baseUrl,
-      this.apiKeyTonder,
-      customer,
-      signal,
-    );
+    return await registerOrFetchCustomer(this.baseUrl, this.apiKeyTonder, customer, signal);
   }
 
   async _checkout() {
-    throw new Error(
-      "The #checkout method should be implement in child classes.",
-    );
+    throw new Error("The #checkout method should be implement in child classes.");
   }
 
   _setCartTotal(total) {
-    throw new Error(
-      "The #setCartTotal method should be implement in child classes.",
-    );
+    throw new Error("The #setCartTotal method should be implement in child classes.");
   }
 
   async _handleCheckout({ card, payment_method, customer }) {
@@ -115,11 +106,7 @@ export class BaseInlineCheckout {
     const total = Number(this.cartTotal);
     try {
       let deviceSessionIdTonder;
-      if (
-        !deviceSessionIdTonder &&
-        openpay_keys.merchant_id &&
-        openpay_keys.public_key
-      ) {
+      if (!deviceSessionIdTonder && openpay_keys.merchant_id && openpay_keys.public_key) {
         deviceSessionIdTonder = await getOpenpayDeviceSessionID(
           openpay_keys.merchant_id,
           openpay_keys.public_key,
@@ -140,11 +127,7 @@ export class BaseInlineCheckout {
         is_oneclick: true,
         items: this.cartItems,
       };
-      const jsonResponseOrder = await createOrder(
-        this.baseUrl,
-        this.apiKeyTonder,
-        orderItems,
-      );
+      const jsonResponseOrder = await createOrder(this.baseUrl, this.apiKeyTonder, orderItems);
 
       // Create payment
       const now = new Date();
@@ -210,8 +193,8 @@ export class BaseInlineCheckout {
     }
   }
 
-  #setCheckoutData(data){
-    if(!data) return;
+  #setCheckoutData(data) {
+    if (!data) return;
     this.#handleCustomer(data.customer);
     this._setCartTotal(data.cart?.total);
     this.#setCartItems(data.cart?.items);
@@ -245,11 +228,7 @@ export class BaseInlineCheckout {
         checkout_id: response?.checkout?.id,
       };
       try {
-        return await startCheckoutRouter(
-          this.baseUrl,
-          this.apiKeyTonder,
-          routerItems,
-        );
+        return await startCheckoutRouter(this.baseUrl, this.apiKeyTonder, routerItems);
       } catch (error) {
         // throw error
       } finally {
@@ -296,7 +275,7 @@ export class BaseInlineCheckout {
   }
 
   async #handle3dsRedirect(response) {
-    console.log('Handling 3DS redirect...');
+    console.log("Handling 3DS redirect...");
     const iframe = response?.next_action?.iframe_resources?.iframe;
     const threeDsChallenge = response?.next_action?.three_ds_challenge;
 

package/src/classes/LiteInlineCheckout.js

@@ -47,7 +47,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
       );
       return {
         ...response,
-        cards: response.cards.map((ic) => ({
+        cards: response.cards.map(ic => ({
           ...ic,
           icon: getCardType(ic.fields.card_scheme),
         })),
@@ -151,8 +151,8 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
           : [];
 
       return apms_results
-        .filter((apmItem) => apmItem.category.toLowerCase() !== "cards")
-        .map((apmItem) => {
+        .filter(apmItem => apmItem.category.toLowerCase() !== "cards")
+        .map(apmItem => {
           const apm = {
             id: apmItem.pk,
             payment_method: apmItem.payment_method,
@@ -178,10 +178,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
   }
 
   async _checkout({ card, payment_method }) {
-    const customer = await this._getCustomer(
-      this.customer,
-      this.abortController.signal,
-    );
+    const customer = await this._getCustomer(this.customer, this.abortController.signal);
     const { vault_id, vault_url } = this.merchantData;
     let skyflowTokens;
     if (!payment_method || payment_method !== "" || payment_method === null) {
@@ -193,7 +190,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
         skyflowTokens = await getSkyflowTokens({
           vault_id: vault_id,
           vault_url: vault_url,
-          data: {...card, card_number: card.card_number.replace(/\s+/g, '')},
+          data: { ...card, card_number: card.card_number.replace(/\s+/g, "") },
           baseUrl: this.baseUrl,
           apiKey: this.apiKeyTonder,
         });