React Native

Reference for Tonder's React Native SDK (@tonder.io/rn-sdk package). The SDK uses a Provider, hooks, and components to manage state and render the UI. Requires RN 0.70+ and React 16.8+.

TonderProvider

A wrapper component that initializes the SDK and provides its context. It must be placed at the root of your checkout flow.

Parameter	Type	Description
`config`	Object	SDK configuration object.
`config.type`	SDKType	SDK type: `SDKType.INLINE` (Full), `SDKType.LITE` (Lite), or `SDKType.ENROLLMENT` (card saving).
`config.mode`	String	Mode: `'development'`, `'production'`, or `'sandbox'`.
`config.apiKey`	String	Your Tonder public key.
`config.returnURL`	String	Optional URL to complete the 3DS redirect.

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

Renders the complete, pre-built payment UI. Used when SDKType is INLINE (Full). Takes no props.

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

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

TonderPayment ships with its own pay button. If you'd rather use your own, INLINE also exposes payment() through the 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);
};

Lite (custom UI)

To build your own UI, set SDKType.LITE in the TonderProvider and use the useTonder hook to access the payment and card-management methods, along with the SDK's secure input components.

Secure input components

For SDKType.LITE integrations, the SDK provides individual, secure components for building your own UI. Each one accepts style props.

Component	Description
`CardHolderInput`	Secure input for the cardholder name.
`CardNumberInput`	Secure input for the card number.
`CardCVVInput`	Secure input for the CVV/CVC.
`CardExpirationDateInput`	Secure input for the full expiration date.
`CardExpirationMonthInput`	Secure input for the expiration month.
`CardExpirationYearInput`	Secure input for the expiration year.

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 for a saved card

When the buyer pays with an already-saved card and the issuer asks for the CVV again, pass that card's cardId so the field updates that card's CVV rather than a new card's:

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

Three constraints:

It only renders when a card is selected.
Only one CardCVVInput with a cardId at a time.
It is mutually exclusive with the full new-card form.

`useTonder` hook

A React hook that provides access to the SDK's methods. Use it in LITE and ENROLLMENT modes, and in INLINE when you want to trigger the payment from your own button.

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 (LITE and ENROLLMENT)

Method	Description
`create(config)`	Initializes the SDK with configuration. Must be called before rendering components or calling other methods.
`reset()`	Resets the SDK state to its initial values and cleans up resources. Useful for re-initializing the flow after a transaction.

create(config) accepts:

Parameter	Type	Description
`config.secureToken`	String	Secure token obtained from your backend (required for card operations).
`config.paymentData`	Object	Payment information (for LITE mode).
`config.customer`	Object	Customer information (for ENROLLMENT mode).
`config.callbacks`	Object	Optional callback functions (e.g. `onFinishPayment`, `onFinishSave`).
`config.customization`	Object	Optional UI customization options.
`config.events`	Object	Optional event handlers for the card form input fields.

// 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 }
  });
};

LITE mode methods

Available when type is SDKType.LITE, giving full control over the payment flow with custom components.

Method	Description
`payment()`	Processes a payment using the configured payment data and the values from the LITE input components.
`saveCustomerCard()`	Tokenizes and saves the current card from the LITE input components.
`getCustomerCards()`	Retrieves the list of saved cards for the customer.
`getCardSummary(skyflowId)`	Retrieves detailed information about a saved card using its Skyflow ID.
`removeCustomerCard(skyflowId)`	Deletes a saved card.
`getPaymentMethods()`	Retrieves the available payment methods.

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

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

getCardSummary(skyflowId) returns:

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

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

Enrollment (card saving)

Set SDKType.ENROLLMENT in the TonderProvider for card-saving flows. You can build your own UI with the secure input components, or use the pre-built TonderEnrollment component.

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

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

`TonderEnrollment` (pre-built)

A component with a ready-to-use enrollment UI. Takes no props.

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

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

ENROLLMENT mode methods

Method	Description
`saveCustomerCard()`	Tokenizes and saves the current card. Only necessary when building a custom enrollment form or a custom save button.
`getCardSummary(skyflowId)`	Retrieves detailed information about a saved card using its Skyflow ID.

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

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