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. Wählen Sie ein vorgefertigtes Design aus, das zu Ihrer Website passt.
2. Passen Sie das Design mithilfe von Eingaben und Labels an. Sie können auch Variablen wie fontFamily und colorPrimary festlegen, um die in jedem Element angezeigten Komponenten umfassend anzupassen.
3. 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 when initializing checkout
const checkout = stripe.initCheckout({clientSecret, elementsOptions: {appearance}});

Eingaben und Labels

Passen Sie die Erscheinung der Eingabefelder und ihrer zugehörigen Labels an.

const appearance = {
  inputs: 'spaced',
  labels: 'auto'
}

Eingaben

Wählen Sie den Stil der Eingabefelder, der zu Ihrem Design passt.

Labels

Steuern Sie die Position und Sichtbarkeit von Labels, die mit Eingabefeldern verknüpft sind.

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 when initializing checkout
const checkout = stripe.initCheckout({clientSecret, elementsOptions: {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 when initializing checkout
const checkout = stripe.initCheckout({clientSecret, elementsOptions: {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

Eingaben (über Labels)

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

Eingaben (schwebende Labels)

Ablehnen

Codeeingabe

Kontrollkästchen

Dropdown

Umschalter

Auswahl

Stellen Sie sicher, dass sich Ihr aktiver .PickerItem-Status 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'
    }
  }
};

Umschalten

Weitere Konfigurationsoptionen

In addition to themes, labels, inputs, variables and rules, you can style Elements using other appearance configuration options.

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

const appearance = {
  disableAnimations: true,

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

Aktuell unterstützen wir folgende Optionen: