Erscheinungsbild anpassen

Das mobile Payment Element 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() verwenden.

1. Starten Sie mit der Anpassung der Schriftart
2. Farben so anpassen, dass Sie zu Ihrer App passen
3. Formen wie den Randradius anpassen
4. Feinabstimmung bestimmter Komponenten

// The following code creates the appearance shown in the screenshot above
const 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 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.

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

Neben Schriftarten und Farben können Sie auch den Randradius, die Randbreite und die Schattierung innerhalb des mobilen Payment Element anpassen.

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.

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