@tonder.io/ionic-full-sdk 0.0.1

package/dist/types/commons-ds.d.ts

@@ -0,0 +1,40 @@
+export type Customer = {
+    firstName: string;
+    lastName: string;
+    country: string;
+    street: string;
+    city: string;
+    state: string;
+    postCode: string;
+    email: string;
+    phone: string;
+};
+export type Business = {
+    vault_id: string;
+    vault_url: string;
+    openpay_keys: {
+        merchant_id: string;
+        public_key: string;
+    };
+    reference: string;
+    business: {
+        pk: string;
+    };
+};
+export type OrderItem = {
+    description: string;
+    quantity: number;
+    price_unit: number;
+    discount: number;
+    taxes: number;
+    product_reference: number;
+    name: string;
+    amount_total: number;
+};
+export type PaymentData = {
+    customer: Customer;
+    cart: {
+        total: string | number;
+        items: OrderItem[];
+    };
+};

package/dist/types/commons.d.ts

@@ -0,0 +1,40 @@
+export type Customer = {
+    firstName: string;
+    lastName: string;
+    country: string;
+    street: string;
+    city: string;
+    state: string;
+    postCode: string;
+    email: string;
+    phone: string;
+};
+export type Business = {
+    vault_id: string;
+    vault_url: string;
+    openpay_keys: {
+        merchant_id: string;
+        public_key: string;
+    };
+    reference: string;
+    business: {
+        pk: string;
+    };
+};
+export type OrderItem = {
+    description: string;
+    quantity: number;
+    price_unit: number;
+    discount: number;
+    taxes: number;
+    product_reference: number;
+    name: string;
+    amount_total: number;
+};
+export type PaymentData = {
+    customer: Customer;
+    cart: {
+        total: string | number;
+        items: OrderItem[];
+    };
+};

package/dist/types/skyflow.d.ts

@@ -0,0 +1,39 @@
+type SkyflowRecord = {
+    method: string;
+    quorum?: boolean;
+    tableName: string;
+    fields?: {
+        [key: string]: string;
+    };
+    ID?: string;
+    tokenization?: boolean;
+    batchID?: string;
+    redaction?: "DEFAULT" | "REDACTED" | "MASKED" | "PLAIN_TEXT";
+    downloadURL?: boolean;
+    upsert?: string;
+    tokens?: {
+        [key: string]: string;
+    };
+};
+export type VaultRequest = {
+    records: SkyflowRecord[];
+    continueOnError?: boolean;
+    byot?: "DISABLE" | "ENABLE" | "ENABLE_STRICT";
+};
+export type TokensRequest = {
+    baseUrl: string;
+    vault_id: string;
+    vault_url: string;
+    apiKey: string;
+    signal: AbortSignal;
+    data: {
+        [key: string]: any;
+    };
+};
+export type TokensResponse = {
+    vaultID: string;
+    responses: {
+        [key: string]: string;
+    }[];
+};
+export {};

package/dist/types/skyflow.ds.d.ts

@@ -0,0 +1,39 @@
+type SkyflowRecord = {
+    method: string;
+    quorum?: boolean;
+    tableName: string;
+    fields?: {
+        [key: string]: string;
+    };
+    ID?: string;
+    tokenization?: boolean;
+    batchID?: string;
+    redaction?: "DEFAULT" | "REDACTED" | "MASKED" | "PLAIN_TEXT";
+    downloadURL?: boolean;
+    upsert?: string;
+    tokens?: {
+        [key: string]: string;
+    };
+};
+export type VaultRequest = {
+    records: SkyflowRecord[];
+    continueOnError?: boolean;
+    byot?: "DISABLE" | "ENABLE" | "ENABLE_STRICT";
+};
+export type TokensRequest = {
+    baseUrl: string;
+    vault_id: string;
+    vault_url: string;
+    apiKey: string;
+    signal: AbortSignal;
+    data: {
+        [key: string]: any;
+    };
+};
+export type TokensResponse = {
+    vaultID: string;
+    responses: {
+        [key: string]: string;
+    }[];
+};
+export {};

package/index.js.example

@@ -0,0 +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())
+
+tonderCheckout.mountButton({ buttonText: 'Proceder al pago' })

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@tonder.io/ionic-full-sdk",
+  "version": "0.0.1",
+  "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.6",
+    "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

@@ -0,0 +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"]
+};

package/src/classes/3dsHandler.ts

@@ -0,0 +1,103 @@
+type ThreeDSHandlerContructor = {
+  payload?: any,
+  apiKey?: string,
+  baseUrl?: string,
+  successUrl?: Location | string
+}
+
+export class ThreeDSHandler {
+
+  baseUrl?: string
+  apiKey?: string
+  payload?: any
+  successUrl?: Location | string
+
+  constructor({
+    payload = null,
+    apiKey,
+    baseUrl,
+    successUrl
+  }: ThreeDSHandlerContructor) {
+    this.baseUrl = baseUrl,
+    this.apiKey = apiKey,
+    this.payload = payload,
+    this.successUrl = successUrl
+  }
+
+  saveVerifyTransactionUrl() {
+    const url = this.payload?.next_action?.redirect_to_url?.verify_transaction_status_url
+    if (url) {
+      localStorage.setItem("verify_transaction_status_url", url)
+    }
+  }
+
+  removeVerifyTransactionUrl() {
+    localStorage.removeItem("verify_transaction_status_url")
+  }
+
+  getVerifyTransactionUrl() {
+    return localStorage.getItem("verify_transaction_status_url") 
+  }
+
+  redirectTo3DS() {
+    const url = this.payload?.next_action?.redirect_to_url?.url
+    if (url) {
+      this.saveVerifyTransactionUrl()
+      window.open('@tonder/ionic-full-sdk://', '_system')
+      // window.open(url, '_blank');
+      return true
+    } else {
+      console.log('No redirection found');
+      return false
+    }
+  }
+
+  // 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;
+  }
+
+  async verifyTransactionStatus() {
+    const verifyUrl = this.getVerifyTransactionUrl();
+
+    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) {
+          this.removeVerifyTransactionUrl();
+          //@ts-ignore
+          window.location = this.successUrl
+          console.log('La transacción se verificó con éxito.');
+          return response;
+        } else {
+          console.error('La verificación de la transacción falló.');
+          return null;
+        }
+      } catch (error) {
+        console.error('Error al verificar la transacción:', error);
+        return error;
+      }
+    } else {
+      console.log('No verify_transaction_status_url found');
+      return null;
+    }
+  }
+}

package/src/classes/checkout.ts

@@ -0,0 +1,148 @@
+import { AES } from "crypto-js";
+
+type CheckoutType = {
+  apiKey?: string,
+  type: string,
+  backgroundColor: string,
+  color: string,
+  cb: (params?: any)=> void,
+  url: string,
+}
+
+export class Checkout {
+
+  url: string
+  apiKey?: string
+  type: string
+  backgroundColor: string
+  color: string
+  params: string
+  order: any
+  buttonText: string
+  cb: (params: any) => void
+  tonderButton: any
+
+  constructor({
+    apiKey,
+    type = "payment",
+    backgroundColor="#141414",
+    color="#EBEBEB",
+    cb=()=>{},
+    url="http://checkout.tonder.io/#/"
+  }: CheckoutType) {
+    this.url = url
+    this.apiKey = apiKey
+    this.type = type
+    this.backgroundColor = backgroundColor
+    this.color = color
+    this.params = ""
+    this.order = {}
+    this.buttonText = "Proceder al pago"
+    this.cb = cb
+
+    window.addEventListener("message", this.receiveMessage.bind(this), false);
+  }
+  generateButton = (buttonText: string) => {
+    this.buttonText = buttonText ? buttonText : this.buttonText
+    this.tonderButton = document.createElement('button');
+    this.tonderButton.innerHTML = this.buttonText;
+    this.stylishButton(this.tonderButton)
+    this.tonderButton.onclick = this.openCheckout
+  }
+  getButton = ({ buttonText }: { buttonText: string }) => {
+    this.generateButton(buttonText)
+    return this.tonderButton
+  }
+  mountButton = ({ buttonText }: { buttonText: string }) => {
+    this.generateButton(buttonText)
+    const entryPoint: HTMLElement | null = document.getElementById("tonder-checkout")
+    try {
+      if(entryPoint) {
+        entryPoint.innerHTML = ""
+        entryPoint.append(this.tonderButton)
+      }
+    } catch(error) {
+      console.error(error)
+    }
+  }
+  stylishButton = (element: HTMLElement) => {
+    element.style.backgroundColor = this.backgroundColor
+    element.style.color = this.color
+    element.style.display = 'flex'
+    element.style.justifyContent = 'center'
+    element.style.border = 'none'
+    element.style.padding = '1rem'
+    element.style.borderRadius = '10px'
+    element.style.fontSize = '1rem'
+    element.style.width = '100%'
+    element.style.boxShadow = '0 3px 6px 0 rgba(0,0,0,0.16)'
+  }
+  setOrder = ({ products, email, shippingCost }: { products: any, email: string, shippingCost: string }) => {
+    let _order: any = {}
+    if (products) _order.products = products 
+    if (email) _order.email = email 
+    if (shippingCost) _order.shippingCost = shippingCost
+    this.order = {...this.order, ..._order}
+    return this.order
+  }
+  openTabListener = (tab: any, button: HTMLButtonElement) => {
+    const tabInterval = setInterval(() => {
+      if (tab.closed) {
+        clearInterval(tabInterval);
+        button.disabled = false
+        button.innerHTML = this.buttonText
+      }
+    }, 500)
+  }
+  openCheckout = () => {
+    const queryString = this.getUrlParams()
+    const encrypted = AES.encrypt(queryString, 'url-params-encrypt').toString()
+    const encodedURL = encodeURIComponent(encrypted);
+    this.params = "?" + encodedURL;
+    const newWindow = window.open(this.url + this.params, '_blank', `width=1200,height=$800,left=0,top=0`);
+    this.tonderButton.disabled = true
+    this.tonderButton.innerHTML = `
+      <div class="loader"></div>
+      <style>
+      .loader {
+        border: 4px solid ${this.color};
+        border-radius: 50%;
+        border-top: 4px solid ${this.backgroundColor};
+        width: 0.625rem;
+        height: 0.625rem;
+        -webkit-animation: spin 2s linear infinite; /* Safari */
+          animation: spin 2s linear infinite;
+      }
+
+    /* Safari */
+      @-webkit-keyframes spin {
+        0% { -webkit-transform: rotate(0deg); }
+        100% { -webkit-transform: rotate(360deg); }
+      }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+      </style>
+      `
+    this.openTabListener(newWindow, this.tonderButton)
+  }
+  getUrlParams = () => {
+    const params = { apiKey: this.apiKey, ...this.order, type: this.type}
+    if (params.products) {
+      params.products = JSON.stringify(params.products)
+    }
+    const queryString = new URLSearchParams(params).toString();
+    return queryString
+  }
+  receiveMessage(event: any) {
+    // Parse data if it is possible, in case of error it will return the raw data.
+    try {
+      const data = JSON.parse(event.data)
+      this.cb(data)
+    } catch(error) {
+      this.cb(event.data)
+    }
+  }
+}