Personnaliser l'apparence

const appearance = {
  theme: 'stripe',
};
stripe.initCheckout({
  fetchClientSecret,
  elementsOptions: {
    appearance,
  },
});

1. Commencez par choisir un thème.

Lancez-vous immédiatement en choisissant le thème préconfiguré qui ressemble le plus à votre site Web.

1. Personnaliser le thème à l’aide de variables .

Définissez des variables telles que fontFamily et colorPrimary pour personnaliser de manière globale les composants qui figurent dans chaque composant Element.

1. Si nécessaire, ajustez les composants et les états individuels à l’aide des règles .

Pour un contrôle complet, précisez les propriétés CSS personnalisées pour les composants individuels qui figurent dans le composant Element.

Thèmes

Commencez à personnaliser des Elements en sélectionnant l’un des thèmes suivants :

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

Variables

Définissez des variables pour personnaliser l’apparence de nombreux composants s’affichant dans chaque Element.

L’option variables fonctionne comme des variables CSS. Vous pouvez spécifier des valeurs CSS pour chaque variable et référencer d’autres variables avec la syntaxe var(--myVariable). Vous pouvez même inspecter le DOM résultant en utilisant l’explorateur DOM de votre navigateur.

const appearance = {
  theme: 'stripe',

  variables: {
    colorPrimary: '#0570de',
    colorBackground: '#ffffff',
    colorText: '#30313d',
    colorDanger: '#df1b41',
    fontFamily: 'Ideal Sans, system-ui, sans-serif',
    spacingUnit: '2px',
    borderRadius: '4px',
    // See all possible variables below
  }
};

Variables fréquemment utilisées

Règles

L’option rules associe des sélecteurs de type CSS à des propriétés CSS, ce qui permet une personnalisation approfondie des composants individuels. Après avoir défini votre theme et vos variables, utilisez des rules pour intégrer de manière harmonieuse des Elements à votre site.

const appearance = {
    rules: {
      '.Tab': {
        border: '1px solid #E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
      },

      '.Tab:hover': {
        color: 'var(--colorText)',
      },

      '.Tab--selected': {
        borderColor: '#E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
      },

      '.Input--invalid': {
        boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
      },

      // See all supported class names and selector syntax below
    }
  };

Toutes les règles

Le sélecteur d’une règle peut cibler n’importe quel nom de classe publique dans l’Element, ainsi que les états, pseudo-classes et pseudo-éléments pris en charge pour chaque classe. Voici quelques exemples de sélecteurs valides :

• .Tab, .Label, .Input
• .Tab:focus
• .Input--invalid, .Label--invalid
• .Input::placeholder

Les sélecteurs suivants ne sont pas valides :

• .p-SomePrivateClass, img, seuls les noms de classes publiques peuvent être ciblés
• .Tab .TabLabel, les relations ancêtre-descendants des sélecteurs ne sont pas prises en charge
• .Tab--invalid, la classe .Tab ne prend pas en charge l’état --invalid

Chaque nom de classe utilisé dans un sélecteur prend en charge une liste des propriétés CSS autorisées, que vous spécifiez à l’aide de la notation camel case (par exemple, boxShadow pour la propriété box-shadow).

Voici la liste complète des noms de classes pris en charge et des états, des pseudo-classes et des pseudo-éléments correspondants :

Onglets

Entrées de formulaire - Étiquettes supérieures

Assurez-vous de choisir une taille de police d’au moins 16px pour les champs de saisie sur mobile.

Entrées de formulaire - Étiquettes flottantes

Bloquer

Saisie de code

Case à cocher

Liste déroulante

Changer

Sélecteur

Assurez-vous que votre état .PickerItem actif se démarque des autres états.

À FAIRE Utilisez une couleur primaire, une graisse et/ou un contour visibles et très contrastés pour distinguer l’état actif que votre client a déjà sélectionné.	À NE PAS FAIRE N’utilisez pas deux options de même graisse ni des couleurs peu contrastées pour vos états .PickerItem, car il serait plus difficile de distinguer lequel est actif.

Menu

Accordéon

Composant Payment Method Messaging Element

Icône radio

Vous pouvez contrôler la taille globale de l’icône avec la propriété width sur .RadioIcon. Vous pouvez contrôler la taille relative de .RadioIconInner avec la propriété r (radius). .RadioIconOuter et .RadioIconInner sont des éléments SVG qui peuvent être stylisés avec les propriétés stroke et fill. Consultez la liste complète des propriétés CSS prises en charge ci-dessous.

const appearance = {
  rules: {
    '.RadioIcon': {
      width: '24px'
    },
    '.RadioIconOuter': {
      stroke: '#E0E6EB'
    },
    '.RadioIconInner': {
      r: '16'
    }
  }
};

Autres options de configuration

Outre les themes, les variables et les rules, nous proposons des options de configuration supplémentaires pour personnaliser l’apparence des Elements.

Ajoutez-les à l’objet Appearance pour les personnaliser :

const appearance = {
  labels: 'floating',

  // other configurations such as `theme`, `variables` and `rules`...
}

À l’heure actuelle, nous prenons en charge les options suivantes :