Image de marque et thème

Valeurs par défaut du compte, marque blanche, CSS personnalisé 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 arrive avec la session et 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 Settings puis Branding. Aucune API ne permet de la configurer et vous ne devez rien transmettre au montage. Enregistrez-la une fois, chaque nouvelle session la contiendra.

Le checkout lit cette configuration dans la session de paiement et la résout avant le premier affichage. Il applique ensuite par-dessus les valeurs transmises dans appearance.

L'objet theming de POST /payments n'a actuellement aucun effet

POST /payments accepte un tableau theming et l'enregistre dans la transaction. Un appel GET /payments/{id} le renvoie. Ni l'endpoint de session ni le checkout ne le lit. Il ne modifie donc rien pour le payeur. Utilisez l'image de marque du Dashboard pour les valeurs par défaut et appearance pour les remplacements propres à une intégration.

Contenu de la session

Voici les champs reçus par le checkout dans chaque session.

Champ	Valeur définie
`business_name`	Nom du marchand dans l'en-tête
`logo_url`	Logo dans l'en-tête
`logo_square_url`	Variante carrée utilisée dans les mises en page étroites
`icon_url`	Favicon de l'onglet du checkout
`custom_domain`	Votre propre domaine pour la page hébergée
`layout`	Design de la page hébergée, de `design1` à `design4`
`locale`	Langue par défaut de l'interface
`font`	Nom de la famille de polices, `Inter` par défaut
`border_radius`	Rayon par défaut des angles, `8px` par défaut
`primary_color`, `secondary_color`, `background_color`	Palette de base
`button_text_color`, `success_color`, `error_color`	Boutons et couleurs des états
`input_background_color`, `input_border_color`, `text_muted_color`	Champs du formulaire
`card.background_color`, `card.border_color`	Surface qui contient le formulaire
`shadow`, `overlay_intensity`	Élévation et arrière-plan de la superposition
`tab_active_bg`, `tab_active_text`, `tab_inactive_bg`, `tab_inactive_text`	Couleurs de la mise en page par onglets
`accordion_header_bg`, `accordion_body_bg`	Couleurs de la mise en page en accordéon
`step_active_bg`, `step_done_bg`, `step_inactive_bg`	Indicateur d'étape
`separator_color`	Séparateurs
`font_weight_heading`, `font_weight_body`	Graisses typographiques
`custom_css`	Feuille de style injectée dans le checkout
`white_label`	Masquage ou non de la mention Wajub

Deux éléments différents portent le nom layout

branding.layout choisit le design de la page hébergée, de design1 à design4. 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.

Marque blanche

Vous ne choisissez pas ce mode directement. Le checkout le déduit des informations renseignées.

Mode	Condition	Résultat
`wajub`	Aucun logo, aucune couleur principale, aucun nom d'entreprise	La marque Wajub est visible
`co_branded`	Au moins un de ces éléments est défini	Votre marque avec la mention Wajub
`full_white_label`	Marque blanche activée sur votre compte	Votre marque uniquement

Le simple ajout d'un logo suffit donc à quitter le mode par défaut. Le passage complet à full_white_label nécessite l'activation de l'option sur le compte, car ce mode retire Wajub d'une page de paiement à laquelle le payeur accorde sa confiance.

En mode full_white_label, l'interface de superposition reçoit showWajubBranding: false et le checkout retire la marque Wajub. Le badge de sécurité devient générique dans ce mode, ainsi qu'en mode wajub simple. Seul co_branded y affiche le nom Wajub.

CSS personnalisé

custom_css est une feuille de style brute injectée dans le document du checkout. C'est le seul moyen de dépasser les limites de appearance.rules, qui cible uniquement .Input et .Label.

Besoin	Solution
Rayon des champs, espacement interne, graisse des libellés	`appearance.rules`, qui reste dans votre codebase
Police web, image d'arrière-plan, modification de la mise en page	`custom_css`

Le compromis est important. custom_css se trouve dans le Dashboard, s'applique à chaque session et cible des noms de classes internes qui ne constituent pas un contrat public. Préférez appearance pour toutes les modifications qu'il permet.

Ordre de priorité

Quatre couches sont résolues dans cet ordre.

La dernière couche l'emporte

Dashboard branding        the account default, every session
  ↓
Session branding          resolved and sent when the checkout loads
  ↓
appearance at mount       this one embed
  ↓
instance.update()         this one embed, after it is running

Les clés client se fusionnent avec l'image de marque de la session 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, avec une exception déjà signalée dans Apparence : update({ layout }) n'atteint pas le checkout hébergé après le montage.

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
Retirer la marque Wajub	Marque blanche sur votre compte
Une police web	`custom_css`

Pages associées