API Elements Appearance
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
.
- Commencez par personnaliser la police
- Personnalisez les couleurs à l’image de votre application
- Personnalisez les formes, comme l’angle des bordures
- Ajustez 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
Personnalisez la police en définissant typography.fontResId
sur l’ID de ressource de votre police personnalisée. L’Element Payment sur mobile utilise la famille de police de votre police personnalisée, mais détermine les tailles et graisses lui-même.
Pour augmenter ou diminuer la taille du texte, définissez typography.sizeScaleFactor
. 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.
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.
Note
Pour prendre en charge le mode sombre, définissez l’attribut appearance.colorsDark
. Si vous ne prenez pas en charge le mode sombre, définissez appearance.colorsDark
sur la même valeur que appearance.colorsLight
Formes
En plus des polices et des couleurs, vous pouvez aussi personnaliser l’angle des coins et la largeur de la bordure utilisés dans l’Element Payment pour mobile en définissant appearance.shapes
.
Composants d'interface utilisateur spécifiques
Les sections ci-dessus décrivent les options de personnalisation globales disponibles pour l’Element Payment pour mobile via l’utilisation de nombreux composants d’interface utilisateur. Nous proposons également des options de personnalisation spécifiques au bouton primaire (par exemple, le bouton Payer). Référez-vous à la page consacrée à Appearance.PrimaryButton pour découvrir la liste complète des options de personnalisation.
Les options de personnalisation pour les composants d’interface utilisateur spécifiques priment sur d’autres valeurs. Par exemple, appearance.primaryButton.shapes.cornerRadius
remplace la valeur de appearance.shapes.cornerRadius
.
Note
Contactez-nous si vous pensez que des options de personnalisation supplémentaires doivent être ajoutées.