Skip to main content
This page provides a reference for the core methods and components available in the Tonder React Native Full SDK when using INLINE mode. The SDK uses a combination of a Provider, hooks, and components to manage state and render UI.

​
Core Components

The Tonder React Native Full SDK provides these essential components for building payment interfaces in INLINE mode.
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.INLINE for Full SDK.
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.INLINE,
        mode: Environment.stage,
        apiKey: 'your-api-key',
      }}
    >
      <YourApp />
    </TonderProvider>
  );
}
Renders the complete, pre-built payment UI. This component is used when SDKType is INLINE.
ParameterTypeDescription
None-This component takes no props
Here’s an example of how to render the TonderPayment component:
import { TonderPayment } from '@tonder.io/rn-sdk';

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

​
Hook: useTonder

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

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

​
INLINE SDK Methods

These methods are available when using SDKType.INLINE for the Full SDK experience.
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 with customer and cart details.
config.callbacksObjectOptional callback functions (e.g., onFinishPayment).
config.customizationObjectOptional UI customization options.
config.eventsObjectOptional event handlers for card form input fields.
 
const { create } = useTonder<SDKType.INLINE>();

const paymentData: IBaseProcessPaymentRequest = {
  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
    }
  });
  if (error) {
    console.error('SDK initialization error:', error);
  }
};
Processes a payment using the configured data. Note: This is only necessary when you want to use a custom payment button (by setting customization.paymentButton.show: false).
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);
};

// ... In your component
<TonderPayment />
<TouchableOpacity onPress={handlePayment}>
  <Text>Pay</Text>
</TouchableOpacity>
Resets the SDK state to its initial values and cleans up resources. This is useful for re-initializing the payment flow after a transaction.
const { reset } = useTonder<SDKType.INLINE>();

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

​
Next Steps

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