tonder-web-sdk 1.16.1 → 1.16.6-beta.DEV-1433.1

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)
@@ -96,16 +98,16 @@ inlineCheckout.verify3dsTransaction().then((response) => {
 const response = await inlineCheckout.payment(checkoutData);
 ```
 
-### LiteInlineCheckout
+### LiteCheckout
 
-LiteInlineCheckout allows you to build a custom checkout interface using Tonder's core functionality.
+LiteCheckout allows you to build a custom checkout interface using Tonder's core functionality.
 
 ```javascript
-import { LiteInlineCheckout } from "tonder-web-sdk";
+import { LiteCheckout } from "tonder-web-sdk";
 ```
 
 ```javascript
-const LiteInlineCheckout = new LiteInlineCheckout({
+const liteCheckout = new LiteCheckout({
   apiKey: "your-api-key", // Your api key getted from Tonder Dashboard
   returnUrl: "http://your-website.com/checkout",
 });
@@ -115,57 +117,145 @@ const LiteInlineCheckout = new LiteInlineCheckout({
 inlineCheckout.configureCheckout({ customer: { email: "example@email.com" } });
 
 // Initialize the checkout
-await LiteInlineCheckout.injectCheckout();
+await liteCheckout.injectCheckout();
 ```
 
 ```javascript
 // Retrieve customer's saved cards
-const cards = await LiteInlineCheckout.getCustomerCards();
+const cards = await liteCheckout.getCustomerCards();
 ```
 
 ```javascript
 // Save a new card
-const newCard = await LiteInlineCheckout.saveCustomerCard(cardData);
+const newCard = await liteCheckout.saveCustomerCard(cardData);
 ```
 
 ```javascript
 // Remove a saved card
-await LiteInlineCheckout.removeCustomerCard(cardId);
+await liteCheckout.removeCustomerCard(cardId);
 ```
 
 ```javascript
 // Get available payment methods
-const paymentMethods = await LiteInlineCheckout.getCustomerPaymentMethods();
+const paymentMethods = await liteCheckout.getCustomerPaymentMethods();
 ```
 
 ```javascript
 // Process a payment
-const paymentResponse = await LiteInlineCheckout.payment(paymentData);
+const paymentResponse = await liteCheckout.payment(paymentData);
 ```
 
 ```javascript
 // Verify a 3DS transaction
-const verificationResult = await LiteInlineCheckout.verify3dsTransaction();
+const verificationResult = await liteCheckout.verify3dsTransaction();
 ```
 
-## Configuration Options
+## Configuration
+### Inline 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>
+
+```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>
 
-Both InlineCheckout and LiteInlineCheckout accept the following configuration options:
+### Inline Callbacks Structure
 
-|                  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`                          |
+| 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)             |
 
-> **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
 
@@ -256,15 +346,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 LiteInlineCheckout) Object containing card information. This is used differently depending on whether it's a new card or a saved card:
+- **card**: (for LiteCheckout) 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 LiteInlineCheckout) 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 LiteCheckout) 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 LiteInlineCheckout, and the specific payment method being used.
+Note: The exact fields required may vary depending on whether you're using InlineCheckout or LiteCheckout, and the specific payment method being used.
 
 ```javascript
 const paymentData = {
@@ -316,7 +406,7 @@ const paymentData = {
 
 ## Field Validation Functions
 
-For LiteInlineCheckout implementations, the SDK provides validation functions to ensure the integrity of card data before submitting:
+For LiteCheckout 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.
@@ -361,7 +451,7 @@ if (
 - `payment(data)`: Process a payment
 - `verify3dsTransaction()`: Verify a 3DS transaction
 
-### LiteInlineCheckout Methods
+### LiteCheckout Methods
 
 - `configureCheckout(data)`: Set initial checkout data
 - `injectCheckout()`: Initialize the checkout
@@ -453,7 +543,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)
   }  
@@ -499,16 +593,16 @@ import { LiteInlineCheckout } from "tonder-web-sdk";
 const apiKey = "your-api-key";
 const returnUrl = "http://your-website.com/checkout";
 
-const LiteInlineCheckout = new LiteInlineCheckout({
+const liteCheckout = new LiteInlineCheckout({
   mode: "development",
   apiKey,
   returnUrl,
 });
 
-LiteInlineCheckout.configureCheckout({ customer: { email: "example@email.com" } });
-LiteInlineCheckout.injectCheckout();
+liteCheckout.configureCheckout({ customer: { email: "example@email.com" } });
+liteCheckout.injectCheckout();
 
-LiteInlineCheckout.verify3dsTransaction().then((response) => {
+liteCheckout.verify3dsTransaction().then((response) => {
   console.log("Verify 3ds response", response);
 });
 
@@ -526,7 +620,7 @@ document
 
     try {
       const paymentData = { ...checkoutData, card: cardData };
-      const response = await LiteInlineCheckout.payment(paymentData);
+      const response = await liteCheckout.payment(paymentData);
       console.log("Payment response:", response);
       alert("Payment successful");
     } catch (error) {
@@ -738,7 +832,7 @@ export class TonderService {
   // Add more functions, for example for lite sdk: get payment methods
 
   // getCustomerPaymentMethods(): Promise<IPaymentMethod[]> {
-  //     return this.LiteInlineCheckout.getCustomerPaymentMethods();
+  //     return this.liteCheckout.getCustomerPaymentMethods();
   // }
 }
 

package/package.json

@@ -1,19 +1,30 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.16.1",
+  "version": "1.16.6-beta.DEV-1433.1",
   "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": "",
+  "main": "v1/bundle.min.js",
   "types": "types/index.d.ts",
+  "files": [
+    "v1",
+    "types",
+    "LICENSE",
+    "README.md"
+  ],
   "license": "ISC",
   "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 +33,24 @@
     "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"
+    "webpack-dev-server": "^4.11.1",
+    "webpack-obfuscator": "^3.5.1"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npm run format",
+      "npm run lint:fix"
+    ]
   }
 }

package/types/card.d.ts

@@ -1,34 +1,34 @@
 export interface ICard {
-    fields: ICardSkyflowFields;
-    icon?: string;
+  fields: ICardSkyflowFields;
+  icon?: string;
 }
 
 export interface ICardSkyflowFields {
-    card_number: string;
-    expiration_month: string;
-    expiration_year: string;
-    skyflow_id: string;
-    card_scheme: string;
+  card_number: string;
+  expiration_month: string;
+  expiration_year: string;
+  skyflow_id: string;
+  card_scheme: string;
 }
 
 export interface ICustomerCardsResponse {
-    user_id: number;
-    cards: ICard[];
+  user_id: number;
+  cards: ICard[];
 }
 
 export interface ISaveCardResponse {
-    skyflow_id: string;
-    user_id: number;
+  skyflow_id: string;
+  user_id: number;
 }
 
 export interface ISaveCardSkyflowRequest {
-    skyflow_id: string;
+  skyflow_id: string;
 }
 
 export interface ISaveCardRequest {
-    card_number: string;
-    cvv: string;
-    expiration_month: string;
-    expiration_year: string;
-    cardholder_name: string;
+  card_number: string;
+  cvv: string;
+  expiration_month: string;
+  expiration_year: string;
+  cardholder_name: string;
 }

package/types/checkout.d.ts

@@ -1,118 +1,116 @@
-import {ICustomer} from "./customer";
+import { ICustomer } from "./customer";
 
 export interface IStartCheckoutRequestBase {
-    name: any;
-    last_name: string;
-    email_client: any;
-    phone_number: any;
-    return_url?: string;
-    id_product: string;
-    quantity_product: number;
-    id_ship: string;
-    instance_id_ship: string;
-    amount: any;
-    title_ship: string;
-    description: string;
-    device_session_id: any;
-    token_id: string;
-    order_id: any;
-    business_id: any;
-    payment_id: any;
-    source: string;
-    browser_info?: any;
-    metadata: any;
-    currency: string;
+  name: any;
+  last_name: string;
+  email_client: any;
+  phone_number: any;
+  return_url?: string;
+  id_product: string;
+  quantity_product: number;
+  id_ship: string;
+  instance_id_ship: string;
+  amount: any;
+  title_ship: string;
+  description: string;
+  device_session_id: any;
+  token_id: string;
+  order_id: any;
+  business_id: any;
+  payment_id: any;
+  source: string;
+  browser_info?: any;
+  metadata: any;
+  currency: string;
 }
 
 export type IStartCheckoutRequestWithCard = IStartCheckoutRequestBase & {
-    card: any;
-    payment_method?: never;
+  card: any;
+  payment_method?: never;
 };
 
-export type IStartCheckoutRequestWithPaymentMethod =
-    IStartCheckoutRequestBase & {
-    card?: never;
-    payment_method: string;
+export type IStartCheckoutRequestWithPaymentMethod = IStartCheckoutRequestBase & {
+  card?: never;
+  payment_method: string;
 };
 
 export type IStartCheckoutRequest =
-    | IStartCheckoutRequestWithCard
-    | IStartCheckoutRequestWithPaymentMethod;
+  | IStartCheckoutRequestWithCard
+  | IStartCheckoutRequestWithPaymentMethod;
 
 export interface IStartCheckoutIdRequest {
-    checkout_id: string;
+  checkout_id: string;
 }
 
 export interface IStartCheckoutErrorResponse {
-    status: string;
-    message: string;
-    psp_response: [
-        {
-            status: number;
-            response: Object;
-        },
-    ];
-    checkout_id: string;
-    is_route_finished: boolean;
+  status: string;
+  message: string;
+  psp_response: [
+    {
+      status: number;
+      response: Object;
+    },
+  ];
+  checkout_id: string;
+  is_route_finished: boolean;
 }
 
 export interface IStartCheckoutResponse {
-    status: string;
-    message: string;
-    psp_response: Record<string, any>;
-    checkout_id: string;
-    is_route_finished: Boolean;
-    transaction_status: string;
-    transaction_id: number;
-    payment_id: number;
-    provider: string;
-    next_action: {
-        redirect_to_url: {
-            url: string;
-            return_url: string;
-            verify_transaction_status_url: string;
-        };
-        iframe_resources?: {
-            iframe: string;
-        };
+  status: string;
+  message: string;
+  psp_response: Record<string, any>;
+  checkout_id: string;
+  is_route_finished: Boolean;
+  transaction_status: string;
+  transaction_id: number;
+  payment_id: number;
+  provider: string;
+  next_action: {
+    redirect_to_url: {
+      url: string;
+      return_url: string;
+      verify_transaction_status_url: string;
     };
-    actions: IStartCheckoutActionResponse[];
+    iframe_resources?: {
+      iframe: string;
+    };
+  };
+  actions: IStartCheckoutActionResponse[];
 }
 
 export interface IStartCheckoutActionResponse {
-    name: string;
-    url: string;
-    method: string;
+  name: string;
+  url: string;
+  method: string;
 }
 
-
 export interface IItem {
-    description: string;
-    quantity: number;
-    price_unit: number;
-    discount: number;
-    taxes: number;
-    product_reference: string | number;
-    name: string;
-    amount_total: number;
+  description: string;
+  quantity: number;
+  price_unit: number;
+  discount: number;
+  taxes: number;
+  product_reference: string | number;
+  name: string;
+  amount_total: number;
 }
 
 export interface IProcessPaymentRequest {
-    customer: ICustomer;
-    cart: {
-        total: string | number;
-        items: IItem[];
-    };
-    metadata?: Record<string, any>;
-    currency?: string;
-    payment_method?: string;
-    card?: ICardFields | string;
+  customer: ICustomer;
+  cart: {
+    total: string | number;
+    items: IItem[];
+  };
+  metadata?: Record<string, any>;
+  currency?: string;
+  payment_method?: string;
+  card?: ICardFields | string;
 }
 
 export interface ICardFields {
-    card_number: string;
-    cvv: string;
-    expiration_month: string;
-    expiration_year: string;
-    cardholder_name: string;
-}
+  card_number: string;
+  cvv: string;
+  expiration_month: string;
+  expiration_year: string;
+  cardholder_name: string;
+}

package/types/common.d.ts

@@ -1,14 +1,18 @@
 import { ICustomer } from "./customer";
-import {IProcessPaymentRequest} from "./checkout";
+import { IProcessPaymentRequest } from "./checkout";
 
 export interface IInlineCheckoutBaseOptions {
   mode?: "production" | "sandbox" | "stage" | "development";
   apiKey: string;
   returnUrl: string;
   callBack?: (response: any) => void;
+  signatures?:{
+    transaction?: string;
+    customer?: string;
+  }
 }
 
-export interface IConfigureCheckout extends IProcessPaymentRequest{
+export interface IConfigureCheckout extends Partial<IProcessPaymentRequest> {
   customer: ICustomer;
   secureToken: string;
 }
@@ -26,3 +30,5 @@ export interface IPublicError {
   message: string;
   detail: Record<string, any> | string;
 }
+
+export interface IBaseCallback {}

package/types/customer.d.ts

@@ -1,12 +1,12 @@
 export type ICustomer = {
-    firstName: string;
-    lastName: string;
-    country?: string;
-    street?: string;
-    city?: string;
-    state?: string;
-    postCode?: string;
-    email: string;
-    phone?: string;
-    address?: string;
+  firstName: string;
+  lastName: string;
+  country?: string;
+  street?: string;
+  city?: string;
+  state?: string;
+  postCode?: string;
+  email: string;
+  phone?: string;
+  address?: string;
 };