The Enrollment SDK gives you tools for managing card-saving functionalities, with secure card enrollment and storage with Tonder. This integration is designed to enhance user trust and simplify card management.

​
Features and Benefits

The Enrollment SDK provides features that support secure and efficient card handling:

  • Card Tokenization: Convert card details into secure tokens for future transactions.
  • Card Validation: Ensure the accuracy and validity of card information during the enrollment process.
  • Secure Storage: Store card data securely and comply with industry standards.

​
Integration Steps

The following steps show you how to integrate the Enrollment 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.ENROLLMENT,
        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 Customer Data

Before creating the mobile SDK, your checkout page should already have collected any required customer information.

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

const customerData: ICustomer = {
  email: 'test@example.com',
  firstName: 'John',
  lastName: 'Doe'
};
4

Create the Enrollment Screen

Use the following code to save cards without processing payments. With a secure token, and the necessary data at hand, you can now create the enroll card screen.

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

export default function EnrollmentScreen() {
  const { create, reset } = useTonder<SDKType.ENROLLMENT>();

  const customerData: ICustomer = {
    email: 'test@example.com',
    firstName: 'John',
    lastName: 'Doe'
  };

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

  const initializeEnrollment = async () => {
    const { error } = await create({
      secureToken: 'your-secure-token',
      customer: customerData,
      callbacks: {
        onFinishSave: handleSaveFinish
      }
    });

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

  const handleSaveFinish = async (response) => {
    console.log('Card saved successfully:', response);
    // Reset the state and regenerate the SDK to use it again
    reset();
    await initializeEnrollment();
  };

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

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

​
Enrollment Methods

The Enrollment integration provides methods for handling full enrollment with built-in UI components.

  • saveCustomerCard: Tokenizes and saves the current card information.

The saveCustomerCard is only necessary when you want to control the enrollment button on your own.

The example below shows how to create a card enrollment with a custom button.

export default function EnrollmentButtonScreen() {
  const { create, saveCustomerCard } = useTonder<SDKType.ENROLLMENT>();

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

  const createSDK = async (token) => {
    const { error } = await create({
      secureToken: token,
      customer: { ...customerData },
      customization: {
        saveButton: {
          show: false, // hidde default button
        },
      },
    });

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

  const handleSaveCard = async () => {
    const { response, error } = await saveCustomerCard();
    if (error) {
      //Manage error
      console.error('Error save: ', error);
      return;
    }
    console.log('Response save: ', response);
  };

  return (
    <SafeAreaView style={styles.safeArea}>
        <TonderEnrollment />
        {/*Custom button*/}
        <TouchableOpacity
          onPress={handleSaveCard}
        >
          <Text>Guardar</Text>
        </TouchableOpacity>
    </SafeAreaView>
  );
}

​
Reference

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