The Inline SDK simplifies payment integration by providing a fully functional payment UI with pre-built components. This integration is designed to enhance user experience and reduce development effort while allowing for customization.

​
Features and Benefits

The Inline SDK delivers powerful features for streamlined payment experiences:

  • Pre-Built UI Components: Fully functional payment interface.
  • Saved Cards Management: Manage stored cards for returning users.
  • Multiple Payment Methods Support: Enable a variety of payment options.
  • Built-In Error Handling and Validation: Ensure transactions are smooth and secure.
  • Customizable Styling and Layout: Adapt the UI to align with your brand’s design and user needs.

​
Integration Steps

The following steps show you how to integrate the Inline type into your app:

1

Setup Tonder Provider

You need to start by setting up Tonder’s Provider into your application. Below are the available base configurations for the Provider:

PropertyTypeRequiredDescription
mode'development' | 'production' | 'sandbox'YesSpecifies the environment mode for the SDK. Use development for testing, production for live operations, or sandbox for isolated testing.
apiKeystringYesYour unique Tonder Public API key used to authenticate SDK requests.
typeSDKTypeYesIndicates the integration type. Options: INLINE for inline integration, LITE for lightweight use, or ENROLLMENT for enrollment workflows.
returnURLstringNoThe URL to redirect users to after completing the 3DS authentication process.

The following code integrates our provider into the App component:

Remember to add the correct SDK type in the provider configuration.

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

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

Obtain a Secure Token

Before initialzing the mobile SDK, your checkout page should obtain the security token for card functionalities (save, delete, list). This should be obtained through your backend for security.

For detailed implementation instructions and best practices, please refer to the How to use SecureToken for secure card saving guide.

const getSecureToken = async (apiSecretKey: string) => {
  const response = await fetch(
    `${TONDER_ENVIRONMENT_URL}/api/secure-token/`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Token ${'YOUR-SECRET-API-KEY'}`,
        'Content-Type': 'application/json',
      },
    }
  );

  const data = await response.json();
  return data.access;
};
3

Gather Payment and Customer Data

Before creating the mobile SDK, your checkout page should already:

  • Show the products being purchased and the total amount.
  • Collect any required customer information.
import { IBaseProcessPaymentRequest } from '@tonder.io/rn-sdk';

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,
    }]
  }
};
4

Create the Full Payment Screen

The Full Payment integration provides a complete pre-built UI for payment processing. With a secure token, and the necessary data at hand, you can now create the payment screen.

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

export default function FullPaymentScreen() {
  const { create, reset } = 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,
      }]
    }
  };

  useEffect(() => {
    initializePayment();
  }, []);

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

    if (error) {
      console.error('SDK initialization error:', error);
    }
  };

  const callbackFinish = async (response) => {
    console.log('FINISH PAYMENT ===== ', response);

    // Reset the state and regenerate the SDK to use it again.
    reset();
    await initializePayment();
  };

  return (
    <SafeAreaView>
      <TonderPayment />
    </SafeAreaView>
  );
}

After these steps, you have completed the integration. The following image exemplifies how the SDK will look in your app:

​
Inline Methods

The Inline integration provides methods for handling full payment processing with built-in UI components.

  • create: Initializes the SDK with configuration.
  • reset: Resets the SDK state to its initial values and cleans up resources.
  • payment: Processes a payment using the configured payment data.

The payment function It is only used when you want to control the payment button on your own. Additionally, if there are any changes to the payment or customer data, you can pass the updated data again when calling the function.

The example code below uses the payment function along with the create:

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

  useEffect(() => {
    createSDK()
  }, [])

  const createSDK = async () => {
    const { error } = await create({
      secureToken: 'your-secure-token',
      paymentData: { ...paymentData },
      customization: {
        paymentButton: {
          show: false, // hide default button
        },
      },
    });

    if (error) {
      // Manage error
      console.error('Error creating SDK', error);
    }
  };

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

    if (error) {
      console.error('Error payment: ', error);
      return;
    }
    console.log('Response payment: ', response);
  };

  return (
    <SafeAreaView>
      <ScrollView>
        <TonderPayment />
        {/*Custom button*/}
        <TouchableOpacity onPress={handlePayment}>
          <Text>Pagar</Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}

​
Reference

Find below reference tables and interfaces for the methods and features found at the React Native guides.

InstallationLite SDK Type