Customize the SDK

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:

Learn how to make a payment using the JS Inline SDK.
Explore the available SDK methods for payment processing.

SDK Overview

Web SDKs

Mobile SDKs

Customize the SDK

How to Apply Customisations

Customisation Properties

Style Properties

Text Properties

Style State Properties

Example Customisation

Next Steps

​How to Apply Customisations

​Customisation Properties

​Style Properties

​Text Properties

​Style State Properties

​Example Customisation

​Next Steps

How to Apply Customisations

Customisation Properties

Style Properties

Text Properties

Style State Properties

Example Customisation

Next Steps