# Personnaliser l'apparence

Personnalisez votre intégration mobile avec l'API Appearance.

# iOS

> This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=ios.

Le [Payment Element mobile](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) prend en charge la personnalisation visuelle, ce qui vous permet de l’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 à l’aide de la [ propriété d’apparence](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV10appearanceAC10AppearanceVvp) de votre objet [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html).

1. Commencez par la personnalisation de la [police](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-ios)
1. Personnalisez les [couleurs](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-ios) pour qu’elles correspondent à votre application
1. Personnalisez des [formes](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-ios) telles que le rayon de pointe
1. Ajuster des [composants spécifiques](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-ios)
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png)

```swift
var configuration = PaymentSheet.Configuration()
// The following code creates the appearance shown in the screenshot abovevar appearance = PaymentSheet.Appearance()
appearance.font.base = UIFont(name: "AvenirNext-Regular", size: UIFont.systemFontSize)!
appearance.cornerRadius = 12
appearance.shadow = .disabled
appearance.borderWidth = 0.5
appearance.colors.background = .white
appearance.colors.primary = UIColor(red: 36/255, green: 36/255, blue: 47/255, alpha: 1)
appearance.colors.textSecondary = .black
appearance.colors.componentPlaceholderText = UIColor(red: 115/255, green: 117/255, blue: 123/255, alpha: 1)
appearance.colors.componentText = .black
appearance.colors.componentBorder = .clear
appearance.colors.componentDivider = UIColor(red: 195/255, green: 213/255, blue: 200/255, alpha: 1)
appearance.colors.componentBackground = UIColor(red: 243/255, green: 248/255, blue: 250/247, alpha: 1)
appearance.primaryButton.cornerRadius = 20
configuration.appearance = appearance
let paymentSheet = PaymentSheet(/* ... */, configuration: configuration)
```

## Polices

Personnalisez la police en définissant [font.base](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV4baseSo6UIFontCvp) sur n’importe quelle variante de votre police personnalisée, quelles que soient la taille et la graisse. 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 du texte, définissez [font.sizeScaleFactor](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV15sizeScaleFactor12CoreGraphics7CGFloatVvp). 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.

```swift
var configuration = PaymentSheet.Configuration()
configuration.appearance.font.base = UIFont(name: "CustomFont-Regular", size: UIFont.systemFontSize)
configuration.appearance.font.sizeScaleFactor = 1.15 // Increase the size of all text by 1.15x
```

## Couleurs

Modifiez les catégories de couleurs définies dans [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV) 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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 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.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Pour prendre en charge le mode sombre, initialisez vos objets UIColors personnalisés avec [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Formes

Outre les polices et les couleurs, vous pouvez également personnaliser le [rayon d’angle](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV12cornerRadius12CoreGraphics7CGFloatVvp), la [largeur de la bordure](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV11borderWidth12CoreGraphics7CGFloatVvp) et l’[ombre](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6shadowAE6ShadowVvp) utilisés dans le Mobile Payment Element.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-shapes.ee37fc31111aa78f26af4045a3857468.png)

## Composants spécifiques de l’interface utilisateur

Les sections ci-dessus 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 spécifiques au bouton principal (par exemple, le bouton **Payer**). Reportez-vous à la documentation [Appearance.PrimaryButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/PrimaryButton.html) 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, `appearance.primaryButton.cornerRadius` remplace la valeur de `appearance.cornerRadius`.

> [Contactez-nous](https://github.com/stripe/stripe-ios/issues/new/choose) si vous pensez que nous devons ajouter d’autres options de personnalisation.


# Android

> This is a Android for when platform is android. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=android.

Le [Payment Element mobile](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) prend en compte la personnalisation visuelle, ce qui vous permet de l’adapter au design de votre application. La mise en page reste cohérente, mais vous pouvez modifier les couleurs, les polices et plus encore en créant votre[PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) objet avec un objet [d’apparence](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378).

1. Commencez par la personnalisation de la [police](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android)
1. Personnalisez les [couleurs](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android) pour qu’elles correspondent à votre application
1. Personnalisez des [formes](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android) telles que le rayon de pointe
1. Ajuster des [composants spécifiques](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-android)
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-before-after-example.acf584a69eb99f47fe0b5ffab24818b8.png)

```kotlin
// The following code creates the appearance shown in the screenshot aboveval appearance = PaymentSheet.Appearance(
   colorsLight = PaymentSheet.Colors(
       primary = Color(red = 36, green = 36, blue = 47),
       surface = Color.White,
       component = Color(red = 243, green = 248, blue = 245),
       componentBorder = Color.Transparent,
       componentDivider = Color.Black,
       onComponent = Color.Black,
       subtitle = Color.Black,
       placeholderText = Color(red = 115, green = 117, blue = 123),
       onSurface = Color.Black,
       appBarIcon = Color.Black,
       error = Color.Red,
   ),
   shapes = PaymentSheet.Shapes(
       cornerRadiusDp = 12.0f,
       borderStrokeWidthDp = 0.5f
   ),
   typography = PaymentSheet.Typography.default.copy(
       fontResId = R.font.avenir_next
   ),
   primaryButton = PaymentSheet.PrimaryButton(
      shape = PaymentSheet.PrimaryButtonShape(
         cornerRadiusDp = 20f
      ),
   )
)

// ...

paymentSheet.presentWithPaymentIntent(
   clientSecret,
   PaymentSheet.Configuration(
       merchantDisplayName = merchantName,appearance = appearance
   )
)

```

## Polices

Personnalisez la police en attribuant à [typography.fontResId](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) l’ID de ressource de votre police personnalisée. Le Mobile Payment Element utilise l’ensemble des polices de votre police personnalisée, mais détermine lui-même la taille et l’épaisseur.

Pour augmenter ou diminuer la taille du texte, définissez [typography.sizeScaleFactor](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#1477076499%2FProperties%2F2002900378). Stripe multiplie les tailles de police par cette valeur avant de les afficher. Ce paramètre est utile si votre police personnalisée est légèrement plus grande ou plus petite que la police du système.

```kotlin
val appearance = PaymentSheet.Appearance(
    // …typography = PaymentSheet.Typography.default.copy(
        sizeScaleFactor = 1.15f, // Increase the size of all text by 1.15x
        fontResId = R.font.myFont,
    ),
)
val configuration = PaymentSheet.Configuration.Builder("Example, Inc.")
    // …
    .appearance(appearance)
    .build()
```

## Couleurs

Personnalisez les couleurs du Mobile Payment Element en modifiant les catégories de couleurs définies dans [PaymentSheet.Colors](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html). Chaque catégorie de couleur détermine la couleur d’un ou de plusieurs composants de l’interface utilisateur. Par exemple, [la catégorie principale](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html#1242160296%2FProperties%2F2002900378) définit la couleur du bouton **Payer** et des éléments sélectionnés, comme la case à cocher **Enregistrer cette carte**. Consultez le diagramme ci-dessous pour voir certains des éléments de l’interface utilisateur associés à chaque catégorie de couleur.

> Pour prendre en charge le mode sombre, définissez [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378). Vous pouvez désactiver efficacement le mode sombre en définissant [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) sur la même valeur que [appearance.colorsLight](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#2092498352%2FProperties%2F2002900378)
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-colors.413c76aaf01a54c25478cb8d7532c7e7.png)

## Formes

En plus des polices et des couleurs, vous pouvez également personnaliser le [rayon d’angle](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#-1129752289%2FProperties%2F2002900378) et la [largeur de la bordure](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378) utilisés dans le Mobile Payment Element en définissant [appearance.shapes](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#-2108514638%2FProperties%2F2002900378).
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-shapes.800169ea6a81e0bfdbccbb18bfdf7121.png)

## Composants spécifiques de l’interface utilisateur

Les sections ci-dessus 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 spécifiques pour le bouton principal (par exemple, le bouton **Payer**). Consultez la rubrique [Appearance.PrimaryButton](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html) 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, `appearance.primaryButton.shapes.cornerRadius` remplace la valeur de `appearance.shapes.cornerRadius`.

> Si vous avez des idées d’options de personnalisation supplémentaires, n’hésitez pas à [nous contacter](https://github.com/stripe/stripe-android/issues/new/choose).


# React Native

> This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=react-native.

Le [Payment Element mobile](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=react-native) prend en charge la personnalisation visuelle, ce qui vous permet de l’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 incluant le paramètre`d’apparence` lorsque vous invoquez[initPaymentSheet()](https://stripe.dev/stripe-react-native/api-reference/index.html#initPaymentSheet).

1. Commencez par la personnalisation de la [police](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-react-native)
1. Personnalisez les [couleurs](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-react-native) pour qu’elles correspondent à votre application
1. Personnalisez des [formes](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-react-native) telles que le rayon de la bordure
1. Ajuster des [composants spécifiques](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-react-native)
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png)

```js
// The following code creates the appearance shown in the screenshot aboveconst 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](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#FontConfig) à `font` et en définissant `family`. Sur iOS, la valeur de `family` doit correspondre au «&nbsp;nom PostScript&nbsp;» 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.

```js
 ...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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV) 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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 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.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Pour prendre en charge le mode sombre, initialisez vos objets UIColors personnalisés avec [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Formes

Outre les polices et les couleurs, vous pouvez également personnaliser le [rayon de la bordure](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams), [la largeur de la bordure](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams) et [l’ombrage](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ShadowConfig) utilisés dans le Mobile Payment Element.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-shapes.a71c754a951ea02fff121f584953ba33.png)

## 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](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#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`.

> [Contactez-nous](https://github.com/stripe/stripe-react-native/issues/new/choose) si vous pensez que nous devons ajouter d’autres options de personnalisation.