Inline SDK Type

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:

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:

Property	Type	Required	Description
`mode`	`'development'` \| `'production'` \| `'sandbox'`	Yes	Specifies the environment mode for the SDK. Use `development` for testing, `production` for live operations, or `sandbox` for isolated testing.
`apiKey`	`string`	Yes	Your unique Tonder Public API key used to authenticate SDK requests.
`type`	`SDKType`	Yes	Indicates the integration type. Options: `INLINE` for inline integration, `LITE` for lightweight use, or `ENROLLMENT` for enrollment workflows.
`returnURL`	`string`	No	The 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>
  );
}

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

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

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.

IInlineCheckoutOptions

Option	Type	Required	Description
`paymentData`	`IBaseProcessPaymentRequest`	Yes	Contains the payment information, including customer and cart data necessary for the transaction.
`customization`	`IInlineCustomizationOptions`	No	Options for customizing the user interface of the payment process.
`callbacks`	`IInlineCallbacks`	No	Functions to handle callback events during the payment process, such as success or failure.
`returnURL`	`string`	No	The URL to redirect users to after completing the 3D Secure (3DS) authentication process.

interface IInlineCheckoutOptions extends IBaseCreateOptions {
  paymentData: IBaseProcessPaymentRequest;
  customization?: IInlineCustomizationOptions;
  callbacks?: IInlineCallbacks;
  returnURL?: string;
}

Callbacks Structure

Callback	Parameters	Description	Return
`beforePayment`	`none`	Invoked before the payment process begins. Use this to display a loading state, validate data, or perform pre-payment tasks.	`Promise`
`onFinishPayment`	`response: IBaseResponse<ITransaction>`	Triggered when the payment process is completed (either success or error). Provides transaction results or error details.	`Promise`
`beforeDeleteCard`	`none`	Invoked before the delete card process starts. Use this to display a loading state, validate data, or perform pre-deletion tasks.	`Promise`
`onFinishDeleteCard`	`response: IBaseResponse<string>`	Triggered when the card deletion process is completed (either success or error).	`Promise`

export interface IInlineCallbacks {
  beforePayment?: () => Promise<void>;
  onFinishPayment?: (response: IBaseResponse<ITransaction>) => Promise<void>;
  beforeDeleteCard?: () => Promise<void>;
  onFinishDeleteCard?: (response: IBaseResponse<string>) => Promise<void>;
}

Payment Data

Customer information

Field	Type	Required	Description
`email`	`string`	Yes	Customer’s email address.
`firstName`	`string`	Yes	Customer’s first name.
`lastName`	`string`	Yes	Customer’s last name.
`phone`	`string`	No	Customer’s contact phone number.
`address`	`string`	No	Customer’s street address.
`city`	`string`	No	Customer’s city.
`state`	`string`	No	Customer’s state or province.
`country`	`string`	No	Customer’s country.
`postCode`	`string`	No	Customer’s postal or ZIP code.

Cart Information

Field	Type	Required	Description
`total`	`number`	Yes	Total amount of the transaction.
`items`	`Array<IItem>`	Yes	Array containing details of items in the cart.
`metadata`	`Record<string, any>`	No	Additional custom data for the transaction.
`currency`	`string`	No	Currency code for the transaction (default: `MXN`).

Cart Item Structure

Field	Type	Required	Description
`name`	`string`	Yes	Name of the product.
`amount_total`	`number`	Yes	Total amount for the item (calculated as `quantity × price`).
`description`	`string`	Yes	Brief description of the product.
`price_unit`	`number`	Yes	Unit price of the product.
`product_reference`	`string`	Yes	Unique identifier for the product.
`quantity`	`number`	Yes	Quantity of the product being purchased.
`discount`	`number`	No	Discount amount applied to this item.
`taxes`	`number`	No	Tax amount applied to this item.

interface IBaseProcessPaymentRequest {
  customer: {
    email: string;
    firstName: string;
    lastName: string;
    phone?: string;
    address?: string;
    city?: string;
    state?: string;
    country?: string;
    postCode?: string;
  };
  cart: {
    total: number;
    items: Array<{
      name: string;
      amount_total: number;
      description: string;
      price_unit: number;
      product_reference: string;
      quantity: number;
      discount?: number;
      taxes?: number;
    }>;
  };
  metadata?: Record<string, any>;
  currency?: string;
}

Customization Options

Save Cards Options

Option	Type	Default	Description
`saveCards.showSaveCardOption`	`boolean`	`true`	Displays a checkbox allowing users to choose whether to save their card for future purchases.
`saveCards.showSaved`	`boolean`	`true`	Shows a list of previously saved cards for the customer.
`saveCards.autoSave`	`boolean`	`false`	Automatically saves the card without requiring the user to select the save option.
`saveCards.showDeleteOption`	`boolean`	`true`	Displays a delete button for each saved card in the list.

Payment Button Options

Option	Type	Default	Description
`paymentButton.show`	`boolean`	`true`	Controls the visibility of the payment button.
`paymentButton.text`	`string`	`'Pagar'`	Custom text displayed on the payment button.
`paymentButton.showAmount`	`boolean`	`true`	Displays the payment amount on the button (e.g., “Pay $100”).

Payment Methods Options

Option	Type	Default	Description
`paymentMethods.show`	`boolean`	`true`	Controls the visibility of the alternative payment methods section.

Card Form Options

Option	Type	Default	Description
`cardForm.show`	`boolean`	`true`	Controls the visibility of the card input form.

General Options

Option	Type	Default	Description
`showMessages`	`boolean`	`true`	Controls the visibility of error and success messages.
`labels`	`object`	`-`	Custom labels for form fields (see Form Labels section).
`placeholders`	`object`	`-`	Custom placeholder text for form inputs (see Form Placeholders section).
`styles`	`object`	`-`	Custom styles for UI components (see Styling section).

interface IInlineCustomizationOptions {
  saveCards?: {
    showSaveCardOption?: boolean;
    showSaved?: boolean;
    autoSave?: boolean;
    showDeleteOption?: boolean;
  };
  paymentButton?: {
    show?: boolean;
    text?: string;
    showAmount?: boolean;
  };
  paymentMethods?: {
    show?: boolean;
  };
  cardForm?: {
    show?: boolean;
  };
  showMessages?: boolean;
  labels?: IFormLabels;
  placeholders?: IFormPlaceholder;
  styles?: IStyles;
}

Form Labels & Placeholders

Form Labels

Property	Type	Default	Description
`name`	`string`	”Titular de la tarjeta”	Label for the cardholder’s name field.
`cardNumber`	`string`	”Número de tarjeta”	Label for the card number field.
`cvv`	`string`	”CVV”	Label for the security code field.
`expiryDate`	`string`	”Fecha de expiración”	Label for the expiration date fields.

interface IFormLabels {
  name?: string;
  cardNumber?: string;
  cvv?: string;
  expiryDate?: string;
}

Placeholders

Property	Type	Default	Description
`name`	`string`	”Nombre como aparece en la tarjeta”	Placeholder for the cardholder’s name field.
`cardNumber`	`string`	”1234 1234 1234 1234”	Placeholder for the card number field.
`cvv`	`string`	”3-4 dígitos”	Placeholder for the security code field.
`expiryMonth`	`string`	”MM”	Placeholder for the expiration month field.
`expiryYear`	`string`	”AA”	Placeholder for the expiration year field.

interface IFormPlaceholder {
  name?: string;
  cardNumber?: string;
  cvv?: string;
  expiryMonth?: string;
  expiryYear?: string;
}

Styling

The style customization for Full integrations (Inline and Enrollment) is done through a styles object in the SDK configuration.

Main Container

Component	Description	Properties
`sdkCard`	Main container of the SDK.	`base: StylesBaseVariant`

Card Form

Component	Description	Properties
`cardForm`	Card form section.	`base: StylesBaseVariant`
		`inputStyles: CollectInputStylesVariant`
		`labelStyles: CollectInputStylesVariant`
		`errorStyles: StylesBaseVariant`

Saved Cards

Component	Description	Properties
`savedCards`	Saved cards list section.	`base: StylesBaseVariant`
		`radioBase: ViewStyle`
		`radioInner: ViewStyle`
		`radioSelected: ViewStyle`
		`cardIcon: ViewStyle`
		`deleteButton: ViewStyle`
		`deleteIcon: ViewStyle`

Payment Methods

Component	Description	Properties
`paymentMethods`	Payment methods section.	`base: StylesBaseVariant`
		`radioBase: ViewStyle`
		`radioInner: ViewStyle`
		`radioSelected: ViewStyle`

Payment Radio

Component	Description	Properties
`paymentRadio`	Payment method selector.	`base: StylesBaseVariant`
		`radioBase: ViewStyle`
		`radioInner: ViewStyle`
		`radioSelected: ViewStyle`

Payment Button

Component	Description	Properties
`paymentButton`	Payment button.	`base: ViewStyle`

Error Message

Component	Description	Properties
`errorMessage`	Error message display.	`base: TextStyle`

Success Message

Component	Description	Properties
`successMessage`	Success message display.	`base: TextStyle`

Full customization example

const styles = {
  sdkCard: {
    base: {
      backgroundColor: '#f9f9f9',
      borderRadius: 10,
      padding: 16,
      boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
    },
  },
  cardForm: {
    base: {
      backgroundColor: '#ffffff',
      borderRadius: 10,
      padding: 16,
      borderWidth: 1,
      borderColor: '#e3e3e3',
      marginVertical: 8,
    },
    inputStyles: {
      base: {
        borderWidth: 1,
        borderColor: '#cccccc',
        borderRadius: 6,
        padding: 12,
        fontSize: 16,
        marginBottom: 10,
        color: '#333',
      },
    },
    labelStyles: {
      base: {
        fontSize: 14,
        color: '#666',
        marginBottom: 6,
      },
    },
  },
  savedCards: {
    base: {
      backgroundColor: '#f9f9f9',
      borderRadius: 8,
      padding: 10,
      marginVertical: 6,
      borderWidth: 1,
      borderColor: '#e3e3e3',
    },
  },
  paymentRadio: {
    base: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: 10,
      backgroundColor: '#f9f9f9',
      borderRadius: 8,
      borderWidth: 1,
      borderColor: '#e3e3e3',
    },
  },
  paymentButton: {
    base: {
      backgroundColor: '#007AFF',
      paddingVertical: 15,
      paddingHorizontal: 20,
      borderRadius: 8,
      alignItems: 'center',
      fontSize: 18,
      color: '#fff',
      fontWeight: '600',
    },
  },
  paymentMethods: {
    base: {
      paddingVertical: 10,
      backgroundColor: '#f9f9f9',
    },
    radioBase: {
      width: 20,
      height: 20,
      borderRadius: 10,
      borderWidth: 2,
      borderColor: '#007AFF',
      marginHorizontal: 10,
    },
  },
  successMessage: {
    base: {
      color: '#28a745',
      fontWeight: '600',
      fontSize: 16,
      textAlign: 'center',
      marginTop: 20,
    },
  },
  errorMessage: {
    base: {
      color: '#dc3545',
      fontSize: 14,
      marginTop: 4,
    },
  },
};

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

const { error } = await create({
  secureToken: 'your-secure-token',
  paymentData: { ...paymentData },
  customization: {
    saveCards: {
      showSaveCardOption: true,
      showSaved: true,
    },
    paymentButton: {
      show: true,
      showAmount: false,
    },
    labels: {
      name: 'Cardholder Name',
      cvv: 'CVV',
      cardNumber: 'Card Number',
      expiryDate: 'Expiration Date',
    },
    placeholders: {
      cvv: '123',
      name: 'John Doe',
      cardNumber: '4242 4242 4242 4242',
      expiryMonth: 'MM',
      expiryYear: 'YY',
    },
    styles: styles,
  },
  callbacks: {
    onFinishPayment: callbackFinish,
  },
});

Integrations

SDKs

Inline SDK Type

Features and Benefits

Integration Steps

Inline Methods

Reference

Customer information

Cart Information

Cart Item Structure

Save Cards Options

Payment Button Options

Payment Methods Options

Card Form Options

General Options

Form Labels

Placeholders

Main Container

Card Form

Saved Cards

Payment Methods

Payment Radio

Payment Button

Error Message

Success Message

Integrations

SDKs

​Features and Benefits

​Integration Steps

​Inline Methods

​Reference

​Customer information

​Cart Information

​Cart Item Structure

​Save Cards Options

​Payment Button Options

​Payment Methods Options

​Card Form Options

​General Options

​Form Labels

​Placeholders

​Main Container

​Card Form

​Saved Cards

​Payment Methods

​Payment Radio

​Payment Button

​Error Message

​Success Message

Features and Benefits

Integration Steps

Inline Methods

Reference

Customer information

Cart Information

Cart Item Structure

Save Cards Options

Payment Button Options

Payment Methods Options

Card Form Options

General Options

Form Labels

Placeholders

Main Container

Card Form

Saved Cards

Payment Methods

Payment Radio

Payment Button

Error Message

Success Message