Saltar al contenido

Theming

API v0.1.0
En esta página

Personaliza el look del widget sin romper el aislamiento. Todo dentro de Shadow DOM — el widget se ve igual sin importar el CSS del sitio host.

Appearance

typescript
rutiva.elements({
  clientSecret,
  appearance: {
    theme: "dark",
    primaryColor: "#1A56DB",
    borderRadius: "12px",
    fontFamily: "Inter, system-ui, sans-serif",
  },
});
  • theme: "light", "dark" o "auto". Default "auto".
  • primaryColor: cualquier color CSS válido. Default #0F172A.
  • borderRadius: ej. "12px". Default "8px".
  • fontFamily: stack de fuentes CSS. Default fuentes del sistema.

Shadow DOM

Todo va dentro de Shadow DOM. Cero CSS leak al sitio host. Tu sitio puede tener cualquier reset/framework — el widget se ve igual.

i18n

Locales incluidos: es-VE (default), es, en.

typescript
Rutiva({ publishableKey, locale: "en" });
// o por widget
rutiva.elements({ clientSecret, locale: "en" });