Personnaliser l'apparence

Le Payment Element pour mobile prend en charge la personnalisation visuelle, ce qui vous permet de l’intégrer parfaitement à votre application. La disposition reste la même, mais vous pouvez modifier les couleurs, les polices et même plus en créant votre propre objet PaymentSheet.Configuration avec un objet appearance.

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

// ...

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

Polices de caractères

Personnalisez la police en définissant typography.fontResId 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.

To increase or decrease the size of text, set typography.sizeScaleFactor. Stripe multiplies font sizes by this value before displaying them. This setting is useful if your custom font is slightly larger or smaller than the system font.

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(
    // …
    appearance = appearance
)

Couleurs

Personnalisez les couleurs de l’Element Payment pour mobile en modifiant les catégories de couleur définies dans PaymentSheet.Colors. 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. 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

In addition to customizing fonts and colors, you can also customize the corner radius and border width used throughout the mobile Payment Element by setting appearance.shapes.

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