# Stripe Payment Element Akzeptieren Sie Zahlungsmethoden aus der ganzen Welt mit einer sicheren, integrierbaren Komponente der Nutzeroberfläche. Stripe empfiehlt für die meisten Integrationen die Verwendung der Checkout Sessions API mit dem Payment Element über Payment Intents. Checkout Sessions deckt ähnliche Use Cases wie Payment Intents ab (grundlegender Zahlungseinzug unter Verwendung von `price_data` oder Erstellen eines vollständigen Bezahlvorgangs mit Posten, Steuern usw.). Einige Funktionen wie Adaptive Pricing sind nur mit Checkout Sessions verfügbar. Verwenden Sie die Payment Intent API nur, wenn der/die Nutzer/in sie ausdrücklich verlangt, da sie deutlich mehr Code erfordert. Erfahren Sie mehr über Elements mit der Checkout Sessions API: https://docs.stripe.com/payments/quickstart. Mit Checkout Sessions (`ui_mode: "elements"`) und dem Payment Element initialisiert das `client_secret` Checkout selbst (`stripe.initCheckoutElementsSdk`. Alternativ können Sie CheckoutElementsProvider mit React) verwenden und die Zahlung auf der Client-Seite auf andere Weise bestätigen. Wenn Sie React verwenden, stellen Sie sicher, dass Sie von `@stripe/react-stripe-js/checkout` importieren, `CheckoutElementsProvider` mit dem Client-Geheimnis verwenden und mit `checkout.confirm` bestätigen. Wenn Sie HTML verwenden, stellen Sie sicher, dass Sie `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` verwenden und mit `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();` bestätigen. Coding Agents sollten die Stripe-CLI installieren (`npm i -g @stripe/cli`) und den Befehl `stripe sandbox create --help` ausführen, um eine anonyme Stripe-Sandbox mit funktionierenden API-Schlüsseln einzurichten. Eine Kontoregistrierung ist nicht erforderlich. Das Payment Element ist eine Nutzeroberflächenkomponente für das Web, mit der Sie mehr als 100 Zahlungsmethoden akzeptieren, Eingaben validieren und Fehler bearbeiten können. Verwenden Sie es allein oder zusammen mit anderen Elementen im Frontend Ihrer Web-App. ## Kompatible APIs Stripe empfiehlt die Verwendung der [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) mit dem Payment Element. Mit dieser Integration können Sie grundlegende Zahlungen mit `price_data` oder eine vollständige Logik für den Bezahlvorgang mit Posten, Steuern, Rabatten, Versand, Abonnements oder [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) einrichten. Erstellen Sie eine [Bezahlseite mit der Checkout Sessions API](https://docs.stripe.com/payments/quickstart.md). Wenn Sie Ihren Bezahlvorgang durchgängig selbst steuern und diese Funktionen selbst erstellen müssen, können Sie die [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) mit dem Payment Element verwenden. Mit dieser Integration können Sie einen Endbetrag übergeben und die gesamte Logik für den Bezahlvorgang selbst erstellen, einschließlich Steuerberechnung, Rabatten, Versand, Abonnements und Währungsumrechnung. Erstellen Sie eine [benutzerdefinierte Integration mit der Payment Intents API](https://docs.stripe.com/payments/advanced.md). (See full diagram at https://docs.stripe.com/payments/payment-element) ```text [Checkout Sessions API] --> [Kundin/Kunde] [Checkout Sessions API] --> [Versand] [Checkout Sessions API] --> [Steuern] [Checkout Sessions API] --> [Rabatte und Gutscheine] [Checkout Sessions API] --> [Zahlung] [Payment Intents API] --> [Zahlung] ``` ## 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](https://docs.stripe.com/payments/link.md), und ein weiteres Element, um die [Versandadresse zu erfassen](https://docs.stripe.com/elements/address-element.md). ![Ein Formular mit Kontaktinformationen, Versandadresse und Zahlungsfeldern. Die Kontaktinformationen sind als Contact Details Element gekennzeichnet, die Versandadresse ist als Address Element gekennzeichnet und die Zahlungsfelder sind als Payment Element gekennzeichnet.](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.d52f05825c982aaf84a4ad1e9bb422f3.png) Zahlungsformular, das mehrere Elemente kombiniert Den vollständigen Code für dieses Beispiel finden Sie unter [Hinzufügen von Link zu einer Elements-Integration](https://docs.stripe.com/payments/link/add-link-elements-integration.md). Sie können das Payment Element auch mit dem [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md) 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](https://dashboard.stripe.com/settings/payment_methods) können Sie jederzeit Zahlungsmethoden aktivieren oder deaktivieren. Bei Verwendung von Payment Element können Sie [dynamische Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) für Folgendes verwenden: - Zahlungsmethoden im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) 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. ![Eine Vielzahl von Zahlungsmethoden.](https://b.stripecdn.com/docs-statics-srv/assets/payment-element-methods.26cae03aff199d6f02b0d92bd324c219.png) Zahlungsmethoden nach Relevanz für Ihre Kundinnen/Kunden anzeigen Um die Anzeige von Zahlungsmethoden weiter anzupassen, beispielsweise indem Sie Kartenmarken und Finanzierungsarten filtern, die Sie nicht unterstützen möchten, lesen Sie bitte [Zahlungsmethoden anpassen](https://docs.stripe.com/payments/customize-payment-methods.md). Um Zahlungsmethoden hinzuzufügen, die außerhalb von Stripe integriert sind, verwenden Sie [individuelle Zahlungsmethoden](https://docs.stripe.com/payments/payment-element/custom-payment-methods.md). Wenn Sie für Ihre Integration Zahlungsmethoden manuell auflisten müssen, lesen Sie sich den Leitfaden [Zahlungsmethoden manuell auflisten](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually) 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 Kundinnen und Kunden 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.](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png) Zahlungselement mit verschiedenen Layouts. #### Registerkarten Im Registerkarten-Layout werden Zahlungsmethoden horizontal mithilfe von Registerkarten angezeigt. Um dieses Layout zu verwenden, legen Sie den Wert für [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) auf `tabs` fest. Sie können auch andere Eigenschaften angeben, z. B. [layout.defaultCollapsed](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-defaultCollapsed). ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { layout: { type: 'tabs', defaultCollapsed: false, } }; const elements = stripe.elements({ clientSecret, appearance }); // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` #### Akkordeon mit Optionsschaltflächen Im Akkordeon-Layout werden Zahlungsmethoden vertikal mithilfe eines Akkordeons angezeigt. Um dieses Layout zu verwenden, legen Sie den Wert für [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) auf `accordion` fest. Sie können auch andere Eigenschaften angeben, z. B. [layout.radios](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-radios), um Optionsschaltflächen anzuzeigen. ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { layout: { type: 'accordion', defaultCollapsed: false, radios: 'always', spacedAccordionItems: false } }; const clientSecret = {{CLIENT_SECRET}}; // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const elements = stripe.elements({ clientSecret, appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` #### Akkordeon ohne Optionsschaltflächen Im Akkordeon-Layout werden Zahlungsmethoden vertikal mithilfe eines Akkordeons angezeigt. Um dieses Layout zu verwenden, legen Sie den Wert für [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) auf `accordion` fest. Sie können auch andere Eigenschaften angeben, z. B. [layout.spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems), um zusätzlichen vertikalen Raum zu schaffen. ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { layout: { type: 'accordion', defaultCollapsed: false, radios: 'never', spacedAccordionItems: true } }; const clientSecret = {{CLIENT_SECRET}}; // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const elements = stripe.elements({ clientSecret, appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` ## 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.](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png) Wähle Sie zum Beispiel das „flache“ Design und überschreiben Sie die Standardtextfarbe. ```javascript const stripe = Stripe('<>'); const appearance = { theme: 'flat', variables: { colorPrimaryText: '#262626' } }; const options = { /* options */ }; const elements = stripe.elements({ clientSecret, appearance }); // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` Eine vollständige Liste der Designs und Variablen finden Sie in der Dokumentation zur [Appearance API](https://docs.stripe.com/elements/appearance-api.md). ## Optionen Stripe-Elemente unterstützen noch mehr Optionen. Zeigen Sie beispielsweise Ihren Firmennamen mit der Option [business](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business) an. ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */}; const options = { business: { name: "RocketRides" } }; const clientSecret = {{CLIENT_SECRET}}; // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const elements = stripe.elements(appearance, clientSecret); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` Das Payment Element unterstützt die folgenden Optionen. Weitere Informationen finden Sie im Referenzeintrag für die jeweilige Option. | | | [layout](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout) | Layout für das Payment Element. | | [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) | Erste Kundeninformationen, die im Payment Element angezeigt werden sollen. | | [Unternehmen](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business) | Informationen zu Ihrem Unternehmen, die im Payment Element angezeigt werden sollen. | | [paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-paymentMethodOrder) | Reihenfolge zum Auflisten der Zahlungsmethoden. | | [Felder](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-fields) | Ob bestimmte Felder angezeigt werden. | | [readOnly](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-readOnly) | Ob Zahlungsdetails geändert werden können. | | [terms](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-terms) | Ob Mandate oder andere rechtliche Vereinbarungen im Payment Element angezeigt werden. Standardmäßig werden sie nur bei Bedarf angezeigt. | | [Wallets](https://docs.stripe.com/js/elements_object/create_payment_element) | Ob Geldbörsen wie Apple Pay oder Google Pay angezeigt werden. Standardmäßig werden sie nach Möglichkeit angezeigt. | ## Fehler Payment Element zeigt während der Kundenbestätigung automatisch lokalisierte Fehlermeldungen für Kundinnen und Kunden an, wenn folgende Ablehnungscodes vorliegen: - `card_declined` - `card_velocity_exceeded` - `expired_card` - `fraudulent` - `generic_decline` - `incorrect_cvc` - `incorrect_number` - `incorrect_zip` - `insufficient_funds` - `invalid_cvc` - `invalid_expiry_month` - `invalid_expiry_year` - `live_mode_test_card` - `lost_card` - `processing_error` - `stolen_card` - `test_mode_live_card` Informationen zum Anzeigen von Meldungen zu anderen Fehlertypen finden Sie unter [Fehlercodes](https://docs.stripe.com/error-codes.md) und [Fehlerbehandlung](https://docs.stripe.com/error-handling.md). ## Umstieg auf Payment Element Wählen Sie einen Migrationsleitfaden basierend auf Ihrer aktuellen Integration und der Art und Weise, wie Sie Ihren Bezahlvorgang verwalten möchten. Wir empfehlen [die Migration auf das Payment Element mit der Checkout Sessions API](https://docs.stripe.com/payments/payment-element/migration-ewcs.md), wobei Sie das Card Element oder Elements für einzelne Zahlungsmethoden durch das Payment Element ersetzen. Dieser Weg ermöglicht Ihnen die Nutzung der integrierten Unterstützung für Abonnements, Steuern, Rabatte, Versand und Adaptive Pricing. Wenn Sie Ihre bestehende Logik für den Bezahlvorgang beibehalten und Funktionen für den Bezahlvorgang selbst verwalten müssen, können Sie [auf das Payment Element mit der Payment Intents API migrieren](https://docs.stripe.com/payments/payment-element/migration.md). Auf diesem Weg ersetzen Sie das Card Element oder Elements für einzelne Zahlungsmethoden durch das Payment Element, während Sie weiterhin die Payment Intents API oder Setup Intents API verwenden. Der Migrationsleitfaden beschreibt separate Wege für die Annahme von Zahlungen und das Speichern von Zahlungsdaten für die zukünftige Verwendung.