Stripe Payment Element

Akzeptieren Sie Zahlungsmethoden aus der ganzen Welt mit einer sicheren, integrierbaren Komponente der Nutzeroberfläche.

Möchten Sie Stripe Tax, Rabatte, Versand oder Währungsumrechnung nutzen?

Wir entwickeln eine Payment Element-Integration, die Steuern, Rabatte, Versand und Währungsumrechnung verwaltet. Lesen Sie den Leitfaden „Bezahlseite erstellen“, um mehr zu erfahren.

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 Elements im Frontend Ihrer Web-App.

Länderverfügbarkeit

Link wird in Brasilien und Thailand nicht von Payment Elements unterstützt.

Diese Demo zeigt Google Pay oder Apple Pay nur dann an, wenn Sie über eine aktive Karte mit einer der beiden Wallets verfügen.

Sie können das Payment Element integrieren mit:

Die Checkout Sessions API zum Erstellen einer Bezahlseite.
Die Payment Intents API zum Erstellen einer erweiterten Integration.

Eine Bezahlseite mit Payment Element erstellen

Erstellen Sie eine Integration mit dem Payment Element mithilfe der Checkout Sessions API.

Öffentliche Vorschau

Eine erweiterte Integration mit Payment Element erstellen

Erstellen Sie eine Integration mit dem Payment Element mithilfe der Payment Intents API.

Kopieren Sie eine Beispiel-App in GitHub

HTML · React · Vue

Stripe.js-Referenz anzeigen

Ein Payment Element erstellen

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

index.js
Vollständiges Beispiel anzeigen
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.

Notiz

Sie können die rechtliche Vereinbarung mit Link nicht entfernen, da sie erforderlich ist, um sicherzustellen, dass die Nutzer/innen die Nutzungsbedingungen und Datenschutzrichtlinien einhalten. Das Terms-Objekt gilt nicht für die rechtliche Link-Vereinbarung.

Ein Formular mit Kontaktinformationen, Versandadresse und Zahlungsfeldern. Die Kontaktinformationen sind als Link Authentication Element gekennzeichnet, die Versandadresse ist als Address Element gekennzeichnet und die Zahlungsfelder sind als Payment Element gekennzeichnet.

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.

Beispiele für die drei Bezahlformulare. Das Bild zeigt die Registerkartenoption, bei der die Kund/innen unter den als Registerkarten angezeigten Zahlungsmethoden wählen können, oder die beiden Accordion-Optionen, bei denen die Zahlungsmethoden vertikal aufgelistet sind. Sie können wählen, ob in der Accordion-Ansicht Optionsfelder angezeigt werden sollen oder nicht.

Zahlungselement mit verschiedenen Layouts.

Im Registerkarten-Layout werden Zahlungsmethoden horizontal mithilfe von Registerkarten angezeigt. Um dieses Layout zu verwenden, legen Sie den Wert für layout.type auf tabs fest. Sie können auch andere Eigenschaften angeben, z. B. layout.defaultCollapsed.

index.js
Vollständiges Beispiel anzeigen
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.

Beispiele für helle und dunkle Modi für das Bezahlvorgangsformular des Payment Element.

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

index.js
Vollständiges Beispiel anzeigen
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.

index.js
Vollständiges Beispiel anzeigen
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.

layout	Layout für das Payment Element.
defaultValues	Erste Kundeninformationen, die im Payment Element angezeigt werden sollen.
Unternehmen	Informationen zu Ihrem Unternehmen, die im Payment Element angezeigt werden sollen.
paymentMethodOrder	Reihenfolge zum Auflisten der Zahlungsmethoden.
Felder	Ob bestimmte Felder angezeigt werden.
readOnly	Ob Zahlungsdetails geändert werden können.
terms	Ob Mandate oder andere rechtliche Vereinbarungen im Payment Element angezeigt werden. Standardmäßig werden sie nur bei Bedarf angezeigt.
Wallets	Ob Geldbörsen wie Apple Pay oder Google Pay angezeigt werden. Standardmäßig werden sie nach Möglichkeit angezeigt.

Fehler

Das Payment Element zeigt während der Clientbestätigung automatisch lokalisierte Fehlermeldungen für Kundinnen/Kunden für die folgenden Fehlercodes an:

generic_decline
insufficient_funds
incorrect_zip
incorrect_cvc
invalid_cvc
invalid_expiry_month
invalid_expiry_year
expired_card
fraudulent
lost_card
stolen_card
card_velocity_exceeded

Informationen zum Anzeigen von Meldungen zu anderen Fehlertypen finden Sie unter Fehlercodes und Fehlerbehandlung.