SoporteIniciar sesión
DocsReferencia APIReferencia SDKRecursosChangelog
Hosted Checkout

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:

  1. Define un aspecto por defecto para todas tus sesiones con la configuración de negocio.
  2. 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.

POST
/checkout/v1/business/config

Autorización

Authorization
Authorization<token>

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.

CampoTipoDescripción
brand_colorstringColor principal de marca. Usado en el botón de envío.
brand_color_textstringColor del texto sobre brand_color.
secondary_brand_colorstringColor secundario. Usado en enlaces o botones menores.
secondary_brand_color_textstringColor del texto sobre secondary_brand_color.

theme

Tema general de la página, incluidas formas y colores de fondo.

CampoTipoDescripción
shapesstringRadio de borde de botones y campos. Opciones: sharp (0px) o rounded (por defecto, p. ej. 8px).
background_colorstringColor de fondo principal de la página.
form_background_colorstringColor de fondo del contenedor del formulario de pago.
text_colorstringColor principal de todas las etiquetas de texto.
error_colorstringColor de los errores de validación del formulario.

labels

Texto personalizado para campos y botones.

CampoTipoDescripción
submit_buttonstringTexto del botón principal de pago (p. ej. "Pagar", "Completar pedido").
card_numberstringEtiqueta del campo de número de tarjeta.
expiry_datestringEtiqueta del campo de fecha de expiración.
cvcstringEtiqueta del campo CVC/CVV.

Siguientes pasos

Crear una sesión

El cuerpo de la petición, incluido ui_config.

Inicio rápido

El flujo completo de cuatro pasos.

¿Te resultó útil esta página?

Crear una sesión de pago

El cuerpo de la petición que crea una sesión de pago, campo por campo, y la URL que devuelve.

Escuchar webhooks

Registra tu endpoint y procesa los eventos de sesión de forma idempotente, con un handler de ejemplo.

En esta página

Método 1: configuración de negocio por defectoMétodo 2: sobrescribir la UI de una sesiónCampos de ui_configbrandingthemelabelsSiguientes pasos