Image de marque et thème
Valeurs par défaut du compte, sites autorisés à intégrer votre checkout 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 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 affiche votre image de marque dès le premier affichage, puis applique par-dessus les
valeurs transmises dans appearance.
L'image de marque demande un plan payant
Settings → Branding 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 Branding :
elle a sa propre page sur tous les plans, décrite ci-dessous.
Où le checkout peut être intégré
Settings → Checkout embedding contient les sites autorisés à intégrer votre checkout : jusqu'à 20
origines, chacune écrite https://domaine, avec un port facultatif et sans chemin. La page existe
sur tous les plans, Pay as you go compris, et la liste s'applique en live et en sandbox. Une fois la
liste remplie, le navigateur n'affiche votre checkout et vos champs de paiement que dans une page
servie depuis l'une de ces origines.
Le propriétaire, les membres autorisés à gérer les paramètres et le rôle Developer peuvent modifier la liste. L'enregistrer vous demande de confirmer votre identité, et la modification apparaît dans le journal d'audit de l'équipe.
Sur toute autre origine, le cadre reste vide : le navigateur le refuse avant que le checkout ne
démarre, donc ni onReady ni onLoadError ne se déclenchent. Ajoutez chaque origine qui monte le
checkout ou un champ, préproduction comprise, avant de remplir la liste.
Déclarez vos origines avant de passer en live
Déclarez les sites autorisés à intégrer votre checkout dans Settings → Checkout embedding avant d'encaisser en live. Tant que la liste est vide, le Dashboard affiche un rappel sur la vue d'ensemble des Settings, sur la page Checkout embedding et sur la page Branding.
L'objet theming de POST /payments n'a actuellement aucun effet
theming sur POST /payments ne change rien à ce que voit le payeur. Utilisez l'image de marque
du Dashboard pour les valeurs par défaut et appearance pour chaque intégration.
Ce que vous pouvez définir
Settings → Branding 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. Le retrait de cette mention n'est pas disponible aujourd'hui.
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,
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 |
| Rayon des champs, espacement interne, graisse des libellés | appearance.variables |
| Retirer la mention Wajub | Indisponible aujourd'hui |
| Une police web ou une image d'arrière-plan | Indisponible aujourd'hui |