Customize the Checkout
Put your logo and colors on the checkout with `ui_config`, once or per session.
You can customize the Hosted Checkout page to match your brand. There are two ways to apply customization:
- Set a default look for all your sessions using the business configuration.
- Override the defaults for a specific session.
Method 1: default business configuration
This method updates the default UI for your entire business. These settings apply to all new sessions unless you override them.
Call the Set Business Configuration endpoint with your logo URL and default ui_config. The API
returns the saved configuration and all subsequent sessions will use it.
Authorization
Authorization Tu API key con prefijo Token , p. ej. Token <API_KEY>
In: header
Request Body
application/json
TypeScript Definitions
Use the request body type in TypeScript.
Response Body
application/json
curl -X POST "https://example.com/checkout/v1/business/config" \ -H "Content-Type: application/json" \ -d '{ "logo_url": "https://cdn.my-store.com/logo.png", "ui_config": { "branding": { "brand_color": "#1A2B3C" }, "theme": { "shapes": "rounded" } } }'{
"logo_url": "https://cdn.my-store.com/logo.png",
"ui_config": {
"branding": {
"brand_color": "#1A2B3C"
},
"theme": {
"shapes": "rounded"
}
}
}Method 2: override the UI for a session
You can override any default setting for a single payment by passing a ui_config object when you
create the payment session. This is useful for
co-branding, promotions, or if you operate multiple storefronts under one Tonder account.
curl -X POST 'https://api-stage.tonder.io/checkout/v1/sessions' \
-H 'Authorization: Token YOUR_API_KEY' \
-H 'Content-Type: application/json' \
-d '{
"external_id": "PROMO-XYZ-456",
"amount_total": 1000,
"currency": "MXN",
"line_items": [
{ "name": "Promo Item", "quantity": 1, "unit_price": 1000 }
],
"customer": { "first_name": "Test", "last_name": "Customer", "email": "test@example.com" },
"success_url": "https://your-store.com/checkout/success",
"ui_config": {
"branding": { "brand_color": "#33CFFF" },
"labels": { "submit_button": "Pay Now (Promo)" }
}
}'This session will use the #33CFFF brand color and the custom button text, ignoring the default
business config for those fields.
ui_config fields
All color fields accept 6-digit hex codes (e.g. #FFFFFF).
{
"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.
| Field | Type | Description |
|---|---|---|
brand_color | string | Main brand color. Used for the submit button. |
brand_color_text | string | Text color to display on top of brand_color. |
secondary_brand_color | string | Secondary color. Used for links or minor buttons. |
secondary_brand_color_text | string | Text color to display on top of secondary_brand_color. |
theme
General theme of the checkout page, including shapes and background colors.
| Field | Type | Description |
|---|---|---|
shapes | string | Border radius for buttons and form fields. Options: sharp (0px) or rounded (default, e.g. 8px). |
background_color | string | The main background color of the page. |
form_background_color | string | The background color of the payment form container. |
text_color | string | The primary color for all text labels. |
error_color | string | The color used for form validation errors. |
labels
Custom text for form fields and buttons.
| Field | Type | Description |
|---|---|---|
submit_button | string | Text for the main payment button (e.g. "Pay", "Complete Order"). |
card_number | string | Placeholder label for the card number field. |
expiry_date | string | Placeholder label for the card expiration date field. |
cvc | string | Placeholder label for the CVC/CVV field. |