Apparence

Un seul objet appearance stylise tout : le checkout hébergé, la superposition et chaque composant de champ de paiement. Il comprend trois couches appliquées dans cet ordre.

1. Un préréglage theme, si vous en indiquez un.
2. Les clés de premier niveau, comme primaryColor.
3. variables et rules, pour un contrôle par jeton et par sélecteur.

Chaque couche remplace la précédente. Un préréglage constitue donc un point de départ, pas une contrainte.

await mount('#checkout', {
  sessionId,
  appearance: {
    theme: 'stripe',
    primaryColor: '#6366f1',
    colorScheme: 'auto',
    labels: 'floating',
    variables: { colorText: '#0f172a', fontSizeBase: '16px' },
    rules: { '.Input': { borderRadius: '8px' } },
  },
});

Préréglages

theme place un ensemble de clés de premier niveau sous les vôtres. Voici leurs valeurs exactes.

stripe correspond à l'apparence par défaut d'un checkout Wajub. L'indiquer ne change donc rien, sauf si vous remplacez également certaines de ses valeurs.

Clés de premier niveau

Cette couche fournit les raccourcis. Chaque valeur est une simple chaîne CSS.

Variables

Cette couche concerne les jetons. Chaque clé correspond à une propriété CSS personnalisée sur l'élément racine du checkout. Elle atteint ainsi chaque composant qui lit ce jeton, pas une seule surface.

Seules ces seize clés sont acceptées. Toute autre clé est ignorée lors de l'envoi.

appearance: {
  variables: {
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSizeBase: '15px',
    fontWeightMedium: '600',
    spacingUnit: '4px',
  },
}

Si une clé de premier niveau et le jeton correspondant sont tous deux définis, la première l'emporte. Choisissez une méthode et conservez-la.

Règles

Cette couche de sélecteurs est la plus limitée. Elle sert à modifier les champs du formulaire, pas à refaire le style du checkout.

Sélecteurs. Uniquement .Input et .Label, avec au maximum un seul parmi :hover, :focus, :focus-within, :disabled, ::placeholder, ::selection.

appearance: {
  rules: {
    '.Input': { borderRadius: '8px', borderColor: '#cbd5e1', padding: '12px' },
    '.Input:focus': { borderColor: '#6366f1', outline: '2px solid #c7d2fe' },
    '.Input::placeholder': { color: '#94a3b8' },
    '.Label': { fontWeight: '500', fontSize: '14px', letterSpacing: '0.01em' },
  },
}

Propriétés. Trente-deux propriétés en camelCase, converties en kebab-case à la réception.

Valeurs. Uniquement des chaînes non vides. Toute valeur contenant url(, expression(, @import, javascript:, < ou > est refusée. Les images d'arrière-plan et les importations de polices sont donc exclues.

Pour aller plus loin, utilisez custom_css dans l'image de marque de votre compte afin d'injecter une véritable feuille de style. Consultez Image de marque et thème.

Modifier l'apparence après le montage

Les deux types d'instances acceptent update(), mais leur comportement diffère.

let checkout;

await mount('#checkout', { sessionId, onReady: (instance) => (checkout = instance) });

darkToggle.onchange = (event) =>
  checkout.update({ appearance: { colorScheme: event.target.checked ? 'dark' : 'light' } });

Pour modifier la mise en page du checkout hébergé après le montage, remontez-le ou configurez la session.

Dans React, Vue et Svelte, les composants de champs surveillent appearance, locale et layout, puis appellent eux-mêmes update(). CheckoutEmbed ne le fait pas. Conservez l'instance reçue par onReady pour la piloter.

Locale

La locale parvient au checkout comme paramètre d'URL. Le checkout détermine les valeurs qu'il comprend.

await mount('#checkout', { sessionId, locale: 'fr' });
checkout.update({ locale: 'en' });

Valeurs prises en charge : fr, en, es, pt, ar. L'arabe s'affiche de droite à gauche. Si vous omettez locale, la valeur par défaut de la session s'applique. Elle provient de l'image de marque de votre compte ou de la préférence enregistrée du client.

Mise en page

Quatre façons de disposer les moyens de paiement.

await mount('#checkout', { sessionId, layout: 'tabs' });

Si vous l'omettez, la valeur par défaut de la session s'applique. Elle diffère du champ layout de l'image de marque du compte, qui choisit le design de la page hébergée elle-même.

Données transmises et méthode

L'apparence n'est pas injectée dans l'iframe. Elle est encodée dans son URL avant son chargement. C'est pourquoi elle est filtrée et reste fixée au montage pour tout élément non couvert par update().

Dans le checkout, colorScheme définit data-theme sur l'élément racine. auto le supprime pour laisser les préférences système décider. rules devient une feuille de style injectée unique.

Image de marque serveur ou apparence client

Ces deux options ne s'excluent pas. L'image de marque définit l'apparence par défaut de tous vos checkouts. appearance définit l'apparence actuelle de cette intégration précise.

L'apparence client se superpose à l'image de marque de la session dans l'iframe. Seules les valeurs que vous indiquez sont remplacées. La liste des champs côté serveur figure dans Image de marque et thème.