Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case findenZahlungen verwalten
Zahlungsmethoden
Zahlungsschnittstellen
Zahlungsszenarien
Präsenzzahlungen
Mehr als Zahlungen

Erscheinungsbild anpassen

Passen Sie Ihre In-App-Integration mit der Appearance API an.

Das Embedded Payment 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 Ihres EmbeddedPaymentElement.Configuration-Objekts verwenden.

  1. Schriftart anpassen
  2. Farben so anpassen, dass Sie zu Ihrer App passen
  3. Formen wie den Eckradius anpassen
  4. Feinabstimmung bestimmter Komponenten
  5. Erscheinungsbild des Embedded Payment Element anpassen
var configuration = EmbeddedPaymentElement.Configuration()
// The following code creates the appearance shown in the screenshot above
var 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 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 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.

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 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 Dark Mode zu unterstützen, initialisieren Sie Ihre benutzerdefinierten UIColors mit init(dynamicProvider:).

Formen

Neben Schriftarten und Farben können Sie auch den Eckenradius, die Breite der Ränder und die Schattierung anpassen, die innerhalb des mobilen Payment Element verwendet werden.

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.

Anpassungsoptionen für bestimmte Nutzeroberflächen-Komponenten haben Vorrang vor anderen Werten. Beispielsweise überschreibt appearance.primaryButton.cornerRadius den Wert von appearance.cornerRadius.

Notiz

Kontaktieren Sie uns, wenn Sie der Meinung sind, dass wir weitere Anpassungsoptionen hinzufügen sollten.

Embedded Payment Element

The Embedded Payment Element has the following styles: flat with radio buttons, flat with checkmarks, flat with chevrons, and floating buttons. Each style has specific options corresponding to that style.

Flach mit Optionsfeld

Eingebettetes Zahlungselement, flach mit Optionsfeld
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithRadio
appearance.embeddedPaymentElement.row.additionalInsets = 10 // Increase row height
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
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithCheckmark
appearance.embeddedPaymentElement.row.additionalInsets = 10 // Increase row height
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 chevron

The FlatWithChevron style requires you to set the immediateAction row selection behavior.

Embedded payment element styled using flat with chevron
var configuration = EmbeddedPaymentElement.Configuration()
// The flatWithChevron 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 = .flatWithChevron
appearance.embeddedPaymentElement.row.additionalInsets = 10 // Increase row height
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.chevron.color = .black // Change color of the chevron


configuration.appearance = appearance

„Schwebende Schaltfläche“

Eingebettetes Zahlungselement, das mit einer schwebenden Schaltfläche gestaltet wird
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
War diese Seite hilfreich?
JaNein