@tonder.io/ionic-full-sdk 0.0.1

package/src/classes/inlineCheckout.ts

@@ -0,0 +1,440 @@
+import { Card, cardItemsTemplate, cardTemplate, CollectorIds } from '../helpers/template'
+import { LiteCheckout } from '@tonder.io/ionic-lite-sdk';
+import {
+  showError
+} from '../helpers/utils';
+import { initSkyflow } from '../helpers/skyflow'
+import { ThreeDSHandler } from './3dsHandler';
+import { ErrorResponse } from '@tonder.io/ionic-lite-sdk/dist/classes/errorResponse';
+import { Business, Customer, PaymentData, OrderItem } from '@tonder.io/ionic-lite-sdk/dist/types/commons';
+import { CustomerRegisterResponse, StartCheckoutResponse } from '@tonder.io/ionic-lite-sdk/dist/types/responses';
+import { StartCheckoutRequest, CreatePaymentRequest, CreateOrderRequest } from '@tonder.io/ionic-lite-sdk/dist/types/requests';
+
+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 class InlineCheckout {
+  paymentData = {}
+  items = []
+  //@ts-ignore
+  baseUrl = "https://stage.tonder.io";
+  collectContainer: any = null
+  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 = false,
+    callBack = () => {},
+    styles,
+    containerId,
+    collectorIds,
+    platforms
+  }: InlineCheckoutConstructor) {
+    this.apiKeyTonder = apiKey;
+    this.returnUrl = returnUrl;
+    this.successUrl = successUrl;
+    this.renderPaymentButton = renderPaymentButton;
+    this.callBack = callBack;
+    this.customStyles = styles
+    this.platforms = platforms
+
+    this.abortController = new AbortController()
+
+    this.liteCheckout = new LiteCheckout({
+      apiKeyTonder: apiKey,
+      baseUrlTonder: this.baseUrl,
+      signal: this.abortController.signal
+    })
+
+    this.process3ds = new ThreeDSHandler({ 
+      apiKey: apiKey, 
+      baseUrl: this.baseUrl, 
+      successUrl: successUrl 
+    })
+    this.containerId = containerId ? containerId : "tonder-checkout"
+    this.injected = false;
+    this.cardsInjected = false;
+    this.collectorIds = collectorIds ? collectorIds : {
+      cardsListContainer: "cardsListContainer",
+      holderName: "collectCardholderName",
+      cardNumber: "collectCardNumber",
+      expirationMonth: "collectExpirationMonth",
+      expirationYear: "collectExpirationYear",
+      cvv: "collectCvv",
+      tonderPayButton: "tonderPayButton",
+      msgError: "msgError"
+    }
+    this.clientCards = []
+  }
+
+  #mountPayButton() {
+    if (!this.renderPaymentButton) return;
+
+    const payButton: HTMLElement | null = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+    if (!payButton) {
+      console.error("Pay button not found");
+      return;
+    }
+
+    payButton.style.display = "block";
+    payButton.textContent = `Pagar $${this.cartTotal}`;
+    payButton.onclick = async (event) => {
+      event.preventDefault();
+      await this.#handlePaymentClick(payButton);
+    };
+  }
+
+  async #handlePaymentClick(payButton: any) {
+    const prevButtonContent = payButton.innerHTML;
+    payButton.innerHTML = `<div class="lds-dual-ring"></div>`;
+    try {
+      const response = await this.payment(this.paymentData);
+      this.callBack(response);
+    } catch (error) {
+      console.error("Payment error:", error);
+    } finally {
+      payButton.innerHTML = prevButtonContent;
+    }
+  }
+
+  payment(data: any) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        this.#handleCustomer(data.customer)
+        this.setCartTotal(data.cart?.total)
+        this.setCartItems(data.cart?.items)
+        const response: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
+        if (response) {
+          const process3ds = new ThreeDSHandler({ payload: response });
+          this.callBack(response);
+          if (!process3ds.redirectTo3DS()) {
+            resolve(response);
+          } else {
+            resolve(response);
+          }
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  #handleCustomer(customer: 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
+  }
+
+  setCartItems (items: OrderItem[]) {
+    this.cartItems = items
+  }
+
+  setCustomerEmail (email: string) {
+    this.email = email
+  }
+
+  setPaymentData (data?: PaymentData) {
+    if (!data) return
+    this.paymentData = data
+  }
+
+  setCartTotal (total: string | number) {
+    this.cartTotal = total
+    this.#updatePayButton()
+  }
+
+  #updatePayButton() {
+    const payButton = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+    if (!payButton) return
+    payButton.textContent = `Pagar $${this.cartTotal}`;
+  }
+
+  setCallback (cb: any) {
+    this.cb = cb
+  }
+
+  injectCheckout() {
+    if (this.injected) return
+    this.process3ds.verifyTransactionStatus()
+    const injectInterval = setInterval(() => {
+      const queryElement = document.querySelector(`#${this.containerId}`)
+      if (queryElement) {
+        queryElement.innerHTML = cardTemplate(this.customStyles ? true : false, this.collectorIds)
+        this.#mountTonder();
+        clearInterval(injectInterval);
+        this.injected = true
+      }
+    }, 500);
+  }
+
+  loadCardsList (cards: Card[]) {
+    if(this.cardsInjected) return;
+    const injectInterval = setInterval(() => {
+      const queryElement = document.querySelector(`#${this.collectorIds.cardsListContainer}`);
+      if (queryElement && this.injected) {
+        queryElement.innerHTML = cardItemsTemplate(this.customStyles ? true : false, cards)
+        clearInterval(injectInterval)
+        this.cardsInjected = true
+      }
+    }, 500);
+  }
+
+  async #fetchMerchantData() {
+    this.merchantData = await this.liteCheckout.getBusiness();
+    return this.merchantData
+  }
+
+  async getCustomer(email: string) {
+    return await this.liteCheckout.customerRegister(email);
+  }
+
+  async #mountTonder() {
+
+    this.#mountPayButton()
+
+    const result = await this.#fetchMerchantData();
+
+    if(result && "vault_id" in result) {
+      
+      const { vault_id, vault_url } = result;
+
+      if(this.email) {
+
+        const customerResponse : CustomerRegisterResponse | ErrorResponse = await this.getCustomer(this.email);
+
+        if("auth_token" in customerResponse) {
+
+          const { auth_token } = customerResponse
+
+          const cards = await this.liteCheckout.getCustomerCards(auth_token);
+
+          if("cards" in cards) {
+
+            const cardsMapped: Card[] = cards.cards.records.map(record => ({ ...record.fields }))
+  
+            this.loadCardsList(cardsMapped)
+
+          }
+
+        }
+        
+      }
+
+      this.collectContainer = await initSkyflow(
+        vault_id,
+        vault_url,
+        this.baseUrl,
+        this.abortController.signal,
+        this.customStyles,
+        this.collectorIds,
+        this.apiKeyTonder
+      );
+
+    }
+
+  }
+
+  removeCheckout() {
+    this.injected = false
+    this.cardsInjected = false
+    // Cancel all requests
+    this.abortController.abort(); 
+    this.abortController = new AbortController();
+
+    clearInterval(this.injectInterval);
+    console.log("InlineCheckout removed from DOM and cleaned up.");
+  }
+
+  async #checkout() {
+    try {
+      const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+      if(selector){
+        selector.disabled = true;
+      }
+    } catch (error) {
+    }
+
+    if(this.merchantData) {
+
+      if("openpay_keys" in this.merchantData) {
+
+        const { openpay_keys, reference, business } = this.merchantData
+
+        const total = Number(this.cartTotal)
+
+        var cardTokensSkyflowTonder: any = null;
+        try {
+          const collectResponseSkyflowTonder = await this.collectContainer?.collect();
+          cardTokensSkyflowTonder = await collectResponseSkyflowTonder["records"][0]["fields"];
+        } catch (error) {
+          showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+          throw error;
+        }
+
+        try {
+
+          let deviceSessionIdTonder: any;
+
+          if (openpay_keys.merchant_id && openpay_keys.public_key) {
+            deviceSessionIdTonder = await this.liteCheckout.getOpenpayDeviceSessionID(
+              openpay_keys.merchant_id,
+              openpay_keys.public_key
+            );
+          }
+
+          if(this.email) {
+
+            const customerResponse : CustomerRegisterResponse | ErrorResponse = await this.getCustomer(this.email);
+
+            if("auth_token" in customerResponse) {
+
+              const { auth_token } = customerResponse;
+
+              const cards = await this.liteCheckout.getCustomerCards(auth_token);
+              
+              if("cards" in cards) {
+
+                const cardExist = cards.cards.records.find((record: any) => record.fields.skyflow_id === cardTokensSkyflowTonder.skyflow_id)
+
+                if(!cardExist) {
+
+                  await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
+
+                }
+                
+              }
+              
+              const orderItems: CreateOrderRequest = {
+                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 this.liteCheckout.createOrder(
+                orderItems
+              );
+
+              // Create payment
+              const now = new Date();
+              const dateString = now.toISOString();
+
+              if("id" in jsonResponseOrder) {
+
+                const paymentItems: CreatePaymentRequest = {
+                  business_pk: business.pk,
+                  amount: total,
+                  date: dateString,
+                  order: jsonResponseOrder.id
+                };
+                const jsonResponsePayment = await this.liteCheckout.createPayment(
+                  paymentItems
+                );
+    
+                // Checkout router
+                const routerItems: StartCheckoutRequest = {
+                  card: cardTokensSkyflowTonder,
+                  name: cardTokensSkyflowTonder.cardholder_name,
+                  last_name: "",
+                  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: ("id" in jsonResponseOrder) && jsonResponseOrder.id,
+                  business_id: business.pk,
+                  payment_id: ("pk" in jsonResponsePayment) && jsonResponsePayment.pk,
+                  source: 'sdk',
+                };
+                
+                const jsonResponseRouter = await this.liteCheckout.startCheckoutRouter(
+                  routerItems
+                );
+    
+                if (jsonResponseRouter) {
+                  try {
+                    const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+                    if(selector) {
+                      selector.disabled = false;
+                    }
+                  } catch {}
+                  return jsonResponseRouter;
+                } else {
+                  showError("No se ha podido procesar el pago", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+                  return false;
+                }
+              }
+            }
+          }
+        } catch (error) {
+          console.log(error);
+          showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+          throw error;
+        }
+
+      }
+      
+    }
+  };
+}

package/src/helpers/skyflow.ts

@@ -0,0 +1,146 @@
+import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
+import { defaultStyles } from "./styles";
+import Skyflow from 'skyflow-js'
+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 async function initSkyflow(
+  vaultId: string,
+  vaultUrl: string,
+  baseUrl: string,
+  signal: AbortSignal,
+  customStyles: any = {},
+  collectorIds: CollectorIds,
+  apiKey: string
+): Promise <CollectorContainer | ComposableContainer | RevealContainer> {
+  const skyflow = await Skyflow.init({
+    vaultID: vaultId,
+    vaultURL: vaultUrl,
+    getBearerToken: async () => {
+      // Pass the signal to the fetch call
+      const response = await fetch(`${baseUrl}/api/v1/vault-token/`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Token ${apiKey}`,
+        },
+        signal: signal,
+      });
+
+      if (response.ok) {
+        const responseBody = await response.json();
+        return responseBody.token;
+      } else {
+        throw new Error('Failed to retrieve bearer token');
+      }
+    },
+    options: {
+      logLevel: Skyflow.LogLevel.ERROR,
+      env: Skyflow.Env.DEV,
+    },
+  });
+
+  // Create collect Container.
+  const collectContainer = await skyflow.container(
+    Skyflow.ContainerType.COLLECT
+  );
+
+  // Custom styles for collect elements.
+  var collectStylesOptions: any = Object.keys(customStyles).length === 0 ? defaultStyles : customStyles
+
+  const stylesForCardNumber = { ...collectStylesOptions.inputStyles.base };
+  stylesForCardNumber.textIndent = '44px';
+
+  const lengthMatchRule = {
+    type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
+    params: {
+      max: 70,
+    },
+  };
+
+  const cardHolderNameElement: any = await collectContainer.create({
+    table: "cards",
+    column: "cardholder_name",
+    ...collectStylesOptions,
+    label: "Titular de la tarjeta",
+    placeholder: "Nombre como aparece en la tarjeta",
+    type: Skyflow.ElementType.CARDHOLDER_NAME,
+    validations: [lengthMatchRule],
+  });
+
+  cardHolderNameElement.setError('Inválido')
+
+  // Create collect elements.
+  const cardNumberElement: any = await collectContainer.create({
+    table: "cards",
+    column: "card_number",
+    ...collectStylesOptions,
+    inputStyles: {
+      ...collectStylesOptions.inputStyles,
+      base: stylesForCardNumber
+    },
+    label: "Número de tarjeta",
+    placeholder: "1234 1234 1234 1234",
+    type: Skyflow.ElementType.CARD_NUMBER,
+  });
+
+  cardNumberElement.setError('Inválido')
+
+  const cvvElement: any = await collectContainer.create({
+    table: "cards",
+    column: "cvv",
+    ...collectStylesOptions,
+    label: "CVC/CVV",
+    placeholder: "3-4 dígitos",
+    type: Skyflow.ElementType.CVV,
+  });
+
+  cvvElement.setError('Inválido')
+
+  const expiryMonthElement: any = await collectContainer.create({
+    table: "cards",
+    column: "expiration_month",
+    ...collectStylesOptions,
+    label: "Fecha de expiración",
+    placeholder: "MM",
+    type: Skyflow.ElementType.EXPIRATION_MONTH,
+  });
+
+  expiryMonthElement.setError('Inválido')
+
+  const expiryYearElement: any = await collectContainer.create({
+    table: "cards",
+    column: "expiration_year",
+    ...collectStylesOptions,
+    label: "",
+    placeholder: "AA",
+    type: Skyflow.ElementType.EXPIRATION_YEAR,
+  });
+
+  expiryYearElement.setError('Inválido')
+
+  await mountElements(
+    { id: collectorIds.cardNumber, element: cardNumberElement },
+    { id: collectorIds.cvv, element: cvvElement },
+    { id: collectorIds.expirationMonth, element: expiryMonthElement },
+    { id: collectorIds.expirationYear, element: expiryYearElement },
+    { id: collectorIds.holderName, element: cardHolderNameElement }
+  )
+
+  return collectContainer
+}
+
+async function mountElements(
+  cardNumberElement: any,
+  cvvElement: any,
+  expiryMonthElement: any,
+  expiryYearElement: any,
+  cardHolderNameElement: any,
+) {
+  cardNumberElement.element.mount(`#${cardNumberElement.id}`);
+  cvvElement.element.mount(`#${cvvElement.id}`);
+  expiryMonthElement.element.mount(`#${expiryMonthElement.id}`);
+  expiryYearElement.element.mount(`#${expiryYearElement.id}`);
+  cardHolderNameElement.element.mount(`#${cardHolderNameElement.id}`);
+}

package/src/helpers/styles.ts

@@ -0,0 +1,60 @@
+export const defaultStyles: any = {
+  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: '',
+    cvvLabel: '',
+    expiryMonthLabel: '',
+    expiryYearLabel: ''
+  },
+  placeholders: {
+    cardPlaceholder: '',
+    cvvPlaceholder: '',
+    expiryMonthPlaceholder: '',
+    expiryYearPlaceholder: ''
+  }
+}