# Zweistufige Bestätigung erstellen
Fügen Sie eine optionale Überprüfungsseite hinzu oder führen Sie Validierungen durch, nachdem Nutzer/innen ihre Zahlungsdaten eingegeben haben.
Während wir für die meisten Szenarien die [Standard-Integration](https://docs.stripe.com/payments/accept-a-payment-deferred.md) empfehlen, können Sie mit dieser Integration einen zusätzlichen Schritt in Ihren Bezahlvorgang einfügen. So können Sie andere Aktionen durchführen, bevor Sie die Bestellung bestätigen, z. B. Folgende.
- Der Kundin / dem Kunden seine/ihre Bestellung zur Überprüfung vorlegen.
- Zusätzliche Validierungen ausführen.
- Steuer wird berechnet und der fällige Gesamtbetrag wird aktualisiert.
## Stripe einrichten
Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register).
Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung:
#### 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
> Dieser Integrationspfad unterstützt keine BLIK-Zahlungen oder vorab autorisierte Lastschriften, die das Automated Clearing Settlement System (ACSS) verwenden. Außerdem können Sie bei der clientseitigen Erstellung des verzögerten Intents `customer_balance` nicht mit dynamischen Zahlungsmethoden verwenden, da der PaymentIntent ein kundenkonfiguriertes [Konto](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer)- oder [Kunden](https://docs.stripe.com/api/customers/object.md)-Objekt erfordert, was der clientseitige Ablauf nicht unterstützt. Um `customer_balance` zu verwenden, erstellen Sie den `PaymentIntent` serverseitig mit einem `Konto` oder `Kunden` und geben Sie dessen `client_secret` an den Client zurück.
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 *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) 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.
## Zahlungsdetails erfassen [Client-seitig]
Verwenden Sie das [Payment Element](https://docs.stripe.com/payments/payment-element.md), um in einem iFrame erfasste Zahlungsinformationen sicher über eine HTTPS-Verbindung an Stripe zu senden.
> #### Widersprüchliche iFrames
>
> Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da es im Widerspruch zu Zahlungsmethoden steht, die eine Weiterleitung zu einer anderen Seite zur Zahlung erfordern.
Die Adresse Ihrer Bezahlseite muss mit `https://` rather beginnen, nicht mit `http://` for, 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
### Einrichten von Stripe.js
Das Payment Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es im `head` Ihrer HTML-Datei einfügen. 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 eine Instanz von Stripe mit dem folgenden JavaScript auf Ihrer Bezahlseite:
```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('<>');
```
### Fügen Sie das Payment Element zu Ihrer Checkout-Seite hinzu
Das Payment Element benötigt einen festen Platz auf Ihrer Checkout-Seite. Erstellen Sie in Ihrem Zahlungsformular einen leeren DOM-Knoten (Container) mit einer eindeutigen ID:
```html
```
Nachdem Ihr Formular geladen wurde, erstellen Sie eine Elements-Instanz mit dem Modus, dem Betrag und der Währung. Diese Werte bestimmen, welche Zahlungsmethoden das Element Ihren Kundinnen und Kunden anzeigt.
Erstellen Sie dann eine Instanz des Payment Element und verbinden Sie sie mit dem Container DOM-Knoten.
```javascript
const options = {mode:'payment',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
#### Reagieren
### Einrichten von Stripe.js
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 Checkout-Seite 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.
Der Anbieter `Elements` akzeptiert auch den Modus, den Betrag und die Währung. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kund/innen angezeigt werden.
```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 = {mode:'payment',
amount: 1099,
currency: 'usd',
// 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;
```
Das Payment Element rendert ein dynamisches Formular, mit dem Ihr/e Kund/in eine Zahlungsmethode auswählen kann. Das Formular erfasst automatisch alle notwendigen Zahlungsdetails für die vom Kunden/von der Kundin ausgewählte Zahlungsmethode.
Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungs-Objekt](https://docs.stripe.com/elements/appearance-api.md) 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.
## Optional: Anpassen des Layouts [Client-seitig]
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.
Layouts für Payment Element
## Optional: Passen Sie das Erscheinungsbild an [Client-seitig]
Nachdem Sie das Payment Element zu Ihrer Seite hinzugefügt haben, können Sie das Erscheinungsbild an Ihr Design anpassen. Weitere Informationen zum Anpassen des Payment Element finden Sie unter [Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md).
Payment Element anpassen
## 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
Zahlungsmethoden speichern.
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 /%}
>
> 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-customer-session' do
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',
},
},
},
})
{
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-customer-session' do
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',
},
},
},
})
{
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 dem Client-Geheimnis der CustomerSession. Verwenden Sie dann die Elements-Instanz, um ein Payment Element zu erstellen.
```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
method: "POST"
});
const {
customer_session_client_secret: customerSessionClientSecret
} = await res.json();
const elementsOptions = {
mode: 'payment',
amount: 1099,
currency: 'usd',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
Wenn Sie PaymentIntents verwenden, geben Sie optional `require_cvc_recollection` an, sowohl [beim Erstellen des PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) als auch [beim Erstellen von Elements](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions-card-require_cvc_recollection). Dadruch müssen Kundinnen und Kunden ihre Prüfziffer/CVC zwingend erneut eingeben, wenn sie eine Kartenzahlung tätigen.
### 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: Optionen für zusätzliche Elemente [Client-seitig]
Das [Elements-Objekt](https://docs.stripe.com/js/elements_object/create_without_intent) akzeptiert zusätzliche Optionen, die die Zahlungserfassung beeinflussen. Basierend auf den angegebenen Optionen zeigt das Payment Element die verfügbaren Zahlungsmethoden an, die Sie aktiviert haben. Erfahren Sie mehr über die [Unterstützung von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md).
Stellen Sie sicher, dass die von Ihnen angegebenen Elements-Optionen (wie `captureMethod`, `setupFutureUsage` und `paymentMethodOptions`) mit den entsprechenden Parametern übereinstimmen, die Sie beim Erstellen und Bestätigen des Intent übergeben. Nicht übereinstimmende Parameter können zu unerwartetem Verhalten oder Fehlern führen.
| Eigentum | Typ | Beschreibung | Erforderlich |
| ---------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
| `mode` | - `payment`
- `setup`
- `subscription` | Gibt an, ob das Payment Element mit einem *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), *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) oder *Abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) verwendet wird. | Ja |
| `currency` | `string` | Die Währung des Betrags, der dem Kunden/der Kundin berechnet werden soll. | Ja |
| `amount` | `number` | Der Betrag, der dem Kunden/der Kundin in Rechnung gestellt werden soll, angezeigt in Apple Pay, Google Pay oder BNPL-Nutzeroberflächen. | Für den Modus `payment` und `subscription` |
| `setupFutureUsage` | - `off_session`
- `on_session` | Gibt an, dass Sie beabsichtigen, zukünftige Zahlungen mit den vom Payment Element erfassten Zahlungsdaten zu tätigen. | Nein |
| `captureMethod` | - `automatic`
- `automatic_async`
- `manual` | Steuert, wann die Gelder vom Kundenkonto erfasst werden. | Nein |
| `onBehalfOf` | `string` | Nur Connect. Die Stripe-Konto-ID, die das Unternehmen des Datensatzes ist. Weitere Informationen dazu, ob diese Option für Ihre Integration relevant ist, finden Sie unter [Use cases](https://docs.stripe.com/connect/charges.md). | Nein |
| `paymentMethodTypes` | `string[]` | Eine Liste der zu rendernden Zahlungsmethodentypen. Sie können dieses Attribut weglassen, um Ihre Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) zu verwalten. | Nein |
| `paymentMethodConfiguration` | `string` | Die [Konfiguration der Zahlungsmethode](https://docs.stripe.com/api/payment_method_configurations.md), die bei der Verwaltung Ihrer Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwendet werden soll. Wenn keine Angabe gemacht wird, wird Ihre Standardkonfiguration verwendet. | Nein |
| `paymentMethodCreation` | `manual` | Ermöglicht die Erstellung von PaymentMethods aus der Elements-Instanz mit [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements). | Nein |
| `paymentMethodOptions` | `{us_bank_account: {verification_method: string}}` | Verifizierungsoptionen für die Zahlungsmethode `us_bank_account`. Akzeptiert dieselben Verifizierungsmethoden wie [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method). | Nein |
| `paymentMethodOptions` | `{card: {installments: {enabled: boolean}}}` | Ermöglicht die ggf. manuelle Aktivierung der Nutzeroberfläche zur Auswahl des Karten-Ratenzahlungsplans, wenn Sie Ihre Zahlungsmethoden nicht im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Sie müssen `mode='payment'` festlegen *und* `paymentMethodTypes` explizit angeben. Andernfalls wird ein Fehler ausgelöst. Nicht kompatibel mit `paymentMethodCreation='manual'`. | Nein |
| `paymentMethodOptions` | `{[paymentMethod]: {setup_future_usage: string}}` | Ermöglicht es Ihnen, `setup_future_usage` nur für Zahlungsmethoden anzugeben, die die Wiederverwendung unterstützen. Gilt nur, wenn der `mode` `payment` ist. Der Wert für jede Zahlungsmethode muss mit der entsprechenden `payment_method_options[paymentMethod][setup_future_usage]` im PaymentIntent während der Bestätigung übereinstimmen. Unterstützte Zahlungsmethoden und Werte finden Sie in der [Ressource zu Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions). | Nein |
## ConfirmationToken erstellen [Clientseitig]
> #### createPaymentMethod mit einer Legacy-Implementierung verwenden
>
> Wenn Sie eine Legacy-Implementierung nutzen, verwenden Sie möglicherweise die Informationen von `stripe.createPaymentMethod`, um Zahlungen auf dem Server zu finalisieren. Wir empfehlen Ihnen, diesen Leitfaden zu befolgen, um auf [Bestätigungstoken umzustellen](https://docs.stripe.com/payments/payment-element/migration-ct.md). Sie können aber auch weiterhin auf unsere alte Dokumentation zum Thema [Zweistufige Bestätigung erstellen](https://docs.stripe.com/payments/build-a-two-step-confirmation-legacy.md) zuzugreifen.
Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, rufen Sie [stripe.createConfirmationToken](https://docs.stripe.com/js/confirmation_tokens/create_confirmation_token) auf, um ein *ConfirmationToken* (ConfirmationTokens help capture data from your client, such as your customer's payment instruments and shipping address, and are used to confirm a PaymentIntent or SetupIntent) zu erstellen, das zur zusätzlichen Validierung oder als zusätzliche Geschäftslogik vor der Bestätigung an Ihren Server gesendet wird. Sie können das Feld [`payment_method_preview`](https://docs.stripe.com/api/confirmation_tokens/object.md#confirmation_token_object-payment_method_preview) überprüfen, um die zusätzliche Logik auszuführen.
#### HTML + JS
```javascript
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
// Prevent multiple form submissions
if (submitBtn.disabled) {
return;
}
// Disable form submission while loading
submitBtn.disabled = true;
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the ConfirmationToken using the details collected by the Payment Element
const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
payment_method_data: {
billing_details: {
name: 'Jenny Rosen',
}
}
}
});
if (error) {
// This point is only reached if there's an immediate error when
// creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
handleError(error);
return;
}
// Now that you have a ConfirmationToken, you can use it in the following steps to render a confirmation page or run additional validations on the server
return fetchAndRenderSummary(confirmationToken)
});
```
#### React
```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState();
const [loading, setLoading] = useState(false);
const handleError = (error) => {
setLoading(false);
setErrorMessage(error.message);
}
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe) {
// Stripe.js hasn't yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setLoading(true);
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the ConfirmationToken using the details collected by the Payment Element
const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
payment_method_data: {
billing_details: {
name: 'Jenny Rosen',
}
}
}
});
if (error) {
// This point is only reached if there's an immediate error when
// creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
handleError(error);
return;
}
// Now that you have a ConfirmationToken, you can use it in the following steps to render a confirmation page or run additional validations on the server
return fetchAndRenderSummary(confirmationToken)
};
return (
);
}
```
## Details der Zahlungs auf der Bestätigungsseite anzeigen
Zu diesem Zeitpunkt haben Sie alle Informationen, die Sie zum Rendern der Bestätigungsseite benötigen. Rufen Sie den Server auf, um die erforderlichen Informationen zu erhalten und die Bestätigungsseite entsprechend zu rendern.
#### Node.js
```javascript
// Using Express
const express = require('express');
const app = express();
app.use(express.json());
app.post('/summarize-payment', async (req, res) => {
try {
// Retrieve the confirmationTokens and generate the response
const confirmationToken = await stripe.confirmationTokens.retrieve(req.body.confirmation_token_id);
const response = summarizePaymentDetails(confirmationToken);
// Send the response to the client
res.json(response);
} catch (e) {
// Display error on client
return res.json({ error: e.message });
}
});
function summarizePaymentDetails(confirmationToken) {
// Use confirmationToken.payment_method_preview to derive the applicable summary fields for your UI
return {
type: confirmationToken.payment_method_preview.type,
// Add other values (such as Tax Calculation amount) as needed here
};
}
```
#### JavaScript
```javascript
const fetchAndRenderSummary = async (confirmationToken) => {
const res = await fetch('/summarize-payment', {
method: "POST",
body: JSON.stringify({ confirmation_token_id: confirmationToken.id }),
});
const summary = await res.json();
// Render the summary object returned by your server
};
```
## Optional: Steuern vor Bezahlvorgang berechnen [Serverseitig]
Das Payment Element berechnet Steuern nicht standardmäßig. Verwenden Sie die [Tax API](https://docs.stripe.com/api/tax.md), um die für die Transaktion geschuldete Steuer zu berechnen.
> Um die Steuer im Payment Element zu berechnen, müssen Sie zunächst Folgendes tun:
>
> - [Stripe Tax aktivieren](https://docs.stripe.com/tax/calculating.md).
- [Abrechnungsadresse erfassen](https://docs.stripe.com/payments/build-a-two-step-confirmation.md#collect-addresses)
Aktualisieren Sie die Funktion `summarizePaymentDetails`, um eine Steuerberechnung zu erstellen, die auf der Rechnungsadresse des Kunden basiert, die im ConfirmationToken zurückgegeben wurde.
### Before
```js
function summarizePaymentDetails(confirmationToken) {
// Use confirmationToken.payment_method_preview to derive the applicable summary fields for your UI
}
```
### After
```js
function summarizePaymentDetails(confirmationToken) {
tax_calculation = await stripe.tax.calculations.create({
currency: 'usd',
line_items: [
{
amount: 1000,
reference: 'L1',
},
],
customer_details: {// Use ConfirmationToken's address for TaxCalculation
address: confirmationToken.paymentMethodPreview.billingDetails.address,
address_source: 'shipping',
},
});
```
Aktualisieren Sie die Steuerberechnung, dass sie den `amount_total` enthält, welcher dem Abrechnungsbetrag zuzüglich der Steuer entspricht. So zeigen Sie der Kundschaft den zu zahlenden Gesamtbetrag.
### Before
```js
return {
type: confirmationToken.payment_method_preview.type,
// Add other values as needed here
};
```
### After
```js
return {
type: confirmationToken.payment_method_preview.type,// Add any other values from TaxCalculation for your display purposes. For example, you can use [tax_breakdown](/tax/standalone-tax-api#tax-breakdowns) to display what tax was applied
amount_total: tax_calculation.amount_total,
tax_calculation_id: tax_calculation.id
// Add other values as needed here
};
```
## PaymentIntent erstellen [Serverseitig]
> #### Benutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung ausführen
>
> Navigieren Sie zu [Schritt 5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) im Leitfaden zum Abschließen von Zahlungen, um Ihre nutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung auszuführen. Führen Sie andernfalls die folgenden Schritte für eine einfachere Integration aus, die `stripe.confirmPayment` auf dem Client verwendet, um die Zahlung zu bestätigen und alle nächsten Aktionen abzuwickeln.
Wenn die Kundin/der Kunde Ihr Zahlungsformular absendet, erstellen Sie einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) auf Ihrem Server mit den aktivierten Feldern für `amount` und `currency`.
Geben Sie den Wert des *Client-Geheimnisses* an Ihren Client zurück, den Stripe.js zum Abschließen der Zahlung verwenden kann.
Das folgende Beispiel enthält kommentierten Code zur Veranschaulichung der optionalen [Steuerberechnung](https://docs.stripe.com/payments/build-a-two-step-confirmation.md#calculate-tax).
#### Accounts v2
#### Ruby
```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
Stripe.api_key = '<>'
post '/create-intent' do
# If you used a Tax Calculation, optionally recalculate taxes
# confirmation_token = Stripe::ConfirmationToken.retrieve(params[:confirmation_token_id])
# summarized_payment_details = summarize_payment_details(confirmation_token)
intent = Stripe::PaymentIntent.create({
# To allow saving and retrieving payment methods, provide the Account ID.
customer_account: customer_account.id,
# If you used a Tax Calculation, use its `amount_total`.
# amount: summarized_payment_details.amount_total,
amount: 1099,
currency: 'usd',
# Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
# If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
# hooks: {
# inputs: {
# tax: {
# calculation: tax_calculation.id
# }
# }
#}
},
#{
# stripe_version: '2025-09-30.preview' }
)
{client_secret: intent.client_secret}.to_json
end
```
#### Customers v1
#### Ruby
```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<>')
post '/create-intent' do
# If you used a Tax Calculation, optionally recalculate taxes
# confirmation_token = client.v1.confirmation_tokens.retrieve(params[:confirmation_token_id])
# summarized_payment_details = summarize_payment_details(confirmation_token)
intent = client.v1.payment_intents.create({
# To allow saving and retrieving payment methods, provide the Customer ID.
customer: customer.id,
# If you used a Tax Calculation, use its `amount_total`.
# amount: summarized_payment_details.amount_total,
amount: 1099,
currency: 'usd',
# Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
# If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
# hooks: {
# inputs: {
# tax: {
# calculation: tax_calculation.id
# }
# }
#}
},
#{
# stripe_version: '2025-09-30.preview' }
)
{client_secret: intent.client_secret}.to_json
end
```
## Zahlung an Stripe senden [Clientseitig]
Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit den Angaben aus dem Payment Element abzuschließen.
Geben Sie im Parameter `confirmation_token` die ID des ConfirmationToken an, den Sie auf der vorherigen Seite erstellt haben und der die Zahlungsinformationen enthält, die vom Payment Element erfasst wurden.
Geben Sie eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) für diese Funktion an, um anzugeben, wohin Stripe den/die Nutzer/in nach Abschluss der Zahlung weiterleitet. Ihre Nutzer/innen werden möglicherweise zunächst an eine Zwischenwebsite, z. B. eine Bankautorisierungsseite, weitergeleitet, bevor sie zur `return_url` weitergeleitet werden. Bei Kartenzahlungen erfolgt die Weiterleitung zur `return_url` sofort, wenn eine Zahlung erfolgreich ist.
Wenn Sie bei Kartenzahlungen nach Abschluss der Zahlung keine Weiterleitung wünschen, 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 auf Weiterleitung basierenden Zahlungsmethoden bezahlen.
#### HTML + JS
```javascript
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
// Prevent multiple form submissions
if (submitBtn.disabled) {
return;
}
// Disable form submission while loading
submitBtn.disabled = true;
// Create the PaymentIntent and obtain clientSecret
const res = await fetch("/create-intent", {
method: "POST",
});
const {client_secret: clientSecret} = await res.json();
// Confirm the PaymentIntent using the details collected by the ConfirmationToken
const {error} = await stripe.confirmPayment({
clientSecret,
confirmParams: {
confirmation_token: '{{CONFIRMATION_TOKEN_ID}}',
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when
// confirming the payment. Show the error to your customer (for example, payment details incomplete)
handleError(error);
} 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';
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState();
const [loading, setLoading] = useState(false);
const handleError = (error) => {
setLoading(false);
setErrorMessage(error.message);
}
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe) {
// Stripe.js hasn't yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setLoading(true);
// Create the PaymentIntent and obtain clientSecret
const res = await fetch("/create-intent", {
method: "POST",
});
const {client_secret: clientSecret} = await res.json();
// Confirm the PaymentIntent using the details collected by the ConfirmationToken
const {error} = await stripe.confirmPayment({
clientSecret,
confirmParams: {
confirmation_token: '{{CONFIRMATION_TOKEN_ID}}',
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when
// confirming the payment. Show the error to your customer (for example, payment details incomplete)
handleError(error);
} 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`.
}
};
return (
);
}
```
## 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
[Integration entwerfen](https://docs.stripe.com/payments/payment-element/design-an-integration.md)