Stripe Payment Element

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

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.

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

Compatible APIs

Stripe offers two core payments APIs compatible with Elements that give you the flexibility to accept various types of payments from your customers. You can integrate these APIs into Stripe’s prebuilt payment interfaces. While we recommend using Checkout Sessions for most users, the APIs serve slightly different use cases depending on how you choose to structure your checkout flow and how much control you require. You can build a checkout page with the Checkout Session API or build an advanced integration with the Payment Intents API.

The Checkout Sessions API allows you to model your customer’s checkout flow. This includes the line items included in their purchase, billing and shipping addresses, applicable tax rates, and coupons or discounts. The Checkout Session allows you to create subscriptions, calculate tax rates with Stripe Tax, and initiate payments.
The Payment Intents API allows you to model the payments step. Unlike the Checkout Sessions API, which requires line item details, you only pass in the final amount you want to charge. This is suitable for payment flows, such as off-session payments. If you want to use Stripe to calculate applicable taxes or create subscriptions, you must integrate with the Stripe Tax API or Subscriptions API, respectively.

Checkout Sessions include customer information, shipping, tax, discounts, coupons, and payments integrations, while Payment Intents only handle payments integration.

Eine Bezahlseite mit Payment Element erstellen

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

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

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 unterstützen möchten, finden Sie unter Zahlungsmethoden anpassen. Um Zahlungsmethoden hinzuzufügen, die nicht mit Stripe integriert wurden, können Sie nutzerdefinierte Zahlungsmethoden verwenden.

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: { name: "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.