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", // only "light" and "dark"
     	theme: {
            light: { 
    	    "theme-color": "#ffffff", // color of the background 
    	    primary: "#F11D46", 
    	    "text-primary": "#000000", 
    	    "text-secondary": "#767676", 
    	    "text-disabled": "#C2C2C2", 
    	    "gradient-A": "#A41256", // composite color for hover/active/focus effects on button 
    	    "gradient-B": "#5E0864",  // composite color for hover/active/focus effects on button
      	    backdropOpacity: "0.25", // adjust backdrop opacity (values between 0-1)
     	  },
     	    dark: {
     	    "theme-color": "#1c1c1c", // color of the background     	    primary: "#f84b4b", 
    	    "text-primary": "#ffffff",
     	    "text-secondary": "#D1D1D1",
     	    "text-disabled": "#6b6b6b",
     	    "gradient-A": "#c4005d", // composite color for hover/active/focus effects on button
     	    "gradient-B": "#8c1a8c", // composite color for hover/active/focus effects on button
     	    backdropOpacity: "0.75", // adjust backdrop opacity (values between 0-1) 
    	    }, 
    	}
   }

Atributo	Descripción
`"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 inicial para el efecto de degradado en los botones al pasar el cursor
`"gradient-B"`	el color final para el efecto de degradado en los botones al pasar el cursor
`"backdropOpacity"`	si tu checkout aparece como un pop-up, esta configuración define la opacidad de la página detrás del pago

Cómo configurar los colores del checkout

Configuraciones complejas