Personalizar el checkout
Pon tu logo y tus colores en el checkout con `ui_config`, una sola vez o por sesión.
Puedes personalizar la página de Hosted Checkout para que coincida con tu marca. Hay dos formas de aplicar la personalización:
- Define un aspecto por defecto para todas tus sesiones con la configuración de negocio.
- Sobrescribe los valores por defecto para una sesión específica.
Método 1: configuración de negocio por defecto
Este método actualiza la UI por defecto para todo tu negocio. Estos ajustes aplican a todas las sesiones nuevas, a menos que los sobrescribas.
Llama al endpoint Set Business Configuration con la URL de tu logo y los ui_config por defecto. La
API devuelve la configuración guardada y todas las sesiones siguientes la usarán.
Autorización
Authorization Tu API key con prefijo Token , p. ej. Token <API_KEY>
In: header
Cuerpo de la petición
application/json
TypeScript Definitions
Use the request body type in TypeScript.
Cuerpo de la respuesta
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"
}
}
}Método 2: sobrescribir la UI de una sesión
Puedes sobrescribir cualquier ajuste por defecto en un solo pago, pasando un objeto ui_config al
crear la sesión de pago. Útil para co-branding, promociones
o si operas varias tiendas con una sola cuenta de Tonder.
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)" }
}
}'Esta sesión usará el color #33CFFF y el texto de botón personalizado, ignorando la configuración
de negocio por defecto para esos campos.
Campos de ui_config
Todos los campos de color aceptan códigos hex de 6 dígitos (p. ej. #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
Colores de tu marca, usados en botones y resaltados.
| Campo | Tipo | Descripción |
|---|---|---|
brand_color | string | Color principal de marca. Usado en el botón de envío. |
brand_color_text | string | Color del texto sobre brand_color. |
secondary_brand_color | string | Color secundario. Usado en enlaces o botones menores. |
secondary_brand_color_text | string | Color del texto sobre secondary_brand_color. |
theme
Tema general de la página, incluidas formas y colores de fondo.
| Campo | Tipo | Descripción |
|---|---|---|
shapes | string | Radio de borde de botones y campos. Opciones: sharp (0px) o rounded (por defecto, p. ej. 8px). |
background_color | string | Color de fondo principal de la página. |
form_background_color | string | Color de fondo del contenedor del formulario de pago. |
text_color | string | Color principal de todas las etiquetas de texto. |
error_color | string | Color de los errores de validación del formulario. |
labels
Texto personalizado para campos y botones.
| Campo | Tipo | Descripción |
|---|---|---|
submit_button | string | Texto del botón principal de pago (p. ej. "Pagar", "Completar pedido"). |
card_number | string | Etiqueta del campo de número de tarjeta. |
expiry_date | string | Etiqueta del campo de fecha de expiración. |
cvc | string | Etiqueta del campo CVC/CVV. |