# 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 composant [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 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](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 personnaliser la [police](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-ios)
1. Personnaliser les [couleurs](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-ios) à l’image de votre application
1. Personnaliser les [formes](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-ios), comme l’angle des bordures
1. Ajuster les [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 de caractères

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, à la taille et l’épaisseur de votre choix. Le composant Payment Element pour mobile utilise la famille de police de votre police personnalisée, mais détermine les tailles et l’épaisseur lui-même.

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 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.

```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

Personnalisez les couleurs dans le composant Payment Element pour mobile en modifiant les catégories de couleur définies dans [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Chaque catégorie de couleur détermine la couleur d’un ou plusieurs 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 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.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

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

## Formes

En plus des polices et des couleurs, vous pouvez aussi personnaliser l’[angle des coins](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 composant Payment Element pour mobile.
![](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 générales disponibles pour le composant Payment Element, qui affectent de nombreux composants d’interface utilisateur différents. Nous proposons également des options de personnalisation spécifiques au bouton principal (par exemple, le bouton **Payer**). Référez-vous à la documentation sur [Appearance.PrimaryButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/PrimaryButton.html) 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, `appearance.primaryButton.cornerRadius` remplace la valeur de `appearance.cornerRadius`.

> [Contactez-nous](https://github.com/stripe/stripe-ios/issues/new/choose) si vous pensez que des options de personnalisation supplémentaires doivent être ajoutées.


# 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 composant [Payment Element mobile](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) 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 créant votre objet [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) 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 personnaliser la [police](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android)
1. Personnaliser les [couleurs](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android) à l’image de votre application
1. Personnaliser les [formes](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android), comme l’angle des bordures
1. Ajuster les [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 de caractères

Personnalisez la police en définissant [typography.fontResId](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) sur l’ID de ressource de votre police personnalisée. L’Element Payment pour mobile 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 [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 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 de l’Element Payment pour mobile en modifiant les catégories de couleur 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’au moins un des composants de l’interface utilisateur. Par exemple, [primary](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 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.

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

Outre les polices et les couleurs, vous pouvez également personnaliser l’[angle des coins](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 globales du Payment Element pour mobile, qui modifient plusiers 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 [Appearance.PrimaryButton](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html) 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, `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 composant [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 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()](https://stripe.dev/stripe-react-native/api-reference/index.html#initPaymentSheet).

1. Commencez par personnaliser la [police](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-react-native)
1. Personnaliser les [couleurs](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-react-native) à l’image de votre application
1. Personnaliser les [formes](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-react-native) comme l’angle des bordures
1. Ajuster les [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 de caractères

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`. Sous iOS, la valeur de `family` doit être le «&nbsp;nom PostScript&nbsp;» 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.

```js
 ...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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Chaque catégorie de couleur détermine la couleur d’un ou plusieurs 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 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.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

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

## Formes

En plus des polices et des couleurs, vous pouvez aussi personnaliser l’[angle des bordures](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams), la [largeur des bordures](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams) et l’[ombre](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ShadowConfig) utilisés dans l’Element Payment pour mobile.
![](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 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](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#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`.

> [Contactez-nous](https://github.com/stripe/stripe-react-native/issues/new/choose) si vous pensez que des options de personnalisation supplémentaires doivent être ajoutées.