El checkout de Ventrata ofrece dos modos básicos de color - LIGHT (CLARO) (predeterminado) y DARK (OSCURO).

Para elegir el modo de color de tu web checkout, usa el atributo "defaultTheme" en tu data-config.

El modo LIGHT (CLARO) es el modo predeterminado. Al agregar el atributo "theme" a tu data-config, puedes personalizar el color de los bordes de los botones, los elementos seleccionados y ciertos iconos.

📒 NOTA

Define los colores en formato HEX, como #FFFFFF para blanco.

data-config='{"productID":"XXX", "apiKey":"XXX", "theme": "#6FD316" }’

Para cambiar o especificar el modo, agrega el atributo "defaultTheme" a tu data-config.

LIGHT Mode (Modo CLARO)

data-config='{"productID":"XXX", "apiKey":"XXX", "defaultTheme": "light" }’

DARK Mode (Modo OSCURO)

data-config='{"productID":"XXX", "apiKey":"XXX", "defaultTheme": "dark" }’

Configuraciones complejas

Mientras que para una definición simple del tema, modificar la data-config es suficiente, para una personalización de color más avanzada, configura ajustes más complejos para cada modo como un objeto JavaScript:

{    
    "defaultTheme": "dark",     
    "theme": {
         "light": {
             "theme-color": "#ffffff",
             "primary": "#F11D46",
             "text-primary": "#000000",
             "text-secondary": "#767676",
             "text-disabled": "#C2C2C2",
             "gradient-A": "#A41256",
             "gradient-B": "#5E0864",
             "backdropOpacity": "0.25"
         },
         "dark": {
             "theme-color": "#1c1c1c",
             "primary": "#f84b4b",
             "text-primary": "#ffffff",
             "text-secondary": "#D1D1D1",
             "text-disabled": "#6b6b6b",
             "gradient-A": "#c4005d",
             "gradient-B": "#8c1a8c",
             "backdropOpacity": "0.75"
         }
     }
 }

Atributo	Descripción
`"defaultTheme"`	solo valores `"light"` o `"dark"` permitidos
`"theme-color"`	el color de fondo
`"primary"`	el color de los bordes de los botones, los elementos seleccionados y ciertos iconos
`"text-primary"`	el color de los elementos clave del checkout, incluidos los títulos de productos y unidades, y las fechas
`"text-secondary"`	el color de los elementos secundarios, como las descripciones de productos y unidades, y los precios
`"text-disabled"`	el color usado para fechas agotadas o fechas pasadas
`"gradient-A"`	el color compuesto para los efectos de hover/activo/focus en un botón
`"gradient-B"`	el color compuesto para los efectos de hover/activo/focus en un botón
`"backdropOpacity"`	si tu checkout aparece como un pop-up, esta configuración define la opacidad de la página detrás del pago (valores entre 0 y 1)

Cómo configurar los colores del checkout

Configuraciones complejas