Personnaliser l'apparence

Le Mobile Payment Element prend en charge la personnalisation visuelle, ce qui vous permet de l’adapter à la conception de votre application. La mise en page reste cohérente, mais vous pouvez modifier les couleurs, les polices et bien plus encore en incluant le paramètre appearance lorsque vous appelez initPaymentSheet().

1. Commencez par la personnalisation de la police
2. Personnalisez les couleurs pour qu’elles correspondent à votre application
3. Personnalisez des formes telles que le rayon de la bordure
4. Ajuster des 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

Personnalisez la police en transmettant une FontConfig à font et en définissant family. Sur iOS, la valeur de family doit correspondre au « nom PostScript » qui se trouve dans Font Book. Sur 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 polices (contenant uniquement des caractères alphanumériques minuscules). Le Mobile Payment Element utilise la famille de polices de votre police personnalisée, mais détermine lui-même la taille et la largeur de trait.

Pour augmenter ou diminuer la taille de l’ensemble du texte, définissez scale. Nous multiplions les tailles de police par cette valeur avant de les afficher. Ceci est utile si 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

Modifiez les catégories de couleurs définies dans Appearance.Colors pour personnaliser les couleurs du Mobile Payment Element. Chaque catégorie de couleur détermine la couleur d’au moins un des composants de l’interface utilisateur. Par exemple, primary définit la couleur du bouton Payer et des éléments sélectionnés, comme la case à cocher Enregistrer cette carte. Reportez-vous au diagramme ci-dessous pour voir certains des éléments de l’interface utilisateur associés à chaque catégorie de couleur.

Formes

Outre les polices et les couleurs, vous pouvez également personnaliser le rayon de la bordure, la largeur de la bordure et l’ombrage utilisés dans le Mobile Payment Element.

Composants spécifiques de l’interface utilisateur

Les sections précédentes décrivent les options de personnalisation qui affectent le Mobile Payment Element de manière générale, dans plusieurs composants de l’interface utilisateur. Nous proposons également des options de personnalisation particulières pour le bouton principal (par exemple, le bouton Payer). Reportez-vous à PrimaryButtonConfig pour obtenir la liste complète des options de personnalisation.

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