# Zahlungsmethode eines Kunden/einer Kundin speichern, ohne eine Zahlung zu tätigen Erfahren Sie, wie Sie eine Zahlungsmethode speichern und später belasten. # Checkout Sessions API > This is a Checkout Sessions API for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=embedded-components. Mit der [Checkout Sessions API im `setup`-Modus](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) können Sie die Zahlungsdetails Ihrer Kund/innen ohne vorherige Zahlung speichern. Das ist hilfreich, wenn Sie Kund/innen jetzt zum Onboarding einladen und Zahlungen für sie einrichten möchten, die Kundenkonten aber erst später über die Payment Intents API belasten möchten (wenn die Kund/innen offline sind). Verwenden Sie diese Integration, um wiederkehrende Zahlungen einzurichten oder einmalige Zahlungen zu erstellen, bei denen der endgültige Betrag später festgelegt wird (häufig erst nach Erhalt Ihrer Dienstleistung). > #### Transaktionen mit Zahlungskarte > > Bei Transaktionen mit Zahlungskarte, etwa bei der [Erfassung von Kartenangaben über Stripe Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md), wird ein anderer Prozess zum Speichern der Zahlungsmethode verwendet. ## Compliance Sie sind dafür verantwortlich, dass Sie alle geltenden Gesetze, Vorschriften und Netzwerkregeln einhalten, wenn Sie Zahlungsdetails auf Kundenseite speichern. Diese Anforderungen gelten in der Regel, wenn Sie Zahlungsmethoden Ihrer Kundinnen und Kunden für die zukünftige Verwendung speichern möchten. Ein Beispiel wäre, wenn Sie die kundenseitig bevorzugte Zahlungsmethode im Bezahlvorgang für einen zukünftigen Kauf anzeigen oder das Kundenkonto belasten möchten, wenn Kundinnen und Kunden Ihre Website oder App zu dem Zeitpunkt nicht aktiv nutzen. Fügen Sie Nutzungsbedingungen zu Ihrer Website oder App hinzu, aus denen hervorgeht, wie Sie die Zahlungsdetails speichern möchten, und lassen Sie Kundinnen und Kunden aktiv zu diesen zustimmen. Wenn Sie eine Zahlungsmethode speichern, können Sie diese nur für die in Ihren Konditionen vereinbarte Nutzung verwenden. Um eine Zahlungsmethode belasten zu können, wenn Kundinnen und Kunden offline sind, und diese Option auch für zukünftige Einkäufe zu speichern, müssen Sie explizit die kundenseitige Zustimmung einholen. Fügen Sie beispielsweise ein Kontrollkästchen mit dem Titel „Meine Zahlungsmethode für die zukünftige Verwendung speichern“ ein, um die Einwilligung zu erhalten. Um Kundenkonten zu belasten, wenn die Kund/innen offline sind, fügen Sie unbedingt Folgendes in Ihre Konditionen ein: - Die kundenseitige Zustimmung, eine Zahlung oder mehrere Zahlungen für bestimmte Transaktionen in deren Namen einzuleiten. - Der erwartete Zeitpunkt und die voraussichtliche Häufigkeit von Zahlungen (z. B. Zahlungen für geplante Raten- oder Abo-Zahlungen oder für außerplanmäßige Aufstockungen). - Wie Sie den Zahlbetrag ermitteln. - Ihre Stornorichtlinie, wenn die Zahlungsmethode für einen Abo-Dienst ist. Dokumentieren Sie unbedingt die schriftliche Zustimmung Ihrer Kundinnen und Kunden zu diesen Bedingungen. > Wenn Sie die manuelle serverseitige Bestätigung verwenden müssen oder für Ihre Integration die separate Anzeige von Zahlungsmethoden erforderlich ist, lesen Sie unseren [alternativen Leitfaden](https://docs.stripe.com/payments/save-and-reuse-cards-only.md). ## Stripe einrichten [Serverseitig] [Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login). Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Legen Sie eine Kundin oder einen Kunden an [Serverseitig] Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Objekt zuordnen, das Ihre Kundin/Ihre Kundin darstellt. Wenn Ihre Kundin/Kundin ein Konto erstellt oder die erste Transaktion mit Ihrem Unternehmen durchgeführt hat, erstellen Sie entweder ein kundenseitig konfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/create.md)-Objekt mit der Accounts v2 API oder ein [Customer](https://docs.stripe.com/api/customers/create.md)-Objekt mit der Customers API. > #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden > > Die Accounts v2 API ist allgemein für Connect-Nutzer/innen verfügbar und für andere Stripe-Nutzer/innen in der öffentlichen Vorschau. Wenn an der Accounts v2 Vorschau teilnehmen, müssen Sie eine [Vorschauversion](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in Ihrem Code angeben. > > Um Zugriff auf die Accounts v2 Vorschau anzufordern, {% collect-email modal=true modal_link_text=“sign up.” list=“payin-payout-reuse-waitlist@stripe.com” send_direct_email=true intro_text=“Sind Sie am frühzeitigen Zugang zur Vorschau der Accounts v2 API interessiert?" body_text=“Wir sind gerade dabei, die Vorschau von Accounts v2 bereitzustellen. Um Zugang zu beantragen, geben Sie unten Ihre E-Mail-Adresse ein.” form_cta_text=“Registrieren” success_text=“Danke! Wir melden uns bald.” show_email_confirmation=wahr /%} > > For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects. #### Accounts v2 ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-04-22.preview" ``` #### Customers v1 ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` ## Einrichtungsmodus verwenden [Serverseitig] Erstellen Sie eine Checkout-Sitzung mit [mode=setup](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode). ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=setup \ -d ui_mode=elements \ -d currency=usd ``` ## Zahlungsmethode mit Kund/innen verknüpfen [Serverseitig] Wenn Sie die Checkout-Sitzung nicht mit einem/einer bestehenden Kund/in erstellt haben, verwenden Sie die ID der *Zahlungsmethode*, um die Zahlungsmethode einem/einer Kund/in [zuzuordnen](https://docs.stripe.com/api/payment_methods/attach.md). Andernfalls wird die Zahlungsmethode automatisch dem/der Kund/in zugeordnet, den/die Sie beim Erstellen der Checkout-Sitzung angegeben haben. #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}}/attach \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}}/attach \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" ``` ## Zahlungsmethode abrufen [Serverseitig] Nachdem ein/e Kund/in seine/ihre Checkout-Sitzung erfolgreich abgeschlossen hat, verarbeiten Sie den Webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed). Rufen Sie das Sitzungsobjekt im Webhook ab und gehen Sie dann wie folgt vor: - Rufen Sie den Wert des [setup_intent](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-setup_intent)-Schlüssels ab, also die während der Checkout-Sitzung erstellte SetupIntent-ID. - Verwenden Sie die SetupIntent-ID, um das SetupIntent-Objekt [abzurufen](https://docs.stripe.com/api/setup_intents/retrieve.md). Das zurückgegebene Objekt enthält eine [payment_method](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-payment_method)-ID, die Sie im nächsten Schritt einem Kunden/einer Kundin zuordnen können. Erfahren Sie mehr über die [Einrichtung von Webhooks](https://docs.stripe.com/webhooks.md). ## Die Zahlungsmethode später belasten [Serverseitig] Nachdem Sie die PaymentMethod einer Kundin/einem Kunden zugewiesen haben, können Sie mit einem [PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method) eine *Off-Session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information)-Zahlung durchführen: - Legen Sie entweder für [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) die `Account`-ID oder für [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) die `Customer`-ID fest und legen Sie für [payment_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method) die `PaymentMethod`-ID fest. - Legen Sie [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) auf `true` fest, um anzugeben, dass der/die Kund/in sich während eines Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet und somit eine Authentifizierungsanfrage eines Partners, wie z. B. eines Kartenausstellers, einer Bank oder eines anderen Zahlungsinstituts, nicht erfüllen kann. Wenn ein Partner während Ihres Bezahlvorgangs eine Authentifizierung anfordert, fordert Stripe Ausnahmen unter Verwendung von Kundendetails aus einer vorherigen *On-Session*-Transaktion an. Wenn die Bedingungen für die Ausnahme nicht erfüllt sind, kann der PaymentIntent einen Fehler ergeben. - Legen Sie den Wert der Eigenschaft [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) des PaymentIntent auf `true` fest, wodurch die Bestätigung sofort beim Erstellen des PaymentIntent erfolgt. #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "payment_method={{PAYMENTMETHOD_ID}}" \ -d off_session=true \ -d confirm=true ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "customer={{CUSTOMER_ID}}" \ -d "payment_method={{PAYMENTMETHOD_ID}}" \ -d off_session=true \ -d confirm=true ``` Schlägt ein Zahlungsversuch fehl, schlägt die Anfrage ebenfalls mit einem 402-HTTP-Statuscode fehl, und der Status des PaymentIntent ist *requires\_payment\_method*. Fordern Sie Ihre/n Kund/in in diesem Fall auf, zu Ihrer Anwendung zurückzukehren (zum Beispiel per E-Mail oder In-App-Benachrichtigung), und leiten Sie sie/ihn zur Auswahl einer neuen Zahlungsmethode zu einer neuen Checkout-Sitzung weiter. #### Accounts v2 ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=1099" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d ui_mode=elements \ --data-urlencode "return_url=https://example.com/return" ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=1099" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d ui_mode=elements \ --data-urlencode "return_url=https://example.com/return" ``` # Setup Intents API > This is a Setup Intents API for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=elements. Mit der [Setup Intents API](https://docs.stripe.com/api/setup_intents.md) können Sie die Zahlungsdetails Ihrer Kundinnen und Kunden ohne vorherige Zahlung speichern. Das ist hilfreich, wenn Sie das Onboarding von Kundinnen/Kunden jetzt durchführen, Zahlungen für sie einrichten, diese aber erst später durchführen möchten (wenn die Kundinnen/Kunden offline sind). Verwenden Sie diese Integration, um wiederkehrende Zahlungen einzurichten oder einmalige Zahlungen zu erstellen, bei denen der endgültige Betrag später festgelegt wird (häufig erst nach Erhalt Ihrer Dienstleistung). > #### Transaktionen mit vorhandener Karte > > Bei Card-Present-Transaktionen, wie z. B. bei der Erfassung von Kartendaten über Stripe Terminal, wird ein anderes Verfahren zum Speichern der Zahlungsmethode verwendet. Weitere Informationen finden Sie in der [Terminal-Dokumentation](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md). ## Konformität Sie sind dafür verantwortlich, dass Sie alle geltenden Gesetze, Vorschriften und Netzwerkregeln einhalten, wenn Sie Zahlungsdetails auf Kundenseite speichern. Diese Anforderungen gelten in der Regel, wenn Sie Zahlungsmethoden Ihrer Kundinnen und Kunden für die zukünftige Verwendung speichern möchten. Ein Beispiel wäre, wenn Sie die kundenseitig bevorzugte Zahlungsmethode im Bezahlvorgang für einen zukünftigen Kauf anzeigen oder das Kundenkonto belasten möchten, wenn Kundinnen und Kunden Ihre Website oder App zu dem Zeitpunkt nicht aktiv nutzen. Fügen Sie Nutzungsbedingungen zu Ihrer Website oder App hinzu, aus denen hervorgeht, wie Sie die Zahlungsdetails speichern möchten, und lassen Sie Kundinnen und Kunden aktiv zu diesen zustimmen. Wenn Sie eine Zahlungsmethode speichern, können Sie diese nur für die in Ihren Konditionen vereinbarte Nutzung verwenden. Um eine Zahlungsmethode belasten zu können, wenn Kundinnen und Kunden offline sind, und diese Option auch für zukünftige Einkäufe zu speichern, müssen Sie explizit die kundenseitige Zustimmung einholen. Fügen Sie beispielsweise ein Kontrollkästchen mit dem Titel „Meine Zahlungsmethode für die zukünftige Verwendung speichern“ ein, um die Einwilligung zu erhalten. Um Zahlungen Ihrer Kundinnen und Kunden zu akzeptieren, wenn diese offline sind, fügen Sie unbedingt Folgendes in Ihre Konditionen ein: - Die kundenseitige Zustimmung, eine Zahlung oder mehrere Zahlungen für bestimmte Transaktionen in deren Namen einzuleiten. - Der erwartete Zeitpunkt und die voraussichtliche Häufigkeit von Zahlungen (z. B. Zahlungen für geplante Raten- oder Abonnementzahlungen oder für außerplanmäßige Aufstockungen). - Wie Sie den Zahlbetrag ermitteln. - Ihre Stornorichtlinie, wenn die Zahlungsmethode für einen Abonnementdienst ist. Dokumentieren Sie unbedingt die schriftliche Zustimmung Ihrer Kundinnen und Kunden zu diesen Bedingungen. > Wenn Sie die manuelle serverseitige Bestätigung verwenden müssen oder für Ihre Integration die separate Angabe von Zahlungsmethoden erforderlich ist, lesen Sie unseren [alternativen Leitfaden](https://docs.stripe.com/payments/save-and-reuse-cards-only.md). ## Stripe einrichten [Serverseitig] [Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login). Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Zahlungsmethoden aktivieren Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) zu erstellen. Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren. ## Kund/innen erstellen [Serverseitig] Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Objekt zuordnen, das Ihre Kundin/Ihre Kundin darstellt. Wenn Ihre Kundin/Kundin ein Konto erstellt oder die erste Transaktion mit Ihrem Unternehmen durchgeführt hat, erstellen Sie entweder ein kundenseitig konfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/create.md)-Objekt mit der Accounts v2 API oder ein [Customer](https://docs.stripe.com/api/customers/create.md)-Objekt mit der Customers API. > #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden > > Die Accounts v2 API ist allgemein für Connect-Nutzer/innen verfügbar und für andere Stripe-Nutzer/innen in der öffentlichen Vorschau. Wenn an der Accounts v2 Vorschau teilnehmen, müssen Sie eine [Vorschauversion](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in Ihrem Code angeben. > > Um Zugriff auf die Accounts v2 Vorschau anzufordern, {% collect-email modal=true modal_link_text=“sign up.” list=“payin-payout-reuse-waitlist@stripe.com” send_direct_email=true intro_text=“Sind Sie am frühzeitigen Zugang zur Vorschau der Accounts v2 API interessiert?" body_text=“Wir sind gerade dabei, die Vorschau von Accounts v2 bereitzustellen. Um Zugang zu beantragen, geben Sie unten Ihre E-Mail-Adresse ein.” form_cta_text=“Registrieren” success_text=“Danke! Wir melden uns bald.” show_email_confirmation=wahr /%} > > For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects. ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` ## SetupIntent erstellen [Serverseitig] > Wenn Sie das Payment Element rendern möchten, ohne zuvor einen SetupIntent zu erstellen, finden Sie weitere Informationen unter [Zahlungsdetails erfassen, bevor Sie einen Intent erstellen](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=setup). Ein [SetupIntent](https://docs.stripe.com/api/setup_intents.md) ist ein Objekt, das Ihre Absicht darstellt, die Zahlungsmethoden Ihrer Kundinnen/Kunden für zukünftige Zahlungen einzurichten. Die Zahlungsmethoden, die während des Bezahlvorgangs angezeigt werden, sind ebenfalls im `SetupIntent` enthalten. Sie können Stripe automatisch Zahlungsmethoden aus Ihren Dashboard-Einstellungen abrufen lassen oder sie manuell auflisten. Sofern Ihre Integration keine codebasierte Option zum Anbieten von Zahlungsmethoden erfordert, empfiehlt Stripe die automatisierte Option, da Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere Parameter auswertet, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort des/der Kund/in am relevantesten sind, erhalten Priorität. Zahlungsmethoden mit niedrigerer Priorität sind unter einem Überlaufmenü verborgen. #### Zahlungsmethoden im Dashboard verwalten Einige Zahlungsmethoden können nicht für zukünftige Zahlungen gespeichert werden und werden den Kundinnen/Kunden beim Einrichten zukünftiger Zahlungen nicht als Option angezeigt. Weitere Informationen zur Verwaltung von Zahlungsmethoden finden Sie unter [Optionen für die Integration von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md). Optional können Sie einen SetupIntent mit aktiviertem Parameter `automatic_payment_methods` erstellen. Der SetupIntent wird dann mit den Zahlungsmethoden erstellt, die Sie im Dashboard konfiguriert haben. Die Angabe des Parameters `automatic_payment_methods` ist optional, da Stripe diese Funktionalität in der neuesten API-Version standardmäßig aktiviert. Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. #### Accounts v2 ```curl curl https://api.stripe.com/v1/setup_intents \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "automatic_payment_methods[enabled]=true" ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/setup_intents \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d "automatic_payment_methods[enabled]=true" ``` #### Zahlungsmethoden manuell auflisten Erstellen Sie einen SetupIntent auf Ihrem Server mit einer Liste der [Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md), die Sie unterstützen möchten. #### Accounts v2 ```curl curl https://api.stripe.com/v1/setup_intents \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "payment_method_types[]=bancontact" \ -d "payment_method_types[]=card" \ -d "payment_method_types[]=ideal" ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/setup_intents \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "payment_method_types[]=bancontact" \ -d "payment_method_types[]=card" \ -d "payment_method_types[]=ideal" ``` ### Client-Geheimnis abrufen Im SetupIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client. #### Einseitige Anwendung Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the SetupIntent {client_secret: intent.client_secret}.to_json end ``` Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Serverseitiges Rendering Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden. Fügen Sie das [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem SetupIntent ab: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the SetupIntent erb :checkout end ``` > #### Verwendung von Radar > > Wenn Sie die Zahlungsmethode Ihrer Kundinnen und Kunden ohne anfängliche Zahlung speichern, reagiert [Radar](https://docs.stripe.com/radar.md) nicht standardmäßig auf den SetupIntent. Wenn Sie dies als Standard aktivieren möchten, rufen Sie die [Radar-Einstellungen](https://dashboard.stripe.com/settings/radar) auf und aktivieren die Option **Radar für zur späteren Verwendung gespeicherte Zahlungsmethoden verwenden**. ## Zahlungsdaten erfassen [Clientseitig] Sie können jetzt mit dem Payment Element Zahlungsdetails auf dem Client erfassen. Das [Payment Element](https://docs.stripe.com/payments/payment-element.md) ist eine vorgefertigte Komponente der Nutzeroberfläche, das die Erfassung von Zahlungsdaten für verschiedene Zahlungsmethoden vereinfacht. Das Payment Element enthält einen iFrame, der die Zahlungsinformationen sicher über eine HTTPS-Verbindung an Stripe sendet. Die Adresse der Bezahlseite muss mit `https://` und nicht mit `http://` beginnen, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne dies anzugeben, müssen dann aber [HTTPS manuell aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren. #### HTML + JS ### Stripe.js einrichten Das Payment Element ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es in den `head` Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon. ```html Checkout ``` Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript: ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` ### Das Payment Element zu Ihrer Zahlungseinrichtungsseite hinzufügen Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungseinrichtungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular. ```html
``` Wenn das vorherige Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden es mit dem Container DOM-Knoten. Übergeben Sie beim Erstellen der [Elements](https://docs.stripe.com/js/elements_object/create)-Instanz das [Client-Geheimnis](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) aus dem vorherigen Schritt an `options`. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements using the SetupIntent's client secretconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` Das Payment Element rendert ein dynamisches Formular, mit dem Kund/innen ihre gewünschte Zahlungsmethode auswählen können. Für jede Zahlungsmethode fordert das Formular die Kund/innen automatisch auf, alle erforderlichen Zahlungsdaten einzugeben. ### Erscheinungsbild anpassen Passen Sie das Payment Element an das Design Ihrer Website an, indem Sie beim Erstellen der `elements`-Instanz das [Appearance-Objekt](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) an `options` übergeben. Stripe Elements ist eine Sammlung sofort einsatzbereiter UI-Komponenten. Um Ihr Formular weiter anzupassen oder andere Informationen von Kundinnen und Kunden zu erfassen, lesen Sie die [Elements-Dokumentation](https://docs.stripe.com/payments/elements.md). ### Apple Pay-Händler-Token anfordern Wenn Sie Zahlungen mit Apple Pay akzeptieren, empfehlen wir, die `applePay`-[Option](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) zu konfigurieren, um die Anzeige in der Apple Pay-Nutzeroberfläche zu ändern. Dabei werden die [Händler-Token](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) von Apple Pay verwendet. Das folgende Beispiel zeigt eine Konfiguration für eine Zahlung, die am 5. Januar 2030 beginnt. Diese Informationen werden in der Apple Pay-Nutzeroberfläche angezeigt. ```javascript const paymentElement = elements.create('payment', { applePay: { deferredPaymentRequest: { paymentDescription: 'My deferred payment', managementURL: 'https://example.com/billing', deferredBilling: { amount: 2500, label: 'Deferred Fee', deferredPaymentDate: new Date('2030-01-05') }, } }, // Other options }); ``` #### React ### Stripe.js einrichten Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register: ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Den Elements-Anbieter zu Ihrer Zahlungseinrichtungsseite hinzufügen und konfigurieren Um die Payment Element-Komponente zu verwenden, wrappen Sie Zahlungseinrichtungsseiten-Komponente in einem [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter. Übergeben Sie auch das [Client-Geheimnis](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) aus dem vorherigen Schritt als `options` an den `Elements`-Anbieter. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import SetupForm from './SetupForm'; // Make sure to call `loadStripe` outside of a component's render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { // passing the SetupIntent's client secret clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Payment Element hinzufügen Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen: ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const SetupForm = () => { return (
); }; export default SetupForm; ``` Stripe Elements ist eine Sammlung von Drop-In-Komponenten der Nutzeroberfläche. Um Ihr Formular weiter anzupassen oder andere Kundeninformationen zu erfassen, durchsuchen Sie die [Elements-Dokumentation](https://docs.stripe.com/payments/elements.md). Das Payment Element rendert ein dynamisches Formular, mit dem Kund/innen ihre gewünschte Zahlungsmethode auswählen können. Für jede Zahlungsmethode fordert das Formular die Kund/innen automatisch auf, alle erforderlichen Zahlungsdaten einzugeben. ### Erscheinungsbild anpassen Passen Sie das Payment Element an das Design Ihrer Website an, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungsbild-Objekt](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) an `options` übergeben. ### Apple Pay-Händler-Token anfordern Wenn Sie Zahlungen mit Apple Pay akzeptieren, empfehlen wir, die `applePay`-[Option](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) zu konfigurieren, um die Anzeige in der Apple Pay-Nutzeroberfläche zu ändern. Dabei werden die [Händler-Token](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) von Apple Pay verwendet. Das folgende Beispiel zeigt eine Konfiguration für eine Zahlung, die am 5. Januar 2030 beginnt. Diese Informationen werden in der Apple Pay-Nutzeroberfläche angezeigt. ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const SetupForm = () => { const options = { applePay: { deferredPaymentRequest: { paymentDescription: 'My deferred payment', managementURL: 'https://example.com/billing', deferredBilling: { amount: 2500, label: 'Deferred Fee', deferredPaymentDate: new Date('2030-01-05') }, } }, // Other options }; return (
); }; export default SetupForm; ``` ### Währung konfigurieren Wenn Sie SetupIntents mit [automatic_payment_methods](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-automatic_payment_methods) verwenden, können Sie beim [Erstellen des Payment Element](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-currency) die Währung angeben. Das Payment Element rendert die aktivierten Zahlungsmethoden, die die angegebene Währung unterstützen. Weitere Details finden Sie in der [Payment Element-Dokumentation](https://docs.stripe.com/payments/payment-methods/integration-options.md). ### Adressen einholen Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Einige Verhaltensweisen, wie z. B. die [Berechnung der Steuer](https://docs.stripe.com/api/tax/calculations/create.md) oder die Eingabe der Versanddaten, erfordern die vollständige Adresse Ihrer Kundin/Ihres Kunden. Sie können Folgendes tun: - Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md), um die Vorteile der Funktionen der automatischen Vervollständigung und Lokalisierung zu nutzen, um die vollständige Adresse Ihrer Kundin oder Ihres Kunden zu erfassen. Dies trägt dazu bei, eine möglichst genaue Steuerberechnung zu gewährleisten. - Erfassen Sie Adressdaten mit Ihrem eigenen benutzerdefinierten Formular. ## Optional: Link in your checkout page [Clientseitig] Ermöglichen Sie Ihren Kundinnen und Kunden einen schnelleren Bezahlvorgang, indem Sie [Link](https://docs.stripe.com/payments/link.md) im [Payment Element](https://docs.stripe.com/payments/payment-element.md) verwenden. Sie können die Daten für jede angemeldete Kundin oder jeden angemeldeten Kunden automatisch ausfüllen, die oder der bereits Link nutzt, unabhängig davon, ob sie oder er ihre oder seine Daten ursprünglich bei Link bei einem anderen Unternehmen gespeichert hat. Die Standardintegration des Payment Element enthält eine Eingabeaufforderung für Link im Kartenformular. Um Link im Payment Element zu verwalten, gehen Sie zu den [Einstellungen Ihrer Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods). ![Authenticate or enroll with Link directly in the Payment Element during checkout](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png) Erfassen Sie eine Kunden-E-Mail-Adresse für die Authentifizierung oder Registrierung bei Link ### Integrationsoptionen Es gibt zwei Möglichkeiten, Link in das Payment Element zu integrieren. Stripe empfiehlt, eine Kunden-E-Mail-Adresse an das Payment Element zu übergeben, falls verfügbar. Denken Sie daran, den Bezahlvorgang zu berücksichtigen, wenn Sie sich für eine der folgenden Optionen entscheiden: | Integrationsoption | Bezahlvorgang | Beschreibung | | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Kunden-E-Mail-Adresse an Payment Element übergeben (Empfohlen) | - Ihre Kundinnen und Kunden geben ihre E-Mail-Adresse ein, bevor sie zum Bezahlvorgang gelangen (zum Beispiel bei einem früheren Schritt der Kontoerstellung). - Sie bevorzugen es, Ihr eigenes E-Mail-Eingabefeld zu verwenden. | Übergeben Sie eine Kunden-E-Mail-Adresse programmgesteuert an das Payment Element. In diesem Szenario authentifiziert sich eine Kundin bzw. ein Kunde direkt im Zahlungsformular bei Link, anstatt eine separate UI-Komponente zu verwenden. | | Kunden-E-Mail-Adresse im Payment Element erfassen | - Ihre Kundinnen und Kunden geben ihre E-Mail-Adresse ein und authentifizieren oder registrieren sich bei Link direkt während des Bezahlvorgangs im Payment Element. - Keine Codeänderung erforderlich. | Wenn sich eine Kundin bzw. ein Kunde noch nicht bei Link registriert hat und im Payment Element eine unterstützte Zahlungsmethode auswählt, wird sie/er aufgefordert, ihre/seine Daten über Link zu speichern. Bei bereits registrierten Kundinnen und Kunden füllt Link die Zahlungsinformationen automatisch aus. | Verwenden Sie [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues), um eine Kunden-E-Mail-Adresse an das Payment Element zu übergeben. ```javascript const paymentElement = elements.create('payment', { defaultValues: { billingDetails: { email: 'foo@bar.com', } }, // Other options }); ``` Weitere Informationen finden Sie unter [Erstellen einer benutzerdefinierten Bezahlseite mit Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md). ## Optional: Zahlungsmethoden von Kundinnen und Kunden speichern und abrufen Sie können das Payment Element so konfigurieren, dass die Zahlungsmethoden Ihrer Kundinnen und Kunden für die zukünftige Verwendung gespeichert werden. In diesem Abschnitt erfahren Sie, wie Sie die neue Funktion für [gespeicherte Zahlungsmethoden](https://docs.stripe.com/payments/save-customer-payment-methods.md) integrieren, mit der das Payment Element Folgendes tun kann: - Käufer/innen um Zustimmung zur Speicherung einer Zahlungsmethode bitten - Zahlungsmethoden speichern, wenn Käufer/innen zustimmen - Gespeicherte Zahlungsmethoden für zukünftige Käufe anzeigen - [Aktualisieren Sie verlorene oder abgelaufene Karten automatisch](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates), wenn Käufer/innen sie ersetzen ![Das Kontrollkästchen für Payment Element und eine gespeicherte Zahlungsmethode](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png) Zahlungsmethoden speichern. ![Das Payment Element mit einer gespeicherten Zahlungsmethode ausgewählt](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png) Verwenden Sie eine zuvor gespeicherte Zahlungsmethode erneut. ### Speichern der Zahlungsmethode im Payment Element aktivieren Erstellen Sie eine [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) auf Ihrem Server, indem Sie die Kunden-ID angeben (entweder mit `customer` für ein `Kunden`-Objekt oder `customer_account` für ein kundenseitig konfiguriertes `Konto`-Objekt) und die Komponente [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) für Ihre Sitzung aktivieren. Konfigurieren Sie, welche [Funktionen](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) Sie für gespeicherte Zahlungsmethoden aktivieren möchten. Wenn Sie beispielsweise [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) aktivieren, wird ein Kontrollkästchen angezeigt, mit dem Kundinnen/Kunden ihre Zahlungsdaten für die zukünftige Verwendung speichern können. Sie können `setup_future_usage` für einen PaymentIntent oder eine Checkout-Sitzung angeben, um das Standardverhalten zum Speichern von Zahlungsmethoden zu überschreiben. Dadurch wird sichergestellt, dass Sie die Zahlungsmethode automatisch für die zukünftige Verwendung speichern, auch wenn die Kundin/der Kunde sich nicht explizit dafür entscheidet. Wenn Sie beabsichtigen, `setup_future_usage` anzugeben, legen Sie `payment_method_save_usage` nicht in derselben Transaktion fest, da dies zu einem Integrationsfehler führt. > #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden > > Die Accounts v2 API ist allgemein für Connect-Nutzer/innen verfügbar und für andere Stripe-Nutzer/innen in der öffentlichen Vorschau. Wenn an der Accounts v2 Vorschau teilnehmen, müssen Sie eine [Vorschauversion](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in Ihrem Code angeben. > > Um Zugriff auf die Accounts v2 Vorschau anzufordern, {% collect-email modal=true modal_link_text=“sign up.” list=“payin-payout-reuse-waitlist@stripe.com” send_direct_email=true intro_text=“Sind Sie am frühzeitigen Zugang zur Vorschau der Accounts v2 API interessiert?" body_text=“Wir sind gerade dabei, die Vorschau von Accounts v2 bereitzustellen. Um Zugang zu beantragen, geben Sie unten Ihre E-Mail-Adresse ein.” form_cta_text=“Registrieren” success_text=“Danke! Wir melden uns bald.” show_email_confirmation=wahr /%} > > For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects. #### Accounts v2 #### Ruby ```ruby # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. client = Stripe::StripeClient.new('<>') post '/create-intent-and-customer-session' do intent = client.v1.setup_intents.create({ automatic_payment_methods: {enabled: true}, customer_account: {{CUSTOMER_ACCOUNT_ID}}, }) customer_session = client.v1.customer_sessions.create({ customer_account: {{CUSTOMER_ACCOUNT_ID}}, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { client_secret: intent.client_secret, customer_session_client_secret: customer_session.client_secret }.to_json end ``` #### Customers v1 #### Ruby ```ruby # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. client = Stripe::StripeClient.new('<>') post '/create-intent-and-customer-session' do intent = client.v1.setup_intents.create({ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, customer: {{CUSTOMER_ID}}, }) customer_session = client.v1.customer_sessions.create({ customer: {{CUSTOMER_ID}}, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { client_secret: intent.client_secret, customer_session_client_secret: customer_session.client_secret }.to_json end ``` Ihre Elements-Instanz verwendet das *Client-Geheimnis* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) der CustomerSession, um auf die gespeicherten Zahlungsmethoden dieses Kunden/dieser Kundin zuzugreifen. [Umgang mit Fehlern](https://docs.stripe.com/error-handling.md), wenn Sie die CustomerSession korrekt erstellen. Wenn ein Fehler auftritt, müssen Sie das Client-Geheimnis der CustomerSession nicht für die Elements-Instanz bereitstellen, da dies optional ist. Erstellen Sie die Elements-Instanz mit den Client-Geheimnissen sowohl für den SetupIntent als auch für die CustomerSession. Verwenden Sie dann diese Elements-Instanz, um ein Payment Element zu erstellen. ```javascript // Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-intent-and-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` Bei der Bestätigung des SetupIntent steuert Stripe.js automatisch die Einstellung [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) in der Zahlungsmethode, je nachdem, ob die Kundin/der Kunde das Kontrollkästchen aktiviert hat, um die Zahlungsdetails zu speichern. ### Auswahl einer gespeicherten Zahlungsmethode erkennen Um dynamische Inhalte zu steuern, wenn eine gespeicherte Zahlungsmethode ausgewählt wird, überwachen Sie das `change`-Ereignis des Payment Element, das automatisch mit der ausgewählten Zahlungsmethode ausgefüllt wird. ```javascript paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } }) ``` ## Übermitteln Sie die Zahlungsdetails an Stripe [Clientseitig] Verwenden Sie [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup), um die Einrichtung mit durch das Payment Element erfassten Daten abzuschließen. Geben Sie eine [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) an diese Funktion weiter, damit Stripe den/die Nutzer/in nach abgeschlossener Einrichtung weiterleiten kann. Gegebenenfalls leiten wir Kundinnen/Kunden zunächst an eine Zwischenwebsite weiter, wie etwa eine Bankautorisierungsseite, bevor wir sie an die `return_url` weiterleiten. Wenn Ihr Kunde/Ihre Kundin seine/ihre Kartendaten speichert, leiten wir ihn/sie nach erfolgreicher Einrichtung sofort zur `return_url` weiter. Wenn Sie für Kartenzahlungen keine Weiterleitung wünschen, können Sie [redirect](https://docs.stripe.com/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect) auf `if_required` festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit weiterleitungsbasierten Zahlungsmethoden bezahlen. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmSetup({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/account/payments/setup-complete', } }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React Verwenden Sie die Hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) und [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook), um [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) über die Komponente Ihres Zahlungsformulars aufzurufen. Wenn Sie herkömmliche Klassenkomponenten gegenüber Hooks bevorzugen, können Sie stattdessen einen [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) verwenden. ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const SetupForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return null; } const {error} = await stripe.confirmSetup({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/account/payments/setup-complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ) }; export default SetupForm; ``` Stellen Sie sicher, dass die `return_url` auf eine Seite Ihrer Website mit einer [Statusangabe](https://docs.stripe.com/payments/payment-intents/verifying-status.md) zum `SetupIntent` weiterleitet. Stripe stellt folgende URL-Abfrageparameter bereit, um den Status zu verifizieren, wenn wir den/die Kund/in an die `return_url` weiterleiten. Sie können bei Angabe der `return_url` auch Ihre eigenen Abfrageparameter hinzufügen.Diese bleiben auch während des Weiterleitungsprozesses bestehen. | Parameter | Beschreibung | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | `setup_intent` | Die eindeutige ID für die `SetupIntent` | | `setup_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) `des`SetupIntent`-Objekts. | Sie können [stripe.retrieveSetupIntent](https://docs.stripe.com/js/setup_intents/retrieve_setup_intent) zum Abruf des `SetupIntent` über den Abfrageparameter `setup_intent_client_secret` verwenden. Bei erfolgreicher Bestätigung des `SetupIntent` wird die resultierende `PaymentMethod`-ID (in `result.setupIntent.payment_method`) im bereitgestellten, vom Kunden/von der Kundin konfigurierten `Account` oder `Customer` gespeichert. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('{PUBLISHABLE_KEY}'); // Retrieve the "setup_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'setup_intent_client_secret' ); // Retrieve the SetupIntent stripe.retrieveSetupIntent(clientSecret).then(({setupIntent}) => { const message = document.querySelector('#message') // Inspect the SetupIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (setupIntent.status) { case 'succeeded': { message.innerText = 'Success! Your payment method has been saved.'; break; } case 'processing': { message.innerText = "Processing payment details. We'll update you when processing is complete."; break; } case 'requires_payment_method': { message.innerText = 'Failed to process payment details. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; } } }); ``` #### React ```jsx // PaymentStatus.jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "setup_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'setup_intent_client_secret' ); // Retrieve the SetupIntent stripe .retrieveSetupIntent(clientSecret) .then(({setupIntent}) => { // Inspect the SetupIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (setupIntent.status) { case 'succeeded': setMessage('Success! Your payment method has been saved.'); break; case 'processing': setMessage("Processing payment details. We'll update you when processing is complete."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Failed to process payment details. Please try another payment method.'); break; } }); }, [stripe]); return message }; export default PaymentStatus; ``` > Wenn Sie über Tools verfügen, die die Browser-Sitzung der Kund/innen verfolgen, müssen Sie möglicherweise die Domain `stripe.com` zur Referenz-Ausschlussliste hinzufügen. Weiterleitungen haben zur Folge, dass einige Tools neue Sitzungen erstellen. Dies wiederum hindert Sie daran, die gesamte Sitzung zu verfolgen. ## Die gespeicherte Zahlungsmethode später belasten [Serverseitig] > #### Compliance > > Sie sind für die Einhaltung aller geltenden Gesetze, Vorschriften und Netzwerkregeln verantwortlich, wenn Sie die Zahlungsdaten von Kundinnen und Kunden speichern. Wenn Sie Ihren Endkundinnen und Endkunden zuvor genutzte Zahlungsmethoden für zukünftige Einkäufe anzeigen, dürfen Sie nur Zahlungsmethoden auflisten, für die Sie bereits eine kundenseitige Zustimmung eingeholt haben, dank der Sie die Details der Zahlungsmethode für diese spezifische zukünftige Verwendung speichern können. Verwenden Sie den Parameter [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay), um zwischen Zahlungsmethoden zu unterscheiden, die mit Kundinnen und Kunden verknüpft sind und Ihren Endkundinnen und Endkunden als gespeicherte Zahlungsmethode für zukünftige Einkäufe angezeigt werden können oder nicht. Um eine Zahlungsmethode zum Belasten zu finden, listen Sie die Zahlungsmethoden auf, die mit Ihrer Kundin/Ihrem Kunden verknüpft sind. In diesem Beispiel sind Karten aufgeführt, Sie können jedoch jeden unterstützten [Typ](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) auflisten. > #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden > > Die Accounts v2 API ist allgemein für Connect-Nutzer/innen verfügbar und für andere Stripe-Nutzer/innen in der öffentlichen Vorschau. Wenn an der Accounts v2 Vorschau teilnehmen, müssen Sie eine [Vorschauversion](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in Ihrem Code angeben. > > Um Zugriff auf die Accounts v2 Vorschau anzufordern, {% collect-email modal=true modal_link_text=“sign up.” list=“payin-payout-reuse-waitlist@stripe.com” send_direct_email=true intro_text=“Sind Sie am frühzeitigen Zugang zur Vorschau der Accounts v2 API interessiert?" body_text=“Wir sind gerade dabei, die Vorschau von Accounts v2 bereitzustellen. Um Zugang zu beantragen, geben Sie unten Ihre E-Mail-Adresse ein.” form_cta_text=“Registrieren” success_text=“Danke! Wir melden uns bald.” show_email_confirmation=wahr /%} > > For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects. #### Accounts v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Customers v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Wenn Sie bereit sind, die Zahlung Ihrer Kundin/Ihres Kunden *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) zu belasten, verwenden Sie die `Kunden`-ID oder das von der Kundin/dem Kunden/Kundin konfigurierte `Konto` und die `PaymentMethod`-ID, um einen `PaymentIntent` mit dem Betrag und der Währungen der Zahlung zu erstellen. Legen Sie einige weitere Parameter fest, um die Off-Session-Zahlung durchzuführen: - Legen Sie [off_session](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-off_session) auf true fest, um anzugeben, dass der Kunde/die Kundin sich während eines Bezahlvorgangs nicht in Ihrem Bezahlvorgang befindet und somit eine Authentifizierungsanfrage eines Partners, wie z. B. eines Kartenausstellers, einer Bank oder eines anderen Zahlungsinstituts, nicht erfüllen kann. Wenn ein Partner während Ihres Bezahlvorgangs eine Authentifizierung anfordert, fordert Stripe Ausnahmen unter Verwendung von Kunden/Kundinnen aus einer vorherigen *On-Session*-Transaktion an. Wenn die Bedingungen für die Ausnahme nicht erfüllt sind, kann der `PaymentIntent` einen Fehler ergeben. - Setzen Sie [„confirm“](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) auf „true“, um sofort nach Erstellung des `PaymentIntent` eine Bestätigung auszulösen. - Legen Sie [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) auf die ID der `PaymentMethod` fest. - Je nachdem, wie Sie Kundinnen/Kunden in Ihrer Integration darstellen, legen Sie entweder [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) auf die ID des kundenseitig konfigurierten `Kontos` oder [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) auf die `Kunden`-ID fest. #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer={{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` Schlägt ein Zahlungsversuch fehl, schlägt die Anfrage ebenfalls mit einem 402 HTTP-Statuscode fehl, und der Status des PaymentIntent ist *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Sie müssen Ihre Kundinnen/Kunden auffordern, zu Ihrer Anwendung zurückzukehren (z. B. per E-Mail oder In-App-Benachrichtigung), um die Zahlung abzuschließen. Überprüfen Sie den Code des von der Stripe-API-Bibliothek ausgelösten [Fehlers](https://docs.stripe.com/api/errors/handling.md). Wenn die Zahlung aufgrund eines Ablehnungscodes vom Typ [authentication_required](https://docs.stripe.com/declines/codes.md) fehlgeschlagen ist, verwenden Sie das Client-Geheimnis des abgelehnten PaymentIntent mit confirmPayment, damit die Kundinnen/Kunden die Zahlung authentifizieren können. ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ // The client secret of the PaymentIntent clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` > Für die Durchführung von `stripe.confirmPayment` werden möglicherweise einige Sekunden benötigt. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Zeigen Sie stattdessen ein Wartesymbol an, wie beispielsweise eine Sanduhr. Tritt ein Fehler auf, teilen Sie dies der Kundin/dem Kunden mit, reaktivieren Sie das Formular und blenden Sie das Wartesymbol aus. Falls die Kundin/der Kunde weitere Schritte (z. B. eine Authentifizierung) für den Abschluss der Zahlung durchführen muss, begleitet sie Stripe.js bei diesem Vorgang. Wenn die Zahlung aus anderen Gründen fehlgeschlagen ist, z. B. wegen unzureichender Deckung, verweisen Sie Ihre Kundinnen/Kunden auf eine Zahlungsseite, um eine neue Zahlungsmethode einzugeben. Versuchen Sie die Zahlung mit den neuen Zahlungsdetails erneut durchzuführen und verwenden Sie hierfür den bestehenden PaymentIntent. ## Integration testen Verwenden Sie Test-Zahlungsdaten und die Test-Weiterleitungsseite um Ihre Integration zu überprüfen. Klicken Sie auf die nachfolgenden Registerkarten, um Details zu jeder Zahlungsmethode anzuzeigen. #### Karten | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Kreditkarte | Die Einrichtung der Karte ist erfolgreich und es ist keine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4242 4242 4242 4242` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte erfordert für die Ersteinrichtung, um nachfolgende Zahlungen erfolgreich abschließen zu können. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0025 0000 3155` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte erfordert für die Ersteinrichtung sowie für nachfolgende Zahlungen eine Authentifizierung. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0027 6000 3184` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte wurde während der Einrichtung abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0000 0000 9995` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | #### Bankumleitungen | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Bancontact | Ihr/e Kund/in richtet erfolgreich die Zahlungsmethode SEPA-Lastschrift für zukünftige Nutzung durch Bancontact ein. | Geben Sie im Bancontact-Formular einen beliebigen Namen ein und klicken Sie dann auf der Weiterleitungsseite auf die Option **Testeinrichtung autorisieren**. | | Bancontact | Ihre Kundin/Ihr Kunde konnte sich auf der Bancontact-Weiterleitungsseite nicht authentifizieren. | Geben Sie im Bancontact-Formular einen beliebigen Namen ein und klicken Sie dann auf der Weiterleitungsseite auf die Option für eine **fehlgeschlagene Testeinrichtung**. | | BECS-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `900123456` aus. Der bestätigte `PaymentIntent`-Status wechselt zunächst zur `Verarbeitung`, dann zum `Erfolg` 3 Minuten später. | | BECS-Lastschrift | Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl. | Füllen Sie das Formular mit der Kontonummer `111111113` aus. | | iDEAL | Ihr Kunde/Ihre Kundin richtet die Zahlungsmethode [SEPA-Lastschrift](https://docs.stripe.com/payments/sepa-debit.md) erfolgreich für die zukünftige Nutzung durch iDEAL ein. | Geben Sie im iDEAL-Formular einen beliebigen Namen und eine beliebige Bank ein und klicken Sie dann auf der Weiterleitungsseite auf die Option zum **Autorisieren der Testeinrichtung**. | | iDEAL | Ihr/Ihre Kund/in konnte sich auf der iDEAL-Weiterleitungsseite nicht authentifizieren. | Wählen Sie eine beliebige Bank, verwenden Sie einen beliebigen Namen im iDEAL-Formular und klicken Sie dann auf der Weiterleitungsseite auf die Option **Einrichtung des Tests fehlgeschlagen**. | #### Lastschriften | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte `PaymentIntent` geht zunächst in den Status `„wird verarbeitet“` und dann drei Minuten später in den Status `„erfolgreich“` über. | | SEPA-Lastschrift | Der Status der `PaymentIntent` Ihres/Ihrer Kund/in wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | ### Testen Sie das Belasten mit einer gespeicherten SEPA-Lastschrift Durch Bestätigen des `SetupIntent` mit iDEAL, Bancontact oder Sofort wird eine *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) für [SEPA Direct Debit](https://docs.stripe.com/payments/sepa-debit.md) generiert. SEPA-Lastschriften sind Zahlungsmethoden mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) , die in den Status `Zwischenverarbeitung` übergehen, bevor sie einige Tage später in den Status `erfolgreich` oder `requires_payment_method` übergehen. #### E-Mail-Adresse Setzen Sie `payment_method.billing_details.email` auf einen der folgenden Werte, um die `PaymentIntent`-Statusübergänge zu testen. Sie können Ihren eigenen benutzerdefinierten Text am Anfang der E-Mail-Adresse, gefolgt von einem Unterstrich, einfügen. Beispielsweise ergibt sich aus `test_1_generatedSepaDebitIntentsFail@example.com` eine SEPA-Lastschrift-PaymentMethod, die immer fehlschlägt, wenn sie mit einem `PaymentIntent` verwendet wird. | E-Mail-Adresse | Beschreibung | | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | | `generatedSepaDebitIntentsSucceed@example.com` | Der Status des `PaymentIntent` wechselt von `wird bearbeitet` zu `erfolgreich`. | | `generatedSepaDebitIntentsSucceedDelayed@example.com` | Der Status des `PaymentIntent` wechselt nach drei Minuten von `wird bearbeitet` zu `erfolgreich`. | | `generatedSepaDebitIntentsFail@example.com` | Der Status des `PaymentIntent` wechselt von `wird bearbeitet` zu `requires_payment_method`. | | `generatedSepaDebitIntentsFailDelayed@example.com` | Der Status des `PaymentIntent` wechselt nach mindestens drei Minuten von `wird bearbeitet` zu `requires_payment_method`. | | `generatedSepaDebitIntentsSucceedDisputed@example.com` | Der Status des `PaymentIntent` wechselt von `wird bearbeitet` zu `erfolgreich`, aber es wird sofort eine Zahlungsanfechtung erstellt. | | `generatedSepaDebitIntentsFailsDueToInsufficientFunds@example.com` | Der Status des `PaymentIntent` wechselt von `wird bearbeitet` zu `requires_payment_method` mit dem Fehlercode `insufficient_funds`. | #### PaymentMethod Verwenden Sie diese PaymentMethods, um die `PaymentIntent`-Statusübergänge zu testen. Diese Token sind nützlich für automatisierte Test, um die PaymentMethod sofort zum SetupIntent auf dem Server hinzuzufügen. | Zahlungsmethode | Beschreibung | | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | `pm_bancontact_generatedSepaDebitIntentsSucceed` | Der Status des `PaymentIntent` wechselt von `wird bearbeitet` zu `erfolgreich`. | | `pm_bancontact_generatedSepaDebitIntentsSucceedDelayed` | Der Status des `PaymentIntent` wechselt nach drei Minuten von `wird bearbeitet` zu `erfolgreich`. | | `pm_bancontact_generatedSepaDebitIntentsFail` | Der Status des `PaymentIntent` wechselt von `wird bearbeitet` zu `requires_payment_method`. | | `pm_bancontact_generatedSepaDebitIntentsFailDelayed` | Der Status des `PaymentIntent` wechselt nach mindestens drei Minuten von `wird bearbeitet` zu `requires_payment_method`. | | `pm_bancontact_generatedSepaDebitIntentsSucceedDisputed` | Der Status des `PaymentIntent` wechselt von `wird bearbeitet` zu `erfolgreich`, aber es wird sofort eine Zahlungsanfechtung erstellt. | | `pm_bancontact_generatedSepaDebitIntentsFailsDueToInsufficientFunds` | Der Status des `PaymentIntent` wechselt von `wird bearbeitet` zu `requires_payment_method` mit dem Fehlercode `insufficient_funds`. | ## Optional: Anpassen des Layouts [Clientseitig] Sie können das Layout des Payment Element (Akkordeon oder Registerkarten) an Ihre Checkout-Nutzeroberfläche anpassen. Weitere Informationen zu den einzelnen Eigenschaften finden Sie unter [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options). #### Accordion Mit der Verwendung der Layout-Funktionen können Sie beginnen, indem Sie beim Erstellen des Payment Element einen `type` und weitere optionale Eigenschaften übergeben: ```javascript const paymentElement = elements.create('payment', { layout: { type: 'accordion', defaultCollapsed: false, radios: 'always', spacedAccordionItems: false } }); ``` #### Registerkarten ### Legen Sie das Layout fest Legen Sie den Wert für das Layout auf `tabs` fest. Sie haben außerdem die Möglichkeit, andere Eigenschaften anzugeben, wie z. B.: ```javascript const paymentElement = elements.create('payment', { layout: { type: 'tabs', defaultCollapsed: false, } }); ``` Das folgende Bild zeigt dasselbe Payment Element, das mit unterschiedlichen Layout-Konfigurationen gerendert wurde. ![Drei Erfahrungen mit Bezahlformularen](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png) Layouts für Payment Element ## Optional: Apple Pay und Google Pay [Clientseitig] Wenn Sie [Kartenzahlungen aktivieren](https://docs.stripe.com/payments/save-and-reuse.md?platform=web&ui=elements#create-intent), zeigen wir Apple Pay und Google Pay für Kundinnen und Kunden an, deren Umgebung die [Wallet-Anzeigebedingungen](https://docs.stripe.com/testing/wallets.md) erfüllt. Um Zahlungen von diesen Wallets zu akzeptieren, müssen Sie außerdem Folgendes tun: - Aktivieren Sie sie in Ihren [Zahlungsmethodeneinstellungen](https://dashboard.stripe.com/settings/payment_methods). Apple Pay ist standardmäßig aktiviert. - [Registrieren Sie Ihre Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). > #### Regionale Tests > > Stripe Elements unterstützt weder Google Pay noch Apple Pay für Stripe-Konten und Kundinnen und Kunden in Indien. Daher können Sie Ihre Google Pay- oder Apple Pay-Integration nicht testen, wenn sich die IP-Adresse der testenden Person in Indien befindet, selbst wenn sich das Stripe-Konto außerhalb Indiens befindet. ## Stripe Ihren Kundinnen/Kunden anzeigen Stripe erfasst Informationen über Kundeninteraktionen mit Elements , um Ihnen Dienste bereitzustellen, Betrug vorzubeugen und seine Dienste zu verbessern. Dies umfasst auch die Verwendung von Cookies und IP-Adressen, um zu ermitteln, welche Elements ein/e Kund/in während einer einzelnen Checkout-Sitzung gesehen hat. Sie sind dafür verantwortlich, alle Rechte und Zustimmungen offenzulegen und einzuholen, die Stripe benötigen, um Ihre Daten auf diese Weise zu nutzen. Weitere Informationen finden Sie in unserem [Datenschutzcenter](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe). ## See also - [Zahlung annehmen](https://docs.stripe.com/payments/accept-a-payment.md) - [Zahlungsdetails während der Zahlung speichern](https://docs.stripe.com/payments/save-during-payment.md) - [Die Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md) - [Alle Risikofaktoren senden](https://docs.stripe.com/radar/optimize-risk-factors.md)