# Personnaliser l'apparence

Personnalisez votre intégration dans l'application 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/embedded-mobile?platform=ios.

Le composant Payment Element prendre 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é [Appearance](https://github.com/stripe/stripe-ios/blob/c7c0cfa57411d39b8f26b205b35a0793e0998fe8/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentElementConfiguration.swift#L83) de votre objet [EmbeddedPaymentElement.Configuration](https://github.com/stripe/stripe-ios/blob/c7c0cfa57411d39b8f26b205b35a0793e0998fe8/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentElementConfiguration.swift#L12).

1. Personnaliser la [police](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#fonts-ios)
1. Personnaliser les [couleurs](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#colors-ios) à l’image de votre application
1. Personnaliser les [formes](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#shapes-ios), comme l’angle des bordures
1. Ajuster les [composants spécifiques](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#specific-ui-components-ios)
1. Custom l’apparence du composant Payment Element
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example-embedded.dfa435ab1fbb4da0c956d77426becb2f.png)

```swift
var configuration = EmbeddedPaymentElement.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 = 8
appearance.shadow = .disabled
appearance.borderWidth = 0
appearance.selectedBorderWidth = 2
appearance.colors.background = UIColor(red: 23/255, green: 47/255, blue: 86/255, alpha: 1)
appearance.colors.primary = UIColor(red: 199/255, green: 217/255, blue: 255/255, alpha: 1)
appearance.colors.text = .white
appearance.colors.textSecondary = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .7)
appearance.colors.componentText = .white
appearance.colors.componentPlaceholderText = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .5)
appearance.colors.componentBorder = .clear
appearance.colors.componentDivider = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .1)
appearance.colors.componentBackground = UIColor(red: 44/255, green: 73/255, blue: 119/255, alpha: 1)
appearance.colors.icon = .white
configuration.appearance = appearance
let embeddedPaymentElement = try await EmbeddedPaymentElement.create(/* ... */, 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 = EmbeddedPaymentElement.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-embedded.aebcb93e928785cd8cd4b084b0889ce8.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.

## Payment Element

Le composant Element Payment a les styles suivants : plat avec des cases d’option, plat avec des coches, plat avec divulgation et boutons flottants. Chaque style a ses propres options.

### Plan avec bouton radio
![Payment Element intégré de style défini par un plan avec bouton radio](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-radio.bd5528bd0c06c006ea3111116c2c1e0d.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithRadio
appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator
appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator
appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray
appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width
appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2
appearance.embeddedPaymentElement.row.flat.radio.selectedColor = .blue // Change color of radio button when selected to blue
appearance.embeddedPaymentElement.row.flat.radio.unselectedColor = .darkGray // Change color of radio button when unselected to darkGray

configuration.appearance = appearance
```

### Plan avec case à cocher
![Payment Element intégré de style défini par un plan avec case à cocher](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-checkmark.c3bab5964d4bd0ae582e2d0f571c1362.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithCheckmark
appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator
appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator
appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray
appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width
appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2
appearance.embeddedPaymentElement.row.flat.checkmark.color = .blue // Change color of the checkmark


configuration.appearance = appearance
```

### Appartement avec divulgation

Le style FlatWithDisclosure vous oblige à définir le comportement de sélection de ligne `immediateAction`. Une fois que le client a sélectionné un mode de paiement, déplacez-le vers un nouvel écran (par exemple, vers votre écran de paiement principal), car la ligne du mode de paiement sélectionné n’apparaîtra pas sélectionnée.
![Élément de paiement intégré stylisé à l’aide d’un plat avec divulgation](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-disclosure.8df97144e27a9a98f1eb15728b763db4.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()
// The flatWithDisclosure style requires the .immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
configuration.rowSelectionBehavior = .immediateAction(didSelectPaymentOption: myHandlingFunction)

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithDisclosure
appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator
appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator
appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray
appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width
appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2
appearance.embeddedPaymentElement.row.flat.disclosure.color = .black // Change color of the disclosure icon

configuration.appearance = appearance
```

### Bouton flottant
![Payment Element intégré de style défini par un bouton flottant](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-floating-button.f1fd16943b46a21fd31836ba899bd93a.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .floatingButton
appearance.embeddedPaymentElement.row.floating.spacing = 20 // Increase spacing
appearance.embeddedPaymentElement.row.additionalInsets = 10 // Increase row height

configuration.appearance = appearance
```

### Personnalisations courantes des rangées

Vous pouvez personnaliser les propriétés de ligne qui s’appliquent à tous les styles de ligne :

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.additionalInsets += 1 // Increase row height by 1 point
appearance.embeddedPaymentElement.row.paymentMethodIconLayoutMargins = .init(top: 0, leading: 10, bottom: 0, trailing: 10) // Custom margins for the payment method icon (for example, the Klarna logo)
appearance.embeddedPaymentElement.row.titleFont = UIFont.systemFont(ofSize: 16, weight: .medium) // Custom font for the row title (for example, "Klarna")
appearance.embeddedPaymentElement.row.subtitleFont = UIFont.systemFont(ofSize: 14, weight: .medium) // Custom font for the row subtitle (for example, "Buy now or pay later with Klarna")
```


# Android

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

Le composant Payment Element prendre 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 `EmbeddedPaymentElement.Configuration` avec un objet [Appearance](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378).

1. Personnaliser la [police](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#fonts-android)
1. Personnaliser les [couleurs](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#colors-android) à l’image de votre application
1. Personnaliser les [formes](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#shapes-android), comme l’angle des bordures
1. Ajuster les [composants spécifiques](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#specific-ui-components-android)
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-before-after-example-embedded.b22df0fed3d35c4cb58eed128d3511a2.png)

```kotlin
// The following code creates the appearance shown in the screenshot aboveimport androidx.compose.ui.graphics.Color

val 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
        ),
    ),
    embeddedAppearance = PaymentSheet.Appearance.Embedded(
        style = PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton(
            spacingDp = 20f,
            additionalInsetsDp = 10f
        )
    )
)

// ...

embeddedPaymentElement.configure(
    intentConfiguration = intentConfiguration,
    configuration = EmbeddedPaymentElement.Configuration.Builder(merchantName).appearance(appearance)
        .build()
)

```

## 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 = EmbeddedPaymentElement.Configuration(merchantName).Builder()
    .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-embedded.d484b1076a44aa65cf334d6d452edd7c.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).

## Payment Element

L’Element Payment a les styles suivants : plat avec des cases d’option, plat avec des coches, plat avec divulgation et boutons flottants. Chaque style a ses propres options.

### Plan avec cases d’option

Pour utiliser le plan avec le style des cases d’option, définissez les propriétés `FlatWithRadio` comme illustré dans l’exemple de code.
![Payment Element intégré de style défini par un plan avec cases d’option](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-flat-with-radio.c458c8cea3eb4421b1f99a212961f464.png)

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Colors(
    selectedColor = Color.Yellow.toArgb(), // Change color of radio button when selected to yellow
    unselectedColor = Color.DarkGray.toArgb(), // Change color of radio button when unselected to darkGray
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```

### Plan avec cases à cocher

Pour utiliser le plan avec le style des cases à cocher, définissez les propriétés `FlatWithCheckmark`, comme illustré dans l’exemple de code.
![Payment Element intégré de style défini par un plan avec cases à cocher](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-flat-with-checkmark.c6ed2d5af6660be462e7e39e3736eb87.png)

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Colors(
    checkmarkColor = Color.Blue.toArgb(), // Change color of the checkmark
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .checkmarkInsetDp(2f) // Inset the checkmark
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```

### Appartement avec divulgation

To use the flat with disclosure style, set the `FlatWithDisclosure` properties, as shown in the code example below.

Le style FlatWithDisclosure vous oblige à définir le comportement de sélection de ligne `immediateAction`. Une fois que le client a sélectionné un mode de paiement, déplacez-le vers un nouvel écran (par exemple, vers votre écran de paiement principal), car la ligne du mode de paiement sélectionné n’apparaîtra pas sélectionnée.
![Élément de paiement intégré stylisé à l’aide d’un plat avec divulgation](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-flat-with-disclosure.b6753b90204debcaa6b5607375ae7fc1.png)

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

// EmbeddedPaymentElement initialization

val embeddedBuilder = EmbeddedPaymentElement.Builder(
  ...,
)
  // The FlatWithDisclosure style requires the immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
  .rowSelectionBehavior(EmbeddedPaymentElement.RowSelectionBehavior.immediateAction { embeddedPaymentElement ->
    // Handle the customer tapping a payment method row here
  })

...

// Configuration

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Colors(
    disclosureColor = Color.Blue.toArgb(), // Change color of the disclosure
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()


val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
  .appearance(appearance)
  .build()
```

### Boutons flottants

Pour utiliser le style des boutons flottants, définissez les propriétés `FloatingButton`, comme illustré dans l’exemple de code.
![Payment Element intégré de style défini par un bouton flottant](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-floating-button.4cbe384dc61d18c8c3d053c3216e6f43.png)

```kotlin
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton.Builder()
        .additionalInsetsDp(10f) // Increase row height
        .spacingDp(20f) // Increase spacing
    )
    .build()


val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```

### Personnalisations courantes des rangées

Vous pouvez personnaliser les propriétés de ligne qui s’appliquent à tous les styles de ligne :

```kotlin
@OptIn(AppearanceAPIAdditionsPreview::class)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    // Custom margins for the payment method icon (for example, the Klarna logo)
    .paymentMethodIconMargins(
      PaymentSheet.Insets(
        horizontalDp = 10f,
        verticalDp = 5f
      )
    )
    // Custom font for the row title (for example, "Klarna")
    .titleFont(
      PaymentSheet.Typography.Font(
        fontFamily = R.font.custom_font,
        fontSizeSp = 20f,
        fontWeight = 50,
        letterSpacingSp = 8f
      )
    )
    // Custom font for the row subtitle (for example, "Buy now or pay later with Klarna")
    .titleFont(
      PaymentSheet.Typography.Font(
        fontFamily = R.font.custom_font,
        fontSizeSp = 14f,
        fontWeight = 50,
        letterSpacingSp = 8f
      )
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```


# 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/embedded-mobile?platform=react-native.

Le composant Payment Element prendre 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é [Appearance](https://github.com/stripe/stripe-react-native/blob/fcb661364030a44639a58fc378ed514093226c5c/src/types/EmbeddedPaymentElement.tsx#L132) de votre objet [EmbeddedPaymentElementConfiguration](https://github.com/stripe/stripe-react-native/blob/fcb661364030a44639a58fc378ed514093226c5c/src/types/EmbeddedPaymentElement.tsx#L98).

1. Personnaliser la [police de caractères](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#fonts-react-native)
1. Personnaliser les [couleurs](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#colors-react-native) à l’image de votre application
1. Personnaliser les [formes](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#shapes-react-native), comme l’angle des bordures
1. Ajuster les [composants spécifiques](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#specific-ui-components-react-native)
1. Custom l’apparence du composant Payment Element
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example-embedded.dfa435ab1fbb4da0c956d77426becb2f.png)

```js
// The following code creates the appearance shown in the screenshot aboveimport { Platform } from 'react-native';
import type { AppearanceParams, EmbeddedPaymentElementConfiguration } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  font: {
    family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
    scale: 1,
  },
  shapes: {
    borderRadius: 8,
    borderWidth: 0,
    shadow: {
      color: '#000000',
      opacity: 0,
      offset: { x: 0, y: 0 },
      blurRadius: 0,
    },
  },
  colors: {
    primary: '#C7D9FF',
    background: '#172F56',
    componentBackground: '#2C4977',
    componentBorder: '#00000000',
    componentDivider: '#1AFFFFFF',
    primaryText: '#FFFFFF',
    secondaryText: '#B3FFFFFF',
    componentText: '#FFFFFF',
    placeholderText: '#80FFFFFF',
    icon: '#FFFFFF',
  },
};

// Set the appearance property on your configuration
const config: EmbeddedPaymentElementConfiguration = {
  appearance: appearance,
};
```

## 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 du Mobile Payment Element en modifiant les catégories de couleurs définies dans [GlobalColorConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#GlobalColorConfig). 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 de certains autres éléments 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.

> Pour prendre en charge le mode sombre, transmettez les mappages des couleurs `light` et `dark` à [colors](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams).
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-colors.2e9b577269f6771c61c7a6e068eb8980.png)

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

## Payment Element

Le composant Element Payment a les styles suivants&nbsp;: plat avec des cases d’option, plat avec des coches, plat avec divulgation et boutons flottants. Chaque style a ses propres options.

### Plan avec bouton radio
![Payment Element intégré de style défini par un plan avec bouton radio](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-radio.bd5528bd0c06c006ea3111116c2c1e0d.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FlatWithRadio,
      additionalInsets: 10, // Increase row height
      flat: {
        bottomSeparatorEnabled: false, // Hide the bottom separator
        topSeparatorEnabled: false, // Hide the top separator
        separatorColor: 'gray', // Change the separator color to gray
        separatorInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Make separators full width
        separatorThickness: 2.0, // Increase separator thickness to 2
        radio: {
          selectedColor: 'blue', // Change color of radio button when selected to blue
          unselectedColor: 'darkgray', // Change color of radio button when unselected to darkGray
        },
      },
    },
  },
};
```

### Plan avec case à cocher
![Payment Element intégré de style défini par un plan avec case à cocher](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-checkmark.c3bab5964d4bd0ae582e2d0f571c1362.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FlatWithCheckmark,
      additionalInsets: 10, // Increase row height
      flat: {
        bottomSeparatorEnabled: false, // Hide the bottom separator
        topSeparatorEnabled: false, // Hide the top separator
        separatorColor: 'gray', // Change the separator color to gray
        separatorInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Make separators full width
        separatorThickness: 2.0, // Increase separator thickness to 2
        checkmark: {
          color: 'blue', // Change color of the checkmark
        },
      },
    },
  },
};
```

### Style plat avec icônes de divulgation
![Le composant Element de paiement intégré stylisé à l’aide d’une interface plate avec divulgation](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-disclosure.8df97144e27a9a98f1eb15728b763db4.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FlatWithDisclosure,
      additionalInsets: 10, // Increase row height
      flat: {
        bottomSeparatorEnabled: false, // Hide the bottom separator
        topSeparatorEnabled: false, // Hide the top separator
        separatorColor: 'gray', // Change the separator color to gray
        separatorInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Make separators full width
        separatorThickness: 2.0, // Increase separator thickness to 2
        disclosure: {
          color: 'black', // Change color of the disclosure
        },
      },
    },
  },
};
const newElementConfig: EmbeddedPaymentElementConfiguration = {
  appearance: appearance,
    // The FlatWithDisclosure style requires the immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
  rowSelectionBehavior: {
    type: 'immediateAction',
    onSelectPaymentOption: myHandlerFunction,
  },
};
```

### Bouton flottant
![Payment Element intégré de style défini par un bouton flottant](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-floating-button.f1fd16943b46a21fd31836ba899bd93a.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FloatingButton,
      additionalInsets: 10, // Increase row height
      floating: {
        spacing: 20, // Increase spacing
      },
    },
  },
};
```