Skip to main content
This page provides a reference for the core methods and components available in the Tonder React Native Lite SDK when using LITE mode. The SDK provides individual secure components that allow you to build completely custom payment interfaces.

​
Core Components

The Tonder React Native Lite SDK provides these individual secure components for building custom payment interfaces.
A wrapper component that initializes the SDK and provides its context to children. This component must be placed at the root of your checkout flow.
ParameterTypeDescription
configObjectConfiguration object with SDK settings.
config.typeSDKTypeType of SDK: SDKType.LITE for Lite SDK or SDKType.ENROLLMENT for card enrollment.
config.modeStringOperating mode: 'development', 'production', or 'sandbox'.
config.apiKeyStringYour Tonder Public API key.
config.returnURLStringOptional URL for 3DS redirect completion.
Here’s an example of how to configure the TonderProvider:
import { TonderProvider, SDKType, Environment } from '@tonder.io/rn-sdk';

function App() {
  return (
    <TonderProvider
      config={{
        type: SDKType.LITE, // or SDKType.ENROLLMENT
        mode: Environment.stage,
        apiKey: 'your-api-key',
      }}
    >
      <YourApp />
    </TonderProvider>
  );
}
For SDKType.LITE integrations, the SDK provides individual, secure components to build a custom UI:
  • CardHolderInput - Secure input for cardholder name
  • CardNumberInput - Secure input for card number
  • CardCVVInput - Secure input for CVV/CVC
  • CardExpirationDateInput - Secure input for full expiration date
  • CardExpirationMonthInput - Secure input for expiration month
  • CardExpirationYearInput - Secure input for expiration year
Each component can accept style props to customize the appearance.
import {
  CardHolderInput,
  CardNumberInput,
  CardExpirationMonthInput,
  CardExpirationYearInput,
  CardCVVInput
} from '@tonder.io/rn-sdk';

// ... In your custom form
<CardHolderInput style={customStyles.input} />
<CardNumberInput style={customStyles.input} />
<CardExpirationMonthInput style={customStyles.input} />
<CardExpirationYearInput style={customStyles.input} />
<CardCVVInput style={customStyles.input} />
If you prefer a pre-built enrollment form instead of building a custom one, you can use the TonderEnrollment component when SDKType is ENROLLMENT.
ParameterTypeDescription
None-This component takes no props
 
import { TonderEnrollment } from '@tonder.io/rn-sdk';

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

​
Hook: useTonder

A React hook that provides access to the SDK’s methods for LITE and ENROLLMENT modes. 
import { useTonder, SDKType } from '@tonder.io/rn-sdk';

// For LITE mode (custom payment forms)
const { create, payment, saveCustomerCard, getCustomerCards, ... } = useTonder<SDKType.LITE>();

// For ENROLLMENT mode (card saving)
const { create, saveCustomerCard, getCardSummary, reset } = useTonder<SDKType.ENROLLMENT>();

​
Common Methods

These methods are shared by both LITE and ENROLLMENT modes.
Initializes the SDK with configuration. This must be called before rendering components or calling other methods.
ParameterTypeDescription
configObjectConfiguration object for the session.
config.secureTokenStringSecure token obtained from your backend (required for card operations).
config.paymentDataObjectPayment information (for LITE mode).
config.customerObjectCustomer information (for ENROLLMENT mode).
config.callbacksObjectOptional callback functions (e.g., onFinishPayment, onFinishSave).
config.customizationObjectOptional UI customization options.
config.eventsObjectOptional event handlers for card form input fields.
 
// For LITE mode
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
    }
  });
};

// For ENROLLMENT mode
const { create } = useTonder<SDKType.ENROLLMENT>();

const initializeEnrollment = async () => {
  const { error } = await create({
    secureToken: 'your-secure-token',
    customer: {
      email: 'customer@example.com',
      firstName: 'Jane',
      lastName: 'Doe'
    },
    callbacks: {
      onFinishSave: handleCardSaved
    }
  });
};
Resets the SDK state to its initial values and cleans up resources. This is useful for re-initializing the flow after a transaction.
const { reset } = useTonder<SDKType.LITE>();

const callbackFinish = async (response) => {
  console.log('Callback finish', response);
  // Reset the state and regenerate the SDK to use it again.
  reset();
  await initialize();
};

​
LITE SDK Methods

Used when type is SDKType.LITE, providing full control over the payment flow with custom components.
Processes a payment using the configured payment data and the values from the LITE input components.
const { payment } = useTonder<SDKType.LITE>();

const handlePayment = async () => {
  const { response, error } = await payment();
  if (error) {
    console.error('Payment error:', error);
    return;
  }
  console.log('Payment success:', response);
};
Tokenizes and saves the current card information from the LITE input components.
const { saveCustomerCard } = useTonder<SDKType.LITE>();

const handleSaveCard = async () => {
  const { response, error } = await saveCustomerCard();
  if (error) {
    console.error('Error saving card:', error);
    return;
  }
  console.log('Card saved:', response);
};
Retrieves the list of saved cards for the customer.
const { getCustomerCards } = useTonder<SDKType.LITE>();

const loadCards = async () => {
  const { response, error } = await getCustomerCards();
  if (error) {
    console.error('Error loading cards:', error);
    return;
  }
  console.log('Saved cards:', response);
};
Retrieves detailed information about a saved card using its Skyflow ID.
const { getCardSummary } = useTonder<SDKType.LITE>();

const getCardDetails = async (skyflowId: string) => {
  const { response, error } = await getCardSummary(skyflowId);
  if (error) {
    console.error('Error getting card summary:', error);
    return;
  }
  console.log('Card details:', response);
};
Deletes a saved card.
const { removeCustomerCard } = useTonder<SDKType.LITE>();

const deleteCard = async (skyflowId: string) => {
  const { response, error } = await removeCustomerCard(skyflowId);
  if (error) {
    console.error('Error removing card:', error);
    return;
  }
  console.log('Card removed successfully');
};
Retrieves available payment methods.
const { getPaymentMethods } = useTonder<SDKType.LITE>();

const loadPaymentMethods = async () => {
  const { response, error } = await getPaymentMethods();
  if (error) {
    console.error('Error loading payment methods:', error);
    return;
  }
  console.log('Available payment methods:', response);
};

​
ENROLLMENT SDK Methods

Used when type is SDKType.ENROLLMENT for card saving workflows.
Tokenizes and saves the current card information. Note: This is only necessary when building a custom enrollment form or using a custom save button.
const { saveCustomerCard } = useTonder<SDKType.ENROLLMENT>();

const handleSaveCard = async () => {
  const { response, error } = await saveCustomerCard();
  if (error) {
    console.error('Error saving card:', error);
    return;
  }
  console.log('Response save card:', response);
};
Retrieves detailed information about a saved card using its Skyflow ID.
const { getCardSummary } = useTonder<SDKType.ENROLLMENT>();

const handleGetCardSummary = async (skyflowId: string) => {
  const { response, error } = await getCardSummary(skyflowId);
  if (error) {
    console.error('Error getting card summary:', error);
    return;
  }
  console.log('Card summary:', response);
};

​
Next Steps

Now that you’re familiar with the available methods in the React Native Lite SDK, explore these guides to enhance your implementation: