# Zahlung annehmen Nehmen Sie Zahlungen sicher online an. ## Starten Sie hier: Agent-Skills installieren Stripe empfiehlt die Verwendung offizieller Skills, um die Integration mit der API gemäß den Best Practices durchzuführen. Befolgen Sie die nachstehenden Anweisungen, um zu erfahren, wie das geht. **Tipp: Verwenden Sie curl anstelle der Fetch-Tools.** Skills sind detaillierte Markdown-Dateien mit einer Größe von 10–20 KB. Die Fetch-Tools fassen diese zusammen. `curl -sL` garantiert den vollständigen Inhalt. **Verwendung von `npx Skills`**: Überprüfen Sie, ob `npx` auf dem System installiert ist. Wenn `npx` verfügbar ist, führen Sie den Befehl `npx skills add https://docs.stripe.com --list` aus, um verfügbare Skills aufzulisten und führen Sie anschließend den Befehl `npx skills add https://docs.stripe.com --yes --skill <--skill other-skills>` aus, um einzelne Skills zu installieren. **Wenn `npx skills` nicht verfügbar sind**: Sie können curl verwenden, um den Index der verfügbaren Skills, ihre Funktionen und ihre Dateien von `https://docs.stripe.com/.well-known/skills/index.json`. abzurufen Um einen Skill und seine zugehörigen Dateien herunterzuladen, verwenden Sie curl, um sie von `https://docs.stripe.com/.well-known/skills/`. herunterzuladen Für diesen Artikel empfehlen wir die Verwendung folgender Skills: `stripe-best-practices` 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. 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. Erstellen Sie ein Zahlungsformular oder verwenden Sie eine vorgefertigte Bezahlseite, um mit der Annahme von Online-Zahlungen zu beginnen. # Payment Intents API Erstellen Sie ein individuelles Zahlungsformular mit [Stripe Elements](https://docs.stripe.com/payments/elements.md) und der [Payment Intents API](https://docs.stripe.com/api/payment_intents.md). [Vergleichen Sie diese Integration mit den anderen Integrationstypen von Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). Die Payment Intents API ist eine untergeordnete API, die Sie zum Erstellen Ihres eigenen Bezahlvorgangs oder Zahlungsablaufs verwenden können. Sie erfordert aber deutlich mehr Code und laufende Wartung. Wir empfehlen für die meisten Integrationen [Payment Element mit Checkout-Sitzungen](https://docs.stripe.com/payments/quickstart-checkout-sessions.md), da es ähnliche Zahlungen wie Payment Intents abdeckt. Erfahren Sie mehr darüber, [wann Sie Checkout-Sitzungen anstelle von PaymentIntents verwenden sollten](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Mit dem clientseitigen und serverseitigen Code wird ein Bezahlformular erstellt, das verschiedene Zahlungsmethoden akzeptiert. #### Integrationsaufwand Complexity: 4/5 #### Integration Komponenten der Nutzeroberfläche in einem nutzerdefinierten Zahlungsablauf kombinieren #### Anpassung der Nutzeroberfläche Anpassung auf CSS-Ebene mit der [Appearance API](https://docs.stripe.com/elements/appearance-api.md) > #### Möchten Sie Stripe Tax, Rabatte, Versand oder Währungsumrechnung nutzen? > > Stripe verfügt über eine Integration für das Payment Element, die Steuern, Rabatte, Versand und Währungsumrechnung für Sie verwaltet. Weitere Informationen finden Sie unter [Bezahlvorgangseite erstellen](https://docs.stripe.com/payments/quickstart-checkout-sessions.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). 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. 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' ``` ## PaymentIntent erstellen [Serverseitig] > Wenn Sie das Payment Element vor dem Erstellen eines PaymentIntent rendern möchten, finden Sie weitere Informationen unter [Erfassen von Zahlungsdetails vor dem Erstellen eines Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Das [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)-Objekt stellt Ihre Absicht dar, Zahlungen abzuwickeln und Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Zahlungsvorgang zu dokumentieren. In diesem Dokument finden Sie eine allgemeine Übersicht über die Zahlungsintegration. (See full diagram at https://docs.stripe.com/payments/accept-a-payment) ### PaymentIntent erstellen Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem [Betrag](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) und einer [Währung](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). In der neuesten Version der API ist die Angabe des Parameters `automatic_payment_methods` optional, da Stripe die Funktionalität standardmäßig aktiviert. Sie können Zahlungsmethoden über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe der in Frage kommenden Zahlungsmethoden anhand von Faktoren wie Transaktionsbetrag, Währung und Zahlungsablauf aus. Stripe verwendet Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods), um die von Ihnen aktivierten Zahlungsmethoden anzuzeigen. Um zu sehen, wie Ihre Zahlungsmethoden Kundinnen und Kunden angezeigt werden, geben Sie eine Transaktions-ID ein oder legen Sie einen Betrag und eine Währungen einer Bestellung im [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review) fest. Zur Überschreibung von Zahlungsmethoden listen Sie alle Zahlungsmethoden, die Sie aktivieren möchten, manuell mit dem Attribut [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) auf. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" ``` > Legen Sie den zu zahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht auf Client-Seite. So wird verhindert, dass böswillige Kund/innen ihre eigenen Preise festlegen können. ### Client-Geheimnis abrufen Im PaymentIntent 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 PaymentIntent {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/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Zahlungsdaten erfassen [Clientseitig] Erfassen Sie Zahlungsdetails auf dem Client mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md). Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, die die Erfassung von Zahlungsdaten für eine Vielzahl von Zahlungsmethoden vereinfacht. Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen. Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das Attribut [Zulassen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) des Iframes auf `"payment*"` gesetzt sein. Die Adresse der Bezahlseite muss mit `https://` beginnen, nicht mit `http://`, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu [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 die 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('<>'); ``` ### Payment Element Ihrer Bezahlseite hinzufügen Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungsseite. 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 DOM-Knoten (Container). Übergeben Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt an `options`, wenn Sie die [Elements](https://docs.stripe.com/js/elements_object/create)-Instanz erstellen: Gehen Sie sorgfältig mit dem Client-Geheimnis um, denn es kann die Zahlung abschließen. Protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nur dem/der Kund/in preis. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### 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 Zahlungsseite hinzufügen und konfigurieren Um die Payment Element-Komponente zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. 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/payment_intents/object.md#payment_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 CheckoutForm from './CheckoutForm'; // 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 client secret obtained in step 3 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 CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` 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. ### 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. ### Apple Pay-Händler-Token anfordern Wenn Sie Ihre Integration für die [Annahme von Zahlungen per Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout) konfiguriert haben, empfehlen wir die Konfiguration der Apple Pay-Schnittstelle, um ein Händler-Token zurückzugeben und von Händlern/Händlerinnen initiierte Transaktionen zu ermöglichen. [Fordern Sie den entsprechenden Händler-Token-Typ](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) im Payment Element an. ## 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 Wenn Sie einen [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) auf Ihrem Server erstellen, erstellen Sie auch eine [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md), mit der Sie die Kunden-ID angeben (entweder mit `customer` für ein `Kunden`-Objekt oder mit `customer_account` für ein von 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, in 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 Sie 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 /%} > > Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), anstatt [Customer](https://docs.stripe.com/api/customers.md)-Objekte zu verwenden. #### 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.payment_intents.create({ amount: 1099, currency: 'usd', 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.payment_intents.create({ amount: 1099, currency: 'usd', # 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 PaymentIntent 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 der PaymentIntent steuert Stripe.js automatisch die Einstellung [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) für den PaymentIntent und [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) für die PaymentMethod, je nachdem, ob die Kundin/der Kunde das Kontrollkästchen aktiviert hat, um die Zahlungsdetails zu speichern. ### Erneute Erfassung der CVC erzwingen Geben Sie optional `require_cvc_recollection` [beim Erstellen der PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) an, um die erneute Erfassung der Prüfziffer/CVC zu erzwingen, wenn ein Kunde/eine Kundin mit einer Karte bezahlt. ### 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 } }) ``` ## 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). ![Authentifizierung oder Registrierung bei Link direkt im Payment Element während des Bezahlvorgangs](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png) Erfassen Sie eine Kunden-E-Mail-Adresse für die Link-Authentifizierung oder Registrierung ### 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: Updates vom Server abrufen [Clientseitig] Möglicherweise möchten Sie Attribute des PaymentIntent aktualisieren, nachdem das Payment Element gerendert wurde, z. B. den [Betrag](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (z. B. für Rabattcodes oder Versandkosten). Auf Ihrem Server können Sie [den PaymentIntent aktualisieren](https://docs.stripe.com/api/payment_intents/update.md) und dann [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) aufrufen, um den neuen Betrag im Payment Element zu sehen. Dieses Beispiel zeigt Ihnen, wie Sie den Server-Endpoint erstellen, der den Betrag im PaymentIntent aktualisiert: #### 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('<>') get '/update' do intent = client.v1.payment_intents.update( '{{PAYMENT_INTENT_ID}}', {amount: 1499}, ) {status: intent.status}.to_json end ``` Dieses Beispiel zeigt, wie die Nutzeroberfläche aktualisiert wird, um die Änderungen auf der Client-Seite zu berücksichtigen: ```javascript (async () => { const response = await fetch('/update'); if (response.status === 'requires_payment_method') { const {error} = await elements.fetchUpdates(); } })(); ``` ## Zahlung an Stripe senden [Clientseitig] Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit Details aus dem Payment Element vorzunehmen. Geben Sie für diese Funktion eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) an, um anzugeben, wohin Stripe die Nutzer/innen nach Durchführung der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite weitergeleitet, wie z. B. eine Bankautorisierungsseite, bevor sie zur `return_url` weitergeleitet werden. Kartenzahlungen werden sofort zur `return_url` weitergeleitet, wenn eine Zahlung erfolgreich war. Wenn Sie Kartenzahlungen nach Abschluss der Zahlung nicht weiterleiten möchten, können Sie [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_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.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, 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`. } }); ``` #### 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.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) ü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 CheckoutForm = () => { 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; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, 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) 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 CheckoutForm; ``` Achten Sie darauf, dass die `return_url` auf eine Seite Ihrer Website verweist, die den Status der Zahlung angibt. Wenn Stripe den/die Kund/in an die `return_url` weiterleitet, stellen wir die folgenden URL-Abfrageparameter bereit: | Parameter | Beschreibung | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | Die eindeutige ID für die `PaymentIntent`. | | `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. | > 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. Verwenden Sie einen der Abfrageparameter, um den PaymentIntent abzurufen. Überprüfen Sie den [Status des PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md), um zu entscheiden, was Ihren Kundinnen/Kunden angezeigt werden soll. Sie können bei der Angabe der `return_url` auch Ihre eigenen Abfrageparameter anhängen, die während des Weiterleitungsvorgangs erhalten bleiben. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `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 (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```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 "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `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 (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ## Ereignisse nach Zahlung verarbeiten [Serverseitig] Stripe sendet ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie [Webhook-Tool im Dashboard](https://dashboard.stripe.com/webhooks) oder folgen Sie der [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows. Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie [verschiedene Arten von Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren. Neben der Abwicklung des `payment_intent.succeeded`-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen: | Ereignis | Beschreibung | Aktion | | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein `payment_intent.succeeded`- oder ein `payment_intent.payment_failed`-Ereignis. | Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt. | Wenn eine Zahlung von `processing` zu `payment_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. | ## Integration testen So testen Sie Ihre nutzerdefinierte Zahlungsintegration: 1. Erstellen Sie einen Payment Intent und rufen Sie das Client-Geheimnis ab. 2. Geben Sie die Zahlungsdetails mit einer Methode aus der folgenden Tabelle ein. - Geben Sie für die Karte ein beliebiges Ablaufdatum in der Zukunft ein. - Geben Sie als Prüfziffer/CVC eine 3-stellige Zahl ein. - Geben Sie eine beliebige Postleitzahl ein. 3. Übermitteln Sie die Zahlung an Stripe. Sie werden an Ihre `return_url` weitergeleitet. 4. Gehen Sie zum Dashboard und suchen Sie auf der Seite [Transaktionen](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful) nach der Zahlung. Wenn Ihre Zahlung erfolgreich war, wird sie in dieser Liste angezeigt. 5. Klicken Sie auf Ihre Zahlung, um weitere Details wie Rechnungsinformationen und die Liste der gekauften Artikel anzuzeigen. Sie können diese Informationen zur Abwicklung der Bestellung verwenden. Erfahren Sie mehr über das [Testen Ihrer Integration](https://docs.stripe.com/testing.md). #### Karten | Kartennummer | Szenario | So führen Sie den Test durch | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000002500003155 | Für die Kartenzahlung ist eine *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 mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000000000009995 | Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 6205500000000000004 | Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | #### Digitale Geldbörsen (Wallets) | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Alipay | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [sofortiger Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | #### Bankumleitungen | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BECS-Lastschriftverfahren | Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `900123456` und BSB `000000` aus. Der bestätigte PaymentIntent geht zunächst in den Status `processing` über und dann 3 Minuten später in den Status `succeeded`. | | BECS-Lastschriftverfahren | Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl. | Füllen Sie das Formular mit der Kontonummer `111111113` und BSB `000000` aus. | | Bancontact, EPS, iDEAL und Przelewy24 | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit sofortiger Benachrichtigung nicht authentifizieren. | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | Pay by Bank | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | | Pay by Bank | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit verzögerter Benachrichtigung nicht authentifizieren. | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | BLIK | BLIK-Zahlungen können aus verschiedenen Gründen fehlschlagen. Es gibt sofortige Fehler (der Code ist abgelaufen oder ungültig), verzögerte Fehler (die Bank lehnt ab) oder Zeitüberschreitungen (der/die Kund/in hat nicht rechtzeitig reagiert). | Verwenden Sie E-Mail-Muster, um [die verschiedenen Fehler zu simulieren](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Banklastschriften | 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. | #### Gutscheine | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Ihr/e Kund/in bezahlt mit einem Boleto- oder OXXO-Gutschein. | Wählen Sie als Zahlungsmethode Boleto oder OXXO aus und übermitteln Sie die Zahlung. Schließen Sie das OXXO-Dialogfeld, nachdem es angezeigt wurde. | Hier finden Sie weitere Informationen zum [Testen](https://docs.stripe.com/testing.md) Ihrer Integration. ## Optional: Weitere Zahlungsmethoden hinzufügen Das Payment Element [unterstützt standardmäßig viele Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods). Für die Aktivierung und Anzeige einiger Zahlungsmethoden sind zusätzliche Schritte erforderlich. ### Affirm Um Affirm verwenden zu können, müssen Sie es im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren. Wenn Sie einen PaymentIntent mit der Zahlungsmethode Affirm erstellen, müssen Sie eine [Versandadresse](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping) angeben. In diesem Beispiel wird vorgeschlagen, die Versandinformationen an den Client weiterzugeben, nachdem der Kunde/die Kundin [seine/ihre Zahlungsmethode ausgewählt hat](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). Erfahren Sie mehr über die Verwendung von [Affirm](https://docs.stripe.com/payments/affirm.md) mit Stripe. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); if (error) { // This point is reached if there's 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 is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { 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; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); 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 CheckoutForm; ``` #### Affirm testen In der folgenden Tabelle erfahren Sie, wie Sie verschiedene Szenarien testen können: | Szenario | So führen Sie den Test durch | | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | | Ihr/e Kund/in zahlt erfolgreich mit Affirm. | Füllen Sie das Formular aus (denken Sie daran, eine Lieferadresse anzugeben) und authentifizieren Sie die Zahlung. | | Ihr/e Kund/in konnte sich auf der Affirm-Weiterleitungsseite nicht authentifizieren. | Füllen Sie das Formular aus und klicken Sie auf der Weiterleitungsseite auf **Fehlgeschlagene Testzahlung**. | ### Afterpay (Clearpay) Wenn Sie einen PaymentIntent mit der Zahlungsmethode Afterpay erstellen, müssen Sie eine [Versandadresse](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping) angeben. Erfahren Sie mehr über die Verwendung von [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) mit Stripe. Sie können Zahlungsmethoden über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe übernimmt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. In der neuesten Version der API ist die Angabe des Parameters `automatic_payment_methods` optional, da Stripe diese Funktionalität standardmäßig aktiviert. Stellen Sie sicher, dass Sie Afterpay / Clearpay im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "shipping[name]=Jenny Rosen" \ -d "shipping[address][line1]=1234 Main Street" \ -d "shipping[address][city]=San Francisco" \ -d "shipping[address][state]=CA" \ -d "shipping[address][country]=US" \ -d "shipping[address][postal_code]=94111" ``` #### Afterpay testen (Clearpay) In der folgenden Tabelle erfahren Sie, wie Sie verschiedene Szenarien testen können: | Szenario | So führen Sie den Test durch | | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | Ihr/e Kund/in zahlt erfolgreich mit Afterpay. | Füllen Sie das Formular aus (denken Sie daran, eine Lieferadresse anzugeben) und authentifizieren Sie die Zahlung. | | Ihr/e Kund/in konnte sich auf der Afterpay-Weiterleitungsseite nicht authentifizieren. | Füllen Sie das Formular aus und klicken Sie auf der Weiterleitungsseite auf **Fehlgeschlagene Testzahlung**. | ### Apple Pay und Google Pay Wenn Sie [Kartenzahlungen aktivieren](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), 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. - Stellen Sie Ihre Anwendung über HTTPS in einer Entwicklungs- und Produktionsumgebung bereit. - [Registrieren Sie Ihre Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). - [Rufen Sie Aktualisierungen vom Server](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) ab, wenn der Betrag eines [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) aktualisiert wird, um das Zahlungsmodal der Wallets synchron zu halten. > #### 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. Erfahren Sie mehr über die Verwendung von [Apple Pay](https://docs.stripe.com/apple-pay.md) und [Google Pay](https://docs.stripe.com/google-pay.md) mit Stripe. ### ACH Direct Debit Wenn Sie das Payment Element mit der Zahlungsmethode ACH-Lastschriftverfahren verwenden, befolgen Sie diese Schritte: 1. Erstellen Sie entweder ein kundenkonfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer)-Objekt oder ein [Customer](https://docs.stripe.com/api/customers/create.md)-Objekt, um Ihre Kundin/Ihren Kunden darzustellen. #### Accounts v2 ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-05-27.preview" \ --json '{ "configuration": { "customer": {} } }' ``` #### Customers v1 ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` 1. Geben Sie beim Erstellen des `PaymentIntent` die Kunden-ID an. #### 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 setup_future_usage=off_session \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" ``` #### 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 setup_future_usage=off_session \ -d "customer={{CUSTOMER_ID}}" ``` 2. Wählen Sie eine [Verifizierungsmethode](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method). Bei Verwendung der Zahlungsmethode ACH-Lastschrift mit dem Payment Element können Sie nur `automatic` oder `instant` auswählen. Erfahren Sie mehr über die Verwendung des [ACH-Lastschriftverfahrens](https://docs.stripe.com/payments/ach-direct-debit.md) mit Stripe. #### ACH-Lastschriftverfahren testen | Szenario | So führen Sie den Test durch | | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Ihr/e Kund/in zahlt erfolgreich mit einem US-Bankkonto mittels sofortiger Verifizierung. | Wählen Sie **US-Bankkonto** aus und füllen Sie das Formular aus. Klicken Sie auf die Testinstitution. Folgen Sie den Anweisungen auf dem Modal, um Ihr Bankkonto zu verknüpfen. Klicken Sie auf Ihre Zahlungsschaltfläche. | | Ihr/e Kund/in zahlt erfolgreich mit einem US-Bankkonto mittels Mikroeinzahlungen. | Wählen Sie **US-Bankkonto** aus und füllen Sie das Formular aus. Klicken Sie auf **Bankdaten stattdessen manuell eingeben**. Befolgen Sie die Anweisungen im Modalfenster, um Ihr Bankkonto zu verknüpfen. Sie können diese [Testkontonummern](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers) verwenden. Klicken Sie auf Ihre Zahlungsschaltfläche. | | Ihr/e Kund/in schließt die Verknüpfung des Bankkontos nicht ab. | Wählen Sie **US-Bankkonto** aus und klicken Sie auf die Testinstitution oder **Bankdaten stattdessen manuell eingeben**. Schließen Sie das Modal, ohne es abzuschließen. | ### BLIK Bei Verwendung des Payment Element mit BLIK können die Nutzer/innen das Modal schließen und sie auffordern, die Zahlung in ihrer Banking-App zu autorisieren. Dies löst eine Weiterleitung zu Ihrer `return_url` aus und der/die Nutzer/in kehrt nicht zur Bezahlseite zurück. Erfahren Sie mehr über die Verwendung von [BLIK](https://docs.stripe.com/payments/blik.md) mit Stripe. Um das Schließen des Modals durch Nutzer/innen zu handhaben, prüfen Sie im serverseitigen Handler für Ihre `return_url` den `status` des Payment Intent, um zu sehen, ob er `succeeded` ist oder immer noch `requires_action` (d. h. der/die Nutzer/in hat das Modal ohne Autorisierung geschlossen). Verfahren Sie mit jedem Fall einzeln. ### Zahlungsmethoden mit QR-Codes Bei Verwendung des Payment Elements mit einer Zahlungsmethode, die auf einem QR-Code basiert (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), kann der/die Nutzer/in das QR-Code-Modal schließen. Dies löst eine Weiterleitung zu Ihrer `return_url` aus und der/die Nutzer/in kehrt nicht zur Bezahlseite zurück. Um das Schließen von QR-Code-Modals durch Nutzer/innen zu handhaben, prüfen Sie am serverseitigen Handler für Ihre `return_url` den `status` der Payment Intent, um zu sehen, ob er `succeeded` ist oder immer noch `requires_action` (d. h. der/die Nutzer/in hat das Modal geschlossen, ohne zu bezahlen), wobei jeder Fall nach Bedarf behandelt wird. Alternativ können Sie die automatische Weiterleitung zu Ihrer `return_url` verhindern, indem Sie den erweiterten optionalen Parameter [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) übergeben, der die Weiterleitung beim Schließen eines QR-Code-Modals verhindert. ### Barzahlung per App Das Payment Element rendert ein dynamisches Formular im Desktop-Web oder im mobilen Web unterschiedlich, da es unterschiedliche Kundenauthentifizierungsmethoden verwendet. Erfahren Sie mehr über die Verwendung von [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) mit Stripe. #### Element der mobilen Web-App Cash App Pay ist eine auf Weiterleitung basierende Zahlungsmethode im mobilen Web. Ihre Kundinnen und Kunden werden im Live-Modus zur Cash App oder zu einer Testzahlungsseite in einer Testumgebung weitergeleitet. Nachdem die Zahlung abgeschlossen ist, werden sie zur `return_url` umgeleitet, unabhängig davon, ob Sie `redirect=if_required` festlegen oder nicht. #### Desktop -Web-App-Element Cash App Pay ist eine QR-Code-Zahlungsmethode im Desktop-Web, bei der das Payment Element ein QR-Code-Modal rendert. Ihr/e Kund/in muss den QR-Code mit einer QR-Code-Scanner-Anwendung oder der mobilen Cash-App-Anwendung scannen. Im Live-Modus werden Kundinnen und Kunden zur `return_url` weitergeleitet, sobald sie zur Cash App weitergeleitet werden. Im Test-Modus können sie die Zahlung genehmigen oder ablehnen, bevor sie zur `return_url` weitergeleitet werden. Kundinnen und Kunden können das QR-Code-Modal auch schließen, bevor die Zahlung abgeschlossen wird. Dadurch wird eine Weiterleitung zu Ihrer `return_url` ausgelöst. Stellen Sie sicher, dass die `return_url` mit einer Seite auf Ihrer Website übereinstimmt, um den `status` des Payment Intent zu überprüfen. Der `status` des Payment Intent kann `succeeded`, `failed` oder `requires_action` lauten (z. B. hat der/die Kund/in das Modal geschlossen, ohne den QR-Code zu scannen). Alternativ können Sie die automatische Weiterleitung an Ihre `return_url` verhindern, indem Sie den erweiterten optionalen Parameter `redirect=if_required` übergeben, der die Weiterleitung beim Schließen eines QR-Code-Modals verhindert. ### PayPal Um PayPal zu verwenden, müssen Sie sicherstellen, dass Sie sich in einer [registrierten Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) befinden. ## 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 - [Stripe Elements](https://docs.stripe.com/payments/elements.md) - [Zukünftige Zahlungen einrichten](https://docs.stripe.com/payments/save-and-reuse.md) - [Zahlungsdetails während der Zahlung speichern](https://docs.stripe.com/payments/save-during-payment.md) - [Berechnung von Sales Tax, GST und USt. in Ihrem Zahlungsablauf](https://docs.stripe.com/tax/standalone-tax-api.md)