> ## Documentation Index > Fetch the complete documentation index at: https://docs.tonder.io/llms.txt > Use this file to discover all available pages before exploring further. # 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: 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. ```jsx theme={null} import { TonderProvider, SDKType } from '@tonder.io/rn-sdk'; function App() { return ( ); } ``` 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](/integration/sdks/secure-token) guide. ```js theme={null} 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; }; ``` Before creating the mobile SDK, your checkout page should already: * Show the products being purchased and the total amount. * Collect any required customer information. ```js theme={null} 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, }] } }; ``` 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. ```jsx theme={null} import { TonderPayment, useTonder, SDKType, IBaseProcessPaymentRequest } from '@tonder.io/rn-sdk'; export default function FullPaymentScreen() { const { create, reset } = useTonder(); 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 ( ); } ``` 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: ```tsx theme={null} export default function FullPaymentButtonScreen() { const { create, payment } = useTonder(); 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 ( {/*Custom button*/} Pagar ); } ``` ## Reference Find below reference tables and interfaces for the methods and features found at the React Native guides. | 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. | ```ts theme={null} interface IInlineCheckoutOptions extends IBaseCreateOptions { paymentData: IBaseProcessPaymentRequest; customization?: IInlineCustomizationOptions; callbacks?: IInlineCallbacks; returnURL?: string; } ``` | 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` | 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` | Triggered when the card deletion process is completed (either success or error). | `Promise` | ```ts theme={null} export interface IInlineCallbacks { beforePayment?: () => Promise; onFinishPayment?: (response: IBaseResponse) => Promise; beforeDeleteCard?: () => Promise; onFinishDeleteCard?: (response: IBaseResponse) => Promise; } ``` ### 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` | Yes | Array containing details of items in the cart. | | `metadata` | `Record` | 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. | ```ts theme={null} 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; currency?: string; } ``` ### 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). | ```ts theme={null} 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 | 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. | ```ts theme={null} 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. | ```ts theme={null} interface IFormPlaceholder { name?: string; cardNumber?: string; cvv?: string; expiryMonth?: string; expiryYear?: string; } ``` 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` | ```ts theme={null} 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(); 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, }, }); ```