React Native

Referencia del SDK de React Native de Tonder (paquete @tonder.io/rn-sdk). El SDK usa un Provider, hooks y componentes para gestionar el estado y renderizar la UI. Requiere RN 0.70+ y React 16.8+.

TonderProvider

Componente envolvente que inicializa el SDK y provee su contexto. Debe colocarse en la raíz de tu flujo de checkout.

Parámetro	Tipo	Descripción
`config`	Object	Objeto de configuración del SDK.
`config.type`	SDKType	Tipo de SDK: `SDKType.INLINE` (Full), `SDKType.LITE` (Lite) o `SDKType.ENROLLMENT` (guardado de tarjetas).
`config.mode`	String	Modo: `'development'`, `'production'` o `'sandbox'`.
`config.apiKey`	String	Tu llave pública de Tonder.
`config.returnURL`	String	URL opcional para completar la redirección 3DS.

import { TonderProvider, SDKType, Environment } from '@tonder.io/rn-sdk';

function App() {
  return (
    <TonderProvider
      config={{
        type: SDKType.INLINE,
        mode: Environment.stage,
        apiKey: 'your-api-key',
      }}
    >
      <YourApp />
    </TonderProvider>
  );
}

TonderPayment

Renderiza la UI de pago completa y prediseñada. Se usa cuando SDKType es INLINE (Full). No recibe props.

import { TonderPayment } from '@tonder.io/rn-sdk';

export default function FullPaymentScreen() {
  return (
    <SafeAreaView>
      <TonderPayment />
    </SafeAreaView>
  );
}

TonderPayment incluye su propio botón de pago. Si prefieres usar el tuyo, el modo INLINE también expone payment() a través del hook:

const { create, payment } = useTonder<SDKType.INLINE>();

const handlePayment = async () => {
  const { response, error } = await payment();
  if (error) {
    console.error('Error payment: ', error);
    return;
  }
  console.log('Response payment: ', response);
};

Para construir tu propia UI, configura SDKType.LITE en el TonderProvider y usa el hook useTonder para acceder a los métodos de pago y gestión de tarjetas, junto con los componentes de entrada seguros del SDK.

Componentes de entrada seguros

Para integraciones SDKType.LITE, el SDK provee componentes individuales y seguros para construir tu propia UI. Cada uno acepta props de estilo.

Componente	Descripción
`CardHolderInput`	Entrada segura para el nombre del titular de la tarjeta.
`CardNumberInput`	Entrada segura para el número de tarjeta.
`CardCVVInput`	Entrada segura para el CVV/CVC.
`CardExpirationDateInput`	Entrada segura para la fecha de expiración completa.
`CardExpirationMonthInput`	Entrada segura para el mes de expiración.
`CardExpirationYearInput`	Entrada segura para el año de expiración.

import {
  CardHolderInput,
  CardNumberInput,
  CardExpirationMonthInput,
  CardExpirationYearInput,
  CardCVVInput
} from '@tonder.io/rn-sdk';

<CardHolderInput style={customStyles.input} />
<CardNumberInput style={customStyles.input} />
<CardExpirationMonthInput style={customStyles.input} />
<CardExpirationYearInput style={customStyles.input} />
<CardCVVInput style={customStyles.input} />

CVV de una tarjeta guardada

Cuando el comprador paga con una tarjeta ya guardada y el emisor pide reingresar el CVV, pasa el cardId de esa tarjeta para que el campo actualice el CVV de esa tarjeta y no el de una nueva:

<CardCVVInput
  cardId="saved-card-skyflow-id"
  placeholder="Enter CVV"
/>

Tres restricciones:

Solo se muestra cuando hay una tarjeta seleccionada.
Solo puede haber un CardCVVInput con cardId a la vez.
Es mutuamente excluyente con el formulario completo de tarjeta nueva.

Hook `useTonder`

Hook de React que da acceso a los métodos del SDK. Se usa en los modos LITE y ENROLLMENT, y también en INLINE cuando quieres disparar el pago desde tu propio botón.

import { useTonder, SDKType } from '@tonder.io/rn-sdk';

// Para el modo LITE (formularios de pago personalizados)
const { create, payment, saveCustomerCard, getCustomerCards, ... } = useTonder<SDKType.LITE>();

// Para el modo ENROLLMENT (guardado de tarjetas)
const { create, saveCustomerCard, getCardSummary, reset } = useTonder<SDKType.ENROLLMENT>();

Métodos comunes (LITE y ENROLLMENT)

Método	Descripción
`create(config)`	Inicializa el SDK con la configuración. Debe llamarse antes de renderizar componentes o llamar a otros métodos.
`reset()`	Reinicia el estado del SDK a sus valores iniciales y libera recursos. Útil para reinicializar el flujo tras una transacción.

create(config) acepta:

Parámetro	Tipo	Descripción
`config.secureToken`	String	Secure token obtenido de tu backend (requerido para operaciones con tarjetas).
`config.paymentData`	Object	Información del pago (para el modo LITE).
`config.customer`	Object	Información del cliente (para el modo ENROLLMENT).
`config.callbacks`	Object	Funciones de callback opcionales (p. ej. `onFinishPayment`, `onFinishSave`).
`config.customization`	Object	Opciones de personalización de UI opcionales.
`config.events`	Object	Manejadores de eventos opcionales para los campos del formulario de tarjeta.

// Modo LITE
const { create } = useTonder<SDKType.LITE>();

const paymentData = {
  customer: { email: 'test@example.com', firstName: 'John', lastName: 'Doe' },
  cart: {
    total: 399,
    items: [{ name: 'Product', amount_total: 399, description: 'Description', price_unit: 399, quantity: 1 }]
  },
};

const initializePayment = async () => {
  const { error } = await create({
    secureToken: 'your-secure-token',
    paymentData,
    callbacks: { onFinishPayment: handlePaymentFinish }
  });
};

Métodos del modo LITE

Disponibles cuando type es SDKType.LITE, dan control total sobre el flujo de pago con componentes personalizados.

Método	Descripción
`payment()`	Procesa un pago usando los datos configurados y los valores de los componentes de entrada LITE.
`saveCustomerCard()`	Tokeniza y guarda la tarjeta actual a partir de los componentes de entrada LITE.
`getCustomerCards()`	Recupera la lista de tarjetas guardadas del cliente.
`getCardSummary(skyflowId)`	Recupera información detallada de una tarjeta guardada usando su Skyflow ID.
`removeCustomerCard(skyflowId)`	Elimina una tarjeta guardada.
`getPaymentMethods()`	Recupera los métodos de pago disponibles.

const { payment, saveCustomerCard, getCustomerCards, getCardSummary, removeCustomerCard, getPaymentMethods } = useTonder<SDKType.LITE>();

const { response, error } = await payment();

getCardSummary(skyflowId) devuelve:

interface ICardsSummaryResponse {
  user_id: number;
  card: ICardSkyflowFields;
}

interface ICardSkyflowFields {
  card_number: string;      // enmascarado
  expiration_month: string;
  expiration_year: string;
  skyflow_id: string;
  card_scheme: string;
  cardholder_name: string;
}

Enrollment (guardado de tarjetas)

Configura SDKType.ENROLLMENT en el TonderProvider para flujos de guardado de tarjetas. Puedes construir tu propia UI con los componentes de entrada seguros, o usar el componente prediseñado TonderEnrollment.

import { TonderProvider, SDKType, Environment } from '@tonder.io/rn-sdk';

<TonderProvider
  config={{
    type: SDKType.ENROLLMENT,
    mode: Environment.stage,
    apiKey: 'your-api-key',
  }}
>
  <YourApp />
</TonderProvider>

`TonderEnrollment` (prediseñado)

Componente con UI de enrolamiento lista para usar. No recibe props.

import { TonderEnrollment } from '@tonder.io/rn-sdk';

export default function EnrollmentScreen() {
  return (
    <SafeAreaView>
      <TonderEnrollment />
    </SafeAreaView>
  );
}

Métodos del modo ENROLLMENT

Método	Descripción
`saveCustomerCard()`	Tokeniza y guarda la tarjeta actual. Solo necesario si construyes un formulario de enrolamiento personalizado o un botón de guardado propio.
`getCardSummary(skyflowId)`	Recupera información detallada de una tarjeta guardada usando su Skyflow ID.

const { saveCustomerCard, getCardSummary } = useTonder<SDKType.ENROLLMENT>();

const { response, error } = await saveCustomerCard();

React Native

TonderProvider

TonderPayment

Lite (UI personalizada)

Componentes de entrada seguros

CVV de una tarjeta guardada

Hook `useTonder`

Métodos comunes (LITE y ENROLLMENT)

Métodos del modo LITE

Enrollment (guardado de tarjetas)

`TonderEnrollment` (prediseñado)

Métodos del modo ENROLLMENT

Siguientes pasos

SDK Móvil (guía)

Referencia SDK

En esta página