Skip to main content
This guide shows you how to customize the appearance and behavior of the Tonder React Native Full SDK (INLINE mode). You can customize UI components, labels, placeholders, and styling to ensure the payment experience aligns with your app’s branding and user flow.

​
How to Apply Customizations

You pass a customization object during the create call. This object contains all your configuration for styles, text, and behavior, allowing you to tailor the SDK to match your app’s design system. 
const { create } = useTonder<SDKType.INLINE>();

create({
  secureToken: 'YOUR_SECURE_TOKEN',
  paymentData: yourPaymentData,
  customization: {
    // Your customization objects go here
  },
});

​
General Customization Options

Each customization option serves a specific purpose in the payment integration workflow. Below you’ll find detailed information about each customization option, including their parameters, usage examples, and practical implementation guidance.
PropertyTypeDescription
General.showMessagesbooleanControls the visibility of error and success messages
labelsobjectCustom labels for form fields (See Text Customization)
placeholdersobjectCustom placeholder text for form inputs (See Text Customization)
stylesobjectCustom styles for UI components (See Styling Customization)

​
Behavior Customization

Control the visibility and functionality of different UI elements through the behavior configuration options.
PropertyTypeDescription
paymentButton.showbooleanControls whether the default payment button is displayed
paymentButton.textstringCustom text for the payment button
paymentButton.showAmountbooleanWhether to display the payment amount on the button
saveCards.showSavedbooleanControls visibility of saved card options
saveCards.showSaveCardOptionbooleanWhether to show the option to save the current card
saveCards.autoSavebooleanAutomatically save cards without user confirmation
saveCards.showDeleteOptionbooleanWhether to show delete option for saved cards
paymentMethods.showbooleanControls visibility of alternative payment methods
 
customization: {
  // Show or hide the default payment button
  paymentButton: {
    show: true,
    text: 'Pay Now',
    showAmount: true,
  },
  // Control saved card options
  saveCards: {
    showSaved: true,
    showSaveCardOption: true,
    autoSave: false,
    showDeleteOption: true,
  },
  // Show or hide alternative payment methods
  paymentMethods: {
    show: true,
  },
}

​
Text Customization

Change the default text for labels and input placeholders to match your app’s language and terminology.
PropertyTypeDescription
labels.namestringText for the cardholder name field label
labels.cardNumberstringText for the card number field label
labels.cvvstringText for the CVV field label
labels.expiryDatestringText for the expiration date field label
labels.saveCardFuturePaymentstringLabel for the save card for future payments checkbox
labels.expirationCardstringLabel for the expiration card text
labels.payWithCardstringLabel for pay with card option
placeholders.namestringPlaceholder text for the cardholder name input
placeholders.cardNumberstringPlaceholder text for the card number input
placeholders.cvvstringPlaceholder text for the CVV input
placeholders.expiryMonthstringPlaceholder for the expiration month field
placeholders.expiryYearstringPlaceholder for the expiration year field
 
customization: {
  labels: {
    name: 'Cardholder Name',
    cardNumber: 'Card Number',
    cvv: 'Security Code',
    expiryDate: 'Expiration Date',
    saveCardFuturePayment: 'Save card for future payments',
    payWithCard: 'Pay with card',
  },
  placeholders: {
    name: 'Jane Doe',
    cardNumber: '4242 4242 4242 4242',
    cvv: '123',
    expiryMonth: 'MM',
    expiryYear: 'YY',
  },
}

​
Styling Customization

Provide a styles object to override the default appearance of SDK components. The structure allows you to target specific elements like the main container, card form, and buttons.
ComponentDescriptionProperties (Examples of detailed properties)
sdkCardMain SDK container cardbase
cardFormCard form sectioninputStyles, labelStyles, errorStyles, saveCardOption
savedCardsSaved cards list sectionradioBase, radioInner, radioSelected, cardIcon, deleteButton
paymentMethodsPayment methods sectionradioBase, radioInner, radioSelected
paymentButtonPayment buttonbase
errorMessageError messagesbase
skeletonCardSkeleton loaderfullField, compactField, compactRow, animatedBGColors
 
const customStyles = {
  sdkCard: {
    base: { backgroundColor: '#f9f9f9', borderRadius: 10, padding: 16 },
  },
  cardForm: {
    base: { marginVertical: 8 },
    inputStyles: {
      base: { borderWidth: 1, borderColor: '#cccccc', borderRadius: 6, padding: 12, fontSize: 16 },
    },
  },
  paymentButton: {
    base: { backgroundColor: '#007AFF', paddingVertical: 15, borderRadius: 8, alignItems: 'center' },
  },
  errorMessage: {
    base: { color: '#dc3545', fontSize: 14 },
  },
};

// ... inside create()
customization: {
  styles: customStyles,
}

​
Next Steps

Now that you’ve learned how to customize the React Native Full SDK, explore these features to enhance your payment experience: