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

package/src/types/liteCheckout.ts

@@ -0,0 +1,108 @@
+import type {
+  ICustomerCardsResponse,
+  IPaymentMethod,
+  IProcessPaymentRequest,
+  ISaveCardResponse,
+  ISaveCardsOptionsBase,
+  IBaseCreateOptions,
+  IBaseCheckoutState,
+  ITransaction,
+  IBaseCallback,
+  IInlineCallbacks,
+  IBaseResponse,
+} from '@types';
+import { SDKType } from '@types';
+import TonderError from '@shared/utils/errors';
+
+export interface ILiteCheckoutOptions extends IBaseCreateOptions {
+  paymentData: IProcessPaymentRequest;
+  tdsIframeId?: string;
+  customization?: ILiteCustomizationOptions;
+  callbacks?: ILiteCallbacks;
+  returnURL?: string;
+}
+export interface ILiteCallbacks extends IBaseCallback {}
+
+export interface ILiteCheckoutState extends IBaseCheckoutState<SDKType.LITE> {
+  deviceSessionIds?: {
+    openPay: string;
+    mercadoPago: string;
+  };
+  customization?: {
+    saveCards?: ISaveCardsOptionsBase;
+  };
+  callbacks?: IInlineCallbacks;
+}
+
+export interface ILiteCustomizationOptions {
+  saveCards?: ISaveCardsOptionsBase;
+}
+
+export interface IPaymentLiteContainer {
+  /**
+   * Creates an SDK instance and initializes necessary configurations.
+   * @param {ILiteCheckoutOptions} data - Configuration and initialization data for the SDK.
+   * @returns {Promise<{ error?: TonderError }>} A promise that resolves to an object containing
+   * an error if one occurred during initialization.
+   *
+   * @public
+   */
+  create(data: ILiteCheckoutOptions): Promise<{ error?: TonderError }>;
+
+  /**
+   * Processes a payment.
+   * @param {IProcessPaymentRequest} data - (Optional) Payment data including customer, cart, and other relevant information (Useful in case you need to update payment information).
+   * @returns {Promise<IBaseResponse<ITransaction>>} A promise that resolves with the payment response or 3DS redirect or is rejected with an error.
+   *
+   * @public
+   */
+  payment(data?: IProcessPaymentRequest): Promise<IBaseResponse<ITransaction>>;
+
+  /**
+   * Retrieves the list of cards associated with a customer.
+   * @returns {Promise<IBaseResponse<ICustomerCardsResponse>>} A promise that resolves with the customer's card data.
+   *
+   * @public
+   */
+  getCustomerCards(): Promise<IBaseResponse<ICustomerCardsResponse>>;
+
+  /**
+   * Saves a card to a customer's account. This method can be used to add a new card
+   * or update an existing one.
+   * @returns {Promise<IBaseResponse<ISaveCardResponse>>} A promise that resolves with the saved card data.
+   *
+   * @public
+   */
+  saveCustomerCard(): Promise<IBaseResponse<ISaveCardResponse>>;
+
+  /**
+   * Removes a card from a customer's account.
+   * @param {string} id - The unique identifier of the card to be deleted.
+   * @returns {Promise<IBaseResponse<string>>} A promise that resolves when the card is successfully deleted.
+   *
+   * @public
+   */
+  removeCustomerCard(id: string): Promise<IBaseResponse<string>>;
+
+  /**
+   * Retrieves the list of available Alternative Payment Methods (APMs).
+   * @returns {Promise<IBaseResponse<IPaymentMethod[]>>} A promise that resolves with the list of APMs.
+   *
+   * @public
+   */
+  getPaymentMethods(): Promise<IBaseResponse<IPaymentMethod[]>>;
+
+  /**
+   * Resets the SDK state, clearing all subscribers and event listeners.
+   * This method is used to reinitialize the SDK with the current configuration.
+   *
+   * @remarks
+   * This method should be called when you need to completely reset the SDK state.
+   * For example, if a user logs out or the configuration needs to be refreshed.
+   *
+   * @returns {void} Does not return a value.
+   *
+   * @public
+   */
+  reset(): void;
+}

package/src/types/openpay-react-native.d.ts

@@ -0,0 +1,3 @@
+declare module 'openpay-react-native' {
+  export const Openpay: React.FC<any>;
+}

package/src/types/openpay.ts

@@ -0,0 +1,8 @@
+export interface IOpenPay {
+  setId: (merchantId: string) => void;
+  setApiKey: (apiKey: string) => void;
+  setSandboxMode: (isSandbox: boolean) => void;
+  deviceData: {
+    setup: (options?: { signal?: AbortSignal }) => Promise<string>;
+  };
+}

package/src/types/payment.ts

@@ -0,0 +1,66 @@
+import type { ICustomer } from './customer';
+
+export interface IPaymentMethod {
+  id: string;
+  payment_method: string;
+  priority: number;
+  category: string;
+  icon: string;
+  label: string;
+}
+
+export interface IPaymentMethodResponse {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: ITonderPaymentMethod[];
+}
+
+export interface ITonderPaymentMethod {
+  pk: string;
+  payment_method: string;
+  priority: number;
+  category: string;
+  unavailable_countries: string[];
+  status: string;
+}
+
+export interface ICardPaymentFields {
+  card_number?: string;
+  expiration_month?: string;
+  expiration_year?: string;
+  skyflow_id: string;
+  card_scheme?: string;
+  cardholder_name?: string;
+}
+
+export interface IBaseProcessPaymentRequest {
+  customer: ICustomer;
+  cart: {
+    total: number;
+    items: IItem[];
+  };
+  metadata?: Record<string, any>;
+  currency?: string;
+}
+
+export interface IProcessPaymentRequest extends IBaseProcessPaymentRequest {
+  card?: string;
+  payment_method?: string;
+}
+
+export interface IInternalProcessPaymentRequest
+  extends IBaseProcessPaymentRequest {
+  card?: ICardPaymentFields;
+  payment_method?: string;
+}
+export interface IItem {
+  description: string;
+  quantity: number;
+  price_unit: number;
+  discount: number;
+  taxes: number;
+  product_reference: string | number;
+  name: string;
+  amount_total: number;
+}

package/src/types/secure.ts

@@ -0,0 +1,3 @@
+export type IGetSecureTokenResponse = {
+  access: string;
+};

package/src/types/skyflow-react-native.d.ts

@@ -0,0 +1,81 @@
+declare module 'skyflow-react-native' {
+  import type { StylesBaseVariant } from '@tonder.io/rn-sdk';
+  export type IConfig = {
+    vaultID: string;
+    vaultURL: string;
+    getBearerToken: () => Promise<string>;
+    options?: Record<string, any>;
+  };
+
+  export enum LogLevel {
+    WARN = 'WARN',
+    INFO = 'INFO',
+    DEBUG = 'DEBUG',
+    ERROR = 'ERROR',
+  }
+
+  export enum Env {
+    DEV = 'DEV',
+    PROD = 'PROD',
+  }
+
+  export const CardNumberElement: any;
+  export const CardHolderNameElement: any;
+  export const ExpirationMonthElement: any;
+  export const ExpirationYearElement: any;
+
+  export const CvvElement: any;
+
+  export interface ISkyflowProvider {
+    config: IConfig;
+  }
+  export const SkyflowProvider: React.FC<{ children: React.ReactNode }>;
+  export const useCollectContainer: () => any;
+  // export const useComposableContainer: () => any;
+
+  export const useSkyflow: () => any;
+
+  export interface IInsertRecord {
+    table: string;
+    fields: Record<string, any>;
+  }
+  export interface IInsertRecordInput {
+    records: IInsertRecord[];
+  }
+
+  export interface IUpsertInput {
+    table: string;
+    column: string;
+  }
+
+  export interface ICollectOptions {
+    tokens?: boolean;
+    additionalFields?: IInsertRecordInput;
+    upsert?: IUpsertInput[];
+  }
+  export interface CollectContainer {
+    collect(options?: ICollectOptions): Promise<unknown>;
+  }
+
+  export enum ValidationRuleType {
+    REGEX_MATCH_RULE = 'REGEX_MATCH_RULE',
+    LENGTH_MATCH_RULE = 'LENGTH_MATCH_RULE',
+  }
+  export interface StylesFocusVariant {
+    focus?: Record<string, any>;
+  }
+  export interface CollectInputStylesVariant
+    extends StylesBaseVariant,
+      StylesFocusVariant {
+    complete?: Record<string, any>;
+    invalid?: Record<string, any>;
+    empty?: Record<string, any>;
+    container?: Record<string, any>;
+  }
+
+  export interface CollectLabelStylesVariant
+    extends StylesBaseVariant,
+      StylesFocusVariant {
+    requiredAsterisk?: Record<string, any>;
+  }
+}

package/src/types/threeDSHandler.ts

@@ -0,0 +1,10 @@
+import type { ICheckoutResponse, ITransaction } from '@tonder.io/rn-sdk';
+import type TonderError from '@shared/utils/errors';
+
+export interface IThreeDSHandler {
+  verifyTransaction(): Promise<ITransaction>;
+  handle3DS(
+    payload: ICheckoutResponse,
+    onFinish: (response: ITransaction | TonderError) => Promise<void>
+  ): void;
+}

package/src/types/transaction.ts

@@ -0,0 +1,106 @@
+export interface ITransaction {
+  id: number;
+  provider: string;
+  country: string;
+  currency_code: string;
+  transaction_status: string;
+  created: string;
+  modified: string;
+  operation_date: string;
+  transaction_reference: string;
+  transaction_type: string;
+  status: string;
+  amount: string;
+  related_transaction_reference?: string | null;
+  reason?: string | null;
+  is_refunded?: boolean | null;
+  is_disputed?: boolean | null;
+  number_of_payment_attempts: number;
+  card_brand?: string | null;
+  number_of_installments: number;
+  payment?: ITransactionPayment;
+  checkout: ITransactionCheckout;
+  currency: ITransactionCurrency;
+  payment_method?: ITransactionPaymentMethod | null;
+  issuing_country?: string | null;
+  decline?: {
+    error_type?: string;
+  };
+}
+
+interface ITransactionPayment {
+  id: number;
+  created: string;
+  modified: string;
+  amount: string;
+  status: string;
+  date: string;
+  paid_date: string | null;
+  source: string | null;
+  customer_order_reference: string | null;
+  client: number;
+  business: number;
+  shipping_address?: string | null;
+  billing_address?: string | null;
+  order: number;
+}
+
+interface ITransactionCheckout {
+  id: string;
+  created: string;
+  modified: string;
+  checkout_data: ITransactionCheckoutData;
+  number_of_payment_attempts: number;
+  tried_psps: string[];
+  rejected_transactions: string[];
+  routing_step: number;
+  route_length: number;
+  last_status: string;
+  ip_address: string;
+  is_dynamic_routing: boolean;
+  is_route_finished: boolean;
+  business: number;
+  payment: number;
+}
+
+interface ITransactionCheckoutData {
+  name: string;
+  amount: number;
+  source: string;
+  id_ship: string;
+  currency: string;
+  order_id: number;
+  token_id: string;
+  last_name: string;
+  id_product: string;
+  ip_address: string;
+  payment_id: number;
+  return_url: string;
+  title_ship: string;
+  business_id: number;
+  checkout_id: string;
+  description: string;
+  browser_info: any;
+  email_client: string;
+  phone_number: string;
+  instance_id_ship: string;
+  quantity_product: number;
+  device_session_id: string | null;
+  number_of_payment_attempts: number;
+}
+
+interface ITransactionCurrency {
+  id: number;
+  name: string;
+  code: string;
+  symbol: string;
+  country: string | null;
+}
+
+interface ITransactionPaymentMethod {
+  id: number;
+  name: string;
+  display_name: string;
+  category: string;
+  is_apm: boolean;
+}

package/src/ui/components/Button/ProcessButton.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+import type { StylesBaseVariant } from '@types';
+import { buildBaseStyleText } from '@shared/utils/styleUtils';
+
+interface PayButtonProps {
+  text: string;
+  onPress?: () => Promise<void>;
+  isLoading?: boolean;
+  style?: StylesBaseVariant;
+}
+
+export const ProcessButton: React.FC<PayButtonProps> = ({
+  text,
+  onPress,
+  isLoading,
+  style,
+}) => (
+  <TouchableOpacity
+    style={{ ...styles.payButton, ...(style?.base || {}) }}
+    onPress={onPress}
+    disabled={isLoading}
+  >
+    {isLoading ? (
+      <ActivityIndicator color="#fff" size="small" />
+    ) : (
+      <Text
+        style={{
+          ...styles.payButtonText,
+          ...buildBaseStyleText(style),
+        }}
+      >
+        {text}
+      </Text>
+    )}
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+  payButton: {
+    backgroundColor: '#000',
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    margin: 20,
+  },
+  payButtonText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});

package/src/ui/components/CardForm/index.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type {
+  IElementStyle,
+  IFormLabels,
+  IFormPlaceholder,
+  StylesBaseVariant,
+} from '@types';
+import { CardHolderInput } from '@components/Input/CardHolderInput';
+import { CardNumberInput } from '@components/Input/CardNumberInput';
+import { CardCVVInput } from '@components/Input/CardCVVInput';
+import { CheckBox } from '@components/Checkbox/Checkbox';
+import { CardExpirationDateInput } from '@components/Input/CardExpirationDateInput';
+
+interface NewCardFormProps {
+  showSaveOption?: boolean;
+  saveCard: boolean;
+  onSaveCardChange: (save: boolean) => void;
+  labels?: IFormLabels;
+  placeholders?: IFormPlaceholder;
+  style?: StylesBaseVariant & IElementStyle;
+}
+
+export const NewCardForm: React.FC<NewCardFormProps> = ({
+  showSaveOption,
+  saveCard,
+  onSaveCardChange,
+  style,
+  labels,
+  placeholders,
+}) => {
+  return (
+    <View style={{ ...styles.container, ...(style?.base || {}) }}>
+      <CardHolderInput
+        style={style}
+        label={labels?.name}
+        placeholder={placeholders?.name}
+      />
+      <CardNumberInput
+        style={style}
+        label={labels?.cardNumber}
+        placeholder={placeholders?.cardNumber}
+      />
+      <View style={styles.expirationRow}>
+        <CardExpirationDateInput
+          style={style}
+          label={labels?.expiryDate}
+          yearPlaceholder={placeholders?.expiryYear}
+          monthPlaceholder={placeholders?.expiryMonth}
+        />
+        <CardCVVInput
+          style={style}
+          label={labels?.cvv}
+          placeholder={placeholders?.cvv}
+        />
+      </View>
+
+      {showSaveOption && (
+        <CheckBox
+          checked={saveCard}
+          onValueChange={onSaveCardChange}
+          label="Guardar tarjeta para futuros pagos"
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    paddingVertical: 10,
+  },
+  expirationRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  groupContainer: {
+    flex: 2,
+    marginVertical: 5,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  inputContainerCustom: {
+    flex: 1,
+  },
+});

package/src/ui/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
+
+interface CheckBoxProps {
+  checked: boolean;
+  onValueChange: (value: boolean) => void;
+  label: string;
+}
+
+export const CheckBox: React.FC<CheckBoxProps> = ({
+  checked,
+  onValueChange,
+  label,
+}) => (
+  <TouchableOpacity
+    style={styles.checkboxContainer}
+    onPress={() => onValueChange(!checked)}
+  >
+    <View style={[styles.checkbox, checked && styles.checkboxChecked]}>
+      {checked && <Text style={styles.checkmark}>✓</Text>}
+    </View>
+    <Text style={styles.checkboxLabel}>{label}</Text>
+  </TouchableOpacity>
+);
+const styles = StyleSheet.create({
+  checkboxContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 10,
+    marginBottom: 20,
+    paddingHorizontal: 0,
+  },
+  checkbox: {
+    width: 16,
+    height: 16,
+    borderWidth: 1,
+    borderColor: '#bababa',
+    borderRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkboxChecked: {
+    backgroundColor: '#3bc635',
+    borderColor: '#3bc635',
+  },
+  checkmark: {
+    color: '#fff',
+    fontSize: 10,
+  },
+  checkboxLabel: {
+    marginLeft: 14,
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#1D1D1D',
+  },
+});

package/src/ui/components/Input/CardCVVInput.tsx

@@ -0,0 +1,91 @@
+import { CvvElement } from 'skyflow-react-native';
+import React, { useState } from 'react';
+import type { InputProps } from '@types';
+import {
+  DEFAULT_SKYFLOW_lABELS,
+  DEFAULT_SKYFLOW_PLACEHOLDERS,
+  getErrorField,
+  regexMatchRule,
+} from '@shared/constants/skyflow';
+import { Text, View } from 'react-native';
+import { DEFAULT_INPUT_CONTAINER_STYLES } from '@ui/styles/payment';
+import {
+  DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+  SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+} from '@ui/styles/skyflow';
+import useTonderContext from '@ui/providers/TonderProvider/hook';
+
+export const CardCVVInput: React.FC<InputProps> = ({
+  placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.cvvPlaceholder,
+  label = DEFAULT_SKYFLOW_lABELS.cvvLabel,
+  style,
+}) => {
+  const [errorText, setErrorText] = useState('');
+  const { state } = useTonderContext();
+
+  return (
+    <>
+      {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
+        <View
+          style={{
+            ...(style?.inputStyles?.container
+              ? { ...style.inputStyles.container }
+              : DEFAULT_INPUT_CONTAINER_STYLES.base),
+          }}
+        >
+          <CvvElement
+            container={state.skyflowContainer}
+            table="cards"
+            column="cvv"
+            placeholder={placeholder}
+            label={label}
+            validations={[regexMatchRule]}
+            inputStyles={{
+              ...DEFAULT_SKYFLOW_INPUT_STYLES,
+              ...(style?.inputStyles
+                ? {
+                    ...style?.inputStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_INPUT_STYLES.base,
+                      ...style?.inputStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            errorTextStyles={{
+              ...SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+            }}
+            labelStyles={{
+              ...DEFAULT_SKYFLOW_lABEL_STYLES,
+              ...(style?.labelStyles
+                ? {
+                    ...style?.labelStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_lABEL_STYLES.base,
+                      ...style?.labelStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            onChange={() => {
+              setErrorText('');
+            }}
+            // onFocus={props.onFocus}
+            onBlur={(e) => {
+              setErrorText(getErrorField(e, label));
+            }}
+            // onReady={props.onReady}
+          />
+
+          {errorText && (
+            <Text style={{ ...DEFAULT_SKYFLOW_ERROR_TEXT_STYLES.base }}>
+              {errorText}
+            </Text>
+          )}
+        </View>
+      )}
+    </>
+  );
+};