Erscheinungsbild anpassen

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 object with an appearance-Objekt erstellen.

1. Starten Sie mit der Anpassung der Schriftart
2. Farben so anpassen, dass Sie zu Ihrer App passen
3. Formen wie den Eckradius anpassen
4. 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 individuelle Ressourcen-ID Ihrer Schriftart festlegen. Das mobile Payment Element verwendet die Schriftfamilie Ihrer nutzerdefinierten Schriftart, bestimmt Größen und Gewichte jedoch selbst.

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
)

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.

Formen

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.

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.