tonder-web-sdk 1.15.2 → 1.16.1

package/README.md

@@ -7,7 +7,7 @@ Tonder SDK helps to integrate the services Tonder offers in your own website
 1. [Installation](#installation)
 2. [Usage](#usage)
    - [InlineCheckout](#inlinecheckout)
-   - [LiteCheckout](#litecheckout)
+   - [LiteInlineCheckout](#Liteinlinecheckout)
 3. [Configuration Options](#configuration-options)
 4. [Styling InlineCheckout](#styling-inlinecheckout)
 5. [Payment Data Structure](#payment-data-structure)
@@ -96,16 +96,16 @@ inlineCheckout.verify3dsTransaction().then((response) => {
 const response = await inlineCheckout.payment(checkoutData);
 ```
 
-### LiteCheckout
+### LiteInlineCheckout
 
-LiteCheckout allows you to build a custom checkout interface using Tonder's core functionality.
+LiteInlineCheckout allows you to build a custom checkout interface using Tonder's core functionality.
 
 ```javascript
-import { LiteCheckout } from "tonder-web-sdk";
+import { LiteInlineCheckout } from "tonder-web-sdk";
 ```
 
 ```javascript
-const liteCheckout = new LiteCheckout({
+const LiteInlineCheckout = new LiteInlineCheckout({
   apiKey: "your-api-key", // Your api key getted from Tonder Dashboard
   returnUrl: "http://your-website.com/checkout",
 });
@@ -115,54 +115,58 @@ const liteCheckout = new LiteCheckout({
 inlineCheckout.configureCheckout({ customer: { email: "example@email.com" } });
 
 // Initialize the checkout
-await liteCheckout.injectCheckout();
+await LiteInlineCheckout.injectCheckout();
 ```
 
 ```javascript
 // Retrieve customer's saved cards
-const cards = await liteCheckout.getCustomerCards();
+const cards = await LiteInlineCheckout.getCustomerCards();
 ```
 
 ```javascript
 // Save a new card
-const newCard = await liteCheckout.saveCustomerCard(cardData);
+const newCard = await LiteInlineCheckout.saveCustomerCard(cardData);
 ```
 
 ```javascript
 // Remove a saved card
-await liteCheckout.removeCustomerCard(cardId);
+await LiteInlineCheckout.removeCustomerCard(cardId);
 ```
 
 ```javascript
 // Get available payment methods
-const paymentMethods = await liteCheckout.getCustomerPaymentMethods();
+const paymentMethods = await LiteInlineCheckout.getCustomerPaymentMethods();
 ```
 
 ```javascript
 // Process a payment
-const paymentResponse = await liteCheckout.payment(paymentData);
+const paymentResponse = await LiteInlineCheckout.payment(paymentData);
 ```
 
 ```javascript
 // Verify a 3DS transaction
-const verificationResult = await liteCheckout.verify3dsTransaction();
+const verificationResult = await LiteInlineCheckout.verify3dsTransaction();
 ```
 
 ## Configuration Options
 
-Both InlineCheckout and LiteCheckout accept the following configuration options:
+Both InlineCheckout and LiteInlineCheckout accept the following configuration options:
 
 |                  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`                          |
 
+> **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).
+
 ## Styling InlineCheckout
 
 You can customize the appearance of InlineCheckout by passing a `styles` object:
@@ -252,15 +256,15 @@ When calling the `payment` method, use the following data structure:
 
 - **metadata**: Object for including any additional information about the transaction. This can be used for internal references or tracking.
 
-- **card**: (for LiteCheckout) Object containing card information. This is used differently depending on whether it's a new card or a saved card:
+- **card**: (for LiteInlineCheckout) Object containing card information. This is used differently depending on whether it's a new card or a saved card:
 
   - For a new card: Include `card_number`, `cvv`, `expiration_month`, `expiration_year`, and `cardholder_name`.
   - For a saved card: Include only the `skyflow_id` of the saved card.
   - This is only used when not paying with a payment_method.
 
-- **payment_method**: (for LiteCheckout) String indicating the alternative payment method to be used (e.g., "Spei"). This is only used when not paying with a card.
+- **payment_method**: (for LiteInlineCheckout) String indicating the alternative payment method to be used (e.g., "Spei"). This is only used when not paying with a card.
 
-Note: The exact fields required may vary depending on whether you're using InlineCheckout or LiteCheckout, and the specific payment method being used.
+Note: The exact fields required may vary depending on whether you're using InlineCheckout or LiteInlineCheckout, and the specific payment method being used.
 
 ```javascript
 const paymentData = {
@@ -312,7 +316,7 @@ const paymentData = {
 
 ## Field Validation Functions
 
-For LiteCheckout implementations, the SDK provides validation functions to ensure the integrity of card data before submitting:
+For LiteInlineCheckout implementations, the SDK provides validation functions to ensure the integrity of card data before submitting:
 
 - `validateCardNumber(cardNumber)`: Validates the card number using the Luhn algorithm.
 - `validateCardholderName(name)`: Checks if the cardholder name is valid.
@@ -357,7 +361,7 @@ if (
 - `payment(data)`: Process a payment
 - `verify3dsTransaction()`: Verify a 3DS transaction
 
-### LiteCheckout Methods
+### LiteInlineCheckout Methods
 
 - `configureCheckout(data)`: Set initial checkout data
 - `injectCheckout()`: Initialize the checkout
@@ -434,6 +438,59 @@ document
   });
 ```
 
+
+#### InlineCheckout with default Tonder Payment button Example (your-script.js)
+> 💡 **Note:** It is important to send all payment data (customer, cart, metadata, etc) when configuring the checkout; this is necessary when using Tonder's default payment button.
+
+```javascript
+import { InlineCheckout } from "tonder-web-sdk";
+
+const apiKey = "your-api-key";
+const returnUrl = "http://your-website.com/checkout";
+
+const inlineCheckout = new InlineCheckout({
+  mode: "development",
+  apiKey,
+  returnUrl,
+  styles: customStyles,
+  renderPaymentButton: true, // activate default Tonder Payment button
+  callBack: (response) => {
+      console.log('Payment response', response)
+  }  
+});
+
+// It is important to send all payment data (customer, cart, metadata, etc) when configuring the checkout; this is necessary when using Tonder's default payment button.
+inlineCheckout.configureCheckout(
+    { 
+        customer: { email: "example@email.com" },
+        currency: "mxn",
+        cart: {
+            total: 399,
+            items: [
+                {
+                    description: "Black T-Shirt",
+                    quantity: 1,
+                    price_unit: 1,
+                    discount: 0,
+                    taxes: 0,
+                    product_reference: 1,
+                    name: "T-Shirt",
+                    amount_total: 399,
+                },
+            ],
+        },
+        metadata: {}, // Optional
+        order_reference: "" // Optional
+    }
+);
+inlineCheckout.injectCheckout();
+
+inlineCheckout.verify3dsTransaction().then((response) => {
+  console.log("Verify 3ds response", response);
+});
+```
+
+
 #### LiteCheckout Example (your-script.js)
 
 ```javascript
@@ -442,16 +499,16 @@ import { LiteInlineCheckout } from "tonder-web-sdk";
 const apiKey = "your-api-key";
 const returnUrl = "http://your-website.com/checkout";
 
-const liteCheckout = new LiteInlineCheckout({
+const LiteInlineCheckout = new LiteInlineCheckout({
   mode: "development",
   apiKey,
   returnUrl,
 });
 
-liteCheckout.configureCheckout({ customer: { email: "example@email.com" } });
-liteCheckout.injectCheckout();
+LiteInlineCheckout.configureCheckout({ customer: { email: "example@email.com" } });
+LiteInlineCheckout.injectCheckout();
 
-liteCheckout.verify3dsTransaction().then((response) => {
+LiteInlineCheckout.verify3dsTransaction().then((response) => {
   console.log("Verify 3ds response", response);
 });
 
@@ -469,7 +526,7 @@ document
 
     try {
       const paymentData = { ...checkoutData, card: cardData };
-      const response = await liteCheckout.payment(paymentData);
+      const response = await LiteInlineCheckout.payment(paymentData);
       console.log("Payment response:", response);
       alert("Payment successful");
     } catch (error) {
@@ -681,7 +738,7 @@ export class TonderService {
   // Add more functions, for example for lite sdk: get payment methods
 
   // getCustomerPaymentMethods(): Promise<IPaymentMethod[]> {
-  //     return this.liteCheckout.getCustomerPaymentMethods();
+  //     return this.LiteInlineCheckout.getCustomerPaymentMethods();
   // }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.15.2",
+  "version": "1.16.1",
   "description": "tonder sdk for integrations",
   "main": "src/index.js",
   "scripts": {
@@ -11,6 +11,7 @@
   "types": "types/index.d.ts",
   "license": "ISC",
   "dependencies": {
+    "accordion-js": "^3.4.0",
     "crypto-js": "^4.1.1",
     "dotenv": "^16.3.1"
   },

package/src/classes/BaseInlineCheckout.js

@@ -13,6 +13,7 @@ import { getBrowserInfo, injectMercadoPagoSecurity } from "../helpers/utils";
 export class BaseInlineCheckout {
   baseUrl = "";
   cartTotal = "0";
+  secureToken = "";
   constructor({ mode = "stage", apiKey, returnUrl, callBack = () => {} }) {
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
@@ -33,8 +34,8 @@ export class BaseInlineCheckout {
    * @public
    */
   configureCheckout(data) {
-    if ("customer" in data) this.#handleCustomer(data["customer"]);
     if ("secureToken" in data) this.#handleSecureToken(data["secureToken"]);
+    this.#setCheckoutData(data)
   }
 
   /**
@@ -66,12 +67,7 @@ export class BaseInlineCheckout {
   payment(data) {
     return new Promise(async (resolve, reject) => {
       try {
-        this.#handleCustomer(data.customer);
-        this._setCartTotal(data.cart?.total);
-        this.#setCartItems(data.cart?.items);
-        this.#handleMetadata(data);
-        this.#handleCurrency(data);
-        this.#handleCard(data);
+        this.#setCheckoutData(data)
         const response = await this._checkout(data);
         this.process3ds.setPayload(response);
         this.callBack(response);
@@ -214,6 +210,16 @@ export class BaseInlineCheckout {
     }
   }
 
+  #setCheckoutData(data){
+    if(!data) return;
+    this.#handleCustomer(data.customer);
+    this._setCartTotal(data.cart?.total);
+    this.#setCartItems(data.cart?.items);
+    this.#handleMetadata(data);
+    this.#handleCurrency(data);
+    this.#handleCard(data);
+  }
+
   async #fetchMerchantData() {
     this.merchantData = await fetchBusiness(
       this.baseUrl,

package/src/classes/LiteInlineCheckout.js

@@ -42,6 +42,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
       const response = await fetchCustomerCards(
         this.baseUrl,
         auth_token,
+        this.secureToken,
         this.merchantData.business.pk,
       );
       return {
@@ -87,6 +88,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
       return await saveCustomerCard(
         this.baseUrl,
         auth_token,
+        this.secureToken,
         business?.pk,
         skyflowTokens,
       );
@@ -117,6 +119,7 @@ export class LiteInlineCheckout extends BaseInlineCheckout {
       return await removeCustomerCard(
         this.baseUrl,
         auth_token,
+        this.secureToken,
         skyflowId,
         business?.pk,
       );

package/src/classes/inlineCheckout.js

@@ -6,7 +6,7 @@ import {
   showError,
   showMessage
 } from '../helpers/utils';
-import { initSkyflow } from '../helpers/skyflow'
+import { initSkyflow, initUpdateSkyflow } from '../helpers/skyflow'
 import { globalLoader } from './globalLoader.js';
 import { BaseInlineCheckout } from "./BaseInlineCheckout";
 import {
@@ -16,16 +16,20 @@ import {
   fetchCustomerAPMs
 } from "../data";
 import { MESSAGES } from "../shared/constants/messages";
+import Accordion from "accordion-js";
 
 export class InlineCheckout extends BaseInlineCheckout {
   static injected = false;
   static cardsInjected = false
   static apmsInjected = false
   static apmsData = [];
+  accordionC = null;
+
   deletingCards = [];
   customer = {}
   items = []
   collectContainer = null
+  updateCollectContainer = null
   merchantData = {}
   cartTotal = null
   metadata = {}
@@ -73,17 +77,36 @@ export class InlineCheckout extends BaseInlineCheckout {
     } 
   }
 
-  #mountPayButton() {
+  #mountPayButton(cardId="") {
     if (!this.renderPaymentButton) return;
 
-    const payButton = document.querySelector("#tonderPayButton");
+    const btnID = `#tonderPayButton${cardId}`;
+    const payButton = document.querySelector(btnID);
+    const containerID = `#acContainer${cardId}`;
+    const container = document.querySelector(containerID);
+
     if (!payButton) {
       console.error("Pay button not found");
       return;
     }
 
+    if (cardId !== "") {
+      const sdkPayButton = document.querySelector(`#tonderPayButton`);
+      if(sdkPayButton){
+        sdkPayButton.style.display = "none";
+      }
+    }
+
     payButton.style.display = "block";
     payButton.textContent = `Pagar $${this.cartTotal}`;
+    document.querySelectorAll(".ac-card-panel-container").forEach((cont) => {
+      cont.classList.remove("show");
+    });
+
+    if (container) {
+      container.classList.add("show");
+    }
+
     payButton.onclick = async (event) => {
       event.preventDefault();
       await this.#handlePaymentClick(payButton);
@@ -94,7 +117,7 @@ export class InlineCheckout extends BaseInlineCheckout {
     const prevButtonContent = payButton.innerHTML;
     payButton.innerHTML = `<div class="lds-dual-ring"></div>`;
     try {
-      const response = await this.payment(this.customer);
+      const response = await this.payment();
       this.callBack(response);
     } catch (error) {
       console.error("Payment error:", error);
@@ -229,10 +252,10 @@ export class InlineCheckout extends BaseInlineCheckout {
     console.log("InlineCheckout removed from DOM and cleaned up.");
   }
 
-  async #getCardTokens() {
+  async #getCardTokens(cardSelected) {
     if (this.card?.skyflow_id) return this.card
     try {
-      const collectResponse = await this.collectContainer.container.collect();
+      const collectResponse = cardSelected && cardSelected !== "new" ? await this.updateCollectContainer.container.collect():await this.collectContainer.container.collect();
       const cardTokens = await collectResponse["records"][0]["fields"];
       return cardTokens;
     } catch (error) {
@@ -250,8 +273,9 @@ export class InlineCheckout extends BaseInlineCheckout {
     let cardTokens;
 
     if (this.radioChecked === "new" || this.radioChecked === undefined) {
-      cardTokens = await this.#getCardTokens();
+      cardTokens = await this.#getCardTokens(this.radioChecked);
     } else {
+      await this.#getCardTokens(this.radioChecked);
       cardTokens = {
         skyflow_id: this.radioChecked
       }
@@ -327,8 +351,9 @@ export class InlineCheckout extends BaseInlineCheckout {
       const injectInterval = setInterval(() => {
         const queryElement = document.querySelector(`#${this.collectorIds.cardsListContainer}`);
         if (queryElement && InlineCheckout.injected) {
-          queryElement.innerHTML = cardItemsTemplate(cards)
+          queryElement.innerHTML = cardItemsTemplate(cards, {renderPaymentButton: this.renderPaymentButton})
           clearInterval(injectInterval)
+          this.#generateCardsAccordion()
           this.#mountRadioButtons(token)
           this.cardsInjected = true
         }
@@ -336,6 +361,54 @@ export class InlineCheckout extends BaseInlineCheckout {
     }
   }
 
+  #generateCardsAccordion(){
+    this.accordionC = new Accordion(".accordion-container", {
+      triggerClass: "card-item-label",
+      duration: 300,
+      collapse: true,
+      showMultiple: false,
+      onOpen: async (currentElement) => {
+        await this.#handleOpenCardAccordion(currentElement)
+      }
+    });
+  }
+
+  async #handleOpenCardAccordion(currentElement){
+    const { vault_id, vault_url } = this.merchantData;
+    const container_radio_id = currentElement.id.replace("card_container-", "");
+
+    if (this.updateCollectContainer && "unmount" in this.updateCollectContainer?.elements?.cvvElement) {
+      await this.updateCollectContainer.elements.cvvElement.unmount()
+    }
+
+    document.querySelectorAll(".cvvContainer").forEach((container) => {
+      container.classList.remove("show");
+    });
+
+    const radio_card = document.getElementById(container_radio_id);
+    radio_card.checked = true;
+
+    try{
+      this.updateCollectContainer = await initUpdateSkyflow(
+          container_radio_id,
+          vault_id,
+          vault_url,
+          this.baseUrl,
+          this.apiKeyTonder,
+          this.abortController.signal,
+          this.customStyles
+      );
+      setTimeout(() => {
+        document.querySelector(`#cvvContainer${container_radio_id}`).classList.add("show");
+      }, 5)
+      this.#mountPayButton(container_radio_id)
+    }catch (e){
+      console.error("Ha ocurrido un error", e);
+    }
+
+    this.#handleRadioButtonClick(radio_card)
+  }
+
   #loadAPMList(apms) {
     if (this.apmsInjected) return;
     const injectInterval = setInterval(() => {
@@ -359,7 +432,8 @@ export class InlineCheckout extends BaseInlineCheckout {
     for (const radio of radioButtons) {
       radio.style.display = "block";
       radio.onclick = async (event) => {
-        await this.#handleRadioButtonClick(radio);
+        const position = Array.from(radioButtons).indexOf(radio);
+        await this.#handleRadioButtonClick(radio, position);
       };
     }
     const cardsButtons = document.getElementsByClassName("card-delete-button");
@@ -372,19 +446,25 @@ export class InlineCheckout extends BaseInlineCheckout {
     }
   }
 
-  async #handleRadioButtonClick(radio) {
+  async #handleRadioButtonClick(radio, position = null) {
     if (radio.id === this.radioChecked || (radio.id === "new" && this.radioChecked === undefined)) return;
     const containerForm = document.querySelector(".container-form");
     if (containerForm) {
       containerForm.style.display = radio.id === "new" ? "block" : "none";
     }
+
     if (radio.id === "new") {
+      this.accordionC.closeAll()
       if (this.radioChecked !== radio.id) {
         globalLoader.show()
         this.#mountTonder(false);
         InlineCheckout.injected = true;
       }
     } else {
+      if (position !== null) {
+        this.accordionC.closeAll()
+        this.accordionC.open(position)
+      }
       this.#unmountForm();
     }
     this.radioChecked = radio.id;