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 créant votre objet PaymentSheet.Configuration avec l’objet Appearance.

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 pointe
4. Ajuster des 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

Personnalisez la police en attribuant à typography.fontResId 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. 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.

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 du Mobile Payment Element en modifiant les catégories de couleurs définies dans PaymentSheet.Colors. 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 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.

Formes

En plus des polices et des couleurs, vous pouvez également personnaliser le rayon d’angle et la largeur de la bordure utilisés dans le Mobile Payment Element en définissant appearance.shapes.

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