# Zahlungsdetails einziehen, bevor Sie einen Intent erstellen
Erstellen Sie eine Integration, in der Sie das Payment Element rendern können, bevor Sie eine PaymentIntent oder SetupIntent erstellen.
# Zahlung annehmen
> This is a Zahlung annehmen for when platform is web and type is payment. View the full page at https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=payment.
Mit dem Payment Element können Sie mit einer einzigen Integration mehrere Zahlungsarten akzeptieren. In dieser Integration erfahren Sie, wie Sie einen nutzerdefinierten Zahlungsablauf erstellen, bei dem Sie das Payment Element rendern, den *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) erstellen und die Zahlung im Browser des Käufers/der Käuferin bestätigen. Wenn Sie die Zahlung stattdessen vom Server aus bestätigen möchten, lesen Sie [Zahlungen auf dem Server abschließen](https://docs.stripe.com/payments/finalize-payments-on-the-server.md).
## Stripe einrichten [Serverseitig]
[Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login).
Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:
#### Ruby
```bash
# Available as a gem
sudo gem install stripe
```
```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```
## Zahlungsmethoden aktivieren
> Dieser Integrationspfad unterstützt keine BLIK oder vorautorisierte Belastungen, die das Automated Clearing Settlement System (ACSS) verwenden. Außerdem können Sie, wenn Sie den verzögerten Intent von der Client-Seite erstellen, `customer_balance` nicht mit dynamischen Zahlungsmethoden verwenden , da der PaymentIntent einen kundenkonfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer)- oder [Customer](https://docs.stripe.com/api/customers/object.md)-Objekt erfordert, das der clientseitige Ablauf nicht unterstützt. Zur Verwendung von `customer_balance`, erstellen Sie das `PaymentIntent` serverseitig mit einem `Account` oder `Customer` und geben Sie sein `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 /%}
>
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.
#### Accounts v2
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-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: Zahlungsdetails dynamisch aktualisieren [Client-seitig]
Wenn der/die Kund/in Aktionen durchführt, die die Zahlungsdetails ändern (zum Beispiel das Anwenden eines Rabattcodes), aktualisieren Sie die Elements-Instanz, um die neuen Werte widerzuspiegeln. Bei einigen Zahlungsmethoden, wie Apple Pay und Google Pay, wird der Betrag in der Nutzeroberfläche angezeigt. Stellen Sie daher sicher, dass er immer korrekt und aktuell ist.
#### HTML + JS
```js
async function handleDiscountCode(code) {
// On the server, validate that the discount code is valid and return the new amount
const {newAmount} = await fetch("/apply-discount", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({code}),
});
await elements.update({amount: newAmount});
}
```
#### React
```jsx
function App() {
const [amount, setAmount] = React.useState(1099);
const handleDiscountCode = useCallback(async (code) => {
// On the server, validate that the discount code is valid and return the new amount
const {newAmount} = await fetch("/apply-discount", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({code}),
});
// Trigger a state change that re-renders the Elements provider with the new amount
setAmount(newAmount);
}, []);
const options = {
mode: 'payment',
amount,
currency: 'usd',
appearance: {/*...*/},
};
return (
);
};
```
## 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 |
## Optional: ConfirmationToken erstellen
Wenn Sie einen mehrseitigen Bezahlvorgang erstellen oder Angaben zur Zahlungsmethode erfassen möchten, bevor Sie zusätzliche Validierungen durchführen, lesen Sie [Zwei-Schritte-Bezahlvorgang erstellen](https://docs.stripe.com/payments/build-a-two-step-confirmation.md). Bei diesem Ablauf erstellen Sie ein [ConfirmationToken](https://docs.stripe.com/api/confirmation_tokens.md) auf dem Client, um Zahlungsdetails zu erfassen, und verwenden diese dann zum Erstellen eines PaymentIntent auf dem Server.
## 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/accept-a-payment-deferred.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
```
> #### Setzen Sie `payment_method_options` für `us_bank_account`-Zahlungen
>
> Das Festlegen von `payment_method_options` in diesem Schritt wirkt sich nicht auf die erfassten Zahlungsmethoden aus. Konfigurieren Sie stattdessen Zahlungsmethoden im [Dashboard](https://dashboard.stripe.com/settings/payment_methods).
## Zahlung an Stripe [Client-seitig]
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 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 weiterleiten soll. 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 bei erfolgreicher Zahlung sofort zur `return_url`.
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');
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 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 Payment Element
const {error} = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: {
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);
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// 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 Payment Element
const {error} = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: {
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 (
);
}
```
## Optional: Ereignisse nach Zahlung verarbeiten
Stripe übermittelt 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 im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).
Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide).
- **Manuelles Bearbeiten von Ereignissen im Dashboard**
Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen.
- **Erstellen eines benutzerdefinierten Webhooks**
[Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.
- **Integrieren einer vorgefertigten App**
Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren.
# Richten Sie eine Zahlungsmethode ein
> This is a Richten Sie eine Zahlungsmethode ein for when platform is web and type is setup. View the full page at https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=setup.
Ein Einrichtungsablauf ermöglicht es Ihnen, eine Zahlungsmethode für zukünftigeZahlungen einzurichten, ohne Ihre Kund/innen sofort zu belasten. Bei dieser Integration erstellen Sie einen benutzerdefinierten Zahlungsablauf, bei dem Sie das Payment Element rendern, die *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) erstellen und die Einrichtung im Browser des/der Käufer/in bestätigen.
## Stripe einrichten [Serverseitig]
[Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login).
Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:
#### Ruby
```bash
# Available as a gem
sudo gem install stripe
```
```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```
## Zahlungsmethoden aktivieren
> Dieser Integrationspfad unterstützt keine BLIK oder vorautorisierte Belastungen, die das Automated Clearing Settlement System (ACSS) verwenden. Außerdem können Sie, wenn Sie den verzögerten Intent von der Client-Seite erstellen, `customer_balance` nicht mit dynamischen Zahlungsmethoden verwenden , da der PaymentIntent einen kundenkonfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer)- oder [Customer](https://docs.stripe.com/api/customers/object.md)-Objekt erfordert, das der clientseitige Ablauf nicht unterstützt. Zur Verwendung von `customer_balance`, erstellen Sie das `PaymentIntent` serverseitig mit einem `Account` oder `Customer` und geben Sie sein `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 *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) zu erstellen.
Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren.
## 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 ‘setup’. Erstellen Sie dann eine Instanz des Payment Element und verbinden Sie sie mit dem DOM-Knoten des Containers.
```javascript
const options = {mode: 'setup',
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, sowie `mode: 'setup'`.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import SetupForm from './SetupForm';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<>');
function App() {
const options = {mode: 'setup',
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 SetupForm = () => {
return (
);
};
export default SetupForm;
```
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 /%}
>
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.
#### Accounts v2
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-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: 'setup',
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 des SetupIntent steuert Stripe.js automatisch die Einstellung [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) in der Zahlungsmethode, je nachdem, ob die Kundin/der Kunde das Kontrollkästchen aktiviert hat, um die Zahlungsdetails zu speichern.
### Auswahl einer gespeicherten Zahlungsmethode erkennen
Um dynamische Inhalte zu steuern, wenn eine gespeicherte Zahlungsmethode ausgewählt wird, überwachen Sie das `change`-Ereignis des Payment Element, das automatisch mit der ausgewählten Zahlungsmethode ausgefüllt wird.
```javascript
paymentElement.on('change', function(event) {
if (event.value.payment_method) {
// Control dynamic content if a saved payment method is selected
}
})
```
## 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 |
## Optional: ConfirmationToken erstellen
Wenn Sie einen mehrseitigen Bezahlvorgang erstellen oder Angaben zur Zahlungsmethode erfassen möchten, bevor Sie zusätzliche Validierungen durchführen, lesen Sie [Zwei-Schritte-Bezahlvorgang erstellen](https://docs.stripe.com/payments/build-a-two-step-confirmation.md). Bei diesem Ablauf erstellen Sie ein [ConfirmationToken](https://docs.stripe.com/api/confirmation_tokens.md) auf dem Client, um Zahlungsdetails zu erfassen, und verwenden diese dann zum Erstellen eines SetupIntent auf dem Server.
## Eine Kundin oder einen Kunden anlegen [Serverseitig]
Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Objekt zuordnen, das Ihre Kundin/Ihre Kundin darstellt. Wenn Ihre Kundin/Kundin ein Konto erstellt oder die erste Transaktion mit Ihrem Unternehmen durchgeführt hat, erstellen Sie entweder ein kundenseitig konfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/create.md)-Objekt mit der Accounts v2 API oder ein [Customer](https://docs.stripe.com/api/customers/create.md)-Objekt mit der Customers API.
> #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden
>
> Die Accounts v2 API ist allgemein für Connect-Nutzer/innen verfügbar und für andere Stripe-Nutzer/innen in der öffentlichen Vorschau. Wenn an der Accounts v2 Vorschau teilnehmen, müssen Sie eine [Vorschauversion](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in Ihrem Code angeben.
>
> Um Zugriff auf die Accounts v2 Vorschau anzufordern, {% collect-email modal=true modal_link_text=“sign up.” list=“payin-payout-reuse-waitlist@stripe.com” send_direct_email=true intro_text=“Sind Sie am frühzeitigen Zugang zur Vorschau der Accounts v2 API interessiert?" body_text=“Wir sind gerade dabei, die Vorschau von Accounts v2 bereitzustellen. Um Zugang zu beantragen, geben Sie unten Ihre E-Mail-Adresse ein.” form_cta_text=“Registrieren” success_text=“Danke! Wir melden uns bald.” show_email_confirmation=wahr /%}
>
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.
#### Accounts v2
```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
-H "Authorization: Bearer <>" \
-H "Stripe-Version: 2026-04-22.preview" \
--json '{
"contact_email": "jenny.rosen@example.com",
"display_name": "Jenny Rosen",
"identity": {
"individual": {
"given_name": "Jenny Rosen",
"address": {
"city": "San Francisco",
"country": "US",
"line1": "123 Main Street",
"postal_code": "94605",
"state": "CA"
}
}
},
"configuration": {
"customer": {
"capabilities": {
"automatic_indirect_tax": {
"requested": true
}
},
"shipping": {
"address": {
"city": "San Francisco",
"country": "US",
"line1": "123 Main Street",
"postal_code": "94605",
"state": "CA"
}
}
}
},
"include": [
"configuration.customer",
"identity"
]
}'
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/customers \
-u "<>:" \
--data-urlencode "email=jenny.rosen@example.com" \
-d "name=Jenny Rosen" \
-d "shipping[address][city]=San Francisco" \
-d "shipping[address][country]=US" \
-d "shipping[address][line1]=123 Main Street" \
-d "shipping[address][postal_code]=9460" \
-d "shipping[address][state]=CA" \
-d "shipping[name]=Jenny Rosen" \
-d "address[city]=San Francisco" \
-d "address[country]=US" \
-d "address[line1]=123 Main Street" \
-d "address[postal_code]=9460" \
-d "address[state]=CA"
```
## SetupIntent erstellen [Serverseitig]
Wenn der/die Kund/in Ihr Zahlungsformular absendet, erstellen Sie eine *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) auf Ihrem Server. Wenn `automatic_payment_methods` aktiviert ist, wird die SetupIntent unter Verwendung der Zahlungsmethoden erstellt, die Sie im Dashboard konfiguriert haben.
In einem SetupIntent ist ein Client-Geheimnis enthalten. Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Einrichtungsvorgang sicher abschließen kann.
#### 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::SetupIntent.create({
# To allow saving and retrieving payment methods, provide the Account ID.
customer_account: customer_account.id,
# 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.setup_intents.create({
# To allow saving and retrieving payment methods, provide the Customer ID.
customer: customer.id,
# 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
```
> #### Setzen Sie `payment_method_options` für `us_bank_account`-Zahlungen
>
> Das Festlegen von `payment_method_options` in diesem Schritt wirkt sich nicht auf die erfassten Zahlungsmethoden aus. Konfigurieren Sie stattdessen Zahlungsmethoden im [Dashboard](https://dashboard.stripe.com/settings/payment_methods).
## Einrichtung an Stripe [Client-seitig]
Verwenden Sie [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup), um die Einrichtung mit den Angaben aus dem Payment Element abzuschließen.
Geben Sie eine [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) für diese Funktion an, um anzugeben, wohin Stripe die Nutzer/innen nach Abschluss der Einrichtung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine Zwischenwebsite, z. B. eine Bankautorisierungsseite, weitergeleitet, bevor sie zur `return_url` weitergeleitet werden. Karten-Einrichtungen leiten bei erfolgreicher Einrichtung sofort zur `return_url` weiter.
Wenn Sie nach Abschluss der Einrichtung keine Weiterleitung für Kartenkonfigurationen wünschen, können Sie [redirect](https://docs.stripe.com/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect) auf `if_required` festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit 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;
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the SetupIntent and obtain clientSecret
const res = await fetch("/create-intent", {
method: "POST",
});
const {client_secret: clientSecret} = await res.json();
// Confirm the SetupIntent using the details collected by the Payment Element
const {error} = await stripe.confirmSetup({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when
// confirming the setup. 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 SetupForm() {
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 SetupIntent and obtain clientSecret
const res = await fetch("/create-intent", {
method: "POST",
});
const {client_secret: clientSecret} = await res.json();
// Confirm the SetupIntent using the details collected by the Payment Element
const {error} = await stripe.confirmSetup({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when
// confirming the setup. 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 (
);
}
```
## Die gespeicherte Zahlungsmethode später belasten [Serverseitig]
> `bancontact` und `ideal` sind standardmäßig einmalige Zahlungsmethoden. Bei der Einrichtung für die zukünftige Nutzung wird eine wiederverwendbare Zahlungsmethode vom Typ `sepa_debit` generiert. Verwenden Sie daher `sepa_debit`, um gespeicherte Zahlungsmethoden abzufragen.
> #### Compliance
>
> Sie sind für die Einhaltung aller geltenden Gesetze, Vorschriften und Netzwerkregeln verantwortlich, wenn Sie die Zahlungsdaten von Kundinnen und Kunden speichern. Wenn Sie Ihren Endkundinnen und Endkunden zuvor genutzte Zahlungsmethoden für zukünftige Einkäufe anzeigen, dürfen Sie nur Zahlungsmethoden auflisten, für die Sie bereits eine kundenseitige Zustimmung eingeholt haben, dank der Sie die Details der Zahlungsmethode für diese spezifische zukünftige Verwendung speichern können. Verwenden Sie den Parameter [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay), um zwischen Zahlungsmethoden zu unterscheiden, die mit Kundinnen und Kunden verknüpft sind und Ihren Endkundinnen und Endkunden als gespeicherte Zahlungsmethode für zukünftige Einkäufe angezeigt werden können oder nicht.
Um eine Zahlungsmethode zum Belasten zu finden, listen Sie die Zahlungsmethoden auf, die mit Ihrer Kundin/Ihrem Kunden verknüpft sind. In diesem Beispiel sind Karten aufgeführt, Sie können jedoch jeden unterstützten [Typ](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) auflisten.
> #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden
>
> Die Accounts v2 API ist allgemein für Connect-Nutzer/innen verfügbar und für andere Stripe-Nutzer/innen in der öffentlichen Vorschau. Wenn an der Accounts v2 Vorschau teilnehmen, müssen Sie eine [Vorschauversion](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in Ihrem Code angeben.
>
> Um Zugriff auf die Accounts v2 Vorschau anzufordern, {% collect-email modal=true modal_link_text=“sign up.” list=“payin-payout-reuse-waitlist@stripe.com” send_direct_email=true intro_text=“Sind Sie am frühzeitigen Zugang zur Vorschau der Accounts v2 API interessiert?" body_text=“Wir sind gerade dabei, die Vorschau von Accounts v2 bereitzustellen. Um Zugang zu beantragen, geben Sie unten Ihre E-Mail-Adresse ein.” form_cta_text=“Registrieren” success_text=“Danke! Wir melden uns bald.” show_email_confirmation=wahr /%}
>
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.
#### Accounts v2
```curl
curl -G https://api.stripe.com/v1/payment_methods \
-u "<>:" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d type=card
```
#### Customers v1
```curl
curl -G https://api.stripe.com/v1/payment_methods \
-u "<>:" \
-d "customer={{CUSTOMER_ID}}" \
-d type=card
```
Wenn Sie bereit sind, die Zahlung Ihrer Kundin/Ihres Kunden *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) zu belasten, verwenden Sie die `Kunden`-ID oder das von der Kundin/dem Kunden/Kundin konfigurierte `Konto` und die `PaymentMethod`-ID, um einen `PaymentIntent` mit dem Betrag und der Währungen der Zahlung zu erstellen. Legen Sie einige weitere Parameter fest, um die Off-Session-Zahlung durchzuführen:
- Legen Sie [off_session](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-off_session) auf true fest, um anzugeben, dass der Kunde/die Kundin sich während eines Bezahlvorgangs nicht in Ihrem Bezahlvorgang befindet und somit eine Authentifizierungsanfrage eines Partners, wie z. B. eines Kartenausstellers, einer Bank oder eines anderen Zahlungsinstituts, nicht erfüllen kann. Wenn ein Partner während Ihres Bezahlvorgangs eine Authentifizierung anfordert, fordert Stripe Ausnahmen unter Verwendung von Kunden/Kundinnen aus einer vorherigen *On-Session*-Transaktion an. Wenn die Bedingungen für die Ausnahme nicht erfüllt sind, kann der `PaymentIntent` einen Fehler ergeben.
- Setzen Sie [„confirm“](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) auf „true“, um sofort nach Erstellung des `PaymentIntent` eine Bestätigung auszulösen.
- Legen Sie [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) auf die ID der `PaymentMethod` fest.
- Je nachdem, wie Sie Kundinnen/Kunden in Ihrer Integration darstellen, legen Sie entweder [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) auf die ID des kundenseitig konfigurierten `Kontos` oder [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) auf die `Kunden`-ID fest.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
Schlägt ein Zahlungsversuch fehl, schlägt die Anfrage ebenfalls mit einem 402 HTTP-Statuscode fehl, und der Status des PaymentIntent ist *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Sie müssen Ihre Kundinnen/Kunden auffordern, zu Ihrer Anwendung zurückzukehren (z. B. per E-Mail oder In-App-Benachrichtigung), um die Zahlung abzuschließen.
Überprüfen Sie den Code des von der Stripe-API-Bibliothek ausgelösten [Fehlers](https://docs.stripe.com/api/errors/handling.md). Wenn die Zahlung aufgrund eines Ablehnungscodes vom Typ [authentication_required](https://docs.stripe.com/declines/codes.md) fehlgeschlagen ist, verwenden Sie das Client-Geheimnis des abgelehnten PaymentIntent mit confirmPayment, damit die Kundinnen/Kunden die Zahlung authentifizieren können.
```javascript
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
// The client secret of the PaymentIntent
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
});
```
> Für die Durchführung von `stripe.confirmPayment` werden möglicherweise einige Sekunden benötigt. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Zeigen Sie stattdessen ein Wartesymbol an, wie beispielsweise eine Sanduhr. Tritt ein Fehler auf, teilen Sie dies der Kundin/dem Kunden mit, reaktivieren Sie das Formular und blenden Sie das Wartesymbol aus. Falls die Kundin/der Kunde weitere Schritte (z. B. eine Authentifizierung) für den Abschluss der Zahlung durchführen muss, begleitet sie Stripe.js bei diesem Vorgang.
Wenn die Zahlung aus anderen Gründen fehlgeschlagen ist, z. B. wegen unzureichender Deckung, verweisen Sie Ihre Kundinnen/Kunden auf eine Zahlungsseite, um eine neue Zahlungsmethode einzugeben. Versuchen Sie die Zahlung mit den neuen Zahlungsdetails erneut durchzuführen und verwenden Sie hierfür den bestehenden PaymentIntent.
# Abonnement erstellen
> This is a Abonnement erstellen for when platform is web and type is subscription. View the full page at https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=subscription.
Bei *Abonnements* (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) handelt es sich um ein Preismodell, bei dem Nutzer/innen wiederkehrende Zahlungen für den Zugriff auf ein Produkt tätigen. In diesem Integrationsleitfaden erfahren Sie, wie Sie einen benutzerdefinierten Zahlungsablauf erstellen, mit dem Sie das Payment Element rendern, ein Abonnement erstellen und die Zahlung im Browser der Kundin/des Kunden bestätigen können.
## Stripe einrichten [Serverseitig]
[Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login).
Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:
#### Ruby
```bash
# Available as a gem
sudo gem install stripe
```
```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```
## Zahlungsmethoden aktivieren
> Dieser Integrationspfad unterstützt keine BLIK oder vorautorisierte Belastungen, die das Automated Clearing Settlement System (ACSS) verwenden. Außerdem können Sie, wenn Sie den verzögerten Intent von der Client-Seite erstellen, `customer_balance` nicht mit dynamischen Zahlungsmethoden verwenden , da der PaymentIntent einen kundenkonfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer)- oder [Customer](https://docs.stripe.com/api/customers/object.md)-Objekt erfordert, das der clientseitige Ablauf nicht unterstützt. Zur Verwendung von `customer_balance`, erstellen Sie das `PaymentIntent` serverseitig mit einem `Account` oder `Customer` und geben Sie sein `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.
Konfigurieren Sie für Abonnements Ihre [Rechnungseinstellungen](https://dashboard.stripe.com/settings/billing/invoice) und unterstützten Zahlungsmethoden. Um Unstimmigkeiten und Fehler zu vermeiden, müssen Ihre Rechnungseinstellungen mit Ihren Payment Element-Einstellungen übereinstimmen.
## 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.
> Der an das Payment Element übergebene `amount` sollte widerspiegeln, welcher Betrag dem Konto des Kunden/der Kundin sofort belastet wird. Dies kann entweder die erste Rate des Abonnements oder `0` sein, wenn das Abonnement einen [Testzeitraum](https://docs.stripe.com/billing/subscriptions/trials.md) hat.
```javascript
const options = {mode:'subscription',
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.
> Der an das Payment Element übergebene `amount` sollte widerspiegeln, welcher Betrag dem Konto des Kunden/der Kundin sofort belastet wird. Dies kann entweder die erste Rate des Abonnements oder `0` sein, wenn das Abonnement einen [Testzeitraum](https://docs.stripe.com/billing/subscriptions/trials.md) hat.
```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:'subscription',
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 /%}
>
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.
#### Accounts v2
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-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 |
## Preismodell erstellen [Stripe-CLI oder Dashboard]
[Wiederkehrende Preismodelle](https://docs.stripe.com/products-prices/pricing-models.md) umfassen die Produkte und Dienstleistungen, die Sie anbieten, die Preise dafür, welche Währungen Sie für Zahlungen verwenden und den Leistungszeitraum (für Abos). Verwenden Sie zum Aufbau des Preismodells [Produkte](https://docs.stripe.com/api/products.md) (was Sie anbieten) und [Preise](https://docs.stripe.com/api/prices.md) (Höhe und Abrechnungsintervall).
In diesem Beispiel wird ein Pauschalpreisdienst mit zwei verschiedenen Service-Optionen verwendet: Basis und Premium. Für jede Service-Option müssen Sie ein Produkt und einen wiederkehrenden Preis erstellen. Um eine einmalige Gebühr, z. B. für die Einrichtung, hinzufügen möchten, erstellen Sie ein drittes Produkt mit einem einmaligen Preis.
Jedes Produkt wird in monatlichen Intervallen abgerechnet. Der Preis für das Basisprodukt beträgt 5 USD. Der Preis für das Premiumprodukt beträgt 15 USD. Ein Beispiel mit drei Stufen finden Sie im Leitfaden zu [Pauschalpreismodellen](https://docs.stripe.com/subscriptions/pricing-models/flat-rate-pricing.md).
#### Dashboard
Gehen Sie zur Seite [Produkt hinzufügen](https://dashboard.stripe.com/test/products/create) und erstellen Sie zwei Produkte. Fügen Sie für jedes Produkt einen Preis hinzu, jeweils mit einem monatlich wiederkehrenden Abrechnungszeitraum:
- Premium-Produkt: Premium-Dienstleistung mit zusätzlichen Funktionen
- Preis: Pauschalpreis | 15 USD
- Basic-Produkt: Basic-Dienstleistung mit minimalem Funktionsumfang
- Preis: Pauschalpreis | 5 USD
Zeichnen Sie nach Erstellung der Preise die Preis-IDs auf, sodass diese in anderen Schritten verwendet werden können. Preis-IDs sehen in etwa wie folgt aus: `price_G0FvDp6vZvdwRZ`.
Wenn Sie bereit sind, verwenden Sie die Schaltfläche **In Live-Modus kopieren** oben rechts auf der Seite, um Ihr Produkt aus der [Sandbox in den Live-Modus zu kopieren](https://docs.stripe.com/keys.md#test-live-modes).
#### API
Sie können die API zum Erstellen der [Produkte](https://docs.stripe.com/api/products.md) und [Preise](https://docs.stripe.com/api/prices.md) verwenden.
Premiumprodukt erstellen:
```curl
curl https://api.stripe.com/v1/products \
-u "<>:" \
--data-urlencode "name=Billing Guide: Premium Service" \
-d "description=Premium service with extra features"
```
Basisprodukt erstellen:
```curl
curl https://api.stripe.com/v1/products \
-u "<>:" \
--data-urlencode "name=Billing Guide: Basic Service" \
-d "description=Basic service with minimum features"
```
Zeichnen Sie Preis-ID für jedes Produkt auf. Die Preis-IDs sehen in etwa wie folgt aus:
```json
{
"id": "prod_H94k5odtwJXMtQ",
"object": "product",
"active": true,
"attributes": [
],
"created": 1587577341,
"description": "Premium service with extra features",
"images": [
],
"livemode": false,
"metadata": {
},
"name": "Billing Guide: Premium Service",
"statement_descriptor": null,
"type": "service",
"unit_label": null,
"updated": 1587577341
}
```
Verwenden Sie die Produkt-IDs, um einen Preis für jedes Produkt zu erstellen. Die Zahl [unit_amount](https://docs.stripe.com/api/prices/object.md#price_object-unit_amount) wird in Cent angegeben, also z. B.`1500` = 15 USD.
Premiumpreis erstellen:
```curl
curl https://api.stripe.com/v1/prices \
-u "<>:" \
-d product={{PREMIUM_PRODUCT_ID}} \
-d unit_amount=1500 \
-d currency=usd \
-d "recurring[interval]=month"
```
Basispreis erstellen:
```curl
curl https://api.stripe.com/v1/prices \
-u "<>:" \
-d product={{BASIC_PRODUCT_ID}} \
-d unit_amount=500 \
-d currency=usd \
-d "recurring[interval]=month"
```
Zeichnen Sie Preis-ID für jeden Preis auf, sodass diese in nachfolgenden Schritten verwendet werden können. Die Preis-IDs sehen in etwa wie folgt aus:
```json
{
"id": "price_HGd7M3DV3IMXkC",
"object": "price",
"product": "prod_HGd6W1VUqqXGvr",
"type": "recurring",
"currency": "usd",
"recurring": {
"interval": "month",
"interval_count": 1,
"trial_period_days": null,
"usage_type": "licensed"
},
"active": true,
"billing_scheme": "per_unit",
"created": 1589319695,
"livemode": false,
"lookup_key": null,
"metadata": {},
"nickname": null,
"unit_amount": 1500,
"unit_amount_decimal": "1500",
"tiers": null,
"tiers_mode": null,
"transform_quantity": null
}
```
## Kund/in erstellen [Client und Server]
Stripe benötigt für jedes Abonnement eine Kundin/einen Kunden. Erfassen Sie im Frontend Ihrer Anwendung alle erforderlichen Kundendaten und übergeben Sie sie an das Backend.
Wenn Sie Adressdaten erfassen müssen, können Sie mit dem Address Element eine Versand- oder Rechnungsadresse für Ihre Kundinnen/Kunden erfassen. Weitere Informationen finden Sie unter [Address Element](https://docs.stripe.com/elements/address-element.md).
```html
```
```javascript
const emailInput = document.querySelector('#email');
fetch('/create-customer', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: emailInput.value,
}),
}).then(r => r.json());
```
Erstellen Sie das Stripe Customer-Objekt auf dem Server.
#### Accounts v2
```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
-H "Authorization: Bearer <>" \
-H "Stripe-Version: 2026-04-22.preview" \
--json '{
"contact_email": "jenny.rosen@example.com",
"display_name": "Jenny Rosen",
"identity": {
"individual": {
"given_name": "Jenny Rosen",
"address": {
"city": "San Francisco",
"country": "US",
"line1": "123 Main Street",
"postal_code": "94605",
"state": "CA"
}
}
},
"configuration": {
"customer": {
"capabilities": {
"automatic_indirect_tax": {
"requested": true
}
},
"shipping": {
"address": {
"city": "San Francisco",
"country": "US",
"line1": "123 Main Street",
"postal_code": "94605",
"state": "CA"
}
}
}
},
"include": [
"configuration.customer",
"identity"
]
}'
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/customers \
-u "<>:" \
--data-urlencode "email=jenny.rosen@example.com" \
-d "name=Jenny Rosen" \
-d "shipping[address][city]=San Francisco" \
-d "shipping[address][country]=US" \
-d "shipping[address][line1]=123 Main Street" \
-d "shipping[address][postal_code]=9460" \
-d "shipping[address][state]=CA" \
-d "shipping[name]=Jenny Rosen" \
-d "address[city]=San Francisco" \
-d "address[country]=US" \
-d "address[line1]=123 Main Street" \
-d "address[postal_code]=9460" \
-d "address[state]=CA"
```
## Abonnement erstellen [Serverseitig]
Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie ein *Abonnement*, um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Um ein Abonnement zu erstellen, benötigen Sie entweder ein kundenkonfiguriertes `Account` oder eine/n `Customer` und einen *Preis* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions).
> Wenn Sie einen *Preis mit mehreren Währungen* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration) verwenden, verwenden Sie den Parameter [currency](https://docs.stripe.com/api/subscriptions/create.md#create_subscription-currency), um das Abonnement anzuweisen, welche Währung des Preises verwendet werden soll. (Wenn Sie den Parameter `currency` weglassen, wird für das Abonnement die Standardwährung des Preises verwendet.)
Zu einem Abonnement gehört 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)). Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann. Verwenden Sie für Abonnements, die keine Vorauszahlung erfordern (z. B. Abonnements mit einem kostenlosen Testzeitraum), das Client-Geheimnis aus dem `pending_setup_intent`.
#### 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-subscription' do
content_type 'application/json'
data = JSON.parse(request.body.read)
customer_account_id = cookies[:customer_account]
price_id = data['priceId']
subscription = Stripe::Subscription.create(
customer_account: customer_account_id,
items: [{
price: price_id,
}],
payment_behavior: 'default_incomplete',
payment_settings: {save_default_payment_method: 'on_subscription'},
expand: ['latest_invoice.confirmation_secret', 'pending_setup_intent']
)
if subscription.pending_setup_intent != null
{ type: 'setup', clientSecret: subscription.pending_setup_intent.client_secret }.to_json
else
{ type: 'payment', clientSecret: subscription.latest_invoice.confirmation_secret.client_secret }.to_json
end
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('<>')
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<>')
post '/create-subscription' do
content_type 'application/json'
data = JSON.parse(request.body.read)
customer_id = cookies[:customer]
price_id = data['priceId']
subscription = client.v1.subscriptions.create(
customer: customer_id,
items: [{
price: price_id,
}],
payment_behavior: 'default_incomplete',
payment_settings: {save_default_payment_method: 'on_subscription'},
expand: ['latest_invoice.confirmation_secret', 'pending_setup_intent']
)
if subscription.pending_setup_intent != null
{ type: 'setup', clientSecret: subscription.pending_setup_intent.client_secret }.to_json
else
{ type: 'payment', clientSecret: subscription.latest_invoice.confirmation_secret.client_secret }.to_json
end
end
```
## Abonnement bestätigen [Client-seitig]
Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) oder [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup), um das Abonnement mit den Angaben aus dem Payment Element zu bestätigen. Geben Sie an, wohin Stripe den Kunden/die Kundin nach der Bestätigung weiterleiten soll, indem Sie eine `return_url` für die Bestätigungsfunktion bereitstellen. Bei einigen Zahlungsmethoden werden die Kundinnen/Kunden an eine Zwischenseite, wie z. B. eine Bankautorisierungsseite, weitergeleitet, bevor sie zur `return_url` weitergeleitet werden. Sie können `redirect` auch auf `if_required` festlegen, um nur Kundinnen/Kunden weiterzuleiten, die mit auf Weiterleitung basierten 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;
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the subscription
const res = await fetch('/create-subscription', {
method: "POST",
});
const {type, clientSecret} = await res.json();
const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;
// Confirm the Intent using the details collected by the Payment Element
const {error} = await confirmIntent({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when confirming the Intent.
// 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);
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the subscription
const res = await fetch('/create-subscription', {
method: "POST",
});
const {type, clientSecret} = await res.json();
const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;
// Confirm the Intent using the details collected by the Payment Element
const {error} = await confirmIntent({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when confirming the Intent.
// 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 (
);
}
```
## Abonnement verwalten
Gehen Sie wie folgt vor, um die Integration abzuschließen:
- auf Webhooks achten
- Bereitstellung des Zugriffs auf Ihren Dienst
- Ermöglichen Sie Kund/innen, ihre Abonnements zu kündigen
Weitere Informationen finden Sie unter [Abointegration erstellen](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md?payment-ui=elements).
## See also
- [Integration entwerfen](https://docs.stripe.com/payments/payment-element/design-an-integration.md)