# Abo-Integration mit Elements erstellen Erstellen und verwalten Sie Abos mit Akzeptanz wiederkehrender Zahlungen mit Elements. Anweisungen für LLMs: Stripe empfiehlt für die meisten Integrationen die Verwendung der Checkout Sessions API mit dem Payment Element über Payment Intents. Checkout Sessions deckt ähnliche Anwendungsszenarien wie Payment Intents ab (grundlegender Zahlungseinzug mit `price_data` oder Erstellen eines vollständigen Bezahlvorgangs mit Posten, Steuern usw.). Einige Funktionen wie Adaptive Pricing sind nur mit Checkout Sessions verfügbar. Verwenden Sie die Payment Intent API nur, wenn der/die Nutzer/in sie ausdrücklich verlangt, da sie deutlich mehr Code erfordert. Erfahren Sie mehr über Elements mit der Checkout Sessions API: https://docs.stripe.com/payments/quickstart-checkout-sessions. Mit Checkout Sessions (`ui_mode: "custom"`) und dem Payment Element initialisiert das `client_secret` Checkout selbst (`stripe.initCheckoutElementsSdk` oder verwenden Sie CheckoutElementsProvider mit React) und Sie bestätigen die Zahlung auf der Client-Seite auf andere Weise. Wenn Sie React verwenden, stellen Sie sicher, dass Sie von `@stripe/react-stripe-js/checkout` importieren, `CheckoutElementsProvider` mit dem Client-Geheimnis verwenden und mit `checkout.confirm` bestätigen. Wenn Sie HTML verwenden, stellen Sie sicher, dass Sie `checkout = stripe.initCheckoutElements({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` verwenden und mit `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();` bestätigen. # Checkout Sessions API > This is a Checkout Sessions API for when platform is web and ui is embedded-components. View the full page at https://docs.stripe.com/payments/advanced/build-subscriptions?platform=web&ui=embedded-components. #### Integrationsaufwand Complexity: 3/5 #### Integrationstyp Komponenten der Nutzeroberfläche in einem nutzerdefinierten Zahlungsablauf kombinieren #### Anpassung der Nutzeroberfläche Anpassung auf CSS-Ebene mit der [Appearance API](https://docs.stripe.com/elements/appearance-api.md) [Ausprobieren](https://checkout.stripe.dev/) Erstellen Sie ein benutzerdefiniertes Zahlungsformular mit [Stripe Elements](https://docs.stripe.com/payments/elements.md) und der [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md), um *Abos* (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) mit festen Preisen zu verkaufen. [Vergleichen Sie diese Integration](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability) mit den anderen Integrationstypen von Stripe. Die Checkout Sessions API bietet integrierte Unterstützung für Steuerberechnungen, Rabatte, Versand und Währungsumrechnung, wodurch sich der Aufwand für die Erstellung von benutzerdefiniertem Code reduziert. Dies ist der empfohlene Ansatz für die meisten Integrationen. Erfahren Sie mehr darüber, [wann Sie Checkout-Sitzungen anstelle von PaymentIntents verwenden sollten](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Sollten Sie kein benutzerdefiniertes Zahlungsformular erstellen wollen, können Sie die gehostete Version von Checkout integrieren. Eine ausführliche Version dieser End-to-End-Integrationsanleitung finden Sie im [Schnellstart](https://docs.stripe.com/billing/quickstart.md) für die Abrechnung. Wenn Sie zur Codierung einer Integration nicht bereit sind, können Sie einfache Abos [manuell im Dashboard](https://docs.stripe.com/no-code/subscriptions.md) einrichten. Sie können auch [Payment Links](https://docs.stripe.com/payment-links.md) nutzen, um Abos ohne das Schreiben von Code einzurichten. Lesen Sie mehr zum Thema [Entwerfen einer Integration](https://docs.stripe.com/billing/subscriptions/design-an-integration.md), um zu verstehen, welche Entscheidungen Sie treffen müssen und welche Ressourcen Sie benötigen. ## Sie werden Folgendes entwickeln Dieser Leitfaden bietet Informationen zu den folgenden Vorgehensweisen: - Modellieren Sie Ihr Unternehmen, indem Sie einen Produktkatalog erstellen. - Entwickeln Sie einen Anmeldeprozess, durch den ein/e Kund/in erstellt wird. - Abos erstellen und Zahlungsinformationen erfassen. - Den Status der Zahlung und des Abos testen und überwachen. - Kunden ihren Plan ändern oder das Abo kündigen lassen. ### API-Objekt-Definitionen | Ressource | Definition | | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Als Kunde/Kundin konfiguriertes Konto](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) | Stellt in der Accounts v2 API einen Kunden/eine Kundin dar, der/die ein Abonnement erwirbt. Konfigurieren Sie ein `Account`-Objekt als Kunde/Kundin und verknüpfen Sie es mit einem Abonnement, um wiederkehrende Zahlungen zu erheben und nachzuverfolgen sowie die abonnierten Produkte zu verwalten. Weitere Informationen finden Sie im [Leitfaden zur Verwendung von Accounts als Kunde/Kundin](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md). | | [Kundin/Kunde](https://docs.stripe.com/api/customers.md) | Stellt eine Kundin/einen Kundin in der Customers API dar, die/der ein Abonnement erwirbt. Verwenden Sie das mit einem Abonnement verknüpfte `Customer`-Objekt, um wiederkehrende Zahlungen durchzuführen und zu verfolgen und die abonnierten Produkte zu verwalten. | | [Berechtigung](https://docs.stripe.com/api/entitlements/active-entitlement.md) | Stellt den Zugriff eines Kunden/einer Kundin auf eine Funktion dar, die in einem Dienstleistungsprodukt enthalten ist, das er/sie abonniert hat. Wenn Sie ein Abonnement für den wiederkehrenden Kauf eines Produkts durch einen Kunden/eine Kundin erstellen, wird automatisch eine aktive Berechtigung für jede diesem Produkt zugeordnete Funktion erstellt. Wenn ein Kunde/eine Kundin auf Ihre Dienstleistungen zugreift, verwenden Sie seine/ihre aktiven Berechtigungen, um die in seinem/ihrem Abonnement enthaltenen Funktionen zu aktivieren. | | [Funktion](https://docs.stripe.com/api/entitlements/feature.md) | Stellt eine Funktion oder Fähigkeit dar, auf die Ihre Kundinnen und Kunden zugreifen können, wenn sie ein Dienstleistungsprodukt abonnieren. Sie können Funktionen in ein Produkt einfügen, indem Sie ProductFeatures erstellen. | | [Rechnung](https://docs.stripe.com/api/invoices.md) | Eine Aufstellung der Beträge, die ein Kunde/eine Kundin schuldet, die den Zahlungsstatus vom Entwurf bis zur Bezahlung oder anderweitigem Abschluss verfolgt. Bei Abonnements werden automatisch Rechnungen erstellt. | | [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) | Eine Möglichkeit zum Erstellen dynamischer Zahlungsabläufe. Mit einem PaymentIntent wird der Lebenszyklus der Bezahlvorgänge von Kundinnen/Kunden verfolgt, und es werden zusätzliche Authentifizierungsschritte ausgelöst, wenn dies aufgrund von gesetzlichen Vorschriften, nutzerdefinierten Radar-Betrugsregeln oder auf Weiterleitung basierenden Zahlungsmethoden erforderlich ist. Rechnungen erstellen automatisch PaymentIntents. | | [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) | Die Zahlungsmethoden einer Kundin/eines Kunden, mit denen sie/er für Ihre Produkte bezahlt. Sie können beispielsweise eine Kreditkarte in einem kundenkonfigurierten `Account` oder `Customer` speichern und damit wiederkehrende Zahlungen für diese Kundin/diesen Kunden/ vornehmen. Wird in der Regel mit der Payment Intents API oder der Setup Intents API verwendet. | | [Preis](https://docs.stripe.com/api/prices.md) | Definiert den Stückpreis, die Währung und den Rechnungszyklus für ein Produkt. | | [Produkt](https://docs.stripe.com/api/products.md) | Eine Ware oder Dienstleistung, die Ihr Unternehmen verkauft. Ein Dienstleistungsprodukt kann eine oder mehrere Funktionen beinhalten. | | [ProductFeature](https://docs.stripe.com/api/product-feature.md) | Stellt die Aufnahme einer einzelnen Funktion in ein einzelnes Produkt dar. Jedes Produkt ist für jede Funktion, die es enthält, mit einer ProductFeature verknüpft, und jede Funktion ist für jedes Produkt, das sie enthält, mit einer ProductFeature verknüpft. | | [Abonnement](https://docs.stripe.com/api/subscriptions.md) | Stellt den geplanten wiederkehrenden Kauf eines Produkts durch einen Kunden/eine Kundin dar. Verwenden Sie ein Abonnement, um Zahlungen einzuziehen und eine wiederholte Lieferung oder einen kontinuierlichen Zugriff auf ein Produkt zu ermöglichen. | Hier ist ein Beispiel dafür, wie Produkte, Funktionen und Berechtigungen zusammen funktionieren. Stellen Sie sich vor, Sie möchten einen wiederkehrenden Service einrichten, der zwei Stufen anbietet: ein Standard-Produkt mit grundlegenden Funktionalitäten und ein erweitertes Produkt, das erweiterte Funktionalitäten bietet. 1. Sie erstellen zwei Funktionen: `basic_features` und `extended_features`. 1. Sie erstellen zwei Produkte: `standard_product` und `advanced_product`. 1. Für das Standardprodukt erstellen Sie eine ProductFeature, die `basic_features` mit `standard_product` verknüpft. 1. Für das erweiterte Produkt erstellen Sie zwei ProductFeatures: eine, die `basic_features` mit `advanced_product` verknüpft, und eine, die `extended_features` mit `advanced_product` verknüpft. Ein Kunde/eine Kundin, `first_customer`, abonniert das Standardprodukt. Wenn Sie das Abonnement erstellen, erstellt Stripe automatisch eine Berechtigung, die `first_customer` mit `basic_features` verknüpft. Ein anderer Kunde/eine andere Kundin, `second_customer`, abonniert das erweiterte Produkt. Wenn Sie das Abonnement erstellen, erstellt Stripe automatisch zwei Berechtigungen: eine, die `second_customer` mit `basic_features` verknüpft, und eine, die `second_customer` mit `extended_features` verknüpft. Sie können festlegen, welche Funktionen für einen Kunden/eine Kundin bereitgestellt werden sollen, indem Sie [seine/ihre aktiven Berechtigungen abrufen oder das Ereignis mit der Zusammenfassung der aktiven Berechtigungen überwachen](https://docs.stripe.com/billing/entitlements.md#entitlements). Sie müssen ihre Abonnements, Produkte und Funktionen nicht abrufen. ## Stripe einrichten Installieren Sie den Stripe-Client Ihrer Wahl: #### 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' ``` Installieren Sie dann die Stripe-CLI. Mit der Stripe-CLI können Sie Webhooks testen und Stripe-APIs aufrufen. In einem späteren Abschnitt dieses Leitfadens wird erklärt, wie Sie mithilfe der CLI ein Preismodell einrichten können. Weitere Installationsoptionen finden Sie unter [Mit der Stripe-CLI loslegen](https://docs.stripe.com/stripe-cli.md). ## 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 } ``` ## Kundin/Kunden erstellen [Client und Server] Stripe benötigt für jedes Abonnement einen Kunden bzw. eine Kundin. Erfassen Sie in der Nutzeroberfläche Ihrer Anwendung alle erforderlichen Informationen von Ihren Nutzerinnen und Nutzern und leiten Sie diese an das Backend weiter. Wenn Sie Adressdaten erfassen müssen, können Sie mit dem Adresselement eine Liefer- oder Rechnungsadresse für Ihre Kundinnen und Kunden erfassen. Weitere Informationen zum Adresselement finden Sie auf der Seite [Adresselement](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 auf dem Server ein Objekt, das den Kunden bzw. die Kundin repräsentiert. Dies kann entweder ein vom Kunden oder von der Kundin konfiguriertes `Konto`-Objekt oder ein `Kunden`-Objekt sein. Speichern Sie die ID des Objekts, um sie in der Checkout-Sitzung zu verwenden. > #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden > > Die Accounts v2 API ist allgemein für Connect-Nutzer/innen verfügbar und für andere Stripe-Nutzer/innen in der öffentlichen Vorschau. Wenn an der Accounts v2 Vorschau teilnehmen, müssen Sie eine [Vorschauversion](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in Ihrem Code angeben. > > Um Zugriff auf die Accounts v2 Vorschau anzufordern, {% collect-email modal=true modal_link_text=“sign up.” list=“payin-payout-reuse-waitlist@stripe.com” send_direct_email=true intro_text=“Sind Sie am frühzeitigen Zugang zur Vorschau der Accounts v2 API interessiert?" body_text=“Wir sind gerade dabei, die Vorschau von Accounts v2 bereitzustellen. Um Zugang zu beantragen, geben Sie unten Ihre E-Mail-Adresse ein.” form_cta_text=“Registrieren” success_text=“Danke! Wir melden uns bald.” show_email_confirmation=wahr /%} > > Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), anstatt [Customer](https://docs.stripe.com/api/customers.md)-Objekte zu verwenden. #### Accounts v2 ```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" ``` ## Checkout-Sitzung erstellen [Server] Definieren Sie im Backend Ihres Anmeldeformulars einen Endpoint, der [die Sitzung erstellt](https://docs.stripe.com/api/checkout/sessions/create.md), die Ihr Frontend aufrufen kann. Sie benötigen die Preis-ID des Abos, das der/die Kund/in abschließt – Ihr Frontend übergibt diesen Wert. Wenn Sie in [Schritt 2](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md#create-pricing-model) einen einmaligen Preis erstellt haben, übergeben Sie auch diese Preis-ID. Achten Sie darauf, dass Sie nach dem Erstellen einer Checkout-Sitzung das [Client-Geheimnis](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) in der Antwort zurück an den Client übergeben. > Sie können [lookup_keys](https://docs.stripe.com/products-prices/manage-prices.md#lookup-keys) anstelle von Preis-IDs verwenden, um Preise abzurufen. Ein Beispiel finden Sie in der [Beispielanwendung](https://github.com/stripe-samples/subscription-use-cases/tree/main/fixed-price-subscriptions). #### Accounts v2 #### Ruby ```ruby require 'stripe' require 'sinatra' # This test secret API key is a placeholder. Don't include personal details in requests with this key. # To see your test secret API key embedded in code samples, sign in to your Stripe account. # You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys. # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. Stripe.api_key = '<>' Stripe.api_version = '2026-04-22.dahlia' set :static, true set :port, 4242 YOUR_DOMAIN = 'http://localhost:3000' post '/create-checkout-session' do content_type 'application/json' session = Stripe::Checkout::Session.create({ui_mode: 'elements', # Provide the Account ID of the account you previously created customer_account: '{{CUSTOMER_ACCOUNT_ID}}', line_items: [{ # Provide the exact Price ID (for example, price_1234) of the product you want to sell price: '{{PRICE_ID}}', quantity: 1, }], mode: 'subscription', return_url: YOUR_DOMAIN + '/return?session_id={CHECKOUT_SESSION_ID}', }) { clientSecret: session.client_secret }.to_json end ``` #### Customers v1 #### Ruby ```ruby require 'stripe' require 'sinatra' # This test secret API key is a placeholder. Don't include personal details in requests with this key. # To see your test secret API key embedded in code samples, sign in to your Stripe account. # You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys. # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. client = Stripe::StripeClient.new('<>', stripe_version: '2026-04-22.dahlia') set :static, true set :port, 4242 YOUR_DOMAIN = 'http://localhost:3000' post '/create-checkout-session' do content_type 'application/json' session = client.v1.checkout.sessions.create({ui_mode: 'elements', # Provide the customer ID of the customer you previously created customer: '{{CUSTOMER_ID}}', line_items: [{ # Provide the exact Price ID (for example, price_1234) of the product you want to sell price: '{{PRICE_ID}}', quantity: 1, }], mode: 'subscription', return_url: YOUR_DOMAIN + '/return?session_id={CHECKOUT_SESSION_ID}', }) { clientSecret: session.client_secret }.to_json end ``` Aktivieren Sie in Ihrem [Dashboard](https://dashboard.stripe.com/settings/payment_methods) die Zahlungsmethoden, die Sie von Ihren Kund/innen akzeptieren möchten. Checkout unterstützt [mehrere Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md#product-support). ## Bezahlvorgang initialisieren [Client] #### HTML + JS Rufen Sie [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init) auf und übergeben Sie `clientSecret`. `initCheckoutElementsSdk` gibt ein [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt zurück, das Daten aus der Checkout-Session und Methoden zur Aktualisierung enthält. Lesen Sie `total` und `lineItems` aus [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie neue Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird. ```html
``` ```javascript const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const session = loadActionsResult.actions.getSession(); const checkoutContainer = document.getElementById('checkout-container'); checkoutContainer.append(JSON.stringify(session.lineItems, null, 2)); checkoutContainer.append(document.createElement('br')); checkoutContainer.append(`Total: ${session.total.total.amount}`); } ``` #### React Umhüllen Sie Ihre Anwendung mit der Komponente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) und übergeben Sie dabei `clientSecret` und die `Stripe`-Instanz. ```jsx import React from 'react'; import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; import CheckoutForm from './CheckoutForm'; const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const App = () => { return ( ); }; export default App; ``` Greifen Sie auf das [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt in Ihrer Checkout-Formularkomponente, indem Sie den `useCheckoutElements()`-Hook verwenden. Das `Checkout`-Objekt enthält Daten aus der Checkout-Sitzung und Methoden zu ihrer Aktualisierung. Lesen Sie `total` und `lineItems` aus dem `Checkout`-Objekt und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird. ```jsx import React from 'react'; import {useCheckoutElements} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckoutElements(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount}
); }; ``` ## Zahlungsinformationen erfassen [Client] Erfassen Sie Zahlungsdetails auf dem Client mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md). Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, das die Erfassung von Zahlungsdaten für verschiedene Zahlungsmethoden vereinfacht. Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen. Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das Attribut [Zulassen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) des Iframes auf `"payment*"` gesetzt sein. Die Adresse der Bezahlseite muss mit `https://` beginnen, nicht mit `http://`, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu [aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren. #### HTML + JS Erstellen Sie zunächst ein Container-DOM-Element, um das [Payment Element](https://docs.stripe.com/payments/payment-element.md) zu verbinden. Erstellen Sie dann eine Instanz des `Payment Element` mit [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) und verbinden Sie es durch Aufrufen von [element.mount](https://docs.stripe.com/js/element/mount), wobei Sie entweder einen CSS-Selektor oder das Container-DOM-Element angeben. ```html
``` ```javascript const paymentElement = checkout.createPaymentElement(); paymentElement.mount('#payment-element'); ``` Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options). Sie können das [Erscheinungsbild](https://docs.stripe.com/payments/checkout/customization/appearance.md) aller Elements anpassen, indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) übergeben, wenn Sie Checkout im Frontend initialisieren. #### React Integrieren Sie die Komponente [Payment Element](https://docs.stripe.com/payments/payment-element.md) in den [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ```jsx import React from 'react';import {PaymentElement, useCheckoutElements} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckoutElements(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount} ); }; export default CheckoutForm; ``` Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options). Sie können das [Erscheinungsbild aller Elemente anpassen](https://docs.stripe.com/payments/checkout/customization/appearance.md), indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) an den [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) übergeben. ## Zahlung übermitteln [Clientseitig] #### HTML + JS Zeigen Sie eine Schaltfläche **Bezahlen** an, die [confirm](https://docs.stripe.com/js/custom_checkout/confirm) von der `Checkout`-Instanz aufruft, um die Zahlung zu übermitteln. ```html
``` ```js const checkout = stripe.initCheckoutElementsSdk({clientSecret}); checkout.on('change', (session) => { document.getElementById('pay-button').disabled = !session.canConfirm; }); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const button = document.getElementById('pay-button'); const errors = document.getElementById('confirm-errors'); button.addEventListener('click', () => { // Clear any validation errors errors.textContent = ''; actions.confirm().then((result) => { if (result.type === 'error') { errors.textContent = result.error.message; } }); }); } ``` #### React Zeigen Sie eine Schaltfläche **Bezahlen** an, die zur [Bestätigung](https://docs.stripe.com/js/custom_checkout/confirm) von [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) aufruft, um die Zahlung zu übermitteln. ```jsx import React from 'react'; import {useCheckoutElements} from '@stripe/react-stripe-js/checkout'; const PayButton = () => { const checkoutState = useCheckoutElements(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); if (checkoutState.type !== "success") { return null; } const handleClick = () => { setLoading(true);checkoutState.checkout.confirm().then((result) => { if (result.type === 'error') { setError(result.error) } setLoading(false); }) }; return (
{error &&
{error.message}
}
) }; export default PayButton; ``` ## Webhooks überwachen [Server] Um die Integration abzuschließen, müssen Sie die von Stripe gesendeten *Webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) verarbeiten. Diese Ereignisse werden immer dann ausgelöst, wenn sich der Status in Stripe ändert, z.B. wenn für Abonnements neue Rechnungen erstellt werden. Richten Sie in Ihrer Anwendung einen HTTP-Handler ein, der eine POST-Anfrage akzeptiert, die das Webhook-Ereignis enthält, und überprüfen Sie die Signatur des Ereignisses: #### 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 '/webhook' do # You can use webhooks to receive information about asynchronous payment events. # For more about our webhook events check out https://stripe.com/docs/webhooks. webhook_secret = ENV['STRIPE_WEBHOOK_SECRET'] payload = request.body.read if !webhook_secret.empty? # Retrieve the event by verifying the signature using the raw body and secret if webhook signing is configured. sig_header = request.env['HTTP_STRIPE_SIGNATURE'] event = nil begin event = Stripe::Webhook.construct_event( payload, sig_header, webhook_secret ) rescue JSON::ParserError => e # Invalid payload status 400 return rescue Stripe::SignatureVerificationError => e # Invalid signature puts '⚠️ Webhook signature verification failed.' status 400 return end else data = JSON.parse(payload, symbolize_names: true) event = Stripe::Event.construct_from(data) end # Get the type of webhook event sent - used to check the status of PaymentIntents. event_type = event['type'] data = event['data'] data_object = data['object'] if event_type == 'invoice.paid' # Used to provision services after the trial has ended. # The status of the invoice will show up as paid. Store the status in your # database to reference when a user accesses your service to avoid hitting rate # limits. # puts data_object end if event_type == 'invoice.payment_failed' # If the payment fails or the customer doesn't have a valid payment method, # an invoice.payment_failed event is sent, the subscription becomes past_due. # Use this webhook to notify your user that their payment has # failed and to retrieve new card details. # puts data_object end if event_type == 'customer.subscription.deleted' # handle subscription canceled automatically based # upon your subscription settings. Or if the user cancels it. # puts data_object end content_type 'application/json' { status: 'success' }.to_json end ``` Verwenden Sie während der Entwicklung die Stripe CLI, um [Webhooks zu überwachen und an Ihre Anwendung weiterzuleiten](https://docs.stripe.com/webhooks.md#test-webhook). Führen Sie Folgendes in einem neuen Datenterminal aus, während Ihre Entwicklungs-App ausgeführt wird: #### curl ```bash stripe listen --forward-to localhost:4242/webhook ``` Für die Produktionsphase können Sie eine Webhook-Endpoint-URL über das Dashboard oder mit der [Webhook Endpoints API](https://docs.stripe.com/api/webhook_endpoints.md) einrichten. Sie müssen einige Ereignisse überwachen, um die verbleibenden Schritte in diesem Leitfaden abzuschließen. Weitere Informationen zu Abo-spezifischen Webhooks finden Sie unter [Abo-Ereignisse](https://docs.stripe.com/billing/subscriptions/webhooks.md#events). ## Zugang zu Ihrer Dienstleistung bereitstellen [Client und Server] Nachdem das Abo nun aktiv ist, gewähren Sie Ihren Nutzer/innen Zugriff auf Ihren Dienst. Überwachen Sie dazu die Ereignisse `customer.subscription.created`, `customer.subscription.updated` und `customer.subscription.deleted`. Diese Ereignisse übergeben ein Abo-Objekt, das ein `status`-Feld enthält, das anzeigt, ob das Abo aktiv oder überfällig ist oder gekündigt wurde. Eine vollständige Statusliste finden Sie unter [Abonnementlebenszyklus](https://docs.stripe.com/billing/subscriptions/overview.md#subscription-lifecycle). In Ihrem Webhook-Handler: 1. Überprüfen Sie den Abo-Status. Wenn er `active` lautet, hat Ihr/e Nutzer/in für Ihr Produkt bezahlt. 1. Prüfen Sie das Produkt, auf das die Kundin/der Kunde ein Abo abgeschlossen hat und gewähren Sie Zugang zu Ihrem Dienst. Das Überprüfen des Produkts anstelle des Preises gibt Ihnen mehr Flexibilität, falls Sie die Preisgestaltung oder den Rechnungsstellungszeitraum ändern müssen. 1. Speichern Sie die `product.id`, `Abonnement.id` und den `Abonnement.status` in Ihrer Datenbank zusammen mit der bereits gespeicherten `customer_account.id` oder `customer.id`. Überprüfen Sie diesen Datensatz, wenn Sie entscheiden, welche Funktionen für die Nutzer/innen Ihrer Anwendung aktiviert werden sollen. Der Status eines Abonnements kann sich während seiner Laufzeit jederzeit ändern, auch wenn Ihr Anmeldeformular keine direkten Aufrufe an Stripe tätigt. So kann beispielsweise eine Verlängerung aufgrund einer abgelaufenen Karte fehlschlagen, wodurch das Abonnement in einen überfälligen Status versetzt wird. Oder, wenn Sie das [Kundenportal](https://docs.stripe.com/customer-management.md) implementieren, könnte ein/e Nutzer/in sein/ihr Abonnement kündigen, ohne Ihre Anwendung direkt aufzurufen. Durch die korrekte Implementierung Ihres Handlers bleibt der Status Ihrer Anwendung mit Stripe synchronisiert. ## Abo kündigen [Client und Server] Es ist gängige Praxis, dass Kundinnen/Kunden ihr Abonnement selbst kündigen können. In diesem Beispiel wird zur Seite mit den Kontoeinstellungen eine Kündigungsoption hinzugefügt. ![Beispiel für eine Benutzeroberfläche zur Kündigung eines Abonnements.](https://b.stripecdn.com/docs-statics-srv/assets/fixed-price-subscriptions-guide-account-settings.6559626ba4b434826a67abfea165e097.png) Kontoeinstellungen mit der Option, das Abo zu kündigen ```javascript function cancelSubscription(subscriptionId) { return fetch('/cancel-subscription', { method: 'post', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ subscriptionId: subscriptionId, }), }) .then(response => { return response.json(); }) .then(cancelSubscriptionResponse => { // Display to the user that the subscription has been canceled. }); } ``` Definieren Sie im Backend den Endpoint, den Ihr Frontend aufrufen soll. #### 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 '/cancel-subscription' do content_type 'application/json' data = JSON.parse request.body.read deleted_subscription = client.v1.subscriptions.cancel(data['subscriptionId']) deleted_subscription.to_json end ``` Ihre Anwendung empfängt ein Ereignis vom Typ `customer.subscription.deleted`. Aktualisieren Sie nach der Kündigung des Abonnements Ihre Datenbank, um die zuvor gespeicherte Stripe-Abonnement-ID zu entfernen, und beschränken Sie den Zugang zu Ihrem Dienst. Nachdem ein Abo gekündigt wurde, kann es nicht reaktiviert werden. Sie können stattdessen die aktualisierten Rechnungsinformationen von Ihrer Kund/innen erfassen, deren Standard-Zahlungsmethode aktualisieren und ein neues Abo für den bestehenden Kundendatensatz erstellen. ## Testen Sie Ihre Integration. ### Zahlungsmethoden testen Verwenden Sie die folgende Tabelle, um verschiedene Zahlungsmethoden und -szenarien zu testen. | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BECS-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `900123456` und BSB `000000` aus. Der bestätigte PaymentIntent geht zunächst in den Status `processing` über und dann drei Minuten später in den Status `succeeded`. | | BECS-Lastschrift | Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl. | Füllen Sie das Formular mit der Kontonummer `111111113` und BSB `000000` aus. | | Kreditkarte | Die Kartenzahlung ist erfolgreich, und es ist keine Authentifizierung erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4242 4242 4242 4242` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Für die Kartenzahlung ist eine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0025 0000 3155` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0000 0000 9995` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über. | | SEPA-Lastschrift | Der Status der PaymentIntent Ihrer Kundin/Ihre Kundin wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | ### Ereignisse überwachen Richten Sie Webhooks ein, um Abo-Änderungsereignisse wie Upgrades und Kündigungen zu überwachen. Erfahren Sie mehr über [Abo-Webhooks](https://docs.stripe.com/billing/subscriptions/webhooks.md). Sie können Ereignisse im [Dashboard](https://dashboard.stripe.com/test/events) oder mit der [Stripe CLI](https://docs.stripe.com/webhooks.md#test-webhook) anzeigen. Weitere Informationen finden Sie unter [Billing-Integration testen](https://docs.stripe.com/billing/testing.md). ## Optional: Planänderungen auf Kundenseite zulassen [Client und Server] Um Ihre Kund/innen Ihr Abo ändern zu lassen, erfassen Sie die Preis-ID der Option, zu der sie wechseln möchten. Übermitteln Sie dann die neue Preis-ID vom Frontend an einen Backend-Endpoint. In diesem Beispiel wird auch die Abo-ID übergeben, Sie können sie jedoch für Ihre angemeldeten Nutzer/innen aus Ihrer Datenbank abrufen. ```javascript function updateSubscription(priceId, subscriptionId) { return fetch('/update-subscription', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ subscriptionId: subscriptionId, newPriceId: priceId, }), }) .then(response => { return response.json(); }) .then(response => { return response; }); } ``` Definieren Sie im Backend den Endpoint für den Aufruf durch Ihr Frontend und übergeben Sie dabei die Abonnement-ID und die neue Preis-ID. Für das Abonnement gilt jetzt der Premium-Plan zum Preis von 15 USD pro Monat anstelle des Basic-Plans zum Preis von 5 USD pro Monat. #### 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 '/update-subscription' do content_type 'application/json' data = JSON.parse request.body.read subscription = client.v1.subscriptions.retrieve(data['subscriptionId']) updated_subscription = client.v1.subscriptions.update( data['subscriptionId'], cancel_at_period_end: false, items: [ { id: subscription.items.data[0].id, price: data['newPriceId'] } ] ) updated_subscription.to_json end ``` Ihre Anwendung empfängt ein Ereignis vom Typ `customer.subscription.updated`. ## Optional: Vorschau einer Preisänderung anzeigen [Client und Server] Bei Änderungen eines Abos durch Kund/innen wird häufig der geschuldete Betrag angepasst. Diese Anpassung wird als [anteilmäßige Verrechnung](https://docs.stripe.com/billing/subscriptions/prorations.md) bezeichnet. Mithilfe des [Endpoints zum Erstellen einer Rechnungsvorschau](https://docs.stripe.com/api/invoices/create_preview.md) können Sie Ihren Kund/innen den angepassten Betrag anzeigen. Übergeben Sie im Frontend die Details der zu erstellenden Rechnungsvorschau an einen Backend-Endpoint. #### Accounts v2 ```javascript function createPreviewInvoice( customerAccountId, subscriptionId, newPriceId, trialEndDate ) { return fetch('/create-preview-invoice', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ customerAccountId: customerAccountId, subscriptionId: subscriptionId, newPriceId: newPriceId, }), }) .then(response => { return response.json(); }) .then((invoice) => { return invoice; }); } ``` #### Customers v1 ```javascript function createPreviewInvoice( customerId, subscriptionId, newPriceId, trialEndDate ) { return fetch('/create-preview-invoice', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ customerId: customerId, subscriptionId: subscriptionId, newPriceId: newPriceId, }), }) .then(response => { return response.json(); }) .then((invoice) => { return invoice; }); } ``` Definieren Sie im Backend den Endpoint, den Ihr Frontend aufrufen soll. #### 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-preview-invoice' do content_type 'application/json' data = JSON.parse request.body.read subscription = Stripe::Subscription.retrieve(data['subscriptionId']) invoice = Stripe::Invoice.create_preview( customer_account: data['customerAccountId'], subscription: data['subscriptionId'], subscription_details: { items: [ { id: subscription.items.data[0].id, deleted: true }, { price: data['newPriceId'], deleted: false } ] } ) invoice.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-preview-invoice' do content_type 'application/json' data = JSON.parse request.body.read subscription = client.v1.subscriptions.retrieve(data['subscriptionId']) invoice = client.v1.invoices.create_preview( customer: data['customerId'], subscription: data['subscriptionId'], subscription_details: { items: [ { id: subscription.items.data[0].id, deleted: true }, { price: data['newPriceId'], deleted: false } ] } ) invoice.to_json end ``` ## Optional: Zahlungsmethode der Kunden anzeigen [Client und Server] Wenn der Kartenaussteller und die letzten vier Ziffern der Karte angezeigt werden, wissen Kunden eher, welche Karte belastet wird, und können gegebenenfalls die Zahlungsmethode aktualisieren. Senden Sie im Frontend die ID der Zahlungsmethode an einen Backend-Endpoint, der die Details zur Zahlungsmethode abruft. ```javascript function retrieveCustomerPaymentMethod(paymentMethodId) { return fetch('/retrieve-customer-payment-method', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ paymentMethodId: paymentMethodId, }), }) .then((response) => { return response.json(); }) .then((response) => { return response; }); } ``` Definieren Sie im Backend den Endpoint, den Ihr Frontend aufrufen soll. #### 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 '/retrieve-customer-payment-method' do content_type 'application/json' data = JSON.parse request.body.read payment_method = client.v1.payment_methods.retrieve(data['paymentMethodId']) payment_method.to_json end ``` Beispielantwort: ```json { "id": "pm_1GcbHY2eZvKYlo2CoqlVxo42", "object": "payment_method", "billing_details": { "address": { "city": null, "country": null, "line1": null, "line2": null, "postal_code": null, "state": null }, "email": null, "name": null, "phone": null }, "card": { "brand": "visa", "checks": { "address_line1_check": null, "address_postal_code_check": null, "cvc_check": "pass" }, "country": "US", "exp_month": 8, "exp_year": 2021, "fingerprint": "Xt5EWLLDS7FJjR1c", "funding": "credit", "generated_from": null, "last4": "4242", "three_d_secure_usage": { "supported": true }, "wallet": null }, "created": 1588010536, "customer": "cus_HAxB7dVQxhoKLh", "livemode": false, "metadata": {}, "type": "card" } ``` > Wir empfehlen, `paymentMethod.id` und `last4` in Ihrer Datenbank zu speichern (zum Beispiel `paymentMethod.id` als `stripeCustomerPaymentMethodId` in Ihrer Auflistung oder Tabelle für `users`). Optional können Sie je nach Bedarf `exp_month`, `exp_year`, `fingerprint` und `billing_details` speichern. Dadurch können Sie die Anzahl der Aufrufe an Stripe begrenzen, um die Leistung zu steigern und eventuelle Begrenzungen zu vermeiden. ## Stripe Ihren Kundinnen/Kunden anzeigen Stripe erfasst Informationen über Kundeninteraktionen mit Elements , um Ihnen Dienste bereitzustellen, Betrug vorzubeugen und seine Dienste zu verbessern. Dies umfasst auch die Verwendung von Cookies und IP-Adressen, um zu ermitteln, welche Elements ein/e Kund/in während einer einzelnen Checkout-Sitzung gesehen hat. Sie sind dafür verantwortlich, alle Rechte und Zustimmungen offenzulegen und einzuholen, die Stripe benötigen, um Ihre Daten auf diese Weise zu nutzen. Weitere Informationen finden Sie in unserem [Datenschutzcenter](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe). # Payment Intents API > This is a Payment Intents API for when platform is web and ui is elements. View the full page at https://docs.stripe.com/payments/advanced/build-subscriptions?platform=web&ui=elements. #### Integrationsaufwand Complexity: 4/5 #### Integrationstyp Komponenten der Nutzeroberfläche in einem benutzerdefinierten Zahlungsablauf kombinieren #### Anpassung der Nutzeroberfläche Anpassung auf CSS-Ebene mit der [Appearance API](https://docs.stripe.com/elements/appearance-api.md) Erstellen Sie ein benutzerdefiniertes Zahlungsformular mit [Stripe Elements](https://docs.stripe.com/payments/elements.md) und der [Payment Intents API](https://docs.stripe.com/api/payment_intents.md), um *Subscriptions* zum Festpreis zu verkaufen. Sehen Sie sich diese Integration [im Vergleich zu anderen Integrationen von Stripe an](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). Die Payment Intents API ist eine untergeordnete API, die Sie zum Erstellen Ihres eigenen Bezahlvorgangs oder Zahlungsablaufs verwenden können. Sie erfordert aber deutlich mehr Code und laufende Wartung. Wir empfehlen für die meisten Integrationen das [Payment Element mit Checkout-Sitzungen](https://docs.stripe.com/payments/quickstart-checkout-sessions.md), da es ähnliche Zahlungen wie Payment Intents abdeckt. Erfahren Sie mehr darüber, [wann Sie Checkout-Sitzungen anstelle von PaymentIntents verwenden sollten](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Wenn Sie kein benutzerdefiniertes Zahlungsformular erstellen möchten, können Sie eine gehostete Version von Checkout integrieren. Eine ausführliche Version dieses umfassenden Integrations-Leitfadens finden Sie in der [Billing-Kurzanleitung](https://docs.stripe.com/billing/quickstart.md). Wenn Sie zur Codierung einer Integration nicht bereit sind, können Sie einfache Abos [manuell im Dashboard](https://docs.stripe.com/no-code/subscriptions.md) einrichten. Sie können auch [Payment Links](https://docs.stripe.com/payment-links.md) nutzen, um Abos ohne das Schreiben von Code einzurichten. Lesen Sie mehr zum Thema [Entwerfen einer Integration](https://docs.stripe.com/billing/subscriptions/design-an-integration.md), um zu verstehen, welche Entscheidungen Sie treffen müssen und welche Ressourcen Sie benötigen. ## Sie werden Folgendes entwickeln Dieser Leitfaden bietet Informationen zu den folgenden Vorgehensweisen: - Richten Sie einen Product Catalog ein. - Entwickeln Sie einen Anmeldeprozess, durch den ein/e Kund/in erstellt wird. - Abos erstellen und Zahlungsinformationen erfassen. - Den Status der Zahlung und des Abos testen und überwachen. - Kunden ihren Plan ändern oder das Abo kündigen lassen. - Erfahren Sie, wie Sie im [flexiblen Abrechnungsmodus](https://docs.stripe.com/billing/subscriptions/billing-mode.md) auf ein verbessertes Abrechnungsverhalten und zusätzliche Funktionen zugreifen können. ## So entwickeln Sie mit Stripe [Subscriptions](https://docs.stripe.com/api/subscriptions.md) vereinfachen Ihre Billing, indem sie automatisch *Rechnungen* (Invoices are statements of amounts owed by a customer. They track the status of payments from draft through paid or otherwise finalized. Subscriptions automatically generate invoices, or you can manually create a one-off invoice) und [PaymentIntents](https://docs.stripe.com/api/payment_intents.md) für Sie erstellen. Um ein Abo zu erstellen und zu aktivieren, müssen Sie zunächst ein *Produkt* (Products represent what your business sells—whether that's a good or a service) erstellen, um zu definieren, was Sie verkaufen, 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) erstellen, der den Betrag der Zahlung und wie oft bestimmt. Außerdem müssen die für jede wiederkehrende Zahlung verwendeten *PaymentMethods* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) entweder von Kundinnen/Kunden konfigurierte `Konto`-Objekte oder `Kundinnen`-Objekte gespeichert werden. #### Accounts v2 Ein Diagramm, das gängige Abrechnungsobjekte und ihre Beziehungen veranschaulicht (See full diagram at https://docs.stripe.com/payments/advanced/build-subscriptions) #### Customer v1 Ein Diagramm, das gängige Abrechnungsobjekte und ihre Beziehungen veranschaulicht (See full diagram at https://docs.stripe.com/payments/advanced/build-subscriptions) ### API-Objekt-Definitionen | Ressource | Definition | | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Als Kunde/Kundin konfiguriertes Konto](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) | Stellt in der Accounts v2 API einen Kunden/eine Kundin dar, der/die ein Abonnement erwirbt. Konfigurieren Sie ein `Account`-Objekt als Kunde/Kundin und verknüpfen Sie es mit einem Abonnement, um wiederkehrende Zahlungen zu erheben und nachzuverfolgen sowie die abonnierten Produkte zu verwalten. Weitere Informationen finden Sie im [Leitfaden zur Verwendung von Accounts als Kunde/Kundin](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md). | | [Kundin/Kunde](https://docs.stripe.com/api/customers.md) | Stellt eine Kundin/einen Kundin in der Customers API dar, die/der ein Abonnement erwirbt. Verwenden Sie das mit einem Abonnement verknüpfte `Customer`-Objekt, um wiederkehrende Zahlungen durchzuführen und zu verfolgen und die abonnierten Produkte zu verwalten. | | [Berechtigung](https://docs.stripe.com/api/entitlements/active-entitlement.md) | Stellt den Zugriff eines Kunden/einer Kundin auf eine Funktion dar, die in einem Dienstleistungsprodukt enthalten ist, das er/sie abonniert hat. Wenn Sie ein Abonnement für den wiederkehrenden Kauf eines Produkts durch einen Kunden/eine Kundin erstellen, wird automatisch eine aktive Berechtigung für jede diesem Produkt zugeordnete Funktion erstellt. Wenn ein Kunde/eine Kundin auf Ihre Dienstleistungen zugreift, verwenden Sie seine/ihre aktiven Berechtigungen, um die in seinem/ihrem Abonnement enthaltenen Funktionen zu aktivieren. | | [Funktion](https://docs.stripe.com/api/entitlements/feature.md) | Stellt eine Funktion oder Fähigkeit dar, auf die Ihre Kundinnen und Kunden zugreifen können, wenn sie ein Dienstleistungsprodukt abonnieren. Sie können Funktionen in ein Produkt einfügen, indem Sie ProductFeatures erstellen. | | [Rechnung](https://docs.stripe.com/api/invoices.md) | Eine Aufstellung der Beträge, die ein Kunde/eine Kundin schuldet, die den Zahlungsstatus vom Entwurf bis zur Bezahlung oder anderweitigem Abschluss verfolgt. Bei Abonnements werden automatisch Rechnungen erstellt. | | [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) | Eine Möglichkeit zum Erstellen dynamischer Zahlungsabläufe. Mit einem PaymentIntent wird der Lebenszyklus der Bezahlvorgänge von Kundinnen/Kunden verfolgt, und es werden zusätzliche Authentifizierungsschritte ausgelöst, wenn dies aufgrund von gesetzlichen Vorschriften, nutzerdefinierten Radar-Betrugsregeln oder auf Weiterleitung basierenden Zahlungsmethoden erforderlich ist. Rechnungen erstellen automatisch PaymentIntents. | | [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) | Die Zahlungsmethoden einer Kundin/eines Kunden, mit denen sie/er für Ihre Produkte bezahlt. Sie können beispielsweise eine Kreditkarte in einem kundenkonfigurierten `Account` oder `Customer` speichern und damit wiederkehrende Zahlungen für diese Kundin/diesen Kunden/ vornehmen. Wird in der Regel mit der Payment Intents API oder der Setup Intents API verwendet. | | [Preis](https://docs.stripe.com/api/prices.md) | Definiert den Stückpreis, die Währung und den Rechnungszyklus für ein Produkt. | | [Produkt](https://docs.stripe.com/api/products.md) | Eine Ware oder Dienstleistung, die Ihr Unternehmen verkauft. Ein Dienstleistungsprodukt kann eine oder mehrere Funktionen beinhalten. | | [ProductFeature](https://docs.stripe.com/api/product-feature.md) | Stellt die Aufnahme einer einzelnen Funktion in ein einzelnes Produkt dar. Jedes Produkt ist für jede Funktion, die es enthält, mit einer ProductFeature verknüpft, und jede Funktion ist für jedes Produkt, das sie enthält, mit einer ProductFeature verknüpft. | | [Abonnement](https://docs.stripe.com/api/subscriptions.md) | Stellt den geplanten wiederkehrenden Kauf eines Produkts durch einen Kunden/eine Kundin dar. Verwenden Sie ein Abonnement, um Zahlungen einzuziehen und eine wiederholte Lieferung oder einen kontinuierlichen Zugriff auf ein Produkt zu ermöglichen. | Hier ist ein Beispiel dafür, wie Produkte, Funktionen und Berechtigungen zusammen funktionieren. Stellen Sie sich vor, Sie möchten einen wiederkehrenden Service einrichten, der zwei Stufen anbietet: ein Standard-Produkt mit grundlegenden Funktionalitäten und ein erweitertes Produkt, das erweiterte Funktionalitäten bietet. 1. Sie erstellen zwei Funktionen: `basic_features` und `extended_features`. 1. Sie erstellen zwei Produkte: `standard_product` und `advanced_product`. 1. Für das Standardprodukt erstellen Sie eine ProductFeature, die `basic_features` mit `standard_product` verknüpft. 1. Für das erweiterte Produkt erstellen Sie zwei ProductFeatures: eine, die `basic_features` mit `advanced_product` verknüpft, und eine, die `extended_features` mit `advanced_product` verknüpft. Ein Kunde/eine Kundin, `first_customer`, abonniert das Standardprodukt. Wenn Sie das Abonnement erstellen, erstellt Stripe automatisch eine Berechtigung, die `first_customer` mit `basic_features` verknüpft. Ein anderer Kunde/eine andere Kundin, `second_customer`, abonniert das erweiterte Produkt. Wenn Sie das Abonnement erstellen, erstellt Stripe automatisch zwei Berechtigungen: eine, die `second_customer` mit `basic_features` verknüpft, und eine, die `second_customer` mit `extended_features` verknüpft. Sie können festlegen, welche Funktionen für einen Kunden/eine Kundin bereitgestellt werden sollen, indem Sie [seine/ihre aktiven Berechtigungen abrufen oder das Ereignis mit der Zusammenfassung der aktiven Berechtigungen überwachen](https://docs.stripe.com/billing/entitlements.md#entitlements). Sie müssen ihre Abonnements, Produkte und Funktionen nicht abrufen. ## Stripe einrichten Installieren Sie den Stripe-Client Ihrer Wahl: #### 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' ``` Installieren Sie dann die Stripe-CLI. Mit der Stripe-CLI können Sie Webhooks testen und Stripe-APIs aufrufen. In einem späteren Abschnitt dieses Leitfadens wird erklärt, wie Sie mithilfe der CLI ein Preismodell einrichten können. Weitere Installationsoptionen finden Sie unter [Mit der Stripe-CLI loslegen](https://docs.stripe.com/stripe-cli.md). ## 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 } ``` ## Kundin/Kunden erstellen [Client und Server] Stripe benötigt für jedes Abonnement einen Kunden bzw. eine Kundin. Erfassen Sie in der Nutzeroberfläche Ihrer Anwendung alle erforderlichen Informationen von Ihren Nutzerinnen und Nutzern und leiten Sie diese an das Backend weiter. Wenn Sie Adressdaten erfassen müssen, können Sie mit dem Adresselement eine Liefer- oder Rechnungsadresse für Ihre Kundinnen und Kunden erfassen. Weitere Informationen zum Adresselement finden Sie auf der Seite [Adresselement](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 auf dem Server ein Objekt, das den Kunden bzw. die Kundin repräsentiert. Dies kann entweder ein vom Kunden oder von der Kundin konfiguriertes `Konto`-Objekt oder ein `Kunden`-Objekt sein. Speichern Sie die ID des Objekts, um sie in der Checkout-Sitzung zu verwenden. > #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden > > Die Accounts v2 API ist allgemein für Connect-Nutzer/innen verfügbar und für andere Stripe-Nutzer/innen in der öffentlichen Vorschau. Wenn an der Accounts v2 Vorschau teilnehmen, müssen Sie eine [Vorschauversion](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in Ihrem Code angeben. > > Um Zugriff auf die Accounts v2 Vorschau anzufordern, {% collect-email modal=true modal_link_text=“sign up.” list=“payin-payout-reuse-waitlist@stripe.com” send_direct_email=true intro_text=“Sind Sie am frühzeitigen Zugang zur Vorschau der Accounts v2 API interessiert?" body_text=“Wir sind gerade dabei, die Vorschau von Accounts v2 bereitzustellen. Um Zugang zu beantragen, geben Sie unten Ihre E-Mail-Adresse ein.” form_cta_text=“Registrieren” success_text=“Danke! Wir melden uns bald.” show_email_confirmation=wahr /%} > > Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), anstatt [Customer](https://docs.stripe.com/api/customers.md)-Objekte zu verwenden. #### Accounts v2 ```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" ``` ## Abo erstellen [Client und Server] > Wenn Sie das Payment Element rendern möchten, ohne vorab ein Abo zu erstellen, finden Sie weitere Informationen unter [Zahlungsdaten vor dem Erstellen eines Intent erfassen](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=subscription). Erlauben Sie Ihren Kund/innen, einen Tarif auszuwählen und dann das Abo zu erstellen. Im Beispiel in diesem Leitfaden wählt der Kunde zwischen einem Basis-Tarif oder einem Aufpreis-Tarif. Übergeben Sie im Frontend die ausgewählte Preis-ID und die Kundendatensatz-ID an das Backend. #### Accounts v2 ```javascript fetch('/create-subscription', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ priceId: priceId, customerAccountId: customerAccountId, }), }) ``` #### Customers v1 ```javascript fetch('/create-subscription', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ priceId: priceId, customerId: customerId, }), }) ``` Erstellen Sie im Backend das Abo mit einem Status `incomplete` mit `payment_behavior=default_incomplete`. Geben Sie dann das `client_secret` vom ersten [PaymentIntent](https://docs.stripe.com/payments/payment-intents.md) des Abos an das Frontend zurück, um die Zahlung abzuschließen. Erweitern Sie dazu das [confirmation_secret](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) auf der neuesten Rechnung des Abos. Um ein [verbessertes Aboverhalten](https://docs.stripe.com/billing/subscriptions/billing-mode.md) zu ermöglichen, legen Sie `billing_mode[type]` auf `flexible` fest. Sie müssen die Stripe API Version [2025-06-30.basil](https://docs.stripe.com/changelog/basil.md#2025-06-30.basil) oder höher verwenden. Legen Sie [save_default_payment_method](https://docs.stripe.com/api/subscriptions/object.md#subscription_object-payment_settings-save_default_payment_method) auf `on_subscription` fest, um die Zahlungsmethode bei erfolgreicher Zahlung als Standard für ein Abo zu speichern. Das Speichern einer Standardzahlungsmethode erhöht die Erfolgsquote künftiger Abo-Zahlungen. Im folgenden Beispiel wird ein `Abonnement` erstellt und das `confirmation_secret` aus der letzten Rechnung in der Antwort erweitert. So können Sie das Geheimnis an das Frontend übergeben, um die Zahlung zu bestätigen. #### Accounts v2 ```curl curl https://api.stripe.com/v1/subscriptions \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "items[0][price]={{PRICE_ID}}" \ -d payment_behavior=default_incomplete \ -d "payment_settings[save_default_payment_method]=on_subscription" \ -d "billing_mode[type]=flexible" \ -d "expand[0]=latest_invoice.confirmation_secret" ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/subscriptions \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d "items[0][price]={{PRICE_ID}}" \ -d payment_behavior=default_incomplete \ -d "payment_settings[save_default_payment_method]=on_subscription" \ -d "billing_mode[type]=flexible" \ -d "expand[0]=latest_invoice.confirmation_secret" ``` > Wenn Sie einen *Preis in 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, teilen Sie dem Abo mithilfe des Parameters [currency](https://docs.stripe.com/api/subscriptions/create.md#create_subscription-currency) mit, welche unterstützte Währung verwendet werden soll. (Wenn Sie den Parameter `currency` weglassen, wird für das Abo die Standardwährung verwendet.) Das Abo ist jetzt `inactive` und wartet auf Zahlung. In der folgenden Beispielantwort werden die minimal zu speichernden Felder hervorgehoben. Sie können jedoch die Felder speichern, auf die Ihre Anwendung häufig zugreift. #### Accounts v2 ```json {"id": "sub_JgRjFjhKbtD2qz", "object": "subscription", "application_fee_percent": null, "automatic_tax": { "disabled_reason": null, "enabled": false, "liability": "null" }, "billing_cycle_anchor": 1623873347, "billing_cycle_anchor_config": null, "cancel_at": null, "cancel_at_period_end": false, "canceled_at": null, "cancellation_details": { "comment": null, "feedback": null, "reason": null }, "collection_method": "charge_automatically", "created": 1623873347, "currency": "usd","customer_account": identifier("customerAccount"), "days_until_due": null, "default_payment_method": null, "default_source": null, "default_tax_rates": [ ], "discounts": [], "ended_at": null, "invoice_customer_balance_settings": { "account_tax_ids": null, "issuer": { "type": "self" } }, "items": { "object": "list", "data": [ { "id": "si_JgRjmS4Ur1khEx", "object": "subscription_item", "created": 1623873347,"current_period_end": 1626465347, "current_period_start": 1623873347, "discounts": [], "metadata": { }, "plan": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "plan", "active": true, "amount": 2000, "amount_decimal": "2000", "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "interval": "month", "interval_count": 1, "livemode": false, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "tiers": null, "tiers_mode": null, "transform_usage": null, "trial_period_days": null, "usage_type": "licensed" }, "price": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "price", "active": true, "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "livemode": false, "lookup_key": null, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "recurring": { "interval": "month", "interval_count": 1, "trial_period_days": null, "usage_type": "licensed" }, "tiers_mode": null, "transform_quantity": null, "type": "recurring", "unit_amount": 2000, "unit_amount_decimal": "2000" }, "quantity": 1, "subscription": "sub_JgRjFjhKbtD2qz", "tax_rates": [ ] } ], "has_more": false, "total_count": 1, "url": "/v1/subscription_items?subscription=sub_JgRjFjhKbtD2qz" }, "latest_invoice": { "id": "in_1J34pzGPZ1iASj5zB87qdBNZ", "object": "invoice", "account_country": "US", "account_name": "Angelina's Store", "account_tax_ids": null, "amount_due": 2000, "amount_overpaid": 0, "amount_paid": 0, "amount_remaining": 2000, "amount_shipping": 0, "attempt_count": 0, "attempted": false, "auto_advance": false, "automatic_tax": { "disabled_reason": null, "enabled": false, "liability": null, "status": null }, "automatically_finalizes_at": null, "billing_reason": "subscription_update", "collection_method": "charge_automatically", "created": 1623873347, "currency": "usd", "custom_fields": null, "customer_account": identifier("customerAccount"), "customer_address": null, "customer_email": "angelina@stripe.com", "customer_name": null, "customer_phone": null, "customer_shipping": { "address": { "city": "", "country": "US", "line1": "Berry", "line2": "", "postal_code": "", "state": "" }, "name": "", "phone": null }, "customer_tax_exempt": "none", "customer_tax_ids": [ ], "default_payment_method": null, "default_source": null, "default_tax_rates": [ ], "description": null, "discounts": [], "due_date": null, "effective_at": "1623873347", "ending_balance": 0, "footer": null, "from_invoice": null, "hosted_invoice_url": "https://invoice.stripe.com/i/acct_1By64KGPZ1iASj5z/invst_JgRjzIOILGeq2MKC9T0KtyXnD5udsLp", "invoice_pdf": "https://pay.stripe.com/invoice/acct_1By64KGPZ1iASj5z/invst_JgRjzIOILGeq2MKC9T0KtyXnD5udsLp/pdf", "last_finalization_error": null, "latest_revision": null, "lines": { "object": "list", "data": [ { "id": "il_1N2CjMBwKQ696a5NeOawRQP2", "object": "line_item", "amount": 2000, "currency": "usd", "description": "1 × Gold Special (at $20.00 / month)", "discount_amounts": [ ], "discountable": true, "discounts": [ ], "invoice": "in_1J34pzGPZ1iASj5zB87qdBNZ", "livemode": false, "metadata": { }, "parent": { "invoice_item_details": null, "subscription_item_details": { "invoice_item": null, "proration": false, "proration_details": { "credited_items": null }, "subscription": "sub_JgRjFjhKbtD2qz", "subscription_item": "si_JgRjmS4Ur1khEx" }, "type": "subscription_item_details" }, "period": { "end": 1626465347, "start": 1623873347 }, "plan": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "plan", "active": true, "amount": 2000, "amount_decimal": "2000", "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "interval": "month", "interval_count": 1, "livemode": false, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "tiers": null, "tiers_mode": null, "transform_usage": null, "trial_period_days": null, "usage_type": "licensed" }, "price": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "price", "active": true, "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "livemode": false, "lookup_key": null, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "recurring": { "interval": "month", "interval_count": 1, "trial_period_days": null, "usage_type": "licensed" }, "tiers_mode": null, "transform_quantity": null, "type": "recurring", "unit_amount": 2000, "unit_amount_decimal": "2000" }, "quantity": 1, "taxes": [] } ], "has_more": false, "total_count": 1, "url": "/v1/invoices/in_1J34pzGPZ1iASj5zB87qdBNZ/lines" }, "livemode": false, "metadata": { }, "next_payment_attempt": null, "number": "C008FC2-0354", "on_behalf_of": null, "parent": { "quote_details": null, "subscription_details": { "metadata": {}, "pause_collection": null, "subscription": "sub_JgRjFjhKbtD2qz" } }, "payment_intent": { "id": "pi_1J34pzGPZ1iASj5zI2nOAaE6", "object": "payment_intent", "allowed_source_types": [ "card" ], "amount": 2000, "amount_capturable": 0, "amount_received": 0, "application": null, "application_fee_amount": null, "canceled_at": null, "cancellation_reason": null, "capture_method": "automatic", "charges": { "object": "list", "data": [ ], "has_more": false, "total_count": 0, "url": "/v1/charges?payment_intent=pi_1J34pzGPZ1iASj5zI2nOAaE6" }, "client_secret": "pi_1J34pzGPZ1iASj5zI2nOAaE6_secret_l7FN6ldFfXiFmJEumenJ2y2wu", "confirmation_method": "automatic", "created": 1623873347, "currency": "usd", "customer": "cus_CMqDWO2xODTZqt", "description": "Subscription creation", "invoice": "in_1J34pzGPZ1iASj5zB87qdBNZ", "last_payment_error": null, "livemode": false, "metadata": { }, "next_action": null, "next_source_action": null, "on_behalf_of": null, "payment_method": null, "payment_method_options": { "card": { "installments": null, "network": null, "request_three_d_secure": "automatic" } }, "payment_method_types": [ "card" ], "receipt_email": null, "review": null, "setup_future_usage": "off_session", "shipping": null, "source": "card_1By6iQGPZ1iASj5z7ijKBnXJ", "statement_descriptor": null, "statement_descriptor_suffix": null, "status": "requires_confirmation", "transfer_data": null, "transfer_group": null }, "payment_settings": { "payment_method_options": null, "payment_method_types": null, "save_default_payment_method": "on_subscription" }, "period_end": 1623873347, "period_start": 1623873347, "post_payment_credit_notes_amount": 0, "pre_payment_credit_notes_amount": 0, "receipt_number": null, "starting_balance": 0, "statement_descriptor": null, "status": "open", "status_transitions": { "finalized_at": 1623873347, "marked_uncollectible_at": null, "paid_at": null, "voided_at": null }, "subscription": "sub_JgRjFjhKbtD2qz", "subtotal": 2000, "tax": null, "tax_percent": null, "total": 2000, "total_discount_amounts": [], "total_tax_amounts": [], "transfer_data": null, "webhooks_delivered_at": 1623873347 }, "livemode": false, "metadata": { }, "next_pending_invoice_item_invoice": null, "pause_collection": null, "pending_invoice_item_interval": null, "pending_setup_intent": null, "pending_update": null, "plan": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "plan", "active": true, "amount": 2000, "amount_decimal": "2000", "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "interval": "month", "interval_count": 1, "livemode": false, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "tiers": null, "tiers_mode": null, "transform_usage": null, "trial_period_days": null, "usage_type": "licensed" }, "quantity": 1, "schedule": null, "start": 1623873347, "start_date": 1623873347, "status": "incomplete", "tax_percent": null, "transfer_data": null, "trial_end": null, "trial_start": null } ``` #### Customers v1 ```json {"id": "sub_JgRjFjhKbtD2qz", "object": "subscription", "application_fee_percent": null, "automatic_tax": { "disabled_reason": null, "enabled": false, "liability": "null" }, "billing_cycle_anchor": 1623873347, "billing_cycle_anchor_config": null, "cancel_at": null, "cancel_at_period_end": false, "canceled_at": null, "cancellation_details": { "comment": null, "feedback": null, "reason": null }, "collection_method": "charge_automatically", "created": 1623873347, "currency": "usd","customer": identifier("customer"), "days_until_due": null, "default_payment_method": null, "default_source": null, "default_tax_rates": [ ], "discounts": [], "ended_at": null, "invoice_customer_balance_settings": { "account_tax_ids": null, "issuer": { "type": "self" } }, "items": { "object": "list", "data": [ { "id": "si_JgRjmS4Ur1khEx", "object": "subscription_item", "created": 1623873347,"current_period_end": 1626465347, "current_period_start": 1623873347, "discounts": [], "metadata": { }, "plan": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "plan", "active": true, "amount": 2000, "amount_decimal": "2000", "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "interval": "month", "interval_count": 1, "livemode": false, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "tiers": null, "tiers_mode": null, "transform_usage": null, "trial_period_days": null, "usage_type": "licensed" }, "price": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "price", "active": true, "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "livemode": false, "lookup_key": null, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "recurring": { "interval": "month", "interval_count": 1, "trial_period_days": null, "usage_type": "licensed" }, "tiers_mode": null, "transform_quantity": null, "type": "recurring", "unit_amount": 2000, "unit_amount_decimal": "2000" }, "quantity": 1, "subscription": "sub_JgRjFjhKbtD2qz", "tax_rates": [ ] } ], "has_more": false, "total_count": 1, "url": "/v1/subscription_items?subscription=sub_JgRjFjhKbtD2qz" }, "latest_invoice": { "id": "in_1J34pzGPZ1iASj5zB87qdBNZ", "object": "invoice", "account_country": "US", "account_name": "Angelina's Store", "account_tax_ids": null, "amount_due": 2000, "amount_overpaid": 0, "amount_paid": 0, "amount_remaining": 2000, "amount_shipping": 0, "attempt_count": 0, "attempted": false, "auto_advance": false, "automatic_tax": { "disabled_reason": null, "enabled": false, "liability": null, "status": null }, "automatically_finalizes_at": null, "billing_reason": "subscription_update", "collection_method": "charge_automatically", "created": 1623873347, "currency": "usd", "custom_fields": null, "customer": identifier("customer"), "customer_address": null, "customer_email": "angelina@stripe.com", "customer_name": null, "customer_phone": null, "customer_shipping": { "address": { "city": "", "country": "US", "line1": "Berry", "line2": "", "postal_code": "", "state": "" }, "name": "", "phone": null }, "customer_tax_exempt": "none", "customer_tax_ids": [ ], "default_payment_method": null, "default_source": null, "default_tax_rates": [ ], "description": null, "discounts": [], "due_date": null, "effective_at": "1623873347", "ending_balance": 0, "footer": null, "from_invoice": null, "hosted_invoice_url": "https://invoice.stripe.com/i/acct_1By64KGPZ1iASj5z/invst_JgRjzIOILGeq2MKC9T0KtyXnD5udsLp", "invoice_pdf": "https://pay.stripe.com/invoice/acct_1By64KGPZ1iASj5z/invst_JgRjzIOILGeq2MKC9T0KtyXnD5udsLp/pdf", "last_finalization_error": null, "latest_revision": null, "lines": { "object": "list", "data": [ { "id": "il_1N2CjMBwKQ696a5NeOawRQP2", "object": "line_item", "amount": 2000, "currency": "usd", "description": "1 × Gold Special (at $20.00 / month)", "discount_amounts": [ ], "discountable": true, "discounts": [ ], "invoice": "in_1J34pzGPZ1iASj5zB87qdBNZ", "livemode": false, "metadata": { }, "parent": { "invoice_item_details": null, "subscription_item_details": { "invoice_item": null, "proration": false, "proration_details": { "credited_items": null }, "subscription": "sub_JgRjFjhKbtD2qz", "subscription_item": "si_JgRjmS4Ur1khEx" }, "type": "subscription_item_details" }, "period": { "end": 1626465347, "start": 1623873347 }, "plan": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "plan", "active": true, "amount": 2000, "amount_decimal": "2000", "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "interval": "month", "interval_count": 1, "livemode": false, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "tiers": null, "tiers_mode": null, "transform_usage": null, "trial_period_days": null, "usage_type": "licensed" }, "price": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "price", "active": true, "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "livemode": false, "lookup_key": null, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "recurring": { "interval": "month", "interval_count": 1, "trial_period_days": null, "usage_type": "licensed" }, "tiers_mode": null, "transform_quantity": null, "type": "recurring", "unit_amount": 2000, "unit_amount_decimal": "2000" }, "quantity": 1, "taxes": [] } ], "has_more": false, "total_count": 1, "url": "/v1/invoices/in_1J34pzGPZ1iASj5zB87qdBNZ/lines" }, "livemode": false, "metadata": { }, "next_payment_attempt": null, "number": "C008FC2-0354", "on_behalf_of": null, "parent": { "quote_details": null, "subscription_details": { "metadata": {}, "pause_collection": null, "subscription": "sub_JgRjFjhKbtD2qz" } }, "payment_intent": { "id": "pi_1J34pzGPZ1iASj5zI2nOAaE6", "object": "payment_intent", "allowed_source_types": [ "card" ], "amount": 2000, "amount_capturable": 0, "amount_received": 0, "application": null, "application_fee_amount": null, "canceled_at": null, "cancellation_reason": null, "capture_method": "automatic", "charges": { "object": "list", "data": [ ], "has_more": false, "total_count": 0, "url": "/v1/charges?payment_intent=pi_1J34pzGPZ1iASj5zI2nOAaE6" }, "client_secret": "pi_1J34pzGPZ1iASj5zI2nOAaE6_secret_l7FN6ldFfXiFmJEumenJ2y2wu", "confirmation_method": "automatic", "created": 1623873347, "currency": "usd", "customer": "cus_CMqDWO2xODTZqt", "description": "Subscription creation", "invoice": "in_1J34pzGPZ1iASj5zB87qdBNZ", "last_payment_error": null, "livemode": false, "metadata": { }, "next_action": null, "next_source_action": null, "on_behalf_of": null, "payment_method": null, "payment_method_options": { "card": { "installments": null, "network": null, "request_three_d_secure": "automatic" } }, "payment_method_types": [ "card" ], "receipt_email": null, "review": null, "setup_future_usage": "off_session", "shipping": null, "source": "card_1By6iQGPZ1iASj5z7ijKBnXJ", "statement_descriptor": null, "statement_descriptor_suffix": null, "status": "requires_confirmation", "transfer_data": null, "transfer_group": null }, "payment_settings": { "payment_method_options": null, "payment_method_types": null, "save_default_payment_method": "on_subscription" }, "period_end": 1623873347, "period_start": 1623873347, "post_payment_credit_notes_amount": 0, "pre_payment_credit_notes_amount": 0, "receipt_number": null, "starting_balance": 0, "statement_descriptor": null, "status": "open", "status_transitions": { "finalized_at": 1623873347, "marked_uncollectible_at": null, "paid_at": null, "voided_at": null }, "subscription": "sub_JgRjFjhKbtD2qz", "subtotal": 2000, "tax": null, "tax_percent": null, "total": 2000, "total_discount_amounts": [], "total_tax_amounts": [], "transfer_data": null, "webhooks_delivered_at": 1623873347 }, "livemode": false, "metadata": { }, "next_pending_invoice_item_invoice": null, "pause_collection": null, "pending_invoice_item_interval": null, "pending_setup_intent": null, "pending_update": null, "plan": { "id": "price_1J32RfGPZ1iASj5zHHp57z7C", "object": "plan", "active": true, "amount": 2000, "amount_decimal": "2000", "billing_scheme": "per_unit", "created": 1623864151, "currency": "usd", "interval": "month", "interval_count": 1, "livemode": false, "metadata": { }, "nickname": null, "product": "prod_JgPF5xnq7qBun3", "tiers": null, "tiers_mode": null, "transform_usage": null, "trial_period_days": null, "usage_type": "licensed" }, "quantity": 1, "schedule": null, "start": 1623873347, "start_date": 1623873347, "status": "incomplete", "tax_percent": null, "transfer_data": null, "trial_end": null, "trial_start": null } ``` ## Zahlungsinformationen erfassen [Client] Verwenden Sie [Stripe Elements](https://docs.stripe.com/payments/elements.md), um Zahlungsdetails zu erfassen und das Abo zu aktivieren. Sie können Elements an das Erscheinungsbild Ihrer Anwendung anpassen. Das [Payment Element](https://docs.stripe.com/payments/payment-element.md) unterstützt [Link](https://docs.stripe.com/payments/link.md), Kreditkarten, SEPA-Lastschrift und BECS-Lastschriftverfahren für Abonnements. Sie können die aktivierten Zahlungsmethoden anzeigen und die auf der Kundenauswahl basierenden Zahlungsdetails sicher erfassen. ### Stripe Elements einrichten Das Payment Element ist automatisch als Funktion von Stripe.js verfügbar. Binden Sie das Stripe.js-Skript auf Ihrer Zahlungsseite ein, indem Sie es in den `head` Ihrer HTML-Datei einfügen. Laden Sie Stripe.js stets direkt von js.stripe.com, um PCI-konform zu bleiben. Binden Sie das Skript nicht in ein Bundle ein und hosten Sie keine eigene Kopie. ```html Checkout ``` Erstellen Sie eine Instanz von Stripe mit dem folgenden JavaScript-Code auf Ihrer Zahlungsseite: ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` ### Payment Element zu Ihrer Seite hinzufügen Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular. ```html
``` Nachdem das Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden es mit dem Container-DOM-Knoten. Beim [Erstellen des Abos](https://docs.stripe.com/payments/advanced/build-subscriptions.md#create-subscription) haben Sie den Wert `client_secret` an das Frontend übergeben. Übergeben Sie diesen Wert als Option beim Erstellen einer Instanz von Elements. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in the payment form, passing the client secret obtained in step 5 const elements = stripe.elements(options); const paymentElementOptions = { layout: "tabs", }; // Create and mount the Payment Element const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` Das Payment Element stellt ein dynamisches Formular dar, mit dem Ihre Kundinnen und Kunden eine Zahlungsmethode auswählen können. Das Formular erfasst automatisch alle notwendigen Zahlungsdetails für die ausgewählte Zahlungsmethode. #### Optionale Konfigurationen für das Payment Element Optional können Sie Folgendes tun: - Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen einer Instanz von Elements das [Appearance-Objekt](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) an `options` übergeben. - Konfigurieren Sie die Apple Pay-Schnittstelle so, dass ein [Händler-Token](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) zurückgegeben wird, um wiederkehrende Zahlungen, automatisches Neuladen und verzögerte Zahlungen zu unterstützen. ### Zahlung abschließen Verwenden Sie `stripe.confirmPayment`, um die Zahlung mit den Details aus dem Payment Element abzuschließen und das Abo zu aktivieren. Dadurch wird eine PaymentMethod erstellt und der erste PaymentIntent des unvollständigen Abos bestätigt, wodurch eine Abbuchung entsteht. Wenn die Zahlung die *starke Kundenauthentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) (SCA) erfordert, übernimmt das Payment Element den Authentifizierungsprozess, bevor der PaymentIntent bestätigt wird. Geben Sie eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) an, um anzugeben, wohin Stripe die Nutzer/innen nach Durchführung der Zahlung weiterleitet. Ihre Nutzer/innen werden möglicherweise an eine zwischengeschaltete Seite weitergeleitet, wie z. B. eine Bankautorisierungsseite, bevor sie zur `return_url` weitergeleitet werden. Bei Kartenzahlungen werden sie sofort zur `return_url` weitergeleitet, wenn die Zahlung erfolgreich war. ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", } }); if (error) { // This point is reached only if there's an immediate error when // confirming the payment. Show an error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer redirects to your `return_url`. For some payment // methods, such as iDEAL, your customer redirects to an intermediate // site first to authorize the payment, and then redirects to the `return_url`. } }); ``` Wenn Ihr Kunde/Ihre Kundin eine Zahlung übermittelt, leitet Stripe ihn an die `return_url` weiter und fügt die folgenden URL-Abfrageparameter ein. Die Rückgabeseite kann diese nutzen, um den Status des PaymentIntent abzurufen, damit der Kunde/die Kundin den Zahlungsstatus anzeigen kann. Wenn Sie die `return_url` angeben, können Sie auch Ihre eigenen Abfrageparameter für die Verwendung auf der Rückgabeseite anhängen. | Parameter | Beschreibung | | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | Die eindeutige ID für den `PaymentIntent`. | | `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. Bei Abonnementintegrationen wird dieses client_secret auch über [`confirmation_secret`](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) im `Invoice`-Objekt sichtbar gemacht | Wenn Kundinnen und Kunden auf Ihre Seite weitergeleitet werden, können Sie `payment_intent_client_secret` nutzen, um den PaymentIntent abzufragen und Ihren Kundinnen und Kunden den Transaktionsstatus anzuzeigen. > Wenn Sie über Tools verfügen, die die Browser-Sitzung der Kund/innen tracken, müssen Sie möglicherweise die Domain `stripe.com` zur Referenz-Ausschlussliste hinzufügen. Weiterleitungen haben zur Folge, dass einige Tools neue Sitzungen erstellen. Dies wiederum hindert Sie daran, die gesamte Sitzung zu tracken. Verwenden Sie einen der Abfrageparameter, um den PaymentIntent abzurufen. Überprüfen Sie den [Status des PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md), um zu entscheiden, was Ihren Kund/innen angezeigt werden soll. Sie können bei der Angabe der `return_url` auch Ihre eigenen Abfrageparameter anhängen, die während des Weiterleitungsvorgangs erhalten bleiben. ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods [immediately succeed or fail][0] upon // confirmation, while others first enter a `processing` status. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` ## Webhooks überwachen [Server] Um die Integration abzuschließen, müssen Sie die von Stripe gesendeten *Webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) verarbeiten. Diese Ereignisse werden immer dann ausgelöst, wenn sich der Status in Stripe ändert, z. B. wenn für Abos neue Rechnungen erzeugt werden. Richten Sie in Ihrer Anwendung einen HTTP-Handler ein, der eine POST-Anfrage akzeptiert, die das Webhook-Ereignis enthält, und die Signatur des Ereignisses überprüft: #### 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 '/webhook' do # You can use webhooks to receive information about asynchronous payment events. # For more about our webhook events, see https://stripe.com/docs/webhooks. webhook_secret = ENV['STRIPE_WEBHOOK_SECRET'] payload = request.body.read if !webhook_secret.empty? # Retrieve the event by verifying the signature using the raw body and secret if webhook signing is configured. sig_header = request.env['HTTP_STRIPE_SIGNATURE'] event = nil begin event = Stripe::Webhook.construct_event( payload, sig_header, webhook_secret ) rescue JSON::ParserError => e # Invalid payload status 400 return rescue Stripe::SignatureVerificationError => e # Invalid signature puts '⚠️ Webhook signature verification failed.' status 400 return end else data = JSON.parse(payload, symbolize_names: true) event = Stripe::Event.construct_from(data) end # Get the type of webhook event sent - used to check the status of PaymentIntents. event_type = event['type'] data = event['data'] data_object = data['object'] if event_type == 'invoice.paid' # Used to provision services after the trial has ended. # The status of the invoice shows up as paid. Store the status in your # database to reference when a user accesses your service to avoid hitting rate # limits. # puts data_object end if event_type == 'invoice.payment_failed' # If the payment fails or the customer doesn't have a valid payment method, # an invoice.payment_failed event is sent and the subscription becomes past_due. # Use this webhook to notify your user that their payment has # failed and to retrieve new card details. # puts data_object end if event_type == 'customer.subscription.deleted' # handle subscription canceled automatically based # upon your subscription settings. Or if the user cancels it. # puts data_object end content_type 'application/json' { status: 'success' }.to_json end ``` Verwenden Sie während der Entwicklung die Stripe CLI, um [Webhooks zu überwachen und an Ihre Anwendung weiterzuleiten](https://docs.stripe.com/webhooks.md#test-webhook). Führen Sie Folgendes in einem neuen Datenterminal aus, während Ihre Entwicklungs-App ausgeführt wird: #### curl ```bash stripe listen --forward-to localhost:4242/webhook ``` Für die Produktionsphase können Sie einen Webhook Endpoint in [Workbench](https://docs.stripe.com/workbench.md) einrichten oder die [Webhook Endpoints API](https://docs.stripe.com/api/webhook_endpoints.md) verwenden. Sie müssen auf einige Ereignisse achten, um die verbleibenden Schritte in diesem Leitfaden abzuschließen. Weitere Informationen zu abonnementbezogenen Webhooks finden Sie unter [Abo-Ereignisse](https://docs.stripe.com/billing/subscriptions/webhooks.md#events). ## Zugang zu Ihrer Dienstleistung bereitstellen [Client und Server] Nachdem das Abo nun aktiv ist, gewähren Sie Ihren Nutzer/innen Zugriff auf Ihren Dienst. Überwachen Sie dazu die Ereignisse `customer.subscription.created`, `customer.subscription.updated` und `customer.subscription.deleted`. Diese Ereignisse übergeben ein `Subscription`-Objekt, das ein `status`-Feld enthält, welches anzeigt, ob das Abo aktiv oder überfällig ist oder gekündigt wurde. Eine vollständige Statusliste finden Sie unter [Abonnementlebenszyklus](https://docs.stripe.com/billing/subscriptions/overview.md#subscription-lifecycle). In Ihrem Webhook-Handler: 1. Überprüfen Sie den Status des Abos. Wenn er `active` ist, hat der/die Nutzer/in für Ihr Produkt bezahlt. 1. Prüfen Sie das Produkt, für das die Kundin/der Kunde ein Abo abgeschlossen hat, und gewähren Sie Zugang zu Ihrem Dienst. Das Überprüfen des Produkts anstelle des Preises gibt Ihnen mehr Flexibilität, falls Sie die Preisgestaltung oder den Rechnungsstellungszeitraum ändern müssen. 1. Speichern Sie die `product.id`, `Abonnement.id` und den `Abonnement.status` in Ihrer Datenbank zusammen mit der bereits gespeicherten `customer_account.id` oder `customer.id`. Überprüfen Sie diesen Datensatz, wenn Sie entscheiden, welche Funktionen für die Nutzer/innen Ihrer Anwendung aktiviert werden sollen. Der Status eines Abos kann sich während seiner Laufzeit jederzeit ändern, auch wenn Ihre Anwendung keine direkten Aufrufe an Stripe tätigt. So kann beispielsweise eine Verlängerung aufgrund einer abgelaufenen Karte fehlschlagen, wodurch das Abo in einen `past due`-Status versetzt wird. Oder, wenn Sie das [Kundenportal](https://docs.stripe.com/customer-management.md) implementieren, könnte ein/e Nutzer/in das Abo kündigen, ohne Ihre Anwendung direkt aufzurufen. Durch die korrekte Implementierung Ihres Handlers bleibt der Status Ihrer Anwendung mit Stripe synchronisiert. ## Abo kündigen [Client und Server] Sie können Kund/innen die Möglichkeit bieten, ihre Abos zu kündigen. Im folgenden Beispiel wird eine Kündigungsoption zur Seite mit den Kontoeinstellungen hinzugefügt. ![Beispiel für eine Benutzeroberfläche zur Abo-Kündigung](https://b.stripecdn.com/docs-statics-srv/assets/fixed-price-subscriptions-guide-account-settings.6559626ba4b434826a67abfea165e097.png) Kontoeinstellungen mit der Option, das Abo zu kündigen ```javascript function cancelSubscription(subscriptionId) { return fetch('/cancel-subscription', { method: 'post', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ subscriptionId: subscriptionId, }), }) .then(response => { return response.json(); }) .then(cancelSubscriptionResponse => { // Display to the user that the subscription has been canceled. }); } ``` Definieren Sie im Backend den Endpoint, den Ihr Frontend aufrufen soll. #### 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 '/cancel-subscription' do content_type 'application/json' data = JSON.parse request.body.read deleted_subscription = client.v1.subscriptions.cancel(data['subscriptionId']) deleted_subscription.to_json end ``` Ihre Anwendung empfängt ein Ereignis vom Typ `customer.subscription.deleted`. Aktualisieren Sie nach der Kündigung des Abonnements Ihre Datenbank, um die zuvor gespeicherte Stripe-Abonnement-ID zu entfernen, und schränken Sie den Zugang zu Ihrer Dienstleistung ein. Wenn ein Abo gekündigt wurde, kann es nicht reaktiviert werden. Sie müssen stattdessen die aktualisierten Rechnungsinformationen von Ihrer Kundinnen/Kunden erfassen, deren Standard-Zahlungsmethode aktualisieren und ein neues Abo für den bestehenden Kundendatensatz erstellen. ## Testen Sie Ihre Integration. ### Zahlungsmethoden testen Verwenden Sie die folgende Tabelle, um verschiedene Zahlungsmethoden und -szenarien zu testen. | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BECS-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `900123456` und BSB `000000` aus. Der bestätigte PaymentIntent geht zunächst in den Status `processing` über und dann drei Minuten später in den Status `succeeded`. | | BECS-Lastschrift | Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl. | Füllen Sie das Formular mit der Kontonummer `111111113` und BSB `000000` aus. | | Kreditkarte | Die Kartenzahlung ist erfolgreich, und es ist keine Authentifizierung erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4242 4242 4242 4242` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Für die Kartenzahlung ist eine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0025 0000 3155` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0000 0000 9995` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über. | | SEPA-Lastschrift | Der Status der PaymentIntent Ihrer Kundin/Ihre Kundin wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | ### Ereignisse überwachen Richten Sie Webhooks ein, um Abo-Änderungsereignisse wie Upgrades und Kündigungen zu überwachen. Erfahren Sie mehr über [Abo-Webhooks](https://docs.stripe.com/billing/subscriptions/webhooks.md). Sie können Ereignisse im [Dashboard](https://dashboard.stripe.com/test/events) oder mit der [Stripe CLI](https://docs.stripe.com/webhooks.md#test-webhook) anzeigen. Weitere Informationen finden Sie unter [Billing-Integration testen](https://docs.stripe.com/billing/testing.md). ## Optional: Planänderungen auf Kundenseite zulassen [Client und Server] Um Ihre Kund/innen Ihr Abo ändern zu lassen, erfassen Sie die Preis-ID der Option, zu der sie wechseln möchten. Übermitteln Sie dann die neue Preis-ID vom Frontend an einen Backend-Endpoint. In diesem Beispiel wird auch die Abo-ID übergeben, Sie können sie jedoch für Ihre angemeldeten Nutzer/innen aus Ihrer Datenbank abrufen. ```javascript function updateSubscription(priceId, subscriptionId) { return fetch('/update-subscription', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ subscriptionId: subscriptionId, newPriceId: priceId, }), }) .then(response => { return response.json(); }) .then(response => { return response; }); } ``` Definieren Sie im Backend den Endpoint für den Aufruf durch Ihr Frontend und übergeben Sie dabei die Abo-ID und die neue Preis-ID. Für das Abo gilt jetzt der Aufpreis-Tarif zum Preis von 15 USD pro Monat anstelle des Basis-Tarifs zum Preis von 5 USD pro Monat. #### 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 '/update-subscription' do content_type 'application/json' data = JSON.parse request.body.read subscription = client.v1.subscriptions.retrieve(data['subscriptionId']) updated_subscription = client.v1.subscriptions.update( data['subscriptionId'], cancel_at_period_end: false, items: [ { id: subscription.items.data[0].id, price: data['newPriceId'] } ] ) updated_subscription.to_json end ``` Ihre Anwendung empfängt ein Ereignis vom Typ `customer.subscription.updated`. ## Optional: Vorschau einer Preisänderung anzeigen [Client und Server] Bei Änderungen eines Abos durch Kund/innen wird häufig der geschuldete Betrag angepasst. Diese Anpassung wird als [anteilmäßige Verrechnung](https://docs.stripe.com/billing/subscriptions/prorations.md) bezeichnet. Mithilfe des [Endpoints zum Erstellen einer Rechnungsvorschau](https://docs.stripe.com/api/invoices/create_preview.md) können Sie Ihren Kund/innen den angepassten Betrag anzeigen. Übergeben Sie im Frontend die Details zum `create preview invoice` an einen Backend-Endpoint. #### Accounts v2 ```javascript function createPreviewInvoice( customerAccountId, subscriptionId, newPriceId, trialEndDate ) { return fetch('/create-preview-invoice', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ customerAccountId: customerAccountId, subscriptionId: subscriptionId, newPriceId: newPriceId, }), }) .then(response => { return response.json(); }) .then((invoice) => { return invoice; }); } ``` #### Customers v1 ```javascript function createPreviewInvoice( customerId, subscriptionId, newPriceId, trialEndDate ) { return fetch('/create-preview-invoice', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ customerId: customerId, subscriptionId: subscriptionId, newPriceId: newPriceId, }), }) .then(response => { return response.json(); }) .then((invoice) => { return invoice; }); } ``` Definieren Sie im Backend den Endpoint, den Ihr Frontend aufrufen soll. #### 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-preview-invoice' do content_type 'application/json' data = JSON.parse request.body.read subscription = Stripe::Subscription.retrieve(data['subscriptionId']) invoice = Stripe::Invoice.create_preview( customer_account: data['customerAccountId'], subscription: data['subscriptionId'], subscription_details: { items: [ { id: subscription.items.data[0].id, deleted: true }, { price: data['newPriceId'], deleted: false } ] } ) invoice.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-preview-invoice' do content_type 'application/json' data = JSON.parse request.body.read subscription = client.v1.subscriptions.retrieve(data['subscriptionId']) invoice = client.v1.invoices.create_preview( customer: data['customerId'], subscription: data['subscriptionId'], subscription_details: { items: [ { id: subscription.items.data[0].id, deleted: true }, { price: data['newPriceId'], deleted: false } ] } ) invoice.to_json end ``` ## Optional: Zahlungsmethode der Kunden anzeigen [Client und Server] Wenn der Kartenaussteller und die letzten vier Ziffern der Karte angezeigt werden, wissen Kunden eher, welche Karte belastet wird, und können gegebenenfalls die Zahlungsmethode aktualisieren. Senden Sie im Frontend die ID der Zahlungsmethode an einen Backend-Endpoint, der die Details zur Zahlungsmethode abruft. ```javascript function retrieveCustomerPaymentMethod(paymentMethodId) { return fetch('/retrieve-customer-payment-method', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ paymentMethodId: paymentMethodId, }), }) .then((response) => { return response.json(); }) .then((response) => { return response; }); } ``` Definieren Sie im Backend den Endpoint, den Ihr Frontend aufrufen soll. #### 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 '/retrieve-customer-payment-method' do content_type 'application/json' data = JSON.parse request.body.read payment_method = client.v1.payment_methods.retrieve(data['paymentMethodId']) payment_method.to_json end ``` Beispielantwort: ```json { "id": "pm_1GcbHY2eZvKYlo2CoqlVxo42", "object": "payment_method", "billing_details": { "address": { "city": null, "country": null, "line1": null, "line2": null, "postal_code": null, "state": null }, "email": null, "name": null, "phone": null }, "card": { "brand": "visa", "checks": { "address_line1_check": null, "address_postal_code_check": null, "cvc_check": "pass" }, "country": "US", "exp_month": 8, "exp_year": 2021, "fingerprint": "Xt5EWLLDS7FJjR1c", "funding": "credit", "generated_from": null, "last4": "4242", "three_d_secure_usage": { "supported": true }, "wallet": null }, "created": 1588010536, "customer": "cus_HAxB7dVQxhoKLh", "livemode": false, "metadata": {}, "type": "card" } ``` > Wir empfehlen, `paymentMethod.id` und `last4` in Ihrer Datenbank zu speichern (zum Beispiel `paymentMethod.id` als `stripeCustomerPaymentMethodId` in Ihrer Auflistung oder Tabelle für `users`). Optional können Sie je nach Bedarf `exp_month`, `exp_year`, `fingerprint` und `billing_details` speichern. Dadurch wird die Anzahl der Aufrufe an Stripe beschränkt, um die Leistung zu steigern und eventuelle Begrenzungen zu vermeiden. ## Stripe Ihren Kundinnen/Kunden anzeigen Stripe erfasst Informationen über Kundeninteraktionen mit Elements , um Ihnen Dienste bereitzustellen, Betrug vorzubeugen und seine Dienste zu verbessern. Dies umfasst auch die Verwendung von Cookies und IP-Adressen, um zu ermitteln, welche Elements ein/e Kund/in während einer einzelnen Checkout-Sitzung gesehen hat. Sie sind dafür verantwortlich, alle Rechte und Zustimmungen offenzulegen und einzuholen, die Stripe benötigen, um Ihre Daten auf diese Weise zu nutzen. Weitere Informationen finden Sie in unserem [Datenschutzcenter](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).