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.

Schriftart anpassen
Farben so anpassen, dass Sie zu Ihrer App passen
Formen wie den Eckradius anpassen
Feinabstimmung bestimmter Komponenten
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

Das eingebettete Payment Element hat die folgenden Stile: flach mit Optionsfeld, flach mit Häkchen und schwebende Schaltflächen. Jeder Stil verfügt über bestimmte Optionen, die diesem Stil entsprechen.

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

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

„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