Skip to main content
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

PropertyDescription
inputStylesControls the appearance of the card number, expiration date, and CVV fields
labelStylesControls the appearance of the labels above each input field
errorTextStylesControls 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:
PropertyDescription
labelsProvide an object with new text for the input labels (e.g., nameLabel, cardLabel)
placeholdersProvide 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:
PropertyTypeDescription
inputStyles.baseobjectDefault styles for input fields
inputStyles.invalidobjectStyles applied when input validation fails
inputStyles.completeobjectStyles applied when input is valid and complete
labelStyles.baseobjectDefault styles for field labels
errorTextStyles.baseobjectDefault styles for error messages
globalobjectGlobal 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: