Image de marque et thème
Valeurs par défaut du compte et interaction avec l'apparence.
L'image de marque définit l'apparence de votre checkout avant l'exécution du moindre code. Vous la configurez une fois sur votre compte. Elle s'applique à la page hébergée, à la superposition et à chaque composant de champ de paiement.
appearance constitue l'autre partie, présentée dans Apparence.
Cette page traite du côté serveur.
Emplacement de la configuration
Dans le Dashboard, sous Paramètres puis Image de marque. Aucune API ne permet de la configurer et vous ne devez rien transmettre au montage. Enregistrez-la une fois, chaque nouvelle session la contiendra.
L'image de marque demande un plan payant
Paramètres → Image de marque est disponible à partir du plan Growth. Sur Pay as you go, le checkout
et les champs de paiement gardent l'apparence par défaut, et appearance est le seul moyen de les
styliser. La liste des sites autorisés à intégrer votre checkout ne fait pas partie de la page Image de marque :
elle a sa propre page sur tous les plans, décrite dans
Sessions et sécurité.
Ce que vous pouvez définir
Paramètres → Image de marque couvre :
| Réglage | Ce qu'il modifie |
|---|---|
| Logo | Le logo dans l'en-tête du checkout |
| Logo carré | Le logo dans les mises en page étroites |
| Icône | L'icône de l'onglet du checkout dans le navigateur |
| Couleurs | L'accent, l'arrière-plan, les boutons, les champs, le texte et les états de succès et d'erreur |
| Police | La police de tout le checkout, Inter par défaut |
| Arrondi des angles | L'arrondi des champs et des boutons, 8px par défaut |
| Design de page | Le design de la page hébergée |
| Langue par défaut | La langue dans laquelle le checkout s'ouvre |
| Domaine personnalisé | Votre propre domaine pour la page hébergée |
Le design de page n'est pas le layout du SDK
Le design de page choisit le design de la page hébergée. L'option layout du SDK choisit la
disposition des moyens de paiement : classic, compact, tabs ou accordion. Ces options
sont indépendantes. La configuration de l'une n'affecte jamais l'autre.
La mention Wajub
Sans logo, sans couleur principale et sans nom d'entreprise, le checkout affiche la marque Wajub. Ajoutez l'un de ces éléments et le checkout affiche votre marque, avec une petite mention Wajub. Cette mention ne peut pas être retirée.
Ordre de priorité
Trois couches sont résolues dans cet ordre.
Dashboard branding your account's default, on every session
↓
appearance at mount this one embed
↓
instance.update() this one embed, after it is runningLes clés client se fusionnent avec l'image de marque du Dashboard au lieu de la remplacer.
primaryColor modifie donc l'accent sans toucher au logo, à la police ni au rayon.
locale et layout transmis au montage remplacent aussi les valeurs par défaut de la session, et
update() les modifie ensuite, comme le décrit
Apparence.
Choisir une couche
| Objectif | Couche |
|---|---|
| La même apparence sur chaque checkout | Image de marque du Dashboard |
| Une marque différente par marchand sur Sync | Image de marque du Dashboard propre à chaque compte |
| Un bouton de mode sombre sur votre site | appearance.colorScheme avec update() |
| Une campagne sur une page | appearance lors de ce montage |
| Rayon des champs | appearance.variables.borderRadius |
| Espacement interne des champs, graisse des libellés | appearance.rules, sur .Input et .Label |
| Retirer la mention Wajub | Non disponible |
| Une police Google Fonts, comme Poppins ou DM Sans | appearance.variables.fontFamily |
| Votre propre police web, ou une image d'arrière-plan | Non disponible |