Stripe Payment Element

Das Payment Element ist eine Nutzeroberflächenkomponente für das Web, die mehr als 40 Zahlungsmethoden akzeptiert, Eingaben validiert und Fehler handhabt. Verwenden Sie es allein oder mit anderen Elementen im Frontend Ihrer Web-App.

Um das Payment Element selbst auszuprobieren, beginnen Sie mit einem der folgenden Beispiele:

Ein Payment Element erstellen

Dieser Code erstellt ein Payment Element und verbindet es mit dem DOM:

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { layout: 'accordion', /* options */ };
const elements = stripe.elements({ 
clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

Für die Annahme von Zahlungen mit dem Payment Element ist zusätzlicher Backend-Code erforderlich. Wie das funktioniert, erfahren Sie im QuickStart oder der Beispiel-App.

Elemente kombinieren

Das Payment Element interagiert mit anderen Elements. In diesem Formular wird beispielsweise ein zusätzliches Element verwendet, um Details zum Bezahlvorgang automatisch auszufüllen, und ein weiteres Element, um die Versandadresse zu erfassen.

Den vollständigen Code für dieses Beispiel finden Sie unter Link zu einer Elements-Integration hinzufügen.

Sie können das Payment Element auch mit dem Express Checkout Element kombinieren. In diesem Fall werden Wallet-Zahlungsmethoden wie Apple Pay und Google Pay nur im Express Checkout Element angezeigt, um doppelte Anzeigen zu vermeiden.

Zahlungsmethoden

Stripe aktiviert standardmäßig bestimmte Zahlungsmethoden für Sie. Wir können auch noch weitere Zahlungsmethoden aktivieren, nachdem wir Sie benachrichtigt haben. Im Dashboard können Sie jederzeit Zahlungsmethoden aktivieren oder deaktivieren. Bei Verwendung von Payment Element können Sie dynamische Zahlungsmethoden für Folgendes verwenden:

• Zahlungsmethoden im Dashboard vollkommen ohne Code zu verwalten.
• Die relevantesten Zahlungsmethoden basierend auf Faktoren wie Standort, Währung und Transaktionsbetrag dynamisch anzuzeigen.

Wenn beispielsweise ein Kunde/eine Kundin in Deutschland in EUR bezahlt, werden ihm/ihr alle aktiven Zahlungsmethoden angezeigt, die EUR akzeptieren, beginnend mit den in Deutschland weit verbreiteten.

Zahlungsmethoden nach Relevanz für Ihre Kundinnen/Kunden anzeigen

Weitere Informationen dazu, wie Sie die Darstellung von Zahlungsmethoden anpassen, z. B. durch Filtern von Kartenmarken, die Sie nicht nicht unterstützen möchten, finden Sie unter Zahlungsmethoden anpassen. Wie Sie Zahlungsmethoden hinzufügen, die nicht mit Stripe integriert wurden, erfahren Sie unter Externe Zahlungsmethoden.

Wenn Sie für Ihre Integration Zahlungsmethoden manuell auflisten müssen, lesen Sie sich den Leitfaden Zahlungsmethoden manuell auflisten durch.

Anordnung

Sie können das Layout des Payment Element an Ihren Bezahlvorgang anpassen. Das folgende Bild zeigt dasselbe Payment Element, das mit unterschiedlichen Layout-Konfigurationen gerendert wurde.

Zahlungselement mit verschiedenen Layouts.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

Erscheinungsbild

Verwenden Sie die Appearance API, um das Design aller Elemente zu steuern. Wählen Sie einen Stil oder aktualisieren Sie bestimmte Details.

Wähle Sie zum Beispiel das „flache“ Design und überschreiben Sie die Standardtextfarbe.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

Eine vollständige Liste der Designs und Variablen finden Sie in der Dokumentation zur Appearance API.

Optionen

Stripe-Elemente unterstützen noch mehr Optionen. Zeigen Sie beispielsweise Ihren Firmennamen mit der Option business an.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */};
const options = {
  business: "RocketRides"
};

Das Payment Element unterstützt die folgenden Optionen. Weitere Informationen finden Sie im Referenzeintrag für die jeweilige Option.