@tonder.io/ionic-full-sdk 0.0.1

package/.gitlab-ci.yml

@@ -0,0 +1,19 @@
+image: grupoapok/awscli:18
+
+stages:
+  - deploy
+
+deploy:
+  stage: deploy
+  only:
+    - tags
+  before_script:
+    - |
+      {
+        echo "@tonder.io:registry=https://registry.npmjs.org/"
+        echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}"
+      } | tee -a .npmrc
+  script:
+    - npm install
+    - npm run build
+    - npm publish --access=public

package/README.md

@@ -0,0 +1,197 @@
+# Tonder SDK
+
+Tonder SDK helps to integrate the services Tonder offers in your own website
+
+## Installation
+
+You can install using NPM
+```bash
+npm i tonder-sdk-test
+```
+
+or using an script tag
+```html
+<script src="https://zplit-stage.s3.amazonaws.com/v1/bundle.min.js"></script>
+```
+
+Add dependencies to the root of the app (index.html)
+```html
+<script src="https://js.skyflow.com/v1/index.js"></script>
+<script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
+<script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
+```
+
+## Usage
+HTML
+```html
+<div>
+    <h1>Checkout</h1>
+    <!-- You have to add an entry point with the ID 'tonder-checkout' -->
+    <div id="tonder-checkout">
+    </div>
+</div>
+```
+## Javascript Example
+```javascript
+import { InlineCheckout } from "tonder-sdk-test" // Not required if using script tag
+```
+
+
+```javascript
+const customStyles = {
+  inputStyles: {
+    base: {
+      border: "1px solid #e0e0e0",
+      padding: "10px 7px",
+      borderRadius: "5px",
+      color: "#1d1d1d",
+      marginTop: "2px",
+      backgroundColor: "white",
+      fontFamily: '"Inter", sans-serif',
+      fontSize: '16px',
+      '&::placeholder': {
+        color: "#ccc",
+      },
+    },
+    cardIcon: {
+      position: 'absolute',
+      left: '6px',
+      bottom: 'calc(50% - 12px)',
+    },
+    complete: {
+      color: "#4caf50",
+    },
+    empty: {},
+    focus: {},
+    invalid: {
+      border: "1px solid #f44336",
+    },
+    global: {
+      '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
+    }
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      fontFamily: '"Inter", sans-serif'
+    },
+  },
+  errorTextStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      color: "#f44336",
+      fontFamily: '"Inter", sans-serif'
+    },
+  },
+  labels: {
+    cardLabel: 'Número de Tarjeta Personalizado',
+    cvvLabel: 'Código de Seguridad',
+    expiryMonthLabel: 'Mes de Expiración',
+    expiryYearLabel: 'Año de Expiración'
+  },
+  placeholders: {
+    cardPlaceholder: '0000 0000 0000 0000',
+    cvvPlaceholder: '123',
+    expiryMonthPlaceholder: 'MM',
+    expiryYearPlaceholder: 'AA'
+  }
+}
+
+const checkoutData = {
+  customer: {
+    firstName: "Juan",
+    lastName: "Hernández",
+    country: "Mexico",
+    address: "Av. Revolución 356, Col. Roma",
+    city: "Monterrey",
+    state: "Nuevo León",
+    postCode: "64700",
+    email: "juan.hernandez@mail.com",
+    phone: "8187654321",
+  },
+  currency: 'mxn',
+  cart: {
+    total: 399,
+    items: [
+      {
+        description: "Black T-Shirt",
+        quantity: 1,
+        price_unit: 1,
+        discount: 0,
+        taxes: 0,
+        product_reference: 1,
+        name: "T-Shirt",
+        amount_total: 399,
+      },
+    ]
+  }
+};
+
+const apiKey = "4c87c36e697e65ddfe288be0afbe7967ea0ab865";
+const returnUrl = "http://my-website:8080/checkout"
+const successUrl = "http://my-website:8080/sucess"
+// if using script tag, it should be initialized like this
+// new TonderSdk.InlineCheckout
+const inlineCheckout = new InlineCheckout({
+  apiKey,
+  returnUrl,
+  successUrl,
+  styles: customStyles
+});
+
+inlineCheckout.injectCheckout();
+
+const response = await inlineCheckout.payment(checkoutData);
+```
+
+## React Example
+```javascript
+```
+
+## Configuration
+| Property        | Type          | Description                                         |
+|:---------------:|:-------------:|:---------------------------------------------------:|
+| apiKey          | string        | You can take this from you Tonder Dashboard         |
+| backgroundColor | string        | Hex color #000000                                   |
+| returnUrl       | string        |                                                     |
+| successUrl      | string        |                                                     |
+| backgroundColor | string        |                                                     |
+
+## setPayment params
+### products
+It will receive an array of objects that represent the products.
+```javascript
+[
+    {
+        name: 'name of the product',
+        price_unit: 'valid float string with the price of the product',
+        quantity: 'valid integer strig with the quantity of this product',
+    }
+]
+```
+### shippingCost
+It is a valid float string, that will be the shipping cost.
+
+### email
+The email of the customer that is making the purchase.
+
+### apiKey
+Your api key getted from Tonder Dashboard
+
+### customer
+The data of the customer to be registered in the transaction
+
+### items
+An array of items to be registered in the Tonder order.
+
+### Mount element
+You need to have an element where the inline checkout will be mounted, this should be a DIV element with the ID "tonder-checkout"
+
+```html
+<div id="tonder-checkout"></div>
+```
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

package/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

package/dist/classes/3dsHandler.d.ts

@@ -0,0 +1,20 @@
+type ThreeDSHandlerContructor = {
+    payload?: any;
+    apiKey?: string;
+    baseUrl?: string;
+    successUrl?: Location | string;
+};
+export declare class ThreeDSHandler {
+    baseUrl?: string;
+    apiKey?: string;
+    payload?: any;
+    successUrl?: Location | string;
+    constructor({ payload, apiKey, baseUrl, successUrl }: ThreeDSHandlerContructor);
+    saveVerifyTransactionUrl(): void;
+    removeVerifyTransactionUrl(): void;
+    getVerifyTransactionUrl(): string | null;
+    redirectTo3DS(): boolean;
+    getURLParameters(): any;
+    verifyTransactionStatus(): Promise<unknown>;
+}
+export {};

package/dist/classes/checkout.d.ts

@@ -0,0 +1,39 @@
+type CheckoutType = {
+    apiKey?: string;
+    type: string;
+    backgroundColor: string;
+    color: string;
+    cb: (params?: any) => void;
+    url: string;
+};
+export declare 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, backgroundColor, color, cb, url }: CheckoutType);
+    generateButton: (buttonText: string) => void;
+    getButton: ({ buttonText }: {
+        buttonText: string;
+    }) => any;
+    mountButton: ({ buttonText }: {
+        buttonText: string;
+    }) => void;
+    stylishButton: (element: HTMLElement) => void;
+    setOrder: ({ products, email, shippingCost }: {
+        products: any;
+        email: string;
+        shippingCost: string;
+    }) => any;
+    openTabListener: (tab: any, button: HTMLButtonElement) => void;
+    openCheckout: () => void;
+    getUrlParams: () => string;
+    receiveMessage(event: any): void;
+}
+export {};

package/dist/classes/inlineCheckout.d.ts

@@ -0,0 +1,66 @@
+import { Card, CollectorIds } from '../helpers/template';
+import { LiteCheckout } from '@tonder.io/ionic-lite-sdk';
+import { ThreeDSHandler } from './3dsHandler';
+import { ErrorResponse } from '@tonder.io/ionic-lite-sdk/dist/classes/errorResponse';
+import { Business, PaymentData, OrderItem } from '@tonder.io/ionic-lite-sdk/dist/types/commons';
+import { CustomerRegisterResponse } from '@tonder.io/ionic-lite-sdk/dist/types/responses';
+export type InlineCheckoutConstructor = {
+    returnUrl: string;
+    apiKey: string;
+    successUrl?: string;
+    renderPaymentButton: boolean;
+    callBack?: (params: any) => void;
+    styles?: any;
+    form?: any;
+    totalElement?: any;
+    containerId?: string;
+    collectorIds?: CollectorIds;
+    platforms?: string[];
+};
+export declare class InlineCheckout {
+    #private;
+    paymentData: {};
+    items: never[];
+    baseUrl: string;
+    collectContainer: any;
+    cartTotal?: string | null | number;
+    apiKeyTonder: string;
+    returnUrl?: string;
+    successUrl?: string;
+    renderPaymentButton: boolean;
+    callBack: (params: any) => void;
+    customStyles: any;
+    abortController: AbortController;
+    process3ds: ThreeDSHandler;
+    cb?: () => void;
+    firstName?: string;
+    lastName?: string;
+    country?: string;
+    address?: string;
+    city?: string;
+    state?: string;
+    postCode?: string;
+    email?: string;
+    phone?: string;
+    merchantData?: Business | ErrorResponse;
+    cartItems?: any;
+    injectInterval: any;
+    containerId: string;
+    injected: boolean;
+    cardsInjected: boolean;
+    collectorIds: CollectorIds;
+    platforms?: string[];
+    liteCheckout: LiteCheckout;
+    clientCards: Card[];
+    constructor({ apiKey, returnUrl, successUrl, renderPaymentButton, callBack, styles, containerId, collectorIds, platforms }: InlineCheckoutConstructor);
+    payment(data: any): Promise<unknown>;
+    setCartItems(items: OrderItem[]): void;
+    setCustomerEmail(email: string): void;
+    setPaymentData(data?: PaymentData): void;
+    setCartTotal(total: string | number): void;
+    setCallback(cb: any): void;
+    injectCheckout(): void;
+    loadCardsList(cards: Card[]): void;
+    getCustomer(email: string): Promise<ErrorResponse | CustomerRegisterResponse>;
+    removeCheckout(): void;
+}

package/dist/data/api.d.ts

@@ -0,0 +1,18 @@
+declare global {
+    interface Window {
+        OpenPay: any;
+    }
+}
+export declare function getOpenpayDeviceSessionID(merchant_id: string, public_key: string, signal: AbortSignal): Promise<any>;
+export declare function getBusiness(baseUrlTonder: string, signal: AbortSignal, apiKeyTonder?: string): Promise<any>;
+export declare function customerRegister(baseUrlTonder: string, email: string, signal: AbortSignal, apiKeyTonder?: string): Promise<any>;
+export declare function createOrder(baseUrlTonder: string, orderItems: any, apiKeyTonder?: string): Promise<any>;
+export declare function createPayment(baseUrlTonder: string, paymentItems: {
+    business_pk: string;
+}, apiKeyTonder?: string): Promise<any>;
+export declare function startCheckoutRouter(baseUrlTonder: string, routerItems: any, apiKeyTonder?: string): Promise<any>;
+export declare function getVaultToken({ baseUrl, apiKey, signal }: {
+    baseUrl: string;
+    apiKey: string;
+    signal: AbortSignal;
+}): Promise<any>;

package/dist/helpers/skyflow.d.ts

@@ -0,0 +1,5 @@
+import { CollectorIds } from "./template";
+import CollectorContainer from "skyflow-js/types/core/external/collect/collect-container";
+import ComposableContainer from "skyflow-js/types/core/external/collect/compose-collect-container";
+import RevealContainer from "skyflow-js/types/core/external/reveal/reveal-container";
+export declare function initSkyflow(vaultId: string, vaultUrl: string, baseUrl: string, signal: AbortSignal, customStyles: any, collectorIds: CollectorIds, apiKey: string): Promise<CollectorContainer | ComposableContainer | RevealContainer>;

package/dist/helpers/styles.d.ts

@@ -0,0 +1 @@
+export declare const defaultStyles: any;

package/dist/helpers/template.d.ts

@@ -0,0 +1,18 @@
+export type CollectorIds = {
+    holderName: string;
+    cardNumber: string;
+    expirationMonth: string;
+    expirationYear: string;
+    cvv: string;
+    tonderPayButton: string;
+    msgError: string;
+    cardsListContainer: string;
+};
+export type Card = {
+    cardholder_name: string;
+    card_number: string;
+    expiration_month: string;
+    expiration_year: string;
+};
+export declare const cardTemplate: (external: boolean, collectorIds: CollectorIds) => string;
+export declare const cardItemsTemplate: (external: boolean, cards: Card[]) => string;