Personnaliser l'apparence

Le composant Payment Element mobile prend en charge la personnalisation visuelle, ce qui vous permet de vous adapter au design de votre application. La mise en page reste cohérente, mais vous pouvez modifier les couleurs, les polices et bien plus encore en utilisant la propriété d’apparence de votre objet InitPaymentSheet().

1. Commencez par personnaliser la police
2. Personnaliser les couleurs à l’image de votre application
3. Personnaliser les formes comme l’angle des bordures
4. Ajuster les composants spécifiques

// The following code creates the appearance shown in the screenshot above
const customAppearance = {
 font: {
   family:
     Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
 },
 shapes: {
   borderRadius: 12,
   borderWidth: 0.5,
 },
 primaryButton: {
   shapes: {
    borderRadius: 20,
   },
 },
 colors: {
   primary: '#fcfdff',
   background: '#ffffff',
   componentBackground: '#f3f8fa',
   componentBorder: '#f3f8fa',
   componentDivider: '#000000',
   primaryText: '#000000',
   secondaryText: '#000000',
   componentText: '#000000',
   placeholderText: '#73757b',
 },
};

const { error } = await initPaymentSheet({
 ...
 appearance: customAppearance,
});

Polices de caractères

Personnalisez la police en transmettant une FontConfig à font et en définissant family. Sous iOS, la valeur de family doit être le « nom PostScript » qui se trouve dans Font Book. Sous Android, copiez le fichier .ttf ou .otf de android/app/src/main/assets/font/<your-font> vers android/app/src/main/res/font/<your-font> et utilisez le nom du fichier de police (qui ne contient que des caractères alphanumériques en minuscules). Le Mobile Payment Element utilise la famille de police de votre police personnalisée, mais détermine les tailles et épaisseurs lui-même.

Pour augmenter ou diminuer la taille du texte, définissez scale. Nous multiplions les tailles de polices par cette valeur avant de les afficher. Ce paramètre est utile lorsque votre police personnalisée est légèrement plus grande ou plus petite que la police du système.

...
const appearance: AppearanceParams = {
   font: {
     family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
     scale: 1.15,
   },
 },

Couleurs

Personnalisez les couleurs dans le composant Payment Element pour mobile en modifiant les catégories de couleur définies dans Appearance.Colors. Chaque catégorie de couleur détermine la couleur d’un ou plusieurs composants de l’interface utilisateur. Par exemple, primary définit la couleur du bouton Payer et de certains autres éléments comme la case à cocher Enregistrer cette carte. Référez-vous au diagramme ci-dessous pour découvrir les éléments d’interface utilisateur associés à chaque catégorie de couleur.

Formes

En plus des polices et des couleurs, vous pouvez aussi personnaliser l’angle des bordures, la largeur des bordures et l’ombre utilisés dans l’Element Payment pour mobile.

Composants spécifiques de l’interface utilisateur

Les sections précédentes décrivent les options de personnalisation globales du Payment Element pour mobile, qui modifient plusieurs composants d’interface utilisateur. Nous proposons également des options de personnalisation spécifiques au bouton principal (par exemple, le bouton Payer). Référez-vous à la documentation sur PrimaryButtonConfig pour découvrir la liste complète des options de personnalisation.

Les options de personnalisation de composants d’interface utilisateur spécifiques priment sur les autres valeurs. Par exemple, primaryButton.shapes.borderRadius remplace la valeur de shapes.borderRadius.