# Erscheinungsbild anpassen Passen Sie Ihre mobile Integration mit der Appearance API an. # iOS > This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=ios. Das [mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) unterstützt die visuelle Anpassung, sodass Sie das Design Ihrer App anpassen können. Das Layout bleibt wie bisher, doch Sie können Farben, Schriftarten und mehr ändern, indem Sie die Eigenschaft [Erscheinungsbild](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV10appearanceAC10AppearanceVvp) Ihres [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html)-Objekts verwenden. 1. Starten Sie mit der Anpassung der [Schriftart](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-ios) 1. [Farben](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-ios) so anpassen, dass Sie zu Ihrer App passen 1. [Formen](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-ios) wie den Eckradius anpassen 1. Feinabstimmung [bestimmter Komponenten](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-ios) ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png) ```swift var configuration = PaymentSheet.Configuration() // The following code creates the appearance shown in the screenshot abovevar appearance = PaymentSheet.Appearance() appearance.font.base = UIFont(name: "AvenirNext-Regular", size: UIFont.systemFontSize)! appearance.cornerRadius = 12 appearance.shadow = .disabled appearance.borderWidth = 0.5 appearance.colors.background = .white appearance.colors.primary = UIColor(red: 36/255, green: 36/255, blue: 47/255, alpha: 1) appearance.colors.textSecondary = .black appearance.colors.componentPlaceholderText = UIColor(red: 115/255, green: 117/255, blue: 123/255, alpha: 1) appearance.colors.componentText = .black appearance.colors.componentBorder = .clear appearance.colors.componentDivider = UIColor(red: 195/255, green: 213/255, blue: 200/255, alpha: 1) appearance.colors.componentBackground = UIColor(red: 243/255, green: 248/255, blue: 250/247, alpha: 1) appearance.primaryButton.cornerRadius = 20 configuration.appearance = appearance let paymentSheet = PaymentSheet(/* ... */, configuration: configuration) ``` ## Schriftarten Passen Sie die Schriftart an, indem Sie [font.base](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV4baseSo6UIFontCvp) auf eine beliebige Variante Ihrer nutzerspezifischen Schriftart bei beliebiger Größe und Gewicht festlegen. Das mobile Payment Element verwendet die Schriftfamilie Ihrer benutzerdefinierten Schriftart, bestimmt jedoch Größen und Gewichte selbst. Um die Schrift größer oder kleiner zu machen, legen Sie [font.sizeScaleFactor](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV15sizeScaleFactor12CoreGraphics7CGFloatVvp) fest. Wir multiplizieren Schriftgrößen mit diesem Wert, bevor sie angezeigt werden. Dies ist nützlich, wenn Ihre individuelle Schriftart etwas größer oder kleiner als die Schriftart des Systems ist. ```swift var configuration = PaymentSheet.Configuration() configuration.appearance.font.base = UIFont(name: "CustomFont-Regular", size: UIFont.systemFontSize) configuration.appearance.font.sizeScaleFactor = 1.15 // Increase the size of all text by 1.15x ``` ## Farben Passen Sie die Farben im mobilen Payment Element an, indem Sie die in [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV) definierten Farbkategorien ändern. Jede Farbkategorie bestimmt die Farbe einer oder mehrerer Komponenten in der Nutzeroberfläche. [primary](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 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. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png) > Um den Dark Mode zu unterstützen, initialisieren Sie Ihre benutzerdefinierten UIColors mit [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init). ## Formen Neben Schriftarten und Farben können Sie auch den [Eckenradius](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV12cornerRadius12CoreGraphics7CGFloatVvp), die [Breite der Ränder](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV11borderWidth12CoreGraphics7CGFloatVvp) und die [Schattierung](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6shadowAE6ShadowVvp) anpassen, die innerhalb des mobilen Payment Element verwendet werden. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-shapes.ee37fc31111aa78f26af4045a3857468.png) ## 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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/PrimaryButton.html). Anpassungsoptionen für bestimmte Nutzeroberflächen-Komponenten haben Vorrang vor anderen Werten. Beispielsweise überschreibt `appearance.primaryButton.cornerRadius` den Wert von `appearance.cornerRadius`. > [Kontaktieren Sie uns](https://github.com/stripe/stripe-ios/issues/new/choose), wenn Sie der Meinung sind, dass wir weitere Anpassungsoptionen hinzufügen sollten. # Android > This is a Android for when platform is android. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=android. Das [mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) unterstützt die visuelle Anpassung, sodass Sie das Design Ihrer App anpassen können. Das Layout bleibt wie bisher, doch Sie können Farben, Schriftarten und mehr ändern, indem Sie Ihr [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html)-Objekt mit einem [Erscheinungsbild](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378)-Objekt erstellen. 1. Starten Sie mit der Anpassung der [Schriftart](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android) 1. [Farben](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android) so anpassen, dass Sie zu Ihrer App passen 1. [Formen](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android) wie den Eckradius anpassen 1. Feinabstimmung [bestimmter Komponenten](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-android) ![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-before-after-example.acf584a69eb99f47fe0b5ffab24818b8.png) ```kotlin // The following code creates the appearance shown in the screenshot aboveval 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) 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. Um die Textgröße zu erhöhen oder zu verringern, legen Sie [typography.sizeScaleFactor](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#1477076499%2FProperties%2F2002900378) fest. Stripe multipliziert Schriftgrößen mit diesem Wert, bevor sie angezeigt werden. Diese Einstellung ist nützlich, wenn Ihre nutzerdefinierte Schriftart etwas größer oder kleiner als die Systemschrift ist. ```kotlin 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.Builder("Example, Inc.") // … .appearance(appearance) .build() ``` ## Farben Passen Sie die Farben im mobilen Payment Element an, indem Sie die in [PaymentSheet.Colors](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html) definierten Farbkategorien ändern. Jede Farbkategorie bestimmt die Farbe einer oder mehrerer Komponenten in der Nutzeroberfläche. [primary](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html#1242160296%2FProperties%2F2002900378) 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. > Um den Dunkelmodus zu unterstützen, legen Sie [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) fest. Sie können den Dunkelmodus wirksam deaktivieren, indem Sie [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) auf den gleichen Wert wie [appearance.colorsLight](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#2092498352%2FProperties%2F2002900378) festlegen. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-colors.413c76aaf01a54c25478cb8d7532c7e7.png) ## Formen Neben der Anpassung von Schriftarten und Farben können Sie auch den [Eckradius](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#-1129752289%2FProperties%2F2002900378) und die [Rahmenbreite](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378) für das gesamte mobile Payment Element anpassen, indem Sie [appearance.shapes](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#-2108514638%2FProperties%2F2002900378) festlegen. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-shapes.800169ea6a81e0bfdbccbb18bfdf7121.png) ## 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html). Anpassungsoptionen für bestimmte Nutzeroberflächen-Komponenten haben Vorrang vor anderen Werten. Beispielsweise überschreibt `appearance.primaryButton.shapes.cornerRadius` den Wert von `appearance.shapes.cornerRadius`. > Wenn Sie Ideen für weitere Anpassungsmöglichkeiten haben, [teilen Sie uns dies mit](https://github.com/stripe/stripe-android/issues/new/choose). # React Native > This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=react-native. Das [mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=react-native) unterstützt die visuelle Anpassung, sodass Sie das Design Ihrer App anpassen können. Das Layout bleibt wie bisher, doch Sie können Farben, Schriftarten und mehr ändern, indem Sie den Parameter `Erscheinungsbild` beim Aufruf von [initPaymentSheet()](https://stripe.dev/stripe-react-native/api-reference/index.html#initPaymentSheet) verwenden. 1. Starten Sie mit der Anpassung der [Schriftart](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-react-native) 1. [Farben](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-react-native) so anpassen, dass Sie zu Ihrer App passen 1. [Formen](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-react-native) wie den Randradius anpassen 1. Feinabstimmung [bestimmter Komponenten](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-react-native) ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png) ```js // The following code creates the appearance shown in the screenshot aboveconst customAppearance = { font: { family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular', }, shapes: { borderRadius: 12, borderWidth: 0.5, }, primaryButton: { shapes: { borderRadius: 20, }, }, colors: { primary: '#fcfdff', background: '#ffffff', componentBackground: '#f3f8fa', componentBorder: '#f3f8fa', componentDivider: '#000000', primaryText: '#000000', secondaryText: '#000000', componentText: '#000000', placeholderText: '#73757b', }, }; const { error } = await initPaymentSheet({ ...appearance: customAppearance, }); ``` ## Schriftarten Passen Sie die Schriftart an, indem Sie eine [FontConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#FontConfig) an `font` übergeben und `family` festlegen. Unter iOS sollte der Wert von `family` dem „PostScript-Namen“ entsprechen, der im Font Book zu finden ist. Kopieren Sie auf Android die `.ttf`- oder `.otf`-Datei von `android/app/src/main/assets/font/` in `android/app/src/main/res/font/` und verwenden Sie den Namen der Schriftdatei (die ausschließlich alphanumerische Kleinbuchstaben enthält). Das Mobile Payment Element 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 `scale` 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. ```js ...const appearance: AppearanceParams = { font: { family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular', scale: 1.15, }, }, ``` ## Farben Passen Sie die Farben im mobilen Payment Element an, indem Sie die in [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV) definierten Farbkategorien ändern. Jede Farbkategorie bestimmt die Farbe einer oder mehrerer Komponenten in der Nutzeroberfläche. [primary](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 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. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png) > Um den Dark Mode zu unterstützen, initialisieren Sie Ihre benutzerdefinierten UIColors mit [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init). ## Formen Neben Schriftarten und Farben können Sie auch den [Randradius](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams), die [Randbreite](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams) und die [Schattierung](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ShadowConfig) innerhalb des mobilen Payment Element anpassen. ![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-shapes.a71c754a951ea02fff121f584953ba33.png) ## Spezielle UI-Komponenten In den vorherigen 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 [PrimaryButtonConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#PrimaryButtonConfig). Anpassungsoptionen für bestimmte Nutzeroberflächen-Komponenten haben Vorrang vor anderen Werten. Beispielsweise überschreibt `primaryButton.shapes.borderRadius` den Wert von `shapes.borderRadius`. > [Kontaktieren Sie uns](https://github.com/stripe/stripe-react-native/issues/new/choose), wenn Sie der Meinung sind, dass wir weitere Anpassungsoptionen hinzufügen sollten.