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. inherit peut placer le style de votre propre page sous les trois : voir Reprendre le style de votre page.

await mount('#checkout', {
  sessionId,
  appearance: {
    theme: 'flat',
    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.

light, dark, system et auto ne sont pas des préréglages. theme réglé sur l'une de ces valeurs, sans colorScheme, fixe le schéma de couleurs, system valant auto.

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é définit un jeton de design. Elle atteint ainsi chaque composant qui utilise ce jeton, pas une seule surface.

Seules ces seize clés sont acceptées. Toute autre clé reste sans effet.

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. .Input désigne la boîte d'un champ, sa bordure, son arrière-plan et ses angles, qui prend le focus avec son champ de saisie et se désactive avec lui. .Label désigne le libellé d'un champ. La color et la police d'une règle .Input s'appliquent aussi au texte saisi dans le champ.

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 et une propriétés, en camelCase.

Valeurs. Uniquement des chaînes non vides de 256 caractères au plus. Une valeur qui chargerait une ressource externe ou sortirait de sa déclaration CSS est refusée : les images d'arrière-plan et les importations de polices ne sont donc pas possibles. Les mêmes limites s'appliquent aux clés de premier niveau et à variables.

Reprendre le style de votre page

appearance.inherit donne à un champ de paiement ou à un checkout intégré le style de votre propre formulaire : sa police, les couleurs de ses textes et de ses champs, ses arrondis, sa couleur d'accent et son fond.

factory.create('card', { appearance: { inherit: true, labels: 'floating' } }).mount('#card-fields');

factory.create('mobileMoney', {
  appearance: {
    inherit: {
      input: '#billing_email',
      label: 'label[for=billing_email]',
      button: '#place-order',
      background: '.checkout-box',
    },
  },
});

inherit: true cherche votre formulaire près du conteneur. S'il choisit les mauvais éléments, désignez-les dans un InheritSource, par des sélecteurs CSS ou par les éléments eux-mêmes. Ceux que vous ne donnez pas sont toujours cherchés.

• Vos clés l'emportent. Toute clé que vous donnez, et toute clé que fixe votre préréglage theme, l'emporte sur ce qui est repris de la page.
• Le schéma suit votre fond, clair ou sombre, sauf si vous donnez colorScheme ou un préréglage sombre comme night.
• Ce qui est inutilisable est laissé de côté, comme une couleur qui ne se lirait pas sur le fond. inherit ne lève jamais d'erreur.
• La lecture a lieu au montage, puis à chaque update({ appearance }). La superposition de open() n'a pas de conteneur : elle cherche dans toute la page.

Pour voir ce qui serait repris, ou l'ajuster avant de le transmettre vous-même, appelez wajub.appearanceFrom(container, source?).

const look = wajub.appearanceFrom('#card-fields'); // {} quand il n'y a rien à lire

factory
  .create('card', { appearance: { ...look, variables: { ...look.variables, fontSizeBase: '16px' } } })
  .mount('#card-fields');

appearanceFrom() renvoie {} quand il n'y a rien à lire et ne lève jamais d'erreur. Le client Wajub() l'a aussi, et @wajub/js l'exporte en fonction asynchrone, qui renvoie null sur le serveur.

Modifier l'apparence après le montage

Ce que vous transmettez au montage est fixé au chargement du checkout. update() modifie ce que couvre le tableau ci-dessous, et tout le reste demande un nouveau montage. Les deux types d'instances acceptent update().

let checkout;

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

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

update({ appearance }) fusionne ce que vous donnez avec ce que le checkout ou le champ a déjà. Les clés données changent, les autres restent. Une clé donnée à undefined ou null est effacée. appearance: undefined ou null efface toute l'apparence : le checkout ou le champ reprend l'image de marque de votre Dashboard Wajub, et son prochain mount() part sans elle.

card.update({ appearance: { borderRadius: '16px' } }); // les autres clés restent
card.update({ appearance: { primaryColor: undefined } }); // efface cette clé
card.update({ appearance: undefined }); // retour à l'image de marque du Dashboard

Avec inherit, chaque update({ appearance }) relit la page, et effacer inherit efface aussi ce qu'il avait lu. update({ appearance: {} }) ne change aucune clé.

Un nouveau préréglage theme remplace le précédent et tout ce qu'il apportait : update({ appearance: { theme: 'flat' } }) après night ne garde aucune des couleurs de night.

Dans React, Vue, Svelte et Angular, modifiez les props (les inputs, en Angular) plutôt que d'appeler update(). Un composant de champ applique en direct une nouvelle appearance, locale, layout ou frameTitle, et le checkout intégré fait de même pour appearance, locale et layout. La prop appearance remplace toute l'apparence : une clé que vous en retirez est effacée, et une appearance devenue undefined ou {} l'efface entièrement.

Locale

La locale transmise au montage est la langue dans laquelle le checkout ou le champ s'ouvre. Elle l'emporte sur la langue choisie par le payeur lors d'une visite précédente et sur la valeur par défaut de la session. Un code absent de la liste ci-dessous est ignoré. update({ locale }) la modifie ensuite, et le payeur peut toujours changer de langue dans le checkout hébergé.

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, le checkout s'ouvre dans la dernière langue choisie par le payeur dans ce navigateur, sinon dans la valeur par défaut de la session. Celle-ci 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 design de page choisi dans Paramètres → Image de marque, qui définit le design de la page hébergée elle-même.

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 de cette intégration précise.

L'apparence client se superpose à l'image de marque définie dans le Dashboard. Seules les valeurs que vous indiquez sont remplacées. Ce que vous pouvez définir dans le Dashboard figure dans Image de marque et thème.