# Stripe Payment Element Akzeptieren Sie Zahlungsmethoden aus der ganzen Welt mit einer sicheren, integrierbaren Komponente der Nutzeroberfläche. Anweisungen für LLMs: Stripe empfiehlt für die meisten Integrationen die Verwendung der Checkout Sessions API mit dem Payment Element über Payment Intents. Checkout Sessions deckt ähnliche Anwendungsszenarien wie Payment Intents ab (grundlegender Zahlungseinzug mit `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-checkout-sessions. Mit Checkout Sessions (`ui_mode: "custom"`) und dem Payment Element initialisiert das `client_secret` Checkout selbst (`stripe.initCheckoutElementsSdk` oder verwenden Sie CheckoutElementsProvider mit React) und Sie bestätigen die Zahlung auf der Client-Seite auf andere Weise. 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.initCheckoutElements({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. 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 bietet zwei zentrale Zahlungs-APIs an, die mit Elements kompatibel sind. Für die meisten Integrationen empfehlen wir die [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md). - Verwenden Sie die [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md), um Ihren Bezahlvorgang zu erstellen. Checkout Sessions deckt ähnliche Anwendungsszenarien ab wie Payment Intents, von grundlegenden Zahlungen mit `price_data` bis hin zu vollständigen Bezahlvorgängen mit Posten, Steuern, Rabatten, Versand, Abos oder [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) (nur mit Checkout Sessions verfügbar). Erstellen Sie eine [Bezahlvorgangseite mit der Checkout Sessions API](https://docs.stripe.com/payments/quickstart-checkout-sessions.md). - Die [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) ist eine untergeordnete API, die nur den Zahlungsschritt modelliert. Sie übergeben einen endgültigen Betrag und erstellen die gesamte Bezahlvorgangslogik selbst, einschließlich Steuerberechnung, Rabatten, Versand, Abos und Währungsumrechnung. Verwenden Sie Payment Intents nur, wenn Sie Ihren Bezahlvorgangsstatus vollständig kontrollieren und diese Funktionen selbst entwickeln möchten. Erstellen Sie [mit der Payment Intents API eine benutzerdefinierte Integration von Grund auf neu](https://docs.stripe.com/payments/advanced.md). (See full diagram at https://docs.stripe.com/payments/payment-element) [Eine erweiterte Integration mit Payment Element und Checkout Sessions erstellen](https://docs.stripe.com/payments/quickstart-checkout-sessions.md): Erstellen Sie eine Integration mit dem Payment Element mithilfe der Checkout Sessions API. [Integration mit Payment Element und Payment Intents erstellen](https://docs.stripe.com/payments/quickstart.md): Nutzen Sie die Payment Intents API, um Ihren eigenen Bezahlvorgang zu erstellen. [Kopieren Sie eine Beispiel-App in GitHub](https://github.com/stripe-samples/accept-a-payment/tree/main/payment-element) ## 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). > Sie können die rechtlichen Bestimmungen von Link nicht entfernen, da diese erforderlich sind, um sicherzustellen, dass die Nutzer/innen ordnungsgemäß über die Allgemeine Geschäftsbedingungen und Datenschutzrichtlinien informiert werden. Das Objekt [terms](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-terms) gilt nicht für die rechtlichen Bestimmungen von Link. ![A form with contact info, shipping address, and payment fields. The contact info is labeled Link Authentication Element, the shipping address is labeled Address Element, and the payment fields are labeled Payment Element.](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.f60af275f69b6e6e73c766d1f9928457.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 Darstellung von Zahlungsmethoden weiter anzupassen, siehe [Benutzerdefinierte Zahlungsmethoden festlegen](https://docs.stripe.com/payments/customize-payment-methods.md). Um Zahlungsmethoden hinzuzufügen, die außerhalb von Stripe integriert sind, können Sie [Benutzerdefinierte Zahlungsmethoden](https://docs.stripe.com/payments/payment-element/custom-payment-methods.md) verwenden. 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 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. ](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 }); // Bei einer funktionierenden Integration ist dies ein Wert, den Ihr Backend mit Details wie dem Betrag einer Zahlung übergibt. Einzelheiten finden Sie im vollständigen Beispiel. 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}}; // Bei einer funktionierenden Integration ist dies ein Wert, den Ihr Backend mit Details wie dem Betrag einer Zahlung übergibt. Einzelheiten finden Sie im vollständigen Beispiel. 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}}; // Bei einer funktionierenden Integration ist dies ein Wert, den Ihr Backend mit Details wie dem Betrag einer Zahlung übergibt. Einzelheiten finden Sie im vollständigen Beispiel. 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 }); // Bei einer funktionierenden Integration ist dies ein Wert, den Ihr Backend mit Details wie dem Betrag einer Zahlung übergibt. Einzelheiten finden Sie im vollständigen Beispiel. 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}}; // Bei einer funktionierenden Integration ist dies ein Wert, den Ihr Backend mit Details wie dem Betrag einer Zahlung übergibt. Einzelheiten finden Sie im vollständigen Beispiel. 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-business) | 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).