Elements Appearance API
Passen Sie das Erscheinungsbild von Elements an das Design Ihrer Website an.
Das mobile Payment Element unterstützt die visuelle Anpassung, sodass Sie das Design Ihrer App personalisieren können. Das Layout bleibt gleich, aber Sie können Farben, Schriftarten und mehr ändern, indem Sie beim Aufrufen von initPaymentSheet() den Parameter appearance
verwenden.
- Starten Sie mit der Anpassung der Schriftart
- Farben so anpassen, dass Sie zu Ihrer App passen
- Formen wie den Randradius anpassen
- Feinabstimmung bestimmter Komponenten
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png)
// 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![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Passen Sie die Schriftart an, indem Sie eine FontConfig an font
übergeben und family
festlegen. Unter iOS sollte der Wert family
der „PostScript-Name“ sein, den Sie im Font Book finden. Kopieren Sie auf Android die .
- oder .
-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 nutzerspezifischen Schriftart, bestimmt jedoch Größen und Gewichte 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 { error } = await initPaymentSheet({ ... appearance: { font: { family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular', scale: 1.15, }, }, });
Farben![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Passen Sie die Farben im mobilen Payment Element an, indem Sie die in 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ächen-Elemente, die jeder Farbkategorie zugeordnet sind.
Notiz
Um den Dunkelmodus zu unterstützen, übergeben Sie Zuordnungen für die Farben light
und dark
an colors.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-colors.2e9b577269f6771c61c7a6e068eb8980.png)
Formen![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Neben Schriftarten und Farben können Sie auch den Randradius, die Randbreite und die Schattierung innerhalb des mobilen Payment Element anpassen.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-shapes.a71c754a951ea02fff121f584953ba33.png)
Spezielle UI-Komponenten![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
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 PrimaryButtonConfig.
Anpassungsoptionen für bestimmte Nutzeroberflächen-Komponenten haben Vorrang vor anderen Werten. Beispielsweise überschreibt primaryButton.
den Wert von shapes.
.
Notiz
Kontaktieren Sie uns, wenn Sie der Meinung sind, dass wir weitere Anpassungsoptionen hinzufügen sollten.