FINORA Checkout · Guía

Ponle los colores de tu marca

ImplementadoDocumentado

El componente <finora-checkout> vive aislado en su propio shadow DOM: tu CSS no lo desarma y el suyo no toca tu página. Lo único que lo atraviesa son las variables CSS que empiezan por --fc-.

Elige el tema base con el atributo tema: claro (por defecto), oscuro, o auto para seguir la preferencia del sistema del cliente.
```
<finora-checkout tema="auto" …></finora-checkout>
```

Define tus colores sobre el elemento, en tu hoja de estilos:

finora-checkout {
  --fc-color-primary: #0b6e4f;          /* botón principal */
  --fc-color-primary-contrast: #ffffff; /* texto del botón principal */
  --fc-color-accent: #ffb703;           /* anillo de foco y paso activo */
  --fc-font: "Inter", system-ui, sans-serif;
  --fc-radius: 8px;
}

Si usas una tipografía propia, cárgala en tu página. El componente no descarga fuentes; si no la encuentra, usa la del sistema.

Si quieres ajustar algo solo en oscuro, apunta al atributo:

finora-checkout[tema="oscuro"] { --fc-color-bg: #0d0b1f; }

Revisa el contraste de tus textos sobre el fondo. Las notas pequeñas, como «Mínimo Bs 500,00», son las primeras en dejar de leerse.

Las variables

Variable	Dónde se ve
`--fc-color-primary`, `--fc-color-primary-contrast`	Botón principal y su texto, borde de una tarjeta al pasar, indicador de carga
`--fc-color-accent`	Foco visible, paso activo mientras se espera al terminal, avisos informativos
`--fc-color-bg`, `--fc-color-surface`, `--fc-color-surface-2`	Fondo del panel, tarjetas y campos, columna lateral
`--fc-color-text`, `--fc-color-text-2`, `--fc-color-text-3`	Títulos, texto de apoyo, notas
`--fc-color-line`, `--fc-color-line-2`	Separadores y bordes
`--fc-color-ok`, `--fc-color-error`, `--fc-color-warn` (y sus `-bg`)	Aprobado, rechazo y errores de campo, en duda y avisos de prueba
`--fc-font`, `--fc-font-mono`	Texto general; montos y referencias
`--fc-radius`, `--fc-radius-sm`	Esquinas de tarjetas; de botones y campos

Lo que no se cambia, a propósito

La composición: título, tarjetas de medios y resumen con el total. Es la misma en la caja, en el kiosco y en la web, para que el cliente la reconozca.
Los textos de los medios: nombres, instrucciones y etiquetas de campos se definen en la configuración del comercio en FINORA, no en CSS.