Skip to main content

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.

The ui_config object allows you to customize the look and feel of the Hosted Checkout page. You can set these fields as a default for your business using the Set Business Configuration endpoint, or override them for a single session in the Create a Payment Session request.
All color fields accept 6-digit hex codes (e.g., #FFFFFF).

​
Example ui_config Object

{
  "branding": {
    "brand_color": "#0A2540",
    "brand_color_text": "#FFFFFF",
    "secondary_brand_color": "#F0F0F0",
    "secondary_brand_color_text": "#0A2540"
  },
  "theme": {
    "shapes": "rounded",
    "background_color": "#FDFDFD",
    "form_background_color": "#FFFFFF",
    "text_color": "#333333",
    "error_color": "#D92D20"
  },
  "labels": {
    "submit_button": "Pay Now",
    "card_number": "Card Number",
    "expiry_date": "MM/YY",
    "cvc": "CVC"
  }
}

​
branding

Colors related to your brand, used for buttons and highlights.
FieldTypeDescription
brand_colorstringMain brand color. Used for the submit button.
brand_color_textstringText color to display on top of brand_color.
secondary_brand_colorstringSecondary color. Used for links or minor buttons.
secondary_brand_color_textstringText color to display on top of secondary_brand_color.

​
theme

General theme of the checkout page, including shapes and background colors.
FieldTypeDescription
shapesstringSets the border radius for buttons and form fields. Options: sharp (0px) or rounded (default, e.g., 8px).
background_colorstringThe main background color of the page.
form_background_colorstringThe background color of the payment form container.
text_colorstringThe primary color for all text labels.
error_colorstringThe color used for form validation errors.

​
labels

Custom text for form fields and buttons.
FieldTypeDescription
submit_buttonstringText for the main payment submission button (e.g., “Pay”, “Complete Order”).
card_numberstringPlaceholder label for the card number field.
expiry_datestringPlaceholder label for the card expiration date field.
cvcstringPlaceholder label for the CVC/CVV field.
For more information about implementing UI customization: