JS SDK Customization

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:

Field	Description
`base`	Base customizations for all inputs.
`cardIcon`	Customization for the card icon inside the card number input.
`complete`	Customizations for a correct filled input.
`empty`	Customizations for an empty input.
`focus`	Customizations for a focused input.
`invalid`	Customizations for when an input is incorrectly filled.
`global`	Global customizations

  const customStyles = {
    inputStyles: {
      base: {
        border: "2px solid #FFF",
        padding: "10px 7px",
        borderRadius: "15px",
        color: "#1d1d1d",
        marginTop: "2px",
        backgroundColor: "#FFF",
        fontFamily: '"Inter", sans-serif',
        fontSize: '16px',
        '&::placeholder': {
          color: "#ccc",
        },
        '&:hover': {
          borderColor: 'green',
        },
      },
      cardIcon: {
        position: 'absolute',
        left: '6px',
        bottom: 'calc(50% - 12px)',
      },
      complete: {
        color: "#4caf50",
        border: "2px solid #4caf50",
      },
      empty: {},
      focus: {},
      invalid: {
        color: "#4caf50",
        border: "1px solid #f44336",
      },
      global: {
        '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
      }
    },
    ...
  }

Placeholders

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

  const customStyles = {
    inputStyles: {
      ...
    },
    placeholders: {
      namePlaceholder: 'John O. Doe',
      cardPlaceholder: '0000 0000 0000 0000',
      cvvPlaceholder: '123',
      expiryMonthPlaceholder: 'MM',
      expiryYearPlaceholder: 'AA'
    }
    ...
  }

Labels

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:

    const customStyles = {
      inputStyles: {
        ...
      },
      placeholders: {
        ...
      },
      labelStyles: {
        base: {
          fontSize: '12px',
          fontWeight: '500',
          fontFamily: '"Inter", sans-serif'
        },
      },
      ...
    }

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:

  const customStyles = {
    inputStyles: {
      ...
    },
    placeholders: {
      ...
    },
    labelStyles: {
      ...
    },
    labels: {
      nameLabel: 'Carholder\'s full name',
      cardLabel: 'Card Number',
      cvvLabel: 'Security code',
      expiryDateLabel: 'Expiring date',
    },
    ...
  }

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:

  const customStyles = {
    inputStyles: {
      ...
    },
    placeholders: {
      ...
    },
    labelStyles: {
      ...
    },
    labels: {
      ...
    },
    errorTextStyles: {
      base: {
        fontSize: '12px',
        fontWeight: '500',
        color: "#f44336",
        fontFamily: '"Inter", sans-serif'
      },
    },
  }

Integrations

SDKs

Plugins

JS SDK Customization

Input styles

Placeholders

Labels

Labels texts

Error text styles

Integrations

SDKs

Plugins

​Input styles

​Placeholders

​Labels

​Labels texts

​Error text styles

Input styles

Placeholders

Labels

Labels texts

Error text styles