@tonder.io/ionic-lite-sdk 0.0.3

package/dist/types/responses.d.ts

@@ -0,0 +1,177 @@
+import { Business } from "./commons";
+export interface IErrorResponse extends Error {
+    code?: string;
+    body?: string;
+}
+export interface GetBusinessResponse extends Business {
+}
+export type GetVaultTokenResponse = {
+    token: string;
+};
+export type CustomerRegisterResponse = {
+    id: number | string;
+    email: string;
+    auth_token: string;
+};
+export type CreateOrderResponse = {
+    id: number | string;
+    created: string;
+    amount: string;
+    status: string;
+    payment_method?: string;
+    reference?: string;
+    is_oneclick: boolean;
+    items: {
+        description: string;
+        product_reference: string;
+        quantity: string;
+        price_unit: string;
+        discount: string;
+        taxes: string;
+        amount_total: string;
+    }[];
+    billing_address?: string;
+    shipping_address?: string;
+    client: {
+        email: string;
+        name: string;
+        first_name: string;
+        last_name: string;
+        client_profile: {
+            gender: string;
+            date_birth?: string;
+            terms: boolean;
+            phone: string;
+        };
+    };
+};
+export type CreatePaymentResponse = {
+    pk: number | string;
+    order?: string;
+    amount: string;
+    status: string;
+    date: string;
+    paid_date?: string;
+    shipping_address: {
+        street: string;
+        number: string;
+        suburb: string;
+        city: {
+            name: string;
+        };
+        state: {
+            name: string;
+            country: {
+                name: string;
+            };
+        };
+        zip_code: string;
+    };
+    shipping_address_id?: string;
+    billing_address: {
+        street: string;
+        number: string;
+        suburb: string;
+        city: {
+            name: string;
+        };
+        state: {
+            name: string;
+            country: {
+                name: string;
+            };
+        };
+        zip_code: string;
+    };
+    billing_address_id?: string;
+    client?: string;
+    customer_order_reference?: string;
+};
+export type StartCheckoutResponse = {
+    status: number;
+    message: string;
+    psp_response: {
+        id: string;
+        authorization: number;
+        operation_type: string;
+        transaction_type: string;
+        status: string;
+        conciliated: boolean;
+        creation_date: string;
+        operation_date: string;
+        description: string;
+        error_message?: string;
+        order_id?: string;
+        card: {
+            type: string;
+            brand: string;
+            address?: string;
+            card_number: string;
+            holder_name: string;
+            expiration_year: string;
+            expiration_month: string;
+            allows_charges: boolean;
+            allows_payouts: boolean;
+            bank_name: string;
+            points_type: string;
+            points_card: boolean;
+            bank_code: number;
+        };
+        customer_id: string;
+        gateway_card_present: string;
+        amount: number;
+        fee: {
+            amount: number;
+            tax: number;
+            currency: string;
+        };
+        payment_method: {
+            type: string;
+            url: string;
+        };
+        currency: string;
+        method: string;
+        object: string;
+    };
+    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: {
+        name: string;
+        url: string;
+        method: string;
+    }[];
+};
+export type TokensResponse = {
+    vaultID: string;
+    responses: {
+        [key: string]: string;
+    }[];
+};
+export type GetCustomerCardsResponse = {
+    user_id: number;
+    cards: {
+        records: {
+            fields: {
+                card_number: string;
+                cardholder_name: string;
+                cvv: string;
+                expiration_month: string;
+                expiration_year: string;
+                skyflow_id: string;
+            };
+        }[];
+    };
+};
+export type RegisterCustomerCardResponse = {
+    skyflow_id: string;
+    user_id: number;
+};

package/dist/types/skyflow.d.ts

@@ -0,0 +1,17 @@
+export 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;
+    };
+};

package/jest.config.ts

@@ -0,0 +1,15 @@
+import type { JestConfigWithTsJest } from 'ts-jest'
+
+const jestConfig: JestConfigWithTsJest = {
+  testEnvironment: "jsdom",
+  preset: 'ts-jest',
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+      },
+    ],
+  },
+}
+
+export default jestConfig

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@tonder.io/ionic-lite-sdk",
+  "version": "0.0.3",
+  "description": "Tonder ionic lite SDK",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -noEmit && rollup --config",
+    "test": "jest",
+    "ts-coverage": "typescript-coverage-report"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "skyflow-js": "^1.34.1",
+    "ts-node": "^10.9.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "11.1.6",
+    "@types/crypto-js": "^4.2.2",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.11.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^24.0.0",
+    "rollup": "4.9.6",
+    "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "typescript-coverage-report": "^0.8.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,17 @@
+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({
+      exclude: ["tests/**", "jest.config.ts"]
+    })
+  ],
+  external: ["skyflow-js", "crypto-js"]
+};

package/src/classes/errorResponse.ts

@@ -0,0 +1,17 @@
+import { IErrorResponse } from "../types/responses";
+
+export class ErrorResponse implements IErrorResponse {
+    code?: string | undefined;
+    body?: string | undefined;
+    name!: string;
+    message!: string;
+    stack?: string | undefined;
+
+    constructor({ code, body, name, message, stack }: IErrorResponse) {
+        this.code = code;
+        this.body = body;
+        this.name = name;
+        this.message = message;
+        this.stack = stack;
+    }
+}

package/src/classes/liteCheckout.ts

@@ -0,0 +1,301 @@
+import Skyflow from "skyflow-js";
+import CollectContainer from "skyflow-js/types/core/external/collect/collect-container";
+import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
+import { Business } from "../types/commons";
+import { CreateOrderRequest, CreatePaymentRequest, RegisterCustomerCardRequest, StartCheckoutRequest, TokensRequest } from "../types/requests";
+import { GetBusinessResponse, CustomerRegisterResponse, CreateOrderResponse, CreatePaymentResponse, StartCheckoutResponse, GetVaultTokenResponse, IErrorResponse, GetCustomerCardsResponse, RegisterCustomerCardResponse } from "../types/responses";
+import { ErrorResponse } from "./errorResponse";
+
+declare global {
+  interface Window {
+    OpenPay: any;
+  }
+}
+
+export type LiteCheckoutConstructor = {
+  signal: AbortSignal;
+  baseUrlTonder: string;
+  apiKeyTonder: string;
+};
+
+export class LiteCheckout implements LiteCheckoutConstructor {
+  signal: AbortSignal;
+  baseUrlTonder: string;
+  apiKeyTonder: string;
+
+  constructor({
+    signal,
+    baseUrlTonder,
+    apiKeyTonder,
+  }: LiteCheckoutConstructor) {
+    this.baseUrlTonder = baseUrlTonder;
+    this.signal = signal;
+    this.apiKeyTonder = apiKeyTonder;
+  }
+
+  async getOpenpayDeviceSessionID(
+    merchant_id: string,
+    public_key: string
+  ): Promise<string | ErrorResponse> {
+    try {
+      let openpay = await window.OpenPay;
+      openpay.setId(merchant_id);
+      openpay.setApiKey(public_key);
+      openpay.setSandboxMode(true);
+      return await openpay.deviceData.setup({
+        signal: this.signal,
+      }) as string;
+    } catch (e) {
+      throw this.buildErrorResponseFromCatch(e);
+    }
+  }
+
+  async getBusiness(): Promise<GetBusinessResponse | ErrorResponse> {
+    try {
+      const getBusiness = await fetch(
+        `${this.baseUrlTonder}/api/v1/payments/business/${this.apiKeyTonder}`,
+        {
+          headers: {
+            Authorization: `Token ${this.apiKeyTonder}`,
+          },
+          signal: this.signal,
+        }
+      );
+
+      if (getBusiness.ok) return (await getBusiness.json()) as Business;
+
+      return await this.buildErrorResponse(getBusiness);
+    } catch (e) {
+      return this.buildErrorResponseFromCatch(e);
+    }
+  }
+
+  async customerRegister(email: string): Promise<CustomerRegisterResponse | ErrorResponse> {
+    try {
+      const url = `${this.baseUrlTonder}/api/v1/customer/`;
+      const data = { email: email };
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Token ${this.apiKeyTonder}`,
+        },
+        signal: this.signal,
+        body: JSON.stringify(data),
+      });
+
+      if (response.ok) return await response.json() as CustomerRegisterResponse;
+      return await this.buildErrorResponse(response);
+    } catch (e) {
+      return this.buildErrorResponseFromCatch(e);
+    }
+  }
+
+  async createOrder(orderItems: CreateOrderRequest): Promise<CreateOrderResponse | ErrorResponse> {
+    try {
+      const url = `${this.baseUrlTonder}/api/v1/orders/`;
+      const data = orderItems;
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Token ${this.apiKeyTonder}`,
+        },
+        body: JSON.stringify(data),
+      });
+      if (response.ok) return await response.json() as CreateOrderResponse;
+      return await this.buildErrorResponse(response);
+    } catch (e) {
+      return this.buildErrorResponseFromCatch(e);
+    }
+  }
+
+  async createPayment(paymentItems: CreatePaymentRequest): Promise<CreatePaymentResponse | ErrorResponse> {
+    try {
+      const url = `${this.baseUrlTonder}/api/v1/business/${paymentItems.business_pk}/payments/`;
+      const data = paymentItems;
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Token ${this.apiKeyTonder}`,
+        },
+        body: JSON.stringify(data),
+      });
+      if (response.ok) return await response.json() as CreatePaymentResponse;
+      return await this.buildErrorResponse(response);
+    } catch (e) {
+      return this.buildErrorResponseFromCatch(e);
+    }
+  }
+
+  async startCheckoutRouter(routerData: StartCheckoutRequest): Promise<StartCheckoutResponse | ErrorResponse> {
+    try {
+      const url = `${this.baseUrlTonder}/api/v1/checkout-router/`;
+      const data = routerData;
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Token ${this.apiKeyTonder}`,
+        },
+        body: JSON.stringify(data),
+      });
+      if (response.ok) return await response.json() as StartCheckoutResponse;
+      return await this.buildErrorResponse(response);
+    } catch (e) {
+      return this.buildErrorResponseFromCatch(e);
+    }
+  }
+
+  async getSkyflowTokens({
+    vault_id,
+    vault_url,
+    data,
+  }: TokensRequest): Promise<any | ErrorResponse> {
+    const skyflow = Skyflow.init({
+      vaultID: vault_id,
+      vaultURL: vault_url,
+      getBearerToken: async () => await this.getVaultToken(),
+      options: {
+        logLevel: Skyflow.LogLevel.ERROR,
+        env: Skyflow.Env.DEV,
+      },
+    });
+
+    const collectContainer: CollectContainer = skyflow.container(
+      Skyflow.ContainerType.COLLECT
+    ) as CollectContainer;
+
+    const fieldPromises = await this.getFieldsPromise(data, collectContainer);
+
+    const result = await Promise.all(fieldPromises);
+
+    const mountFail = result.some((item: boolean) => !item);
+
+    if (mountFail) {
+      return this.buildErrorResponseFromCatch(Error("Ocurrió un error al montar los campos de la tarjeta"));
+    } else {
+      try {
+        const collectResponseSkyflowTonder = await collectContainer.collect() as any;
+        if (collectResponseSkyflowTonder) return collectResponseSkyflowTonder["records"][0]["fields"];
+        return this.buildErrorResponseFromCatch(Error("Por favor, verifica todos los campos de tu tarjeta"))
+      } catch (error) {
+        return this.buildErrorResponseFromCatch(error);
+      }
+    }
+  }
+
+  async getVaultToken(): Promise<string> {
+    try {
+      const response = await fetch(`${this.baseUrlTonder}/api/v1/vault-token/`, {
+        method: "GET",
+        headers: {
+          Authorization: `Token ${this.apiKeyTonder}`,
+        },
+        signal: this.signal,
+      });
+      if (response.ok) return (await response.json() as GetVaultTokenResponse)?.token;
+      throw new Error(`HTTPCODE: ${response.status}`)
+    } catch (e) {
+      throw new Error(`Failed to retrieve bearer token; ${typeof e == "string" ? e : (e as Error).message}`)
+    }
+  }
+
+  async getFieldsPromise(data: any, collectContainer: CollectContainer): Promise<Promise<boolean>[]> {
+    const fields = await this.getFields(data, collectContainer);
+    if (!fields) return [];
+
+    return fields.map((field: { element: CollectElement, key: string }) => {
+      return new Promise((resolve) => {
+        const div = document.createElement("div");
+        div.hidden = true;
+        div.id = `id-${field.key}`;
+        document.querySelector(`body`)?.appendChild(div);
+        setTimeout(() => {
+          field.element.mount(`#id-${field.key}`);
+          setInterval(() => {
+            if (field.element.isMounted()) {
+              const value = data[field.key];
+              field.element.update({ value: value });
+              return resolve(field.element.isMounted());
+            }
+          }, 120);
+        }, 120);
+      });
+    })
+  }
+
+  async registerCustomerCard(customerToken: string, data: RegisterCustomerCardRequest): Promise<RegisterCustomerCardResponse | ErrorResponse> {
+    try {
+      const response = await fetch(`${this.baseUrlTonder}/api/v1/cards/`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Token ${customerToken}`,
+          'Content-Type': 'application/json'
+        },
+        signal: this.signal,
+        body: JSON.stringify(data)
+      });
+
+      if (response.ok) return await response.json() as RegisterCustomerCardResponse;
+      return await this.buildErrorResponse(response);
+    } catch (error) {
+      return this.buildErrorResponseFromCatch(error);
+    }
+  }
+
+  async getCustomerCards(customerToken: string, query: string = ""): Promise<GetCustomerCardsResponse | ErrorResponse> {
+    try {
+      const response = await fetch(`${this.baseUrlTonder}/api/v1/cards/${query}`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Token ${customerToken}`,
+          'Content-Type': 'application/json'
+        },
+        signal: this.signal,
+      });
+
+      if (response.ok) return await response.json() as GetCustomerCardsResponse;
+      return await this.buildErrorResponse(response);
+    } catch (error) {
+      return this.buildErrorResponseFromCatch(error);
+    }
+  }
+
+  private buildErrorResponseFromCatch(e: any): ErrorResponse {
+    return new ErrorResponse({
+      code: undefined,
+      body: undefined,
+      name: typeof e == "string" ? "catch" : (e as Error).name,
+      message: typeof e == "string" ? e : (e as Error).message,
+      stack: typeof e == "string" ? undefined : (e as Error).stack,
+    })
+  }
+
+  private async buildErrorResponse(
+    response: Response,
+    stack: string | undefined = undefined
+  ): Promise<ErrorResponse> {
+    return new ErrorResponse({
+      code: response.status?.toString?.(),
+      body: await response?.json?.(),
+      name: response.status?.toString?.(),
+      message: await response?.text?.(),
+      stack,
+    } as IErrorResponse);
+  }
+
+  private async getFields(data: any, collectContainer: CollectContainer): Promise<{ element: CollectElement, key: string }[]> {
+    return await Promise.all(
+      Object.keys(data).map(async (key) => {
+        const cardHolderNameElement = await collectContainer.create({
+          table: "cards",
+          column: key,
+          type: Skyflow.ElementType.INPUT_FIELD,
+        });
+        return { element: cardHolderNameElement, key: key };
+      })
+    )
+  }
+}

package/src/helpers/utils.ts

@@ -0,0 +1,37 @@
+export const createObserver = ({ target }: { target: string }): Promise<any> => {
+
+  return new Promise((resolve, reject) => {
+
+    let hasChanged = false;
+
+    // Select the node that will be observed for mutations
+    const targetNode: any = document.querySelector(target);
+
+    // Options for the observer (which mutations to observe)
+    const config = { attributes: true, childList: true, subtree: true };
+
+    // Callback function to execute when mutations are observed
+    const callback = (mutationList: any, observer: MutationObserver) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === "childList") {
+          hasChanged = true;
+          resolve(mutation)
+        }
+      }
+    };
+
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(callback);
+
+    // Start observing the target node for configured mutations
+    observer.observe(targetNode, config);
+
+    window.setTimeout(() => {
+      if (!hasChanged) {
+        reject("Mounting error");
+      }
+    }, 5000);
+
+  })
+
+} 

package/src/index.ts

@@ -0,0 +1,5 @@
+import { LiteCheckout } from './classes/liteCheckout'
+
+export {
+    LiteCheckout
+}

package/src/types/commons.ts

@@ -0,0 +1,61 @@
+export type Business = {
+    business: {
+        pk: number;
+        name: string;
+        categories: {
+            pk: number;
+            name: string;
+        }[];
+        web: string;
+        logo: string;
+        full_logo_url: string;
+        background_color: string;
+        primary_color: string;
+        checkout_mode: boolean;
+        textCheckoutColor: string;
+        textDetailsColor: string;
+        checkout_logo: string;
+    };
+    openpay_keys: {
+        merchant_id: string;
+        public_key: string;
+    };
+    fintoc_keys: {
+        public_key: string;
+    };
+    vault_id: string;
+    vault_url: string;
+    reference: number;
+    is_installments_available: boolean;
+};
+
+export type Customer = {
+    firstName: string;
+    lastName: string;
+    country: string;
+    street: string;
+    city: string;
+    state: string;
+    postCode: string;
+    email: string;
+    phone: 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[];
+    };
+};