API Elements Appearance

Stripe Elements prend en charge la personnalisation visuelle, ce qui vous permet de respecter le design de votre site grâce à l’option appearance. La disposition de chaque Element reste la même, mais vous pouvez modifier les couleurs, les polices, les bordures, les marges intérieures et bien plus encore.

1. Commencez par choisir un thème.

Lancez-vous dès maintenant en choisissant le thème prédéfini qui s’accorde le mieux à votre site web.

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

Définissez les variables disponibles, telles que fontFamily et colorPrimary, pour personnaliser les composants apparaissant dans chaque Element.

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

Pour un contrôle complet, spécifiez des propriétés CSS personnalisées pour les composants individuels figurant dans l’Element.

Thèmes

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

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

Variables

Définissez des variables pour personnaliser l’apparence de nombreux composants apparaissant 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
  }
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

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
    }
  };

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

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, les pseudo-classes et les pseudo-éléments pris en charge pour chaque classe. Par exemple, les sélecteurs suivants sont 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 parent-enfant 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, pseudo-classes et pseudo-éléments correspondants.

Onglets

Entrées de formulaire - Étiquettes supérieures

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

Entrées de formulaire - Étiquettes flottantes

Bloquer

Saisie de code

Checkbox

Liste déroulante

Bouton bascule

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

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. Pour contrôler la taille relative de .RadioIconInner, utilisez la propriété r (radius)..RadioIconOuter et.RadioIconInner sont des éléments SVG, qui peuvent être stylisés à l’aide des 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.

Vous pouvez les personnaliser en les ajoutant à l’objet Appearance :

const appearance = {
  labels: 'floating',

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

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