tonder-web-sdk 1.11.11 → 1.12.0-beta.0

package/.idea/prettier.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="MANUAL" />
+  </component>
+</project>

package/.idea/workspace.xml

@@ -1,25 +1,56 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
   <component name="ChangeListManager">
     <list default="true" id="37fc62e5-7dd0-4a2e-b68c-304069cdf5bd" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/.idea/prettier.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/classes/BaseInlineCheckout.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/classes/LiteInlineCheckout.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/data/apmApi.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/data/businessApi.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/data/cardApi.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/data/checkoutApi.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/data/customerApi.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/data/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/data/openPayApi.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/data/skyflowApi.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/shared/constants/paymentMethodAPM.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/shared/constants/tonderUrl.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/classes/inlineCheckout.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/classes/inlineCheckout.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/data/api.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/helpers/constants.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/helpers/skyflow.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/helpers/skyflow.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/helpers/utils.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/helpers/utils.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index-dev.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index-dev.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="JavaScript File" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
   <component name="MarkdownSettingsMigration">
     <option name="stateVersion" value="1" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
-  "customColor": "",
-  "associatedIndex": 2
-}]]></component>
+  <component name="ProjectColorInfo">{
+  &quot;customColor&quot;: &quot;&quot;,
+  &quot;associatedIndex&quot;: 2
+}</component>
   <component name="ProjectId" id="2iy5RvaLleBBnn8yOfQNLpzKK66" />
   <component name="ProjectViewState">
     <option name="autoscrollFromSource" value="true" />
@@ -30,19 +61,41 @@
   </component>
   <component name="PropertiesComponent"><![CDATA[{
   "keyToString": {
+    "Node.js.index-dev.js.executor": "Run",
     "RunOnceActivity.OpenProjectViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
-    "git-widget-placeholder": "Merging TNDR-1140",
+    "SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    "git-widget-placeholder": "develop",
+    "last_opened_file_path": "/Users/davidhernandezalmagro/Desktop/Tonder/tonder-sdk/src/shared/constants",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
     "nodejs_package_manager_path": "npm",
+    "prettierjs.PrettierConfiguration.Package": "/Users/davidhernandezalmagro/Desktop/Tonder/tonder-sdk/node_modules/prettier",
+    "settings.editor.selected.configurable": "settings.javascript.prettier",
+    "ts.external.directory.path": "/Applications/WebStorm.app/Contents/plugins/javascript-impl/jsLanguageServicesImpl/external",
     "vue.rearranger.settings.migration": "true"
   }
 }]]></component>
-  <component name="SharedIndexes">
-    <attachedChunks>
-      <set>
-        <option value="bundled-python-sdk-50da183f06c8-2887949eec09-com.jetbrains.pycharm.pro.sharedIndexes.bundled-PY-233.13135.95" />
-      </set>
-    </attachedChunks>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/shared/constants" />
+    </key>
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/shared/constants" />
+      <recent name="$PROJECT_DIR$/src/shared" />
+    </key>
+  </component>
+  <component name="RunManager">
+    <configuration name="index-dev.js" type="NodeJSConfigurationType" temporary="true" nameIsGenerated="true" path-to-js-file="$PROJECT_DIR$/src/index-dev.js" working-dir="$PROJECT_DIR$/src">
+      <method v="2" />
+    </configuration>
+    <recent_temporary>
+      <list>
+        <item itemvalue="Node.js.index-dev.js" />
+      </list>
+    </recent_temporary>
   </component>
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="TaskManager">
@@ -53,10 +106,42 @@
       <option name="presentableId" value="Default" />
       <updated>1720449973301</updated>
       <workItem from="1720449976262" duration="22000" />
+      <workItem from="1723519348652" duration="9602000" />
+      <workItem from="1723696656585" duration="1227000" />
+      <workItem from="1723697920061" duration="3868000" />
+      <workItem from="1723774667217" duration="11739000" />
+      <workItem from="1723855727317" duration="20341000" />
+      <workItem from="1723952592527" duration="17418000" />
     </task>
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager>
+      <breakpoints>
+        <line-breakpoint enabled="true" type="javascript">
+          <url>file://$PROJECT_DIR$/src/classes/inlineCheckout.js</url>
+          <line>151</line>
+          <option name="timeStamp" value="1" />
+        </line-breakpoint>
+        <line-breakpoint enabled="true" type="javascript">
+          <url>file://$PROJECT_DIR$/src/shared/constants/paymentMethodAPM.js</url>
+          <option name="timeStamp" value="15" />
+        </line-breakpoint>
+      </breakpoints>
+    </breakpoint-manager>
+  </component>
 </project>

package/README.md

@@ -138,14 +138,12 @@ const checkoutData = {
 
 const apiKey = "4c87c36e697e65ddfe288be0afbe7967ea0ab865";
 const returnUrl = "http://my-website:8080/checkout"
-const successUrl = "http://my-website:8080/success"
 
 // if using script tag, it should be initialized like this
 // new TonderSdk.InlineCheckout
 const inlineCheckout = new InlineCheckout({
   apiKey,
   returnUrl,
-  successUrl,
   styles: customStyles
 });
 
@@ -179,7 +177,6 @@ const response = await inlineCheckout.payment(checkoutData);
 | apiKey          | string        | You can take this from you Tonder Dashboard         |
 | backgroundColor | string        | Hex color #000000                                   |
 | returnUrl       | string        | url where the checkout form is mounted (3ds)         |
-| successUrl      | string        |                                                     |
 | backgroundColor | string        |                                                     |
 
 ## setPayment params

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.11.11",
+  "version": "1.12.0-beta.0",
   "description": "tonder sdk for integrations",
   "main": "src/index.js",
   "scripts": {
@@ -8,6 +8,7 @@
     "build": "webpack --config webpack.config.js --mode production"
   },
   "author": "",
+  "types": "types/index.d.ts",
   "license": "ISC",
   "dependencies": {
     "crypto-js": "^4.1.1",
@@ -20,6 +21,7 @@
     "css-loader": "^6.7.3",
     "cypress": "^13.6.2",
     "html-webpack-plugin": "^5.5.3",
+    "prettier": "^3.3.3",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.75.0",

package/src/classes/3dsHandler.js

@@ -3,12 +3,10 @@ export class ThreeDSHandler {
     payload = null,
     apiKey,
     baseUrl,
-    successUrl
   }) {
     this.baseUrl = baseUrl,
     this.apiKey = apiKey,
-    this.payload = payload,
-    this.successUrl = successUrl
+    this.payload = payload
   }
 
   saveVerifyTransactionUrl() {
@@ -120,7 +118,6 @@ export class ThreeDSHandler {
   // TODO: Remove this duplication
   handleSuccessTransaction(response) {
     this.removeVerifyTransactionUrl();
-    // window.location = this.successUrl
     console.log('Transacción autorizada');
     return response;
   }

package/src/classes/BaseInlineCheckout.js

@@ -0,0 +1,298 @@
+import { ThreeDSHandler } from "./3dsHandler.js";
+import {createOrder, fetchBusiness, getOpenpayDeviceSessionID, registerOrFetchCustomer} from "../data";
+import { TONDER_URL_BY_MODE } from "../shared/constants/tonderUrl";
+import { globalLoader } from "./globalLoader";
+import {createPayment, startCheckoutRouter} from "../data/checkoutApi";
+import {getBrowserInfo, injectMercadoPagoSecurity} from "../helpers/utils";
+
+export class BaseInlineCheckout {
+  baseUrl = "";
+  cartTotal = "0"
+  constructor({
+    mode = "stage",
+    apiKey,
+    returnUrl,
+    callBack = () => {},
+    sdkMode = "full",
+  }) {
+    this.apiKeyTonder = apiKey;
+    this.returnUrl = returnUrl;
+    this.callBack = callBack;
+    this.mode = mode;
+    this.baseUrl = TONDER_URL_BY_MODE[this.mode] || TONDER_URL_BY_MODE["stage"];
+    this.abortController = new AbortController();
+    this.process3ds = new ThreeDSHandler({
+      apiKey: apiKey,
+      baseUrl: this.baseUrl,
+    });
+    this.sdkMode = sdkMode;
+  }
+
+  configureCheckout(data) {
+    if ("customer" in data) this.#handleCustomer(data["customer"]);
+  }
+
+  async verify3dsTransaction() {
+    globalLoader.show(); // TODO: HOW?
+    const result3ds = await this.process3ds.verifyTransactionStatus();
+    const resultCheckout = await this.#resumeCheckout(result3ds);
+    this.process3ds.setPayload(resultCheckout);
+    globalLoader.remove(); // TODO: HOW?
+    return this.#handle3dsRedirect(resultCheckout);
+  }
+
+  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);
+        const response = await this._checkout(data);
+        this.process3ds.setPayload(response);
+        this.callBack(response);
+        const payload = await this.#handle3dsRedirect(response);
+        if (payload) {
+          resolve(response);
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  async _initializeCheckout() {
+    const { mercado_pago } = await this.#fetchMerchantData();
+
+    if (!!mercado_pago && !!mercado_pago.active) {
+      injectMercadoPagoSecurity();
+    }
+  }
+
+  async _getCustomer(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.",
+    );
+  }
+
+  _setCartTotal(total) {
+    throw new Error(
+      "The #setCartTotal method should be implement in child classes.",
+    );
+  }
+
+  async _handleCheckout(
+      {
+    card,
+    payment_method,
+    customer
+  }
+  ) {
+    const { openpay_keys, reference, business } = this.merchantData;
+    const total = Number(this.cartTotal);
+
+    try {
+      let deviceSessionIdTonder;
+      if (
+        !deviceSessionIdTonder &&
+        openpay_keys.merchant_id &&
+        openpay_keys.public_key
+      ) {
+        deviceSessionIdTonder = await getOpenpayDeviceSessionID(
+          openpay_keys.merchant_id,
+          openpay_keys.public_key,
+          this.abortController.signal,
+        );
+      }
+
+      const { id, auth_token } = customer;
+
+      const orderItems = {
+        business: this.apiKeyTonder,
+        client: auth_token,
+        billing_address_id: null,
+        shipping_address_id: null,
+        amount: total,
+        status: "A",
+        reference: reference,
+        is_oneclick: true,
+        items: this.cartItems,
+      };
+      const jsonResponseOrder = await createOrder(
+        this.baseUrl,
+        this.apiKeyTonder,
+        orderItems,
+      );
+
+      // Create payment
+      const now = new Date();
+      const dateString = now.toISOString();
+
+      const paymentItems = {
+        business_pk: business.pk,
+        client_id: id,
+        amount: total,
+        date: dateString,
+        order_id: jsonResponseOrder.id,
+      };
+      const jsonResponsePayment = await createPayment(
+        this.baseUrl,
+        this.apiKeyTonder,
+        paymentItems,
+      );
+
+      // Checkout router
+      const routerItems = {
+        name: this.firstName || "",
+        last_name: this.lastName || "",
+        email_client: this.email,
+        phone_number: this.phone,
+        return_url: this.returnUrl,
+        id_product: "no_id",
+        quantity_product: 1,
+        id_ship: "0",
+        instance_id_ship: "0",
+        amount: total,
+        title_ship: "shipping",
+        description: "transaction",
+        device_session_id: deviceSessionIdTonder ? deviceSessionIdTonder : null,
+        token_id: "",
+        order_id: jsonResponseOrder.id,
+        business_id: business.pk,
+        payment_id: jsonResponsePayment.pk,
+        source: "sdk",
+        metadata: this.metadata,
+        browser_info: getBrowserInfo(),
+        currency: this.currency,
+        ...(!!payment_method ? { payment_method } : { card }),
+        ...(typeof MP_DEVICE_SESSION_ID !== "undefined"
+          ? { mp_device_session_id: MP_DEVICE_SESSION_ID }
+          : {}),
+      };
+
+      const jsonResponseRouter = await startCheckoutRouter(
+        this.baseUrl,
+        this.apiKeyTonder,
+        routerItems,
+      );
+
+      if (jsonResponseRouter) {
+        return jsonResponseRouter;
+      } else {
+        return false;
+      }
+    } catch (error) {
+      console.log(error);
+      throw error;
+    }
+  }
+
+  async #fetchMerchantData() {
+    this.merchantData = await fetchBusiness(
+      this.baseUrl,
+      this.apiKeyTonder,
+      this.abortController.signal,
+    );
+    return this.merchantData;
+  }
+
+  async #resumeCheckout(response) {
+    // Stop the routing process if the transaction is either hard declined or successful
+    if (response?.decline?.error_type === "Hard") {
+      return response;
+    }
+
+    if (["Success", "Authorized"].includes(response?.transaction_status)) {
+      return response;
+    }
+
+    if (response) {
+      globalLoader.show();
+      const routerItems = {
+        checkout_id: response?.checkout?.id,
+      };
+      try {
+        return await startCheckoutRouter(
+          this.baseUrl,
+          this.apiKeyTonder,
+          routerItems,
+        );
+      } catch (error) {
+        // throw error
+      } finally {
+        globalLoader.remove();
+      }
+      return response;
+    }
+  }
+
+  #handleCustomer(customer) {
+    if (!customer) return;
+
+    this.firstName = customer?.firstName;
+    this.lastName = customer?.lastName;
+    this.country = customer?.country;
+    this.address = customer?.street;
+    this.city = customer?.city;
+    this.state = customer?.state;
+    this.postCode = customer?.postCode;
+    this.email = customer?.email;
+    this.phone = customer?.phone;
+    this.customer = customer;
+  }
+
+  #handleMetadata(data) {
+    this.metadata = data?.metadata;
+  }
+
+  #handleCurrency(data) {
+    this.currency = data?.currency;
+  }
+
+  #handleCard(data) {
+    this.card = data?.card;
+  }
+
+  #setCartItems(items) {
+    this.cartItems = items;
+  }
+
+  async #handle3dsRedirect(response) {
+    const iframe = response?.next_action?.iframe_resources?.iframe;
+
+    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);
+        });
+    } else {
+      const redirectUrl = this.process3ds.getRedirectUrl();
+      if (redirectUrl) {
+        this.process3ds.redirectToChallenge();
+      } else {
+        return response;
+      }
+    }
+  }
+}

package/src/classes/LiteInlineCheckout.js

@@ -0,0 +1,101 @@
+import { BaseInlineCheckout } from "./BaseInlineCheckout";
+import {
+  fetchCustomerAPMs,
+  fetchCustomerCards,
+  saveCustomerCard,
+  removeCustomerCard,
+} from "../data";
+import { buildErrorResponseFromCatch } from "../helpers/utils";
+import { getVaultToken } from "../data/skyflowApi";
+import { getSkyflowTokens } from "../helpers/skyflow";
+
+export class LiteInlineCheckout extends BaseInlineCheckout {
+  constructor({ mode = "stage", apiKey, returnUrl, callBack = () => {} }) {
+    super({ mode, apiKey, returnUrl, callBack });
+  }
+
+  async injectCheckout() {
+    await this._initializeCheckout();
+  }
+
+  /**
+   * Retrieves the list of cards associated with a customer.
+   * @param {string} authToken - The customer's authentication token.
+   * @param {string} businessId - The business primary key.
+   * @returns {Promise<Object>} A promise that resolves with the customer's card data.
+   * @public
+   */
+  async getCustomerCards(authToken, businessId) {
+    return await fetchCustomerCards(this.baseUrl, authToken, businessId);
+  }
+
+  /**
+   * Saves a card to a customer's account. This method can be used to add a new card
+   * or update an existing one.
+   * @param {string} authToken - The customer's authentication token.
+   * @param {string} businessId - The business primary key.
+   * @param {Object} cardData - The card information to be saved.
+   * @returns {Promise<Object>} A promise that resolves with the saved card data.
+   * @public
+   */
+  async saveCustomerCard(authToken, businessId, cardData) {
+    return await saveCustomerCard(
+      this.baseUrl,
+      authToken,
+      businessId,
+      cardData,
+    );
+  }
+
+  /**
+   * Removes a card from a customer's account.
+   * @param {string} authToken - The customer's authentication token.
+   * @param {string} skyflowId - The unique identifier of the card to be deleted.
+   * @param {string} businessId - The business primary key.
+   * @returns {Promise<Object>} A promise that resolves when the card is successfully deleted.
+   * @public
+   */
+  async removeCustomerCard(authToken, skyflowId, businessId) {
+    return await removeCustomerCard(
+      this.baseUrl,
+      authToken,
+      skyflowId,
+      businessId,
+    );
+  }
+
+  /**
+   * Retrieves the list of available Alternative Payment Methods (APMs).
+   * @returns {Promise<Object>} A promise that resolves with the list of APMs.
+   * @public
+   */
+  async getCustomerAPMs() {
+    return await fetchCustomerAPMs(this.baseUrl, this.apiKeyTonder);
+  }
+
+  _setCartTotal(total) {
+    this.cartTotal = total;
+  }
+
+  async _checkout({ card, payment_method }) {
+    const customer = await this._getCustomer(
+      this.customer,
+      this.abortController.signal,
+    );
+    const { vault_id, vault_url } = this.merchantData;
+    let skyflowTokens;
+    skyflowTokens = await getSkyflowTokens({
+      vault_id: vault_id,
+      vault_url: vault_url,
+      data: card,
+      baseUrl: this.baseUrl,
+      apiKey: this.apiKeyTonder,
+    });
+
+    return await this._handleCheckout({
+      card: skyflowTokens,
+      payment_method,
+      customer,
+    });
+  }
+}