Elements Appearance API
Das mobile Payment Element unterstützt die visuelle Anpassung, sodass Sie das Design Ihrer App personalisieren können. Das Layout bleibt gleich, aber Sie können Farben, Schriftarten und mehr ändern, indem Sie Ihr PaymentSheet.Configuration
-Objekt mit einem appearance
-Objekt erstellen.
- Starten Sie mit der Anpassung der Schriftart
- Farben so anpassen, dass Sie zu Ihrer App passen
- Formen wie den Eckradius anpassen
- Feinabstimmung bestimmter Komponenten
// 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 ) )
Schriftarten
Passen Sie die Schriftart an, indem Sie typography.fontResId
auf die die nutzerspezifische Ressourcen-ID Ihrer Schriftart festlegen. Das mobile Zahlungselement verwendet die Schriftfamilie Ihrer nutzerdefinierten Schriftart, bestimmt Größen und Gewichte jedoch selbst.
Um die Textgröße zu erhöhen oder zu verringern, legen Sie typography.sizeScaleFactor
fest. Wir multiplizieren Schriftgrößen mit diesem Wert, bevor sie angezeigt werden. Dies ist nützlich, wenn Ihre angepasste Schriftart etwas größer oder kleiner als die Systemschrift ist.
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 )
Farben
Passen Sie die Farben im mobilen Payment Element an, indem Sie die in PaymentSheet.Colors
definierten Farbkategorien ändern. Jede Farbkategorie bestimmt die Farbe einer oder mehrerer Komponenten in der Nutzeroberfläche. primary
definiert zum Beispiel die Farbe der Schaltfläche Bezahlen und ausgewählte Elemente wie das Kontrollkästchen Diese Karte speichern. Im nachstehenden Diagramm finden Sie einige der Nutzeroberflächen-Elemente, die jeder Farbkategorie zugeordnet sind.
Notiz
Um den Dunkelmodus zu unterstützen, legen Sie appearance.colorsDark
fest. Wenn Sie den Dunkelmodus nicht unterstützen, legen Sie appearance.colorsDark
auf denselben Wert wie appearance.colorsLight
fest.
Formen
Neben Schriftarten und Farben können Sie auch den Eckradius und die Randbreite anpassen, die über das gesamte mobile Payment Element verwendet werden. Legen Sie dazu appearance.shapes
fest.
Spezielle UI-Komponenten
In den vorstehenden Abschnitten werden Anpassungsoptionen beschrieben, die sich umfassend über mehrere Nutzeroberflächen-Komponenten hinweg auf das mobile Payment Element auswirken. Wir bieten auch Anpassungsoptionen speziell für die primäre Schaltfläche (z. B. die Schaltfläche Bezahlen). Eine vollständige Liste der Anpassungsoptionen finden Sie unter Appearance.PrimaryButton.
Anpassungsoptionen für bestimmte Nutzeroberflächen-Komponenten haben Vorrang vor anderen Werten. Beispielsweise überschreibt appearance.primaryButton.shapes.cornerRadius
den Wert von appearance.shapes.cornerRadius
.
Notiz
Kontaktieren Sie uns, wenn Sie der Meinung sind, dass wir weitere Anpassungsoptionen hinzufügen sollten.