# Erscheinungsbild anpassen

Passen Sie Ihre In-App-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/embedded-mobile?platform=ios.

Das eingebettete Zahlungs-Element unterstützt die visuelle Anpassung, sodass Sie das Design Ihrer App anpassen können. Das Layout bleibt konsistent, aber Sie können Farben, Schriftarten und mehr ändern, indem Sie die Eigenschaft [appearance](https://github.com/stripe/stripe-ios/blob/c7c0cfa57411d39b8f26b205b35a0793e0998fe8/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentElementConfiguration.swift#L83) Ihrer [EmbeddedPaymentElement.Configuration](https://github.com/stripe/stripe-ios/blob/c7c0cfa57411d39b8f26b205b35a0793e0998fe8/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentElementConfiguration.swift#L12)-Objekts verwenden.

1. [Schriftart](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#fonts-ios) anpassen
1. [Farben](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#colors-ios) so anpassen, dass Sie zu Ihrer App passen
1. [Formen](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#shapes-ios) wie den Eckradius anpassen
1. Feinabstimmung [bestimmter Komponenten](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#specific-ui-components-ios)
1. Anpassen des Aussehens und der Bedienung des Zahlungs-Elements
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example-embedded.dfa435ab1fbb4da0c956d77426becb2f.png)

```swift
var configuration = EmbeddedPaymentElement.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 = 8
appearance.shadow = .disabled
appearance.borderWidth = 0
appearance.selectedBorderWidth = 2
appearance.colors.background = UIColor(red: 23/255, green: 47/255, blue: 86/255, alpha: 1)
appearance.colors.primary = UIColor(red: 199/255, green: 217/255, blue: 255/255, alpha: 1)
appearance.colors.text = .white
appearance.colors.textSecondary = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .7)
appearance.colors.componentText = .white
appearance.colors.componentPlaceholderText = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .5)
appearance.colors.componentBorder = .clear
appearance.colors.componentDivider = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .1)
appearance.colors.componentBackground = UIColor(red: 44/255, green: 73/255, blue: 119/255, alpha: 1)
appearance.colors.icon = .white
configuration.appearance = appearance
let embeddedPaymentElement = try await EmbeddedPaymentElement.create(/* ... */, 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 = EmbeddedPaymentElement.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-embedded.aebcb93e928785cd8cd4b084b0889ce8.png)

## Spezielle Nutzeroberflächenkomponenten

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.

## Zahlungs-Element

Das Zahlungs-Element verfügt über die folgenden Designs: flach mit Optionsschaltflächen, flach mit Häkchen, flache Chevron-Schaltflächen und schwebende Schaltflächen. Jeder Stil verfügt über spezifische Optionen, die dem jeweiligen Stil entsprechen.

### Flach mit Optionsfeld
![Eingebettetes Zahlungselement, flach mit Optionsfeld](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-radio.bd5528bd0c06c006ea3111116c2c1e0d.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithRadio
appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator
appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator
appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray
appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width
appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2
appearance.embeddedPaymentElement.row.flat.radio.selectedColor = .blue // Change color of radio button when selected to blue
appearance.embeddedPaymentElement.row.flat.radio.unselectedColor = .darkGray // Change color of radio button when unselected to darkGray

configuration.appearance = appearance
```

### Flach mit Häkchen
![Eingebettetes Zahlungselement, flach mit Häkchen](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-checkmark.c3bab5964d4bd0ae582e2d0f571c1362.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithCheckmark
appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator
appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator
appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray
appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width
appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2
appearance.embeddedPaymentElement.row.flat.checkmark.color = .blue // Change color of the checkmark


configuration.appearance = appearance
```

### Flat with disclosure

Der Stil FlatWithDisclosure erfordert, dass Sie das Verhalten für die Zeilenauswahl `immediateAction` festlegen. Nachdem die Kundin/der Kunde eine Zahlungsmethode ausgewählt hat, sollten Sie sie/ihn auf einen neuen Bildschirm weiterleiten (zum Beispiel zurück zu Ihrem Haupt-Checkout-Bildschirm), da die Zeile der ausgewählten Zahlungsmethode nicht als ausgewählt angezeigt wird.
![Embedded Payment Element im Stil flat mit disclosure](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-disclosure.8df97144e27a9a98f1eb15728b763db4.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()
// The flatWithDisclosure style requires the .immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
configuration.rowSelectionBehavior = .immediateAction(didSelectPaymentOption: myHandlingFunction)

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithDisclosure
appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator
appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator
appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray
appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width
appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2
appearance.embeddedPaymentElement.row.flat.disclosure.color = .black // Change color of the disclosure icon

configuration.appearance = appearance
```

### „Schwebende Schaltfläche“
![Eingebettetes Zahlungselement, das mit einer schwebenden Schaltfläche gestaltet wird](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-floating-button.f1fd16943b46a21fd31836ba899bd93a.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .floatingButton
appearance.embeddedPaymentElement.row.floating.spacing = 20 // Increase spacing
appearance.embeddedPaymentElement.row.additionalInsets = 10 // Increase row height

configuration.appearance = appearance
```

### Häufige Zeilenanpassungen

Sie können Zeileneigenschaften anpassen, die für alle Zeilenstile gelten:

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.additionalInsets += 1 // Increase row height by 1 point
appearance.embeddedPaymentElement.row.paymentMethodIconLayoutMargins = .init(top: 0, leading: 10, bottom: 0, trailing: 10) // Custom margins for the payment method icon (for example, the Klarna logo)
appearance.embeddedPaymentElement.row.titleFont = UIFont.systemFont(ofSize: 16, weight: .medium) // Custom font for the row title (for example, "Klarna")
appearance.embeddedPaymentElement.row.subtitleFont = UIFont.systemFont(ofSize: 14, weight: .medium) // Custom font for the row subtitle (for example, "Buy now or pay later with Klarna")
```


# Android

> This is a Android for when platform is android. View the full page at https://docs.stripe.com/elements/appearance-api/embedded-mobile?platform=android.

Das Zahlungs-Element unterstützt die visuelle Anpassung, so dass Sie das Design Ihrer App nach Ihren Wünschen anpassen können. Das Layout bleibt konsistent, aber Sie können Farben, Schriftarten und mehr ändern, indem Sie Ihr `EmbeddedPaymentElement.Configuration`-Objekt mit einem [appearance](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378)-Objekt erstellen.

1. [Schriftart](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#fonts-android) anpassen
1. [Farben](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#colors-android) so anpassen, dass Sie zu Ihrer App passen
1. [Formen](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#shapes-android) wie den Eckradius anpassen
1. Feinabstimmung [bestimmter Komponenten](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#specific-ui-components-android)
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-before-after-example-embedded.b22df0fed3d35c4cb58eed128d3511a2.png)

```kotlin
// The following code creates the appearance shown in the screenshot aboveimport androidx.compose.ui.graphics.Color

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
        ),
    ),
    embeddedAppearance = PaymentSheet.Appearance.Embedded(
        style = PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton(
            spacingDp = 20f,
            additionalInsetsDp = 10f
        )
    )
)

// ...

embeddedPaymentElement.configure(
    intentConfiguration = intentConfiguration,
    configuration = EmbeddedPaymentElement.Configuration.Builder(merchantName).appearance(appearance)
        .build()
)

```

## 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 = EmbeddedPaymentElement.Configuration(merchantName).Builder()
    .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-embedded.d484b1076a44aa65cf334d6d452edd7c.png)

## Spezielle Nutzeroberflächenkomponenten

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

## Zahlungs-Element

Das Zahlungs-Element verfügt über die folgenden Designs: flach mit Optionsschaltflächen, flach mit Häkchen, flache Chevron-Schaltflächen und schwebende Schaltflächen. Jeder Stil hat seine eigenen Optionen.

### Flach mit Optionsfeldern

Um den Stil „Flach mit Optionsfeldern“ zu verwenden, legen Sie die Eigenschaften `FlatWithRadio` wie im Codebeispiel gezeigt fest.
![Eingebettetes Zahlungselement im Stil von „Flach mit Optionsfeldern“](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-flat-with-radio.c458c8cea3eb4421b1f99a212961f464.png)

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Colors(
    selectedColor = Color.Yellow.toArgb(), // Change color of radio button when selected to yellow
    unselectedColor = Color.DarkGray.toArgb(), // Change color of radio button when unselected to darkGray
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```

### Flach mit Häkchen

Um den Stil „Flach mit Häkchen“ zu verwenden, legen Sie die Eigenschaften `FlatWithCheckmark` fest, wie im Codebeispiel gezeigt.
![Eingebettetes Zahlungselement, flach mit Häkchen](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-flat-with-checkmark.c6ed2d5af6660be462e7e39e3736eb87.png)

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Colors(
    checkmarkColor = Color.Blue.toArgb(), // Change color of the checkmark
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .checkmarkInsetDp(2f) // Inset the checkmark
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```

### Flat with disclosure

Um den Stil FlatWithDisclosure zu verwenden, setzen Sie die Eigenschaften für `FlatWithDisclosure`, wie im folgenden Codebeispiel gezeigt.

Der Stil FlatWithDisclosure erfordert, dass Sie das Verhalten für die Zeilenauswahl `immediateAction` festlegen. Nachdem die Kundin/der Kunde eine Zahlungsmethode ausgewählt hat, sollten Sie sie/ihn auf einen neuen Bildschirm weiterleiten (zum Beispiel zurück zu Ihrem Haupt-Checkout-Bildschirm), da die Zeile der ausgewählten Zahlungsmethode nicht als ausgewählt angezeigt wird.
![Embedded Payment Element im Stil flat mit disclosure](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-flat-with-disclosure.b6753b90204debcaa6b5607375ae7fc1.png)

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

// EmbeddedPaymentElement initialization

val embeddedBuilder = EmbeddedPaymentElement.Builder(
  ...,
)
  // The FlatWithDisclosure style requires the immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
  .rowSelectionBehavior(EmbeddedPaymentElement.RowSelectionBehavior.immediateAction { embeddedPaymentElement ->
    // Handle the customer tapping a payment method row here
  })

...

// Configuration

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Colors(
    disclosureColor = Color.Blue.toArgb(), // Change color of the disclosure
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()


val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
  .appearance(appearance)
  .build()
```

### Schwebende Schaltflächen

Um den Stil für schwebende Schaltflächen zu verwenden, legen Sie die `FloatingButton`-Eigenschaften fest, wie im Codebeispiel gezeigt.
![Eingebettetes Zahlungselement, das mit einer schwebenden Schaltfläche gestaltet wird](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-floating-button.4cbe384dc61d18c8c3d053c3216e6f43.png)

```kotlin
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton.Builder()
        .additionalInsetsDp(10f) // Increase row height
        .spacingDp(20f) // Increase spacing
    )
    .build()


val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```

### Häufige Zeilenanpassungen

Sie können Zeileneigenschaften anpassen, die für alle Zeilenstile gelten:

```kotlin
@OptIn(AppearanceAPIAdditionsPreview::class)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    // Custom margins for the payment method icon (for example, the Klarna logo)
    .paymentMethodIconMargins(
      PaymentSheet.Insets(
        horizontalDp = 10f,
        verticalDp = 5f
      )
    )
    // Custom font for the row title (for example, "Klarna")
    .titleFont(
      PaymentSheet.Typography.Font(
        fontFamily = R.font.custom_font,
        fontSizeSp = 20f,
        fontWeight = 50,
        letterSpacingSp = 8f
      )
    )
    // Custom font for the row subtitle (for example, "Buy now or pay later with Klarna")
    .titleFont(
      PaymentSheet.Typography.Font(
        fontFamily = R.font.custom_font,
        fontSizeSp = 14f,
        fontWeight = 50,
        letterSpacingSp = 8f
      )
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```


# 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/embedded-mobile?platform=react-native.

Das Zahlungs-Element unterstützt die visuelle Anpassung, die es Ihnen ermöglicht, das Design Ihrer App anzupassen. Das Layout bleibt konsistent, aber Sie können Farben, Schriftarten und mehr ändern, indem Sie die Eigenschaft [appearance](https://github.com/stripe/stripe-react-native/blob/fcb661364030a44639a58fc378ed514093226c5c/src/types/EmbeddedPaymentElement.tsx#L132) auf Ihrem [EmbeddedPaymentElementConfiguration](https://github.com/stripe/stripe-react-native/blob/fcb661364030a44639a58fc378ed514093226c5c/src/types/EmbeddedPaymentElement.tsx#L98)-Objekt verwenden.

1. [Schriftart](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#fonts-react-native) anpassen
1. [Farben](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#colors-react-native) so anpassen, dass Sie zu Ihrer App passen
1. [Formen](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#shapes-react-native) wie den Eckradius anpassen
1. Feinabstimmung [bestimmter Komponenten](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#specific-ui-components-react-native)
1. Anpassen des Aussehens und der Bedienung des Zahlungs-Elements
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example-embedded.dfa435ab1fbb4da0c956d77426becb2f.png)

```js
// The following code creates the appearance shown in the screenshot aboveimport { Platform } from 'react-native';
import type { AppearanceParams, EmbeddedPaymentElementConfiguration } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  font: {
    family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
    scale: 1,
  },
  shapes: {
    borderRadius: 8,
    borderWidth: 0,
    shadow: {
      color: '#000000',
      opacity: 0,
      offset: { x: 0, y: 0 },
      blurRadius: 0,
    },
  },
  colors: {
    primary: '#C7D9FF',
    background: '#172F56',
    componentBackground: '#2C4977',
    componentBorder: '#00000000',
    componentDivider: '#1AFFFFFF',
    primaryText: '#FFFFFF',
    secondaryText: '#B3FFFFFF',
    componentText: '#FFFFFF',
    placeholderText: '#80FFFFFF',
    icon: '#FFFFFF',
  },
};

// Set the appearance property on your configuration
const config: EmbeddedPaymentElementConfiguration = {
  appearance: appearance,
};
```

## 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/<your-font>` in `android/app/src/main/res/font/<your-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 Mobile Payment Element an, indem Sie die in [GlobalColorConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#GlobalColorConfig) 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ächenelemente, die jeder Farbkategorie zugeordnet sind.

> Um den Dunkelmodus zu unterstützen, übergeben Sie Zuordnungen für die Farben `light` und `dark` an [colors](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams).
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-colors.2e9b577269f6771c61c7a6e068eb8980.png)

## 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 Nutzeroberflächenkomponenten

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.

## Zahlungs-Element

Das Zahlungs-Element verfügt über die folgenden Designs: flach mit Optionsschaltflächen, flach mit Häkchen, flache Chevron-Schaltflächen und schwebende Schaltflächen. Jeder Stil verfügt über spezifische Optionen, die dem jeweiligen Stil entsprechen.

### Flach mit Optionsfeld
![Eingebettetes Zahlungselement, flach mit Optionsfeld](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-radio.bd5528bd0c06c006ea3111116c2c1e0d.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FlatWithRadio,
      additionalInsets: 10, // Increase row height
      flat: {
        bottomSeparatorEnabled: false, // Hide the bottom separator
        topSeparatorEnabled: false, // Hide the top separator
        separatorColor: 'gray', // Change the separator color to gray
        separatorInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Make separators full width
        separatorThickness: 2.0, // Increase separator thickness to 2
        radio: {
          selectedColor: 'blue', // Change color of radio button when selected to blue
          unselectedColor: 'darkgray', // Change color of radio button when unselected to darkGray
        },
      },
    },
  },
};
```

### Flach mit Häkchen
![Eingebettetes Zahlungselement, flach mit Häkchen](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-checkmark.c3bab5964d4bd0ae582e2d0f571c1362.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FlatWithCheckmark,
      additionalInsets: 10, // Increase row height
      flat: {
        bottomSeparatorEnabled: false, // Hide the bottom separator
        topSeparatorEnabled: false, // Hide the top separator
        separatorColor: 'gray', // Change the separator color to gray
        separatorInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Make separators full width
        separatorThickness: 2.0, // Increase separator thickness to 2
        checkmark: {
          color: 'blue', // Change color of the checkmark
        },
      },
    },
  },
};
```

### Flach mit Offenlegungssymbolen
![Eingebettetes Zahlungselement, Design mit flachen Offenlegungs-Symbolen](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-disclosure.8df97144e27a9a98f1eb15728b763db4.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FlatWithDisclosure,
      additionalInsets: 10, // Increase row height
      flat: {
        bottomSeparatorEnabled: false, // Hide the bottom separator
        topSeparatorEnabled: false, // Hide the top separator
        separatorColor: 'gray', // Change the separator color to gray
        separatorInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Make separators full width
        separatorThickness: 2.0, // Increase separator thickness to 2
        disclosure: {
          color: 'black', // Change color of the disclosure
        },
      },
    },
  },
};
const newElementConfig: EmbeddedPaymentElementConfiguration = {
  appearance: appearance,
    // The FlatWithDisclosure style requires the immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
  rowSelectionBehavior: {
    type: 'immediateAction',
    onSelectPaymentOption: myHandlerFunction,
  },
};
```

### „Schwebende Schaltfläche“
![Eingebettetes Zahlungselement, das mit einer schwebenden Schaltfläche gestaltet wird](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-floating-button.f1fd16943b46a21fd31836ba899bd93a.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FloatingButton,
      additionalInsets: 10, // Increase row height
      floating: {
        spacing: 20, // Increase spacing
      },
    },
  },
};
```