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.
This guide covers how to customise the Tonder JS Inline SDK to match your website’s design and branding requirements. Whether you’re looking to integrate Tonder’s payment processing into your existing design system or create a cohesive checkout experience, this documentation will help you understand your customisation options and implementation approaches.
The Tonder JS SDK allows you to customise the checkout’s appearance to match your website’s branding. You can customise styles for input fields, labels, and error messages, as well as the text for labels and placeholders.
How to Apply Customisations
You apply customisations by passing styles, labels, and placeholders objects to the InlineCheckout constructor during initialisation.
import { InlineCheckout } from "tonder-web-sdk";
const customConfig = {
// ... your style, label, and placeholder definitions here
styles: {
// ... your custom styles here
},
labels: {
// ... your custom labels here
},
placeholders: {
// ... your custom placeholders here
}
};
const inlineCheckout = new InlineCheckout({
// 1. Replace with your actual API Key
apiKey: "YOUR_API_KEY",
// 2. Replace with the URL where the user will be redirected after the payment process
returnUrl: "YOUR_RETURN_URL",
// Your customization object
...customConfig
});
Customisation Properties
The customisation object supports both styling and text customisation options. The styles object is structured to target different elements and their states (e.g., base, complete, invalid).
Style Properties
| Property | Description |
|---|
inputStyles | Controls the appearance of the card number, expiration date, and CVV fields |
labelStyles | Controls the appearance of the labels above each input field |
errorTextStyles | Controls the appearance of validation error messages |
Text Properties
In addition to styling, you can also customise the text content of labels and placeholders to match your application’s language or terminology:
| Property | Description |
|---|
labels | Provide an object with new text for the input labels (e.g., nameLabel, cardLabel) |
placeholders | Provide an object with new placeholder text for the inputs (e.g., namePlaceholder, cardPlaceholder) |
Style State Properties
The style properties support different states for enhanced user experience:
| Property | Type | Description |
|---|
inputStyles.base | object | Default styles for input fields |
inputStyles.invalid | object | Styles applied when input validation fails |
inputStyles.complete | object | Styles applied when input is valid and complete |
labelStyles.base | object | Default styles for field labels |
errorTextStyles.base | object | Default styles for error messages |
global | object | Global CSS imports and styles |
Example Customisation
Here’s a comprehensive example that demonstrates how to customise both the visual appearance and text content of the checkout interface.
This configuration applies a modern design with custom fonts, colours, and terminology.
const customConfig = {
styles: {
global: { '@import': 'url("[https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap](https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap)")' },
inputStyles: {
base: { border: "1px solid #E0E0E0", padding: "12px 10px", borderRadius: "8px", fontFamily: '"Inter", sans-serif' },
invalid: { border: "1px solid #f44336" },
complete: { border: "1px solid #4caf50" },
},
labelStyles: { base: { fontSize: '14px', fontFamily: '"Inter", sans-serif' } },
errorTextStyles: { base: { fontSize: '12px', color: "#f44336" } },
},
labels: { nameLabel: "Cardholder Name", cvvLabel: "CVC" },
placeholders: { namePlaceholder: 'J. Doe', cvvPlaceholder: '123' }
};
Next Steps
Now that you understand the customisation options available with the Tonder JS Inline SDK, you’re ready to implement payment processing in your web application. Here are the recommended next steps to get you started:
