Tonder allows you to customize the checkout style to align with your brand and improve the customer experience.

When initializing the JS SDK instance, you are required to send your styles as part of the payload. This page presents you with detailed information about each available customization.

Input styles

The first thing you can customize are the inputs that will be presented to your customer. The following are each configurable option in the inputStyles property of the custom styles:

baseBase customizations for all inputs.
cardIconCustomization for the card icon inside the card number input.
completeCustomizations for a correct filled input.
emptyCustomizations for an empty input.
focusCustomizations for a focused input.
invalidCustomizations for when an input is incorrectly filled.
globalGlobal customizations


To change the texts presented as placeholder for each input, you need to add the placeholders property to the custom styles, as presented below:


You can also customize the labels for the inputs by adding a labelStyles property to your custom styles object. This new property is an object’s object with a base configuration, as exemplified below:

Labels texts

To change the texts presented above each input as labels, you need to add the labels property to the custom styles, as presented below:

Error text styles

To customize the text appearance when a input is incorrectly filled you need to add the labelStyles property to the custom styles. An example of this property inside the custom styles object is presented below: