@tonder.io/ionic-full-sdk 0.0.24-beta → 0.0.26-beta

package/index.js.example

@@ -1,50 +1,50 @@
-import { Checkout } from './classes/checkout'
-export {
-    Checkout,
-}
-
-const config = {
-    url: "http://localhost:8081/#/",
-    apiKey: "e0f89d5328398b93634f56ba06c9474ec9388d5e",
-    type: "payment",
-    backgroundColor: "#F34616",
-    color: "#F3F7F6"
-}
-const tonderCheckout = new Checkout(config)
-const params = {
-    shippingCost: "129.99",
-    email: "fuentesc91@gmail.com"
-}
-tonderCheckout.setOrder(params)
-
-let products = {products: [
-    {
-        name: 'first product',
-        price_unit: 120.99,
-        quantity: 1
-    },
-    {
-        name: 'second product',
-        price_unit: 12.99,
-    }
-]}
-
-tonderCheckout.setOrder(products)
-
-products = {products: [
-    {
-        name: 'first product',
-        price_unit: 120.99,
-        quantity: 3
-    },
-    {
-        name: 'second product',
-        price_unit: 12.99,
-    }
-]}
-
-tonderCheckout.setOrder(products)
-
-console.log(tonderCheckout.getUrlParams())
-
+import { Checkout } from './classes/checkout'
+export {
+    Checkout,
+}
+
+const config = {
+    url: "http://localhost:8081/#/",
+    apiKey: "e0f89d5328398b93634f56ba06c9474ec9388d5e",
+    type: "payment",
+    backgroundColor: "#F34616",
+    color: "#F3F7F6"
+}
+const tonderCheckout = new Checkout(config)
+const params = {
+    shippingCost: "129.99",
+    email: "fuentesc91@gmail.com"
+}
+tonderCheckout.setOrder(params)
+
+let products = {products: [
+    {
+        name: 'first product',
+        price_unit: 120.99,
+        quantity: 1
+    },
+    {
+        name: 'second product',
+        price_unit: 12.99,
+    }
+]}
+
+tonderCheckout.setOrder(products)
+
+products = {products: [
+    {
+        name: 'first product',
+        price_unit: 120.99,
+        quantity: 3
+    },
+    {
+        name: 'second product',
+        price_unit: 12.99,
+    }
+]}
+
+tonderCheckout.setOrder(products)
+
+console.log(tonderCheckout.getUrlParams())
+
 tonderCheckout.mountButton({ buttonText: 'Proceder al pago' })

package/package.json

@@ -1,27 +1,27 @@
-{
-  "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.24-beta",
-  "description": "Tonder ionic full SDK",
-  "main": "dist/index.js",
-  "types": "dist/index.d.js",
-  "scripts": {
-    "build": "tsc -noEmit && rollup --config"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@tonder.io/ionic-lite-sdk": "^0.0.29-beta",
-    "crypto-js": "^4.1.1",
-    "skyflow-js": "^1.34.1"
-  },
-  "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/crypto-js": "^4.2.2",
-    "@types/node": "^20.11.5",
-    "cypress": "^13.6.2",
-    "rollup": "^4.9.6",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3"
-  }
-}
+{
+  "name": "@tonder.io/ionic-full-sdk",
+  "version": "0.0.26-beta",
+  "description": "Tonder ionic full SDK",
+  "main": "dist/index.js",
+  "types": "dist/index.d.js",
+  "scripts": {
+    "build": "tsc -noEmit && rollup --config"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@tonder.io/ionic-lite-sdk": "^0.0.29-beta",
+    "crypto-js": "^4.1.1",
+    "skyflow-js": "^1.34.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/crypto-js": "^4.2.2",
+    "@types/node": "^20.11.5",
+    "cypress": "^13.6.2",
+    "rollup": "^4.9.6",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3"
+  }
+}

package/rollup.config.js

@@ -1,15 +1,15 @@
-const typescript = require('@rollup/plugin-typescript');
-const terser = require('@rollup/plugin-terser');
-
-module.exports = {
-  input: './src/index.ts',
-  output: {
-    dir: 'dist',
-    format: 'es',
-    plugins: [terser()]
-  },
-  plugins: [
-    typescript()
-  ],
-  external: ["skyflow-js", "crypto-js", "@tonder.io/ionic-lite-sdk"]
+const typescript = require('@rollup/plugin-typescript');
+const terser = require('@rollup/plugin-terser');
+
+module.exports = {
+  input: './src/index.ts',
+  output: {
+    dir: 'dist',
+    format: 'es',
+    plugins: [terser()]
+  },
+  plugins: [
+    typescript()
+  ],
+  external: ["skyflow-js", "crypto-js", "@tonder.io/ionic-lite-sdk"]
 };

package/src/classes/3dsHandler.ts

@@ -1,237 +1,237 @@
-type ThreeDSHandlerContructor = {
-  payload?: any,
-  apiKey?: string,
-  baseUrl?: string,
-  successUrl?: Location | string
-}
-
-export class ThreeDSHandler {
-
-  baseUrl?: string
-  apiKey?: string
-  payload?: any
-  successUrl?: Location | string
-  localStorageKey: string = "verify_transaction_status_url"
-
-  constructor({
-    payload = null,
-    apiKey,
-    baseUrl,
-    successUrl
-  }: ThreeDSHandlerContructor) {
-    this.baseUrl = baseUrl,
-    this.apiKey = apiKey,
-    this.payload = payload,
-    this.successUrl = successUrl
-  }
-
-  setStorageItem (data: any) {
-    return localStorage.setItem(this.localStorageKey, JSON.stringify(data))
-  }
-
-  getStorageItem () {
-    return localStorage.getItem(this.localStorageKey)
-  }
-
-  removeStorageItem () {
-    return localStorage.removeItem(this.localStorageKey)
-  }
-
-  saveVerifyTransactionUrl() {
-    const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url
-    if (url) {
-      this.saveUrlWithExpiration(url)
-    } else {
-      const url = this.payload?.next_action?.iframe_resources?.verify_transaction_status_url
-      if (url) {
-        this.saveUrlWithExpiration(url)
-      } else {
-        console.log('No verify_transaction_status_url found');
-      }
-    }
-  }
-
-  saveUrlWithExpiration(url: string) {
-    try {
-      const now = new Date()
-      const item = {
-        url: url,
-        // Expires after 20 minutes
-        expires: now.getTime() + 20 * 60 * 1000
-      }
-      this.setStorageItem(item)
-    } catch (error) {
-     console.log('error: ', error)
-    }
-  }
-
-  getUrlWithExpiration() {
-    const status = this.getStorageItem();
-    if(status) {
-      const item = JSON.parse(status)
-        if (!item) return
-        const now = new Date()
-        if (now.getTime() > item.expires) {
-          this.removeVerifyTransactionUrl()
-          return null
-        } else {
-          return item.url
-        }
-    } else {
-      return null
-    }
-  }
-
-  removeVerifyTransactionUrl() {
-    return this.removeStorageItem()
-  }
-
-  getVerifyTransactionUrl() {
-    return this.getStorageItem() 
-  }
-
-  loadIframe() {
-    const iframe = this.payload?.next_action?.iframe_resources?.iframe
-
-    if (iframe) {
-      return new Promise((resolve, reject) => {
-        const iframe = this.payload?.next_action?.iframe_resources?.iframe
-
-        if (iframe) {
-          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)
-
-          // Resolve the promise when the iframe is loaded
-          const iframeElement = document.getElementById('tdsMmethodTgtFrame')
-          if(iframeElement) {
-            iframeElement.onload = () => resolve(true)
-          } else {
-            console.log('No redirection found');
-            reject(false)
-          }
-        } else {
-          console.log('No redirection found');
-          reject(false)
-        }
-      })
-    }
-  }
-
-  getRedirectUrl() {
-    return this.payload?.next_action?.redirect_to_url?.url
-  }
-
-  redirectToChallenge() {
-    const url = this.getRedirectUrl()
-    if (url) {
-      this.saveVerifyTransactionUrl()
-      window.location = url;
-    } else {
-      console.log('No redirection found');
-    }
-  }
-  
-  // Returns an object
-  // https://example.com/?name=John&age=30&city=NewYork
-  // { name: "John", age: "30", city: "NewYork" }
-  getURLParameters() {
-    const parameters: any = {};
-    const urlParams: any = new URLSearchParams(window.location.search);
-
-    for (const [key, value] of urlParams) {
-      parameters[key] = value;
-    }
-
-    return parameters;
-  }
-
-  handleSuccessTransaction(response: any) {
-    this.removeVerifyTransactionUrl();
-    console.log('Transacción autorizada exitosamente.');
-    return response;
-  }
-
-  handleDeclinedTransaction(response: any) {
-    this.removeVerifyTransactionUrl();
-    console.log('Transacción rechazada.');
-    throw new Error("Transacción rechazada.");
-  }
-
-  // TODO: the method below needs to be tested with a real 3DS challenge
-  // since we couldn't get a test card that works with this feature
-  async handle3dsChallenge(response_json: any) {
-    // Create the form element:
-    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 = response_json.creq;
-    creqInput.value = response_json.creq;
-    form.appendChild(creqInput);
-
-    const termUrlInput = document.createElement('input');
-    termUrlInput.type = 'hidden';
-    termUrlInput.name =  response_json.term_url;
-    termUrlInput.value = response_json.TermUrl;
-    form.appendChild(termUrlInput);
-
-    // Append the form to the body:
-    document.body.appendChild(form);
-    form.submit();
-
-    await this.verifyTransactionStatus();
-  }
-
-  async handleTransactionResponse(response: any) {
-    const response_json = await response.json();
-    if (response_json.status === "Pending") {
-      return await this.handle3dsChallenge(response_json);
-    } else if (["Success", "Authorized"].includes(response_json.status)) {
-      return this.handleSuccessTransaction(response);
-    } else {
-      return this.handleDeclinedTransaction(response);
-    }
-  }
-
-  async verifyTransactionStatus() {
-    const verifyUrl = this.getUrlWithExpiration();
-
-    if (verifyUrl) {
-      const url = `${this.baseUrl}${verifyUrl}`;
-      try {
-        const response = await fetch(url, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Token ${this.apiKey}`,
-          },
-          // body: JSON.stringify(data),
-        });
-
-        if (response.status !== 200) {
-          console.error('La verificación de la transacción falló.');
-          return
-        }
-
-        return await this.handleTransactionResponse(response);
-      } catch (error) {
-        console.error('Error al verificar la transacción:', error);
-        return error;
-      }
-    } else {
-      console.log('No verify_transaction_status_url found');
-    }
-  }
-
-}
+type ThreeDSHandlerContructor = {
+  payload?: any,
+  apiKey?: string,
+  baseUrl?: string,
+  successUrl?: Location | string
+}
+
+export class ThreeDSHandler {
+
+  baseUrl?: string
+  apiKey?: string
+  payload?: any
+  successUrl?: Location | string
+  localStorageKey: string = "verify_transaction_status_url"
+
+  constructor({
+    payload = null,
+    apiKey,
+    baseUrl,
+    successUrl
+  }: ThreeDSHandlerContructor) {
+    this.baseUrl = baseUrl,
+    this.apiKey = apiKey,
+    this.payload = payload,
+    this.successUrl = successUrl
+  }
+
+  setStorageItem (data: any) {
+    return localStorage.setItem(this.localStorageKey, JSON.stringify(data))
+  }
+
+  getStorageItem () {
+    return localStorage.getItem(this.localStorageKey)
+  }
+
+  removeStorageItem () {
+    return localStorage.removeItem(this.localStorageKey)
+  }
+
+  saveVerifyTransactionUrl() {
+    const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url
+    if (url) {
+      this.saveUrlWithExpiration(url)
+    } else {
+      const url = this.payload?.next_action?.iframe_resources?.verify_transaction_status_url
+      if (url) {
+        this.saveUrlWithExpiration(url)
+      } else {
+        console.log('No verify_transaction_status_url found');
+      }
+    }
+  }
+
+  saveUrlWithExpiration(url: string) {
+    try {
+      const now = new Date()
+      const item = {
+        url: url,
+        // Expires after 20 minutes
+        expires: now.getTime() + 20 * 60 * 1000
+      }
+      this.setStorageItem(item)
+    } catch (error) {
+     console.log('error: ', error)
+    }
+  }
+
+  getUrlWithExpiration() {
+    const status = this.getStorageItem();
+    if(status) {
+      const item = JSON.parse(status)
+        if (!item) return
+        const now = new Date()
+        if (now.getTime() > item.expires) {
+          this.removeVerifyTransactionUrl()
+          return null
+        } else {
+          return item.url
+        }
+    } else {
+      return null
+    }
+  }
+
+  removeVerifyTransactionUrl() {
+    return this.removeStorageItem()
+  }
+
+  getVerifyTransactionUrl() {
+    return this.getStorageItem() 
+  }
+
+  loadIframe() {
+    const iframe = this.payload?.next_action?.iframe_resources?.iframe
+
+    if (iframe) {
+      return new Promise((resolve, reject) => {
+        const iframe = this.payload?.next_action?.iframe_resources?.iframe
+
+        if (iframe) {
+          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)
+
+          // Resolve the promise when the iframe is loaded
+          const iframeElement = document.getElementById('tdsMmethodTgtFrame')
+          if(iframeElement) {
+            iframeElement.onload = () => resolve(true)
+          } else {
+            console.log('No redirection found');
+            reject(false)
+          }
+        } else {
+          console.log('No redirection found');
+          reject(false)
+        }
+      })
+    }
+  }
+
+  getRedirectUrl() {
+    return this.payload?.next_action?.redirect_to_url?.url
+  }
+
+  redirectToChallenge() {
+    const url = this.getRedirectUrl()
+    if (url) {
+      this.saveVerifyTransactionUrl()
+      window.location = url;
+    } else {
+      console.log('No redirection found');
+    }
+  }
+  
+  // Returns an object
+  // https://example.com/?name=John&age=30&city=NewYork
+  // { name: "John", age: "30", city: "NewYork" }
+  getURLParameters() {
+    const parameters: any = {};
+    const urlParams: any = new URLSearchParams(window.location.search);
+
+    for (const [key, value] of urlParams) {
+      parameters[key] = value;
+    }
+
+    return parameters;
+  }
+
+  handleSuccessTransaction(response: any) {
+    this.removeVerifyTransactionUrl();
+    console.log('Transacción autorizada exitosamente.');
+    return response;
+  }
+
+  handleDeclinedTransaction(response: any) {
+    this.removeVerifyTransactionUrl();
+    console.log('Transacción rechazada.');
+    throw new Error("Transacción rechazada.");
+  }
+
+  // TODO: the method below needs to be tested with a real 3DS challenge
+  // since we couldn't get a test card that works with this feature
+  async handle3dsChallenge(response_json: any) {
+    // Create the form element:
+    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 = response_json.creq;
+    creqInput.value = response_json.creq;
+    form.appendChild(creqInput);
+
+    const termUrlInput = document.createElement('input');
+    termUrlInput.type = 'hidden';
+    termUrlInput.name =  response_json.term_url;
+    termUrlInput.value = response_json.TermUrl;
+    form.appendChild(termUrlInput);
+
+    // Append the form to the body:
+    document.body.appendChild(form);
+    form.submit();
+
+    await this.verifyTransactionStatus();
+  }
+
+  async handleTransactionResponse(response: any) {
+    const response_json = await response.json();
+    if (response_json.status === "Pending") {
+      return await this.handle3dsChallenge(response_json);
+    } else if (["Success", "Authorized"].includes(response_json.status)) {
+      return this.handleSuccessTransaction(response);
+    } else {
+      return this.handleDeclinedTransaction(response);
+    }
+  }
+
+  async verifyTransactionStatus() {
+    const verifyUrl = this.getUrlWithExpiration();
+
+    if (verifyUrl) {
+      const url = `${this.baseUrl}${verifyUrl}`;
+      try {
+        const response = await fetch(url, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Token ${this.apiKey}`,
+          },
+          // body: JSON.stringify(data),
+        });
+
+        if (response.status !== 200) {
+          console.error('La verificación de la transacción falló.');
+          return
+        }
+
+        return await this.handleTransactionResponse(response);
+      } catch (error) {
+        console.error('Error al verificar la transacción:', error);
+        return error;
+      }
+    } else {
+      console.log('No verify_transaction_status_url found');
+    }
+  }
+
+}