Elements Appearance API

Stripe Elements unterstützt die visuelle Anpassung, wodurch Sie das Design Ihrer Website mit der Option appearance verändern können. Das Layout der einzelnen Elemente bleibt konsistent, Sie können jedoch u. a. Farben, Schriftarten, Rahmen und Abstände ändern.

1. Beginnen Sie mit der Auswahl eines Designs.

Wählen Sie ein vorgefertigtes Design, das zu Ihrer Website passt, und legen Sie direkt los.

1. Passen Sie das Design mithilfe von Variablen an .

Legen Sie Variablen wie fontFamily and colorPrimary fest, um in jedem Element auftretende Komponenten umfassend anzupassen.

1. Bei Bedarf können Sie einzelne Komponenten und Status mithilfe von Regeln weiter anpassen .

Für vollständige Kontrolle geben Sie nutzerdefinierte CSS-Eigenschaften für einzelne Komponenten an, die in dem Element auftreten.

Designs

Beginnen Sie mit der Anpassung von Elements, indem Sie eins der folgenden Designs auswählen:

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

Variablen

Legen Sie Variablen fest, um die Darstellung von Komponenten anzupassen, die in jedem Element auftreten.

Die Option variables funktioniert wie CSS-Variablen. Sie können mit der Syntax var(--myVariable) CSS-Werte für jede Variable angeben und auf andere Variablen verweisen. Sie können sogar das daraus resultierende DOM mit dem DOM-Explorer Ihres Browsers überprüfen.

const appearance = {
  theme: 'stripe',

  variables: {
    colorPrimary: '#0570de',
    colorBackground: '#ffffff',
    colorText: '#30313d',
    colorDanger: '#df1b41',
    fontFamily: 'Ideal Sans, system-ui, sans-serif',
    spacingUnit: '2px',
    borderRadius: '4px',
    // See all possible variables below
  }
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

Häufig genutzte Variablen

Regeln

Die Option rules ist eine Zuordnung von CSS-ähnlichen Selektoren zu CSS-Eigenschaften, die eine detaillierte Anpassung einzelner Komponenten ermöglicht. Nachdem Sie Ihr theme und Ihre variables definiert haben, integrieren Sie Elements mithilfe von rules nahtlos in das Design Ihrer Website.

const appearance = {
    rules: {
      '.Tab': {
        border: '1px solid #E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
      },

      '.Tab:hover': {
        color: 'var(--colorText)',
      },

      '.Tab--selected': {
        borderColor: '#E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
      },

      '.Input--invalid': {
        boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
      },

      // See all supported class names and selector syntax below
    }
  };

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

Alle Regeln

Der Selektor für eine Regel kann jeden der öffentlichen Klassennamen im Element zum Ziel haben, ebenso wie die unterstützten Status, Pseudo-Klassen und Pseudo-Elemente für jede Klasse. Die folgenden Selektoren sind z. B. gültig:

• .Tab, .Label, .Input
• .Tab:focus
• .Input--invalid, .Label--invalid
• .Input::placeholder

Die folgenden Selektoren sind nicht gültig:

• .p-SomePrivateClass, img, nur öffentliche Klassennamen können das Ziel sein
• .Tab .TabLabel, Vorgänger-Nachfolger-Beziehungen in Selektoren werden nicht unterstützt
• .Tab--invalid, die Klasse .Tab unterstützt den Status --invalid nicht

Jeder in einem Selektor verwendete Klassenname unterstützt eine Liste zulässiger CSS-Eigenschaften, die in Camel-Case-Schreibweise angegeben werden (z. B. boxShadow für die Eigenschaft box-shadow).

Nachfolgend finden Sie eine vollständige Liste aller unterstützten Klassennamen und entsprechenden Status, Pseudo-Klassen und Pseudo-Elemente:

Registerkarten

Formulareingaben – Labels, die oberhalb angezeigt werden

Wählen Sie bei Eingabefeldern auf Mobilgeräten unbedingt eine Schriftgröße von mindestens 16px.

Formulareingaben – Labels, die ihre Position dem Textfluss anpassen

Ablehnen

Codeeingabe

Kontrollkästchen

Dropdown

Umschalter

Auswahl

Stellen Sie sicher, dass Ihr aktiver .PickerItem-Status sich von den anderen Status unterscheidet.

RICHTIG Verwenden Sie zur Unterscheidung des aktiven Status, den Ihre Kundin/Ihr Kunde bereits ausgewählt hat, eine auffällige, kontrastreiche Grundfarbe, eine Gewichtung und/oder einen Umriss.	NEIN Verwenden Sie für Ihre .PickerItem-Status keine zwei gleich gewichteten Optionen oder kontrastarmen Farben. Das erschwert die Unterscheidung, welcher Status aktiv ist.

Menü

Accordion

Payment Method Messaging Element

Optionsfeld-Symbol

Sie können die Gesamtgröße des Symbols mit der Eigenschaft width für .RadioIcon steuern. Sie können die relative Größe von .RadioIconInner mit der Eigenschaft r (Radius) steuern. .RadioIconOuter und .RadioIconInner sind SVG-Elemente und können mit stroke- und fill-Eigenschaften gestaltet werden. Unten finden Sie eine vollständige Liste der unterstützten CSS-Eigenschaften.

const appearance = {
  rules: {
    '.RadioIcon': {
      width: '24px'
    },
    '.RadioIconOuter': {
      stroke: '#E0E6EB'
    },
    '.RadioIconInner': {
      r: '16'
    }
  }
};

Weitere Konfigurationsoptionen

Neben themes, variables und rules haben wir weitere Konfigurationsoptionen für das Erscheinungsbild von Elements bereitgestellt.

Sie können die Optionen anpassen, indem Sie sie dem Appearance-Objekt hinzufügen:

const appearance = {
  labels: 'floating',

  // other configurations such as `theme`, `variables` and `rules`...
}

Aktuell unterstützen wir folgende Optionen: