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.
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:
|Base customizations for all inputs.
|Customization for the card icon inside the card number input.
|Customizations for a correct filled input.
|Customizations for an empty input.
|Customizations for a focused input.
|Customizations for when an input is incorrectly filled.
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:
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: