@tonder.io/rn-sdk 0.1.0-beta.DEV1355.1

package/src/core/BaseCheckout/index.ts

@@ -0,0 +1,420 @@
+import type Tonder from '@core/Tonder';
+import BaseSDK from '@core/BaseSDK';
+import React from 'react';
+import type {
+  ICardPaymentFields,
+  ICheckoutResponse,
+  ICreateOrderResponse,
+  ICreatePaymentResponse,
+  IInternalProcessPaymentRequest,
+  IProcessPaymentRequest,
+  ISaveCardResponse,
+  IStartCheckoutRequest,
+  IThreeDSHandler,
+  ITransaction,
+} from '@types';
+import { SDKType } from '@types';
+import { executeCallback, getAppInfo } from '@shared/utils/common';
+import { defaultTo, get } from 'lodash';
+import { MESSAGES_ES } from '@shared/constants';
+import TonderError from '@shared/utils/errors';
+import { ErrorKeyEnum } from '@shared/enum';
+import { ThreeDSHandler } from '@core/3DSHandler';
+import { getPaymentMethodDetails } from '@shared/catalog/paymentMethodsCatalog';
+
+class BaseCheckout extends BaseSDK {
+  #process3ds: IThreeDSHandler;
+
+  constructor(
+    tonderClient: Tonder,
+    getState: () => Readonly<any>,
+    setState: (newState: Partial<any>) => void,
+    setSkyflowConfig: React.Dispatch<React.SetStateAction<any>>
+  ) {
+    super(tonderClient, getState, setState, setSkyflowConfig);
+    this.#process3ds = new ThreeDSHandler(
+      this.tonderClient.getConfig(),
+      this.tonderClient.getService(),
+      (eventName: string, data: any) => this.tonderClient.emit(eventName, data),
+      (checkoutId) => this.resumeCheckout(checkoutId)
+    );
+  }
+
+  public create = async (): Promise<{ error?: TonderError }> => {
+    try {
+      await this.getInitialData();
+      await this.initializeProviders();
+
+      if (this.tonderClient.getConfig().type === SDKType.INLINE) {
+        await this.getUIData({});
+      }
+
+      this.setState({ isCreated: true, isCreating: false });
+
+      return {};
+    } catch (error) {
+      const err =
+        error instanceof TonderError
+          ? error
+          : new TonderError({
+              code: ErrorKeyEnum.CREATE_ERROR,
+              details: error,
+            });
+
+      await this.setState({
+        error: err,
+      });
+
+      return { error: err };
+    }
+  };
+
+  public setupPaymentFlow = async (
+    data: IProcessPaymentRequest
+  ): Promise<ITransaction> => {
+    await this.setState({
+      isProcessing: true,
+    });
+    const callbacks = this.getState().callbacks;
+
+    // Execute user callbacks
+    await executeCallback({
+      callbacks,
+      callback: 'beforePayment',
+      throwError: true,
+    });
+
+    const payment_data: IInternalProcessPaymentRequest =
+      await this.prepareCheckoutData(data);
+
+    await this.setState({
+      customer: payment_data.customer,
+      internalPaymentData: payment_data,
+    });
+
+    await this.getOrRegisterCustomer(
+      this.getState().internalPaymentData?.customer
+    );
+
+    // Save card based on the configuration or card selector for future payments.
+    await this.validateAndSaveCard(
+      payment_data.card?.skyflow_id,
+      this.getState().customization?.saveCards?.autoSave ||
+        this.getState().uiData?.saveCard
+    );
+
+    // Refresh customer cards.
+    try {
+      this.getUIData({ cards: true, paymentMethods: false });
+    } catch (e) {}
+
+    // Make init checkout
+    const response = await this.handleCheckout({
+      card: payment_data.card,
+      payment_method: payment_data.payment_method,
+    });
+
+    // Execute 3DS flow
+    return await this.handle3DSFlow(response);
+  };
+
+  private async prepareCheckoutData(
+    data: IProcessPaymentRequest
+  ): Promise<IInternalProcessPaymentRequest> {
+    let card_data = defaultTo(data.card, '');
+    let card_tokens = {};
+    let payment_method_data = defaultTo(data.payment_method, '');
+
+    if (card_data === '' && payment_method_data === '') {
+      const cardFields = await this.getState().skyflowContainer.collect();
+      card_tokens = cardFields?.records[0]?.fields;
+    }
+    if (card_data !== '') {
+      card_tokens = {
+        skyflow_id: card_data,
+      };
+    }
+    return {
+      ...data,
+      ...(Object.keys(card_tokens).length > 0
+        ? { card: card_tokens }
+        : { payment_method: payment_method_data }),
+      currency: data.currency || 'mxn',
+      metadata: data.metadata || {},
+    } as IInternalProcessPaymentRequest;
+  }
+
+  public validateAndSaveCard = async (
+    cardId?: string,
+    saveCard?: boolean
+  ): Promise<ISaveCardResponse | void> => {
+    if (cardId && saveCard) {
+      const { customerToken, secureToken, businessId } = this.getDataForCards();
+      const response = await this.tonderClient
+        .getService()
+        .card.saveCustomerCard(customerToken, secureToken, businessId, {
+          skyflow_id: cardId!,
+        });
+      await this.setState({
+        message: MESSAGES_ES.CARD_SAVED_SUCCESSFULLY,
+      });
+
+      return response;
+    }
+  };
+
+  private async handleCheckout({
+    card,
+    payment_method,
+  }: {
+    card?: ICardPaymentFields;
+    payment_method?: string;
+  }): Promise<ICheckoutResponse> {
+    try {
+      const orderResponse = await this.createOrder();
+
+      const paymentResponse = await this.createPayment(
+        orderResponse.id as string
+      );
+
+      return await this.startCheckoutRouter(
+        orderResponse.id as string,
+        paymentResponse.pk as string,
+        payment_method,
+        card
+      );
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  private async createOrder(): Promise<ICreateOrderResponse> {
+    const state = this.getState();
+
+    const orderItems = {
+      business: this.tonderClient.getConfig().apiKey,
+      client: state.customerData?.auth_token!,
+      billing_address_id: null,
+      shipping_address_id: null,
+      amount: state.internalPaymentData!.cart.total,
+      status: 'A',
+      reference: state.merchantData?.reference!,
+      is_oneclick: true,
+      items: state.internalPaymentData!.cart.items,
+    };
+
+    return await this.tonderClient
+      .getService()
+      .checkout.createOrder(orderItems);
+  }
+
+  private async createPayment(
+    orderId: string
+  ): Promise<ICreatePaymentResponse> {
+    const state = this.getState();
+    const now = new Date();
+    const dateString = now.toISOString();
+
+    const request = {
+      business_pk: state.merchantData?.business.pk!,
+      client_id: state.customerData?.id!,
+      amount: state.internalPaymentData!.cart.total,
+      date: dateString,
+      order_id: orderId,
+    };
+    return await this.tonderClient.getService().checkout.createPayment(request);
+  }
+
+  private async startCheckoutRouter(
+    orderId: string,
+    paymentPK: string,
+    paymentMethod?: string,
+    card?: ICardPaymentFields
+  ): Promise<ICheckoutResponse> {
+    const state = this.getState();
+    const { openpay_keys, business } = state.merchantData;
+    let deviceSessionIdTonder: string = '';
+    if (openpay_keys.merchant_id && openpay_keys.public_key) {
+      deviceSessionIdTonder = await this.tonderClient
+        .getService()
+        .openPay.getDeviceSessionId(
+          openpay_keys.merchant_id,
+          openpay_keys.public_key,
+          true
+        );
+    }
+
+    const routerItems = {
+      name: state.internalPaymentData?.customer?.firstName || '',
+      last_name: state.internalPaymentData?.customer?.lastName || '',
+      email_client: state.internalPaymentData?.customer?.email || '',
+      phone_number: state.internalPaymentData?.customer?.phone || '',
+      return_url: this.tonderClient.getConfig().returnURL,
+      id_product: 'no_id',
+      quantity_product: 1,
+      id_ship: '0',
+      instance_id_ship: '0',
+      amount: state.internalPaymentData!.cart.total,
+      title_ship: 'shipping',
+      description: 'transaction',
+      device_session_id: deviceSessionIdTonder,
+      token_id: '',
+      order_id: orderId,
+      business_id: business.pk as string,
+      payment_id: paymentPK,
+      source: 'rn-sdk',
+      metadata: state.internalPaymentData!.metadata,
+      browser_info: getAppInfo(),
+      currency: state.internalPaymentData!.currency,
+      ...(paymentMethod ? { payment_method: paymentMethod! } : { card: card! }),
+    } as IStartCheckoutRequest;
+    return await this.tonderClient
+      .getService()
+      .checkout.startCheckoutRouter(routerItems);
+  }
+
+  private handle3DSFlow(response: ICheckoutResponse) {
+    return new Promise<ITransaction>((resolve, reject) => {
+      this.#process3ds.handle3DS(response, async (finalResponse) => {
+        try {
+          await this.setState({ isProcessing: false });
+
+          if (finalResponse instanceof TonderError) {
+            reject(
+              new TonderError({
+                code: ErrorKeyEnum.PAYMENT_PROCESS_ERROR,
+                details: finalResponse?.details || finalResponse,
+              })
+            );
+            return;
+          }
+
+          await executeCallback({
+            callbacks: this.getState().callbacks,
+            callback: 'onFinishPayment',
+            data: { response: finalResponse },
+          });
+          resolve(finalResponse);
+        } catch (error) {
+          reject(error);
+        }
+      });
+    });
+  }
+
+  public async handlePaymentError(error: any): Promise<TonderError> {
+    let err;
+    let message = MESSAGES_ES.PAYMENT_PROCESS_ERROR;
+    if ((error?.message || '').includes('Incomplete inputs')) {
+      err = new TonderError({
+        code: ErrorKeyEnum.INVALID_CARD_DATA,
+        details: error,
+      });
+      message = MESSAGES_ES.INVALID_CARD_DATA;
+    } else {
+      err =
+        error instanceof TonderError
+          ? error
+          : new TonderError({
+              code: ErrorKeyEnum.PAYMENT_PROCESS_ERROR,
+              details: error,
+            });
+    }
+
+    await this.setState({
+      error: error as TonderError,
+      isProcessing: false,
+      message: message,
+    });
+
+    await executeCallback({
+      callbacks: this.getState().callbacks,
+      callback: 'onFinishPayment',
+      data: { error: err },
+    });
+
+    return err;
+  }
+
+  private async resumeCheckout(checkoutId: string) {
+    return await this.tonderClient.getService().checkout.startCheckoutRouter({
+      checkout_id: checkoutId,
+    });
+  }
+
+  private async getUIData(data: {
+    cards?: boolean;
+    paymentMethods?: boolean;
+  }): Promise<void> {
+    const { cards = true, paymentMethods = true } = data;
+
+    const tasks: Promise<any>[] = [];
+
+    if (cards && this.getState().customization?.saveCards?.showSaved) {
+      tasks.push(this.getCards());
+    }
+
+    if (paymentMethods && this.getState().customization?.paymentMethods?.show) {
+      tasks.push(this.getPaymentMethods());
+    }
+
+    await Promise.allSettled(tasks);
+  }
+
+  private async getCards() {
+    try {
+      const { customerToken, secureToken, businessId } = this.getDataForCards();
+
+      const response = await this.tonderClient
+        .getService()
+        .card.fetchCustomerCards(customerToken, secureToken, businessId);
+
+      await this.tonderClient.updateUIState({
+        ...(response ? { cards: response.cards || [] } : {}),
+      });
+      return response.cards;
+    } catch (e) {
+      console.warn('[BaseCheckout | getCards | ERROR]', e);
+      return [];
+    }
+  }
+
+  private async getPaymentMethods() {
+    try {
+      const response = await this.tonderClient
+        .getService()
+        .paymentMethod.fetchPaymentMethods();
+
+      const pym = defaultTo(get(response, 'results'), [])
+        .filter((pmItem) => pmItem.category.toLowerCase() !== 'cards')
+        .map((pmItem) => {
+          return {
+            id: pmItem.pk,
+            payment_method: pmItem.payment_method,
+            priority: pmItem.priority,
+            category: pmItem.category,
+            ...getPaymentMethodDetails(pmItem.payment_method),
+          };
+        })
+        .sort((a, b) => a.priority - b.priority);
+
+      await this.tonderClient.updateUIState({
+        ...(pym ? { paymentMethods: pym } : {}),
+      });
+      return pym;
+    } catch (e) {
+      console.warn('[BaseCheckout | getPaymentMethods | ERROR]', e);
+      return [];
+    }
+  }
+
+  private getDataForCards() {
+    const secureToken = this.tonderClient.getSecureToken();
+    const businessId = this.tonderClient.getBusinessPK();
+    const customerToken = this.tonderClient.getCustomerAuthToken();
+
+    return { secureToken, businessId, customerToken };
+  }
+}
+
+export default BaseCheckout;

package/src/core/BaseEnrollment/index.ts

@@ -0,0 +1,99 @@
+import TonderError from '@shared/utils/errors';
+import { MESSAGES_ES } from '@shared/constants';
+import type {
+  ISaveCardResponse,
+  SDKOptions,
+  IEnrollmentCustomizationOptions,
+} from '@types';
+import { SDKType } from '@types';
+import { ErrorKeyEnum } from '@shared/enum';
+import BaseSDK from '@core/BaseSDK';
+import type Tonder from '@core/Tonder';
+import React from 'react';
+
+class BaseEnrollment extends BaseSDK {
+  #defaultCustomization: IEnrollmentCustomizationOptions = {
+    saveButton: {
+      show: true,
+      text: 'Guardar',
+    },
+    showMessages: true,
+  };
+  constructor(
+    tonderClient: Tonder,
+    getState: () => Readonly<any>,
+    setState: (newState: Partial<any>) => void,
+    setSkyflowConfig: React.Dispatch<React.SetStateAction<any>>
+  ) {
+    super(tonderClient, getState, setState, setSkyflowConfig);
+  }
+
+  public create = async (
+    data: SDKOptions<SDKType.ENROLLMENT>
+  ): Promise<{ error?: TonderError }> => {
+    try {
+      await this.setState({
+        ...data,
+        isCreated: false,
+        isCreating: true,
+        customization: {
+          ...this.#defaultCustomization,
+          ...(data.customization || {}),
+          saveButton: {
+            ...this.#defaultCustomization.saveButton,
+            ...(data.customization?.saveButton || {}),
+          },
+        },
+        ...(data.customer ? { customer: data.customer } : {}),
+        ...(data.secureToken ? { secureToken: data.secureToken } : {}),
+      });
+
+      await this.getInitialData();
+
+      await this.initializeProviders({ mercadoPago: false });
+
+      await this.setState({
+        isCreated: true,
+        isCreating: false,
+      });
+
+      return {};
+    } catch (error) {
+      const err =
+        error instanceof TonderError
+          ? error
+          : new TonderError({
+              code: ErrorKeyEnum.CREATE_ERROR,
+              details: error,
+            });
+
+      await this.setState({
+        error: error as TonderError,
+        message: MESSAGES_ES[ErrorKeyEnum.ERROR_LOAD_ENROLLMENT_FORM],
+      });
+
+      return { error: err };
+    }
+  };
+
+  public saveCard = async (cardId?: string): Promise<ISaveCardResponse> => {
+    if (cardId) {
+      const secureToken = this.tonderClient.getSecureToken();
+      const businessId = this.tonderClient.getBusinessPK();
+      const customerToken = this.tonderClient.getCustomerAuthToken();
+      const response = await this.tonderClient
+        .getService()
+        .card.saveCustomerCard(customerToken, secureToken, businessId, {
+          skyflow_id: cardId!,
+        });
+      await this.setState({
+        message: MESSAGES_ES.CARD_SAVED_SUCCESSFULLY,
+      });
+
+      return response;
+    }
+    throw new TonderError({ code: ErrorKeyEnum.INVALID_CARD_DATA });
+  };
+}
+
+export default BaseEnrollment;

package/src/core/BaseSDK/index.ts

@@ -0,0 +1,93 @@
+import type Tonder from '@core/Tonder';
+import type { ICustomer, ICustomerResponse } from '@types';
+import TonderError from '@shared/utils/errors';
+import { ErrorKeyEnum } from '@shared/enum';
+import React from 'react';
+
+class BaseSDK {
+  tonderClient: Tonder;
+  getState: () => Readonly<any>;
+  setState: (newState: Partial<any>) => void;
+  private readonly setSkyflowConfig: React.Dispatch<React.SetStateAction<any>>;
+
+  constructor(
+    tonderClient: Tonder,
+    getState: () => Readonly<any>,
+    setState: (newState: Partial<any>) => void,
+    setSkyflowConfig: React.Dispatch<React.SetStateAction<any>>
+  ) {
+    this.tonderClient = tonderClient;
+    this.setSkyflowConfig = setSkyflowConfig;
+    this.getState = getState;
+    this.setState = setState;
+  }
+
+  public async getInitialData(): Promise<void> {
+    const merchantData = await this.tonderClient
+      .getService()
+      .business.fetchBusiness();
+
+    await this.setState({ merchantData });
+
+    // Init customer, if it's exist in state
+    try {
+      await this.getOrRegisterCustomer(
+        this.getState().paymentData?.customer || this.getState().customer
+      );
+    } catch (e) {}
+  }
+
+  protected async getOrRegisterCustomer(
+    customer?: ICustomer
+  ): Promise<ICustomerResponse | null> {
+    try {
+      const customerInput = customer;
+      if (customerInput && Object.keys(customerInput).length > 0) {
+        const customerData = await this.tonderClient
+          .getService()
+          .customer.registerOrFetchCustomer(customerInput as ICustomer);
+        await this.setState({ customerData });
+        return customerData;
+      }
+      console.log('Customer data was not provided, skipping get/register.');
+      return null;
+    } catch (error) {
+      if (error instanceof TonderError) {
+        throw error;
+      }
+      throw new TonderError({ code: ErrorKeyEnum.STATE_ERROR, details: error });
+    }
+  }
+
+  public async initializeProviders(providers?: {
+    mercadoPago?: boolean;
+  }): Promise<void> {
+    if (providers?.mercadoPago) {
+      this.initMercadoPago();
+    }
+    await this.initSkyflow();
+  }
+
+  private initMercadoPago() {
+    const merchantData = this.getState().merchantData;
+    // Init mercado pago, if it's active
+    if (!!merchantData?.mercado_pago && !!merchantData?.mercado_pago?.active) {
+      this.tonderClient.getService().mercadoPago.injectMercadoPagoSecurity();
+    }
+  }
+
+  private async initSkyflow() {
+    const merchantData = this.getState().merchantData;
+    if (merchantData?.vault_id && merchantData?.vault_url) {
+      const skyflowConfig = await this.tonderClient
+        .getService()
+        .skyflow.createSkyflowConfig(merchantData);
+
+      this.setSkyflowConfig(skyflowConfig);
+
+      await this.setState({ skyflowConfig });
+    }
+  }
+}
+
+export default BaseSDK;

package/src/core/EnrollmentContainer/index.ts

@@ -0,0 +1,105 @@
+import type {
+  IBaseResponse,
+  IEnrollment,
+  ISaveCardResponse,
+  SDKOptions,
+} from '@types';
+import TonderError from '@shared/utils/errors';
+import { ErrorKeyEnum } from '@shared/enum';
+import { MESSAGES_ES } from '@shared/constants';
+import React from 'react';
+import { executeCallback } from '@shared/utils/common';
+import BaseEnrollment from '@core/BaseEnrollment';
+import { SDKType } from '@types';
+import Tonder from '@core/Tonder';
+
+export class EnrollmentContainer implements IEnrollment {
+  #tonderClient: Tonder;
+  #baseSDK: BaseEnrollment;
+
+  constructor(
+    tonderClient: Tonder,
+    setSkyflowConfig: React.Dispatch<React.SetStateAction<any>>
+  ) {
+    this.#tonderClient = tonderClient;
+    this.#baseSDK = new BaseEnrollment(
+      tonderClient,
+      tonderClient.getState,
+      tonderClient.setState,
+      setSkyflowConfig
+    );
+  }
+
+  public create = async (
+    data: SDKOptions<SDKType.ENROLLMENT>
+  ): Promise<{ error?: TonderError }> => {
+    return await this.#baseSDK.create(data);
+  };
+  public async saveCustomerCard(): Promise<IBaseResponse<ISaveCardResponse>> {
+    const currentCallbacks = this.#baseSDK.getState().callbacks;
+    try {
+      await this.#baseSDK.setState({
+        isProcessing: true,
+      });
+      await executeCallback({
+        callbacks: currentCallbacks,
+        callback: 'beforeSave',
+        throwError: true,
+      });
+
+      const cardFields = await this.#baseSDK
+        .getState()
+        .skyflowContainer.collect();
+      const card_data = cardFields?.records[0]?.fields;
+      const response = await this.#baseSDK.saveCard(card_data.skyflow_id);
+
+      await this.#baseSDK.setState({
+        isProcessing: false,
+      });
+      await executeCallback({
+        callbacks: currentCallbacks,
+        callback: 'onFinishSave',
+        data: { response },
+      });
+      return { response };
+    } catch (error) {
+      let err;
+      let message = MESSAGES_ES.SAVE_CARD_PROCESS_ERROR;
+      if (
+        (error && 'message' in error ? error?.message : '').includes(
+          'Incomplete inputs'
+        )
+      ) {
+        err = new TonderError({
+          code: ErrorKeyEnum.INVALID_CARD_DATA,
+          details: error,
+        });
+        message = MESSAGES_ES.INVALID_CARD_DATA;
+      } else {
+        err =
+          error instanceof TonderError
+            ? error
+            : new TonderError({
+                code: ErrorKeyEnum.SAVE_CARD_PROCESS_ERROR,
+                details: error,
+              });
+      }
+      await this.#baseSDK.setState({
+        error: error as TonderError,
+        isProcessing: false,
+        message: message,
+      });
+
+      await executeCallback({
+        callbacks: currentCallbacks,
+        callback: 'onFinishSave',
+        data: { error: err },
+      });
+      return { error: err };
+    }
+  }
+
+  reset = (): void => {
+    this.#tonderClient.reset();
+  };
+}