Le checkout de Ventrata propose deux modes de couleur de base - LIGHT (CLAIRE) (par défaut) et DARK (SOMBRE).

Pour choisir le mode de couleur de votre web checkout, utilisez l’attribut « defaultTheme » dans votre data-config.

Le mode LIGHT (CLAIR) est le mode par défaut. En ajoutant l’attribut "theme" à votre data-config, vous pouvez personnaliser la couleur des bordures des boutons, des éléments sélectionnés et de certaines icônes.

📒 REMARQUE

Définissez les couleurs au format HEX, comme #FFFFFF pour le blanc.

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

Pour changer ou spécifier le mode, ajoutez l’attribut "defaultTheme" à votre data-config.

LIGHT Mode (Mode CLAIR)

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

DARK Mode (Mode SOMBRE)

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

Paramètres complexes

Alors que pour une définition simple du thème, modifier la data-config suffit, pour une personnalisation plus avancée des couleurs, configurez des paramètres plus complexes pour chaque mode sous forme d’objet 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"
         }
     }
 }

Attribut	Description
`"defaultTheme"`	valeurs `"light"` ou `"dark"` uniquement
`"theme-color"`	la couleur de fond
`primary`	la couleur des bordures des boutons, des éléments sélectionnés et de certaines icônes
`"text-primary"`	la couleur des éléments clés du checkout, y compris les titres des produits et des unités, ainsi que les dates
`"text-secondary"`	la couleur des éléments secondaires, comme les descriptions des produits et des unités, ainsi que les prix
`"text-disabled"`	la couleur utilisée pour les dates épuisées ou les dates passées
`"gradient-A"`	la couleur composite utilisée pour les effets de survol / actif / focus d'un boutons
`"gradient-B"`	la couleur composite utilisée pour les effets de survol / actif / focus d'un boutons
`"backdropOpacity"`	si votre checkout apparaît en tant que pop-up, ce paramètre définit l’opacité de la page derrière le paiement (valeurs entre 0 et 1)

Comment définir les couleurs du checkout

Paramètres complexes