# Bezahlvorgangseite mit der Checkout Sessions API erstellen

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.

# Bezahlvorgangseite mit Checkout Sessions API erstellen

Erstellen Sie eine Bezahlvorgangseite auf Ihrer Website mit Stripe Elements und der Checkout Sessions API, einem Frontend-SDK, das Steuern, Rabatte, Versandkosten und mehr verwaltet.

### Stripe Node-Bibliothek installieren

Installieren Sie das Paket und importieren Sie es in Ihren Code. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine package.json-Datei benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter.

#### npm

Bibliothek installieren:

```bash
npm install --save stripe
```

#### GitHub

Oder laden Sie den Quellcode der Stripe-Node-Bibliothek direkt von [GitHub](https://github.com/stripe/stripe-node) herunter.

### Stripe-Ruby-Bibliothek installieren

Installieren Sie Stripe Ruby Gem und fordern Sie es in Ihrem Code an. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine Gemfile benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter.

#### Terminal

Gem installieren:

```bash
gem install stripe
```

#### Bundler

Fügen Sie diese Zeile in Ihre Gemfile ein:

```bash
gem 'stripe'
```

#### GitHub

Oder laden Sie den Quellcode von Stripe Ruby Gem direkt von [GitHub](https://github.com/stripe/stripe-ruby) herunter.

### Stripe Java-Bibliothek installieren

Fügen Sie Ihrem Build die Abhängigkeit hinzu und importieren Sie die Bibliothek. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine pom.xml-Beispieldatei (für Maven) benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter.

#### Maven

Fügen Sie folgende Abhängigkeit zu Ihrer POM-Datei hinzu und ersetzen Sie {VERSION} durch die Versionsnummer, die Sie verwenden möchten.

```bash
<dependency>\n<groupId>com.stripe</groupId>\n<artifactId>stripe-java</artifactId>\n<version>{VERSION}</version>\n</dependency>
```

#### Gradle

Fügen Sie die Abhängigkeit zu Ihrer build.gradle-Datei hinzu und ersetzen Sie {VERSION} durch die Versionsnummer, die Sie verwenden möchten.

```bash
implementation "com.stripe:stripe-java:{VERSION}"
```

#### GitHub

Laden Sie die JAR-Datei direkt von [GitHub](https://github.com/stripe/stripe-java/releases/latest) herunter.

### Stripe-Python-Paket installieren

Installieren Sie das Stripe-Paket und importieren Sie es in Ihren Code. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine requirements.txt-Datei benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter.

#### pip

Installieren Sie das Paket über pip:

```bash
pip3 install stripe
```

#### GitHub

Laden Sie den Quellcode der Stripe-Python-Bibliothek direkt [von GitHub](https://github.com/stripe/stripe-python) herunter.

### Stripe PHP-Bibliothek installieren

Installieren Sie die Bibliothek mit Composer und initialisieren Sie sie mit Ihrem geheimen API-Schlüssel. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine composer.csproj-Datei benötigen, laden Sie die Dateien über den Download-Link im Code-Editor herunter.

#### Composer

Bibliothek installieren:

```bash
composer require stripe/stripe-php
```

#### GitHub

Oder laden Sie den Quellcode der Stripe-PHP-Bibliothek direkt von [GitHub](https://github.com/stripe/stripe-php) herunter.

### Server einrichten

Fügen Sie Ihrem Build die Abhängigkeit hinzu und importieren Sie die Bibliothek. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine go.mod-Datei benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter.

#### Go

Nutzen Sie für die Initialisierung Go-Module:

```bash
go get -u github.com/stripe/stripe-go/v85
```

#### GitHub

Oder laden Sie den Quellcode des Stripe-Go-Moduls direkt von [GitHub](https://github.com/stripe/stripe-go) herunter.

### Stripe.net-Bibliothek installieren

Installieren Sie das Paket mit .NET oder NuGet. Wenn Sie aber von Grund auf neu beginnen möchten, laden Sie die Dateien herunter, die eine konfigurierte .csproj-Datei enthalten.

#### dotnet

Bibliothek installieren:

```bash
dotnet add package Stripe.net
```

#### NuGet

Bibliothek installieren:

```bash
Install-Package Stripe.net
```

#### GitHub

Oder laden Sie den Quellcode der Stripe.net-Bibliothek direkt von [GitHub](https://github.com/stripe/stripe-dotnet) herunter.

### Stripe-Bibliotheken installieren

Installieren Sie die Pakete und importieren Sie sie in Ihren Code. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine `package.json`-Datei benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter.

Bibliotheken installieren:

```bash
npm install --save stripe @stripe/stripe-js next
```

### Checkout-Sitzung erstellen

Fügen Sie auf Ihrem Server einen Endpoint hinzu, der eine *Checkout-Sitzung* (A Checkout Session represents your customer's session as they pay for one-time purchases or subscriptions through Checkout. After a successful payment, the Checkout Session contains a reference to the Customer, and either the successful PaymentIntent or an active Subscription) erstellt und setzen Sie dabei den Parameter [ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) auf `elements`.

Die Antwort der Checkout-Sitzung enthält ein [client_secret](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret), das der Client verwendet, um die Zahlung abzuschließen. Geben Sie das Client-Geheimnis in Ihrer Antwort zurück.

### Rückgabe-URL angeben

Um zu definieren, wie Stripe Ihre Kundinnen/Kunden nach der Zahlung weiterleitet, geben Sie beim Erstellen der Checkout-Sitzung die URL der Rückgabeseite im Parameter [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) an. Nach dem Zahlungsversuch leitet Stripe Ihre Kundinnen/Kunden auf die auf Ihrer Website gehostete Rückgabeseite weiter.

Fügen Sie die Vorlagenvariable `{CHECKOUT_SESSION_ID}` in die URL ein. Checkout ersetzt die Variable durch die Checkout-Sitzungs-ID, bevor Ihr Kunde/Ihre Kundin weitergeleitet wird. Sie erstellen und hosten die Rückgabeseite auf Ihrer Website.

### Ein zu verkaufendes Produkt definieren

Definieren Sie die [Produkte und Preise](https://docs.stripe.com/products-prices/manage-prices.md) für Ihre Checkout-Sitzung. In der Regel bedeutet dies die Verwendung einer vordefinierten [Produktpreis-ID](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items-price). Wenn Sie jedoch dynamische Preise festlegen müssen, die nicht im Voraus bekannt sein können, verwenden Sie [price_data](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items-price_data).

### Verschiedene Transaktionen verarbeiten

Um verschiedene Transaktionen zu verarbeiten, passen Sie den Parameter [mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) an:

- Für einmalige Zahlungen verwenden Sie `payment`.
- Wenn Sie einen oder mehrere [wiederkehrende Preise](https://docs.stripe.com/payments/subscriptions.md) haben, verwenden Sie `subscription`.
- Wenn Sie keine anfängliche Zahlung von einer Kundin/einem Kunden einziehen, aber deren Zahlungsdetails speichern möchten, um [sie später zu belasten](https://docs.stripe.com/payments/checkout/save-and-reuse.md?payment-ui=embedded-components), verwenden Sie `setup`.

### Stripe zu Ihrer React-App hinzufügen

Um *PCI-konform* (Any party involved in processing, transmitting, or storing credit card data must comply with the rules specified in the Payment Card Industry (PCI) Data Security Standards. PCI compliance is a shared responsibility and applies to both Stripe and your business) zu bleiben, indem Sie sicherstellen, dass die Zahlungsdaten ohne Umweg über Ihren Server direkt an Stripe gesendet werden, installieren Sie [React Stripe.js](https://docs.stripe.com/sdks/stripejs-react.md).

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Stripe.js laden

Um die Stripe-Bibliothek zu konfigurieren, rufen `loadStripe()` mit Ihrem veröffentlichbaren Stripe-API-Schlüssel auf.

### Stripe.js laden

Verwenden Sie *Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs), um *PCI-konform* (Any party involved in processing, transmitting, or storing credit card data must comply with the rules specified in the Payment Card Industry (PCI) Data Security Standards. PCI compliance is a shared responsibility and applies to both Stripe and your business) zu bleiben, indem Sie Zahlungsdetails ohne Umweg über Ihren Server direkt an Stripe senden. Laden Sie Stripe.js immer aus *js.stripe.com*, um die Konformität einzuhalten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie es nicht selbst.

Sie können Stripe.js laden, indem Sie das Skript in Ihre HTML-Datei einbinden oder [loadStripe](https://github.com/stripe/stripe-js/blob/master/README.md#loadstripe) verwenden.

### Zahlungsformular definieren

Um die Kundeninformationen sicher zu erfassen, erstellen Sie den leeren Platzhalter `div`. Stripe fügt einen iFrame in `div` ein.

Wenn Sie die E-Mail-Adresse der Kundin bzw. des Kunden erfassen möchten, fügen Sie diesem Formular eine E-Mail-Eingabe hinzu. Sie werden dies in einem späteren Schritt mit [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) einrichten.

### Stripe.js initialisieren

Initialisieren Sie Stripe.js mit Ihrem [veröffentlichbaren API-Schlüssel](https://docs.stripe.com/keys.md#obtain-api-keys).

### Client-Geheimnis der Checkout-Sitzung abrufen

Stellen Sie eine Anfrage an Ihren Server, um [eine Checkout-Sitzung zu erstellen](https://docs.stripe.com/api/checkout/sessions/create.md) und das Client-Geheimnis abzurufen.

### Bezahlvorgang initialisieren

Verwenden Sie `clientSecret`, um Checkout zu initialisieren und übergeben Sie entweder eine Client-Geheimnis-Zeichenfolge oder ein Promise, das diese auflöst. Das [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt bildet das Rückgrat Ihrer Checkout-Seite und enthält Daten aus der Checkout-Sitzung sowie Methoden zu deren Aktualisierung.

### Bezahlvorgang initialisieren

Rendern Sie den [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) und übergeben Sie `clientSecret`&nbsp;– die Client-Geheimnis-Zeichenfolge oder ein Promise, das das Client-Geheimnis auflöst.

### Status einrichten

Initialisieren Sie einige Status, um die Zahlung zu verfolgen, Fehler anzuzeigen und die Nutzeroberfläche zu verwalten.

### Verweis auf Checkout speichern

Greifen Sie auf das [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt in Ihrer Komponente CheckoutForm zu, indem Sie den Hook `useCheckout()` verwenden. Das `Checkout`-Objekt fungiert als Rückgrat Ihrer Bezahlseite und enthält Daten aus der Checkout-Sitzung sowie Methoden zu deren Aktualisierung.

### E-Mail-Adresse der Kundin/des Kunden erfassen

Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an.

Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) aus dem Objekt `Checkout`.

Alternativ können Sie:

- Übergeben Sie die [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) oder [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) beim Erstellen der Checkout-Sitzung. Stripe überprüft die auf diese Weise angegebenen E-Mail-Adressen.
- Geben Sie eine E-Mail-Adresse ein, die Sie bereits bei [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm) validiert haben.

### E-Mail-Adresse der Kundin/des Kunden erfassen

Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an.

Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) aus dem Objekt `Checkout`.

Alternativ können Sie:

- Übergeben Sie die [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) oder [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) beim Erstellen der Checkout-Sitzung. Stripe überprüft die auf diese Weise angegebenen E-Mail-Adressen.
- Geben Sie eine E-Mail-Adresse ein, die Sie bereits auf [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm) validiert haben.

### Payment Element hinzufügen

Fügen Sie das [Payment Element](https://docs.stripe.com/js/custom_checkout/create_payment_element) zu Ihrem Zahlungsformular hinzu. Dabei wird ein iFrame mit einem dynamischen Formular eingebettet, das Zahlungsdaten für eine Vielzahl von Zahlungsmethoden sammelt. Ihre Kundinnen und Kunden wählen einfach die gewünschte Zahlungsart aus und das Formular erfasst automatisch alle notwendigen Zahlungsdetails.

### Payment Element erstellen

Erstellen Sie ein [Payment Element](https://docs.stripe.com/js/custom_checkout/create_payment_element) und verbinden Sie es mit dem Platzhalter `<div>` in Ihrem Zahlungsformular. Dadurch wird ein iFrame mit einem dynamischen Formular integriert, das konfigurierte Zahlungsmethodentypen anzeigt, sodass Ihr Kunde/Ihre Kundin eine Zahlungsmethode auswählen kann. Das Formular erfasst automatisch die zugehörigen Zahlungsdetails für die ausgewählte Zahlungsmethode.

### (Optional) Payment Element anpassen

Passen Sie die Nutzeroberfläche des Zahlungsoptionselements an, indem Sie ein [Appearance-Objekt](https://docs.stripe.com/elements/appearance-api.md) erstellen und dieses als Option an den CheckoutElementsProvider übergeben. Verwenden Sie das Farbschema und die Schriftart Ihres Unternehmens, damit es mit dem Rest Ihrer Zahlungsseite übereinstimmt. Verwenden Sie benutzerdefinierte Schriftarten (z.&nbsp;B. aus Google Fonts), indem Sie Checkout mit einem [Schriftartensatz](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-fonts) initialisieren.

Vergessen Sie nicht, rechts eine Vorschau anzuzeigen, um Ihre Änderungen live zu sehen.

> Teile dieser Vorschau-Demo stimmen möglicherweise nicht mit Ihrer tatsächlichen Checkout-Seite überein. Diese Einstellungen stellen nur eine Teilmenge der Variablen des [Erscheinungsbild-Objekts](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) dar und das [Erscheinungsbild-Objekt](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) steuert nur bestimmte Attribute von Stripe-Elementen. Sie sind für die Gestaltung der restlichen Checkout-Seite verantwortlich.

### (Optional) Payment Element anpassen

Passen Sie die Nutzeroberfläche von Payment Element an, indem Sie ein [Appearance-Objekt](https://docs.stripe.com/elements/appearance-api.md) erstellen und Checkout damit initialisieren. Verwenden Sie das Farbschema und die Schriftart Ihres Unternehmens, damit es mit dem Rest Ihrer Checkout-Seite übereinstimmt. Verwenden Sie benutzerdefinierte Schriftarten, z.&nbsp;B. aus Google Fonts, indem Sie Checkout mit einem [Font-Set](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-fonts) initialisieren.

Vergessen Sie nicht, rechts eine Vorschau anzuzeigen, um Ihre Änderungen live zu sehen.

> Teile dieser Vorschau-Demo stimmen möglicherweise nicht mit Ihrer tatsächlichen Checkout-Seite überein. Diese Einstellungen stellen nur eine Teilmenge der Variablen des [Erscheinungsbild-Objekts](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) dar und das [Erscheinungsbild-Objekt](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) steuert nur bestimmte Attribute von Stripe-Elementen. Sie sind für die Gestaltung der restlichen Checkout-Seite verantwortlich.

### Übermittlungsereignis verarbeiten

Überwachen Sie das Übermittlungsereignis des Formulars, um zu wissen, wann die Zahlung über die Stripe-API bestätigt werden kann.

### Zahlung abschließen

Rufen Sie [bestätigen](https://docs.stripe.com/js/custom_checkout/confirm) auf, wenn die Kundin/der Kunde bereit ist, den Bezahlvorgang abzuschließen, z.&nbsp;B. nachdem sie/er auf eine Schaltfläche zum Bezahlen geklickt hat.

### Umgang mit Fehlern

Wenn unmittelbar [Fehler](https://docs.stripe.com/error-codes.md) auftreten (z.&nbsp;B. die Karte einer Kundin/eines Kunden wird abgelehnt), gibt Stripe.js einen Fehler zurück. Lassen Sie diese Fehlermeldung Ihrer Kundin/Ihrem Kunden anzeigen, damit ein neuer Versuch unternommen werden kann.

### Endpoint erstellen, um eine Checkout-Sitzung abzurufen

Fügen Sie einen Endpoint hinzu, um den Status einer Checkout-Sitzung abzurufen.

### Rückgabeseite hinzufügen

Um Ihren Kundinnen und Kunden Bestellinformationen anzuzeigen, erstellen Sie eine Rückgabeseite für die URL, die Sie als `return_url` der Checkout-Sitzung angegeben haben. Stripe führt die Weiterleitung zu dieser Seite durch, nachdem der Kunde/die Kundin den Bezahlvorgang abgeschlossen hat.

### Rückgabekomponente hinzufügen

Um Ihren Kundinnen und Kunden Bestellinformationen anzuzeigen, fügen Sie eine neue Route und eine Rückgabekomponente für die URL hinzu, die Sie als `return_url` der Checkout-Sitzung angegeben haben. Stripe führt die Weiterleitung zu dieser Seite durch, nachdem der Kunde/die Kundin den Bezahlvorgang abgeschlossen hat.

### Eine Checkout-Sitzung abrufen

Sobald Ihre Rückgabeseite geladen ist, stellen Sie sofort eine Anfrage an den Endpoint auf Ihrem Server. Verwenden Sie die Checkout Session-ID in der URL, um den Status der Checkout-Sitzung abzurufen.

### Sitzung verarbeiten

Handhaben Sie das Ergebnis der Sitzung anhand des Status:

- `complete`: Die Zahlung war erfolgreich. Verwenden Sie die Informationen aus der Checkout-Sitzung, um eine Bestätigungsseite zu rendern.
- `open`: Die Zahlung ist fehlgeschlagen oder wurde storniert. Stellen Sie erneut eine Verbindung zu Checkout her, damit Ihre Kundinnen/Kunden es nochmals versuchen können.

### Anwendung ausführen

Starten Sie Ihren Server und gehen Sie zu <http://localhost:4242/checkout.html>.

### Anwendung ausführen

Starten Sie Ihren Server und gehen Sie zu <http://localhost:3000/checkout>.

### Serveranwendung ausführen

Starten Sie Ihren Server.

### Client-Anwendung ausführen

Starten Sie Ihre React-App und gehen Sie zu <http://localhost:3000/checkout>.

```bash
npm start
```

### Jetzt testen

Klicken Sie auf die Schaltfläche „Bezahlen“, um die Zahlung abzuschließen, die Sie auf die angegebene Rückgabeseite weiterleitet.

Wenn Sie die Rückgabeseite und die Zahlung in der Liste der [erfolgreichen Zahlungen](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful) im Dashboard sehen, funktioniert Ihre Integration erfolgreich. Verwenden Sie eine der folgenden Testkarten, um eine Zahlung zu simulieren:

| Scenario                            | Card Number      |
| ----------------------------------- | ---------------- |
| Payment succeeds                    | 4242424242424242 |
| Payment requires 3DS authentication | 4000002500003155 |
| Payment is declined                 | 4000000000009995 |

Weitere Informationen finden Sie unter [Testen](https://docs.stripe.com/testing.md).

## Herzlichen Glückwunsch!

Ihre grundlegende Checkout Integration funktioniert. Erfahren Sie nun, wie Sie das Erscheinungsbild Ihrer Checkout-Seite anpassen, den Steuereinzug automatisieren und Währungen lokal anpassen können.

### Checkout-Seite anpassen

Passen Sie Ihren Bezahlvorgang an, indem Sie [Checkout-Sitzungen](https://docs.stripe.com/api/checkout/sessions/create.md) verwenden, um zusätzliche Funktionen wie das Erfassen von Adressen und das Vorausfüllen von Kundendaten zu aktivieren.

### Kundendaten vorab angeben

Verwenden Sie [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), um die E-Mail-Adresse des Kunden/der Kundin vorab auszufüllen. Sie können auch eine [Kunden](https://docs.stripe.com/api/customers.md)-ID an das Feld „customer“ übergeben, um das Feld „email address“ mit der für den Kunden/die Kundin gespeicherten E-Mail vorab auszufüllen. In diesem Fall können Sie „updateEmail“ nicht verwenden. Deaktivieren oder entfernen Sie also die Frontend-E-Mail-Eingabe. Wenn Sie Kunden/Kundinnen mit Accounts v2 modellieren, können Sie auch eine Konto-ID an das Feld [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) übergeben, um die zugehörige E-Mail-Adresse vorab auszufüllen. Erfahren Sie mehr über den [Unterschied zwischen der Verwendung von v1 Customers und v2 Accounts](https://docs.stripe.com/connect/use-accounts-as-customers.md).

### Rechnungs- und Versanddetails anfordern

Verwenden Sie [billing_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) und [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection), um die Adresse Ihrer Kundin/Ihres Kunden anzufordern. [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) erfordert eine Liste von `allowed_countries`, die Checkout in einem Dropdown-Menü auf der Seite anzeigt.

### Angaben zur Abrechnung und zum Versand erfassen

Verwenden Sie das Address Element, um die Adresse Ihrer Kundin/Ihres Kunden zu erfassen.

### Steuereinzug automatisieren

Berechnen und erheben Sie den richtigen Steuerbetrag für Ihre Stripe-Transaktionen. Erfahren Sie mehr über [Stripe Tax](https://docs.stripe.com/tax.md) und [Stripe Tax zu Checkout hinzugefügt wird](https://docs.stripe.com/tax/checkout.md).

### Richten Sie Stripe Tax im Dashboard ein

[Aktivieren Sie Stripe Tax](https://dashboard.stripe.com/settings/tax/activate), um Ihre Steuerverpflichtungen zu überwachen, Steuern automatisch einzuziehen und auf die Berichte zuzugreifen, die Sie zum Einreichen von Steuererklärungen benötigen.

### Parameter für den automatischen Steuereinzug hinzufügen

Setzen Sie den Parameter `automatic_tax` auf `enabled: true`.

### Abrechnungdaten erfassen

Verwenden Sie das Address Element, um die Adresse Ihrer Kundin/Ihres Kunden zu erfassen.

### Währungen lokal anpassen

Mit Adaptive Pricing können Ihre Kundinnen und Kunden in mehr als 150&nbsp;Ländern in ihrer Landeswährung bezahlen.

### Adaptive Pricing aktivieren

[Aktivieren Sie Adaptive Pricing](https://dashboard.stripe.com/settings/adaptive-pricing) in Ihren Dashboard-Einstellungen.

### Preise lokalisieren und formatieren

Lokalisierte und formatierte Beträge aus dem [Sitzungsobjekt](https://docs.stripe.com/js/custom_checkout/session_object) anzeigen.

### Preise lokalisieren und formatieren

Zeigen Sie lokalisierte und formatierte Beträge über den Hook [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) an.

### Währungsauswahlelement rendern

Integrieren Sie das Währungs-Auswahlelement, um Ihren Kunden/Kundinnen eine Auswahl an Währungen zu geben und den Wechselkurs offenzulegen.

### Markieren Sie Ihre Integration als bereit für Adaptive Pricing

Legen Sie den Parameter `adaptivePricing.allowed` auf `true` fest.

// 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.
const stripe = require("stripe")("<<YOUR_SECRET_KEY>>");
const YOUR_DOMAIN = "http://localhost:4242";
const YOUR_DOMAIN = "http://localhost:3000";
  const session = await stripe.checkout.sessions.create({

    ui_mode: "elements",
    customer_email: "customer@example.com",
    billing_address_collection: "auto",
    shipping_address_collection: {
      allowed_countries: ["US", "CA"],
    },
    line_items: [
      {
        // Provide the exact Price ID (for example, price_1234) of the product you want to sell
        price: "{{PRICE_ID}}",
        quantity: 1,
      },
    ],
    line_items: [{
      price_data: {
        product_data: {
          name: "{{PRICE_DATA_NAME}}",
        },
        currency: "{{PRICE_DATA_CURRENCY}}",
        unit_amount: {{PRICE_DATA_UNIT_AMOUNT}},
      },
      quantity: 1,
    }],
    line_items: [{
      price_data: {
        product_data: {
          name: "{{PRICE_DATA_NAME}}",
        },
        currency: "{{PRICE_DATA_CURRENCY}}",
        unit_amount: {{PRICE_DATA_UNIT_AMOUNT}},
        recurring: {
          interval: "{{PRICE_DATA_INTERVAL}}",
          interval_count: {{PRICE_DATA_INTERVAL_COUNT}},
        },
      },
      quantity: 1,
    }],
    mode: {{CHECKOUT_MODE}},
    return_url: `${YOUR_DOMAIN}/complete?session_id={CHECKOUT_SESSION_ID}`,
    return_url: `${YOUR_DOMAIN}/complete.html?session_id={CHECKOUT_SESSION_ID}`,
    automatic_tax: {enabled: true},
  });

  res.send({ clientSecret: session.client_secret });
app.get("/session-status", async (req, res) => {
  const session = await stripe.checkout.sessions.retrieve(req.query.session_id, {expand: ["payment_intent"]});

   res.send({
    status: session.status,
    payment_status: session.payment_status,
    payment_intent_id: session.payment_intent.id,
    payment_intent_status: session.payment_intent.status
  });
});
{
  "name": "stripe-sample",
  "version": "1.0.0",
  "description": "A sample Stripe implementation",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "stripe-samples",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "stripe": "^21.0.1"
  }
}
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0",
    "stripe": "21.0.1"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
\# 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.
Stripe.api_key = '<<YOUR_SECRET_KEY>>'
Stripe.api_version = '2026-03-25.dahlia'
YOUR_DOMAIN = 'http://localhost:4242'
YOUR_DOMAIN = 'http://localhost:3000'
  session = Stripe::Checkout::Session.create({

    ui_mode: 'elements',
    customer_email: 'customer@example.com',
    billing_address_collection: 'required',
    shipping_address_collection: {
      allowed_countries: ['US', 'CA'],
    },
    line_items: [{
      \# Provide the exact Price ID (for example, price_1234) of the product you want to sell
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    line_items: [{
      price_data: {
        product_data: {
          name: '{{PRICE_DATA_NAME}}',
        },
        currency: '{{PRICE_DATA_CURRENCY}}',
        unit_amount: {{PRICE_DATA_UNIT_AMOUNT}},
      },
      quantity: 1,
    }],
    line_items: [{
      price_data: {
        product_data: {
          name: '{{PRICE_DATA_NAME}}',
        },
        currency: '{{PRICE_DATA_CURRENCY}}',
        unit_amount: {{PRICE_DATA_UNIT_AMOUNT}},
        recurring: {
          interval: '{{PRICE_DATA_INTERVAL}}',
          interval_count: {{PRICE_DATA_INTERVAL_COUNT}},
        },
      },
      quantity: 1,
    }],
    mode: {{CHECKOUT_MODE}},
    return_url: YOUR_DOMAIN + '/complete.html?session_id={CHECKOUT_SESSION_ID}',
    return_url: YOUR_DOMAIN + '/complete?session_id={CHECKOUT_SESSION_ID}',
    automatic_tax: {enabled: true},
  })

  { clientSecret: session.client_secret }.to_json
get '/session-status' do
  session = Stripe::Checkout::Session.retrieve({id: params[:session_id], expand: ["payment_intent"]})

  { status: session.status, payment_status: session.payment_status, payment_intent_id: session.payment_intent.id, payment_intent_status: session.payment_intent.status }.to_json
end
import stripe
\# 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.
stripe.api_key = '<<YOUR_SECRET_KEY>>'
stripe.api_version = '2026-03-25.dahlia'
YOUR_DOMAIN = 'http://localhost:4242'
YOUR_DOMAIN = 'http://localhost:3000'
        session = stripe.checkout.Session.create(

            ui_mode = 'elements',
            customer_email='customer@example.com',
            billing_address_collection='auto',
            shipping_address_collection={
              'allowed_countries': ['US', 'CA'],
            },
            line_items=[
                {
                    \# Provide the exact Price ID (for example, price_1234) of the product you want to sell
                    'price': '{{PRICE_ID}}',
                    'quantity': 1,
                },
            ],
            line_items=[
                {
                    'price_data': {
                      'product_data': {
                        'name': '{{PRICE_DATA_NAME}}',
                      },
                      'currency': '{{PRICE_DATA_CURRENCY}}',
                      'unit_amount': {{PRICE_DATA_UNIT_AMOUNT}},
                    },
                    'quantity': 1,
                },
            ],
            line_items=[
                {
                    'price_data': {
                      'product_data': {
                        'name': '{{PRICE_DATA_NAME}}',
                      },
                      'currency': '{{PRICE_DATA_CURRENCY}}',
                      'unit_amount': {{PRICE_DATA_UNIT_AMOUNT}},
                      'recurring': {
                        'interval': '{{PRICE_DATA_INTERVAL}}',
                        'interval_count': {{PRICE_DATA_INTERVAL_COUNT}},
                      },
                    },
                    'quantity': 1,
                },
            ],
            mode={{CHECKOUT_MODE}},
            return_url=YOUR_DOMAIN + '/complete.html?session_id={CHECKOUT_SESSION_ID}',
            return_url=YOUR_DOMAIN + '/complete?session_id={CHECKOUT_SESSION_ID}',
            automatic_tax={'enabled': True},
        )
    return jsonify(clientSecret=session.client_secret)
@app.route('/session-status', methods=['GET'])
def session_status():
  session = stripe.checkout.Session.retrieve(request.args.get('session_id'), expand=["payment_intent"])

  return jsonify(status=session.status, payment_status=session.payment_status, payment_intent_id=session.payment_intent.id, payment_intent_status=session.payment_intent.status)
certifi==2026.1.4
chardet==5.2.0
click==8.3.1
Flask==3.1.2
idna==3.11
itsdangerous==2.2.0
Jinja2==3.1.6
MarkupSafe==3.0.3
requests==2.32.5
stripe==15.0.0
toml==0.10.2
Werkzeug==3.1.5
$stripe = new \Stripe\StripeClient([
  "api_key" => $stripeSecretKey,
  "stripe_version" => "2026-03-25.dahlia"
]);
$YOUR_DOMAIN = 'http://localhost:4242';
$YOUR_DOMAIN = 'http://localhost:3000';

$checkout_session = $stripe->checkout->sessions->create([

  'ui_mode' => 'elements',
  'customer_email' => 'customer@example.com',
  'billing_address_collection' => 'required',
  'shipping_address_collection' => [
    'allowed_countries' => ['US', 'CA'],
  ],
  'line_items' => [[
    \# Provide the exact Price ID (for example, price_1234) of the product you want to sell
    'price' => '{{PRICE_ID}}',
    'quantity' => 1,
  ]],
  'line_items' => [[
      'price_data' => [
        'product_data' => [
          'name' => '{{PRICE_DATA_NAME}}',
        ],
        'currency' => '{{PRICE_DATA_CURRENCY}}',
        'unit_amount' => {{PRICE_DATA_UNIT_AMOUNT}},
      ],
    'quantity' => 1,
  ]],
  'line_items' => [[
      'price_data' => [
        'product_data' => [
          'name' => '{{PRICE_DATA_NAME}}',
        ],
        'currency' => '{{PRICE_DATA_CURRENCY}}',
        'unit_amount' => {{PRICE_DATA_UNIT_AMOUNT}},
        'recurring' => [
          'interval' => '{{PRICE_DATA_INTERVAL}}',
          'interval_count' => {{PRICE_DATA_INTERVAL_COUNT}},
        ],
      ],
    'quantity' => 1,
  ]],
  'mode' => {{CHECKOUT_MODE}},
  'return_url' => $YOUR_DOMAIN . '/complete.html?session_id={CHECKOUT_SESSION_ID}',
  'return_url' => $YOUR_DOMAIN . '/complete?session_id={CHECKOUT_SESSION_ID}',
  'automatic_tax' => [
    'enabled' => true,
  ],
]);

echo json_encode(array('clientSecret' => $checkout_session->client_secret));
try {
  // retrieve JSON from POST body
  $jsonStr = file_get_contents('php://input');
  $jsonObj = json_decode($jsonStr);

  $session = $stripe->checkout->sessions->retrieve($jsonObj->session_id, ['expand' => ['payment_intent']]);

  echo json_encode(['status' => $session->status, 'payment_status' => $session->payment_status, 'payment_intent_id' => $session->payment_intent->id, 'payment_intent_status' => $session->payment_intent->status]);
  http_response_code(200);
} catch (Error $e) {
  http_response_code(500);
  echo json_encode(['error' => $e->getMessage()]);
}
$stripeSecretKey = '<<YOUR_SECRET_KEY>>';
          // 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.
          services.AddSingleton(new StripeClient("<<YOUR_SECRET_KEY>>"));
            var domain = "http://localhost:4242";
            var domain = "http://localhost:3000";

                UiMode = "elements",
                CustomerEmail = "customer@example.com",
                BillingAddressCollection = "auto",
                ShippingAddressCollection = new SessionShippingAddressCollectionOptions
                {
                  AllowedCountries = new List<string>
                  {
                    "US",
                    "CA",
                  },
                },
                LineItems = new List<SessionLineItemOptions>
                {
                  new SessionLineItemOptions
                  {
                    // Provide the exact Price ID (for example, price_1234) of the product you want to sell
                    Price = "{{PRICE_ID}}",
                    Quantity = 1,
                  },
                },
                LineItems = new List<SessionLineItemOptions>
                {
                  new SessionLineItemOptions
                  {
                    PriceData = new SessionLineItemPriceDataOptions
                    {
                      ProductData = new SessionLineItemPriceDataProductDataOptions
                      {
                        Name = "{{PRICE_DATA_NAME}}",
                      },
                      Currency = "{{PRICE_DATA_CURRENCY}}",
                      UnitAmount = {{PRICE_DATA_UNIT_AMOUNT}},
                    },
                    Quantity = 1,
                  },
                },
                LineItems = new List<SessionLineItemOptions>
                {
                  new SessionLineItemOptions
                  {
                    PriceData = new SessionLineItemPriceDataOptions
                    {
                      ProductData = new SessionLineItemPriceDataProductDataOptions
                      {
                        Name = "{{PRICE_DATA_NAME}}",
                      },
                      Currency = "{{PRICE_DATA_CURRENCY}}",
                      UnitAmount = {{PRICE_DATA_UNIT_AMOUNT}},
                      Recurring = new SessionLineItemPriceDataRecurringOptions
                      {
                        Interval = "{{PRICE_DATA_INTERVAL}}",
                        IntervalCount = {{PRICE_DATA_INTERVAL_COUNT}},
                      },
                    },
                    Quantity = 1,
                  },
                },
                Mode = {{CHECKOUT_MODE}},
                ReturnUrl = domain + "/complete.html?session_id={CHECKOUT_SESSION_ID}",
                ReturnUrl = domain + "/complete?session_id={CHECKOUT_SESSION_ID}",
                AutomaticTax = new SessionAutomaticTaxOptions { Enabled = true },
            Session session = _client.V1.Checkout.Sessions.Create(options);

            return Json(new {clientSecret = session.ClientSecret});
    [Route("session-status")]
    [ApiController]
    public class SessionStatusController : Controller
    {
        private readonly StripeClient _client;

        public SessionStatusController(StripeClient client)
        {
            _client = client;
        }

        [HttpGet]
        public ActionResult SessionStatus([FromQuery] string session_id)
        {
            var options = new SessionGetOptions();
            options.AddExpand("payment_intent");
            Session session = _client.V1.Checkout.Sessions.Get(session_id, options);

            return Json(new {status = session.Status, payment_status = session.PaymentStatus, payment_intent_id = session.PaymentIntent.Id, payment_intent_status = session.PaymentIntent.Status});
        }
    }
    "github.com/stripe/stripe-go/v85"
  sc := stripe.NewClient("<<YOUR_SECRET_KEY>>")
  domain := "http://localhost:4242"
  domain := "http://localhost:3000"
  params := &stripe.CheckoutSessionCreateParams{

    UIMode: stripe.String("elements"),
    ReturnURL: stripe.String(domain + "/complete.html?session_id={CHECKOUT_SESSION_ID}"),
    ReturnURL: stripe.String(domain + "/complete?session_id={CHECKOUT_SESSION_ID}"),
    CustomerEmail: stripe.String("customer@example.com"),
    BillingAddressCollection: stripe.String("auto"),
    ShippingAddressCollection: &stripe.CheckoutSessionCreateShippingAddressCollectionParams{
      AllowedCountries: stripe.StringSlice([]string{
        "US",
        "CA",
      }),
    },
    LineItems: []*stripe.CheckoutSessionCreateLineItemParams{
      {
        // Provide the exact Price ID (for example, price_1234) of the product you want to sell
        Price: stripe.String("{{PRICE_ID}}"),
        Quantity: stripe.Int64(1),
      },
    },
    LineItems: []*stripe.CheckoutSessionCreateLineItemParams{
      {
        PriceData: &stripe.CheckoutSessionCreateLineItemPriceDataParams{
          ProductData: &stripe.CheckoutSessionCreateLineItemPriceDataProductDataParams{
            Name: stripe.String("{{PRICE_DATA_NAME}}"),
          },
          Currency: stripe.String("{{PRICE_DATA_CURRENCY}}"),
          UnitAmount: stripe.Int64({{PRICE_DATA_UNIT_AMOUNT}}),
        },
        Quantity: stripe.Int64(1),
      },
    },
    LineItems: []*stripe.CheckoutSessionCreateLineItemParams{
      {
        PriceData: &stripe.CheckoutSessionCreateLineItemPriceDataParams{
          ProductData: &stripe.CheckoutSessionCreateLineItemPriceDataProductDataParams{
            Name: stripe.String("{{PRICE_DATA_NAME}}"),
          },
          Currency: stripe.String("{{PRICE_DATA_CURRENCY}}"),
          UnitAmount: stripe.Int64({{PRICE_DATA_UNIT_AMOUNT}}),
          Recurring: &stripe.CheckoutSessionCreateLineItemPriceDataRecurringParams{
            Interval: stripe.String("{{PRICE_DATA_INTERVAL}}"),
            IntervalCount: stripe.Int64({{PRICE_DATA_INTERVAL_COUNT}}),
          },
        },
        Quantity: stripe.Int64(1),
      },
    },
    Mode: {{CHECKOUT_MODE}},
    AutomaticTax: &stripe.CheckoutSessionCreateAutomaticTaxParams{Enabled: stripe.Bool(true)},
  }

  s, err := sc.V1CheckoutSessions.Create(context.TODO(), params)

  if err != nil {
    log.Printf("sc.V1CheckoutSessions.Create: %v", err)
  }

  writeJSON(w, struct {
    ClientSecret string `json:"clientSecret"`
  }{
    ClientSecret: s.ClientSecret,
  })
func retrieveCheckoutSession(sc *stripe.Client, w http.ResponseWriter, r *http.Request) {
  params := &stripe.CheckoutSessionRetrieveParams{}
  params.AddExpand("payment_intent")
  s, _ := sc.V1CheckoutSessions.Retrieve(context.TODO(), r.URL.Query().Get("session_id"), params)

  writeJSON(w, struct {
    Status string `json:"status"`
    PaymentStatus string `json:"payment_status"`
    PaymentIntentId string `json:"payment_intent_id"`
    PaymentIntentStatus string `json:"payment_intent_status"`
  }{
    Status: string(s.Status),
    PaymentStatus: string(s.PaymentStatus),
    PaymentIntentId: string(s.PaymentIntent.ID),
    PaymentIntentStatus: string(s.PaymentIntent.Status),
  })
}
require github.com/stripe/stripe-go/v85 v85.0.0
    // 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.
    Stripe.apiKey = "<<YOUR_SECRET_KEY>>";
        String YOUR_DOMAIN = "http://localhost:4242";
        String YOUR_DOMAIN = "http://localhost:3000";
        SessionCreateParams params =
          SessionCreateParams.builder()

            .setUiMode(SessionCreateParams.UiMode.ELEMENTS)
            .setCustomerEmail("customer@example.com")
            .setBillingAddressCollection(SessionCreateParams.BillingAddressCollection.REQUIRED)
            .setShippingAddressCollection(
              SessionCreateParams.ShippingAddressCollection.builder()
                .addAllowedCountry(SessionCreateParams.ShippingAddressCollection.AllowedCountry.CA)
                .addAllowedCountry(SessionCreateParams.ShippingAddressCollection.AllowedCountry.US)
                .build())
            .setMode({{CHECKOUT_MODE}})
            .setReturnUrl(YOUR_DOMAIN + "/complete?session_id={CHECKOUT_SESSION_ID}")
            .setReturnUrl(YOUR_DOMAIN + "/complete.html?session_id={CHECKOUT_SESSION_ID}")
            .setAutomaticTax(
              SessionCreateParams.AutomaticTax.builder()
                .setEnabled(true)
                .build())
            .addLineItem(
              SessionCreateParams.LineItem.builder()
                .setQuantity(1L)
                // Provide the exact Price ID (for example, price_1234) of the product you want to sell
                .setPrice("{{PRICE_ID}}")
                .build())
            .addLineItem(
              SessionCreateParams.LineItem.builder()
                .setQuantity(1L)
                .setPriceData(
                  SessionCreateParams.LineItem.PriceData.builder()
                  .setProductData(
                    SessionCreateParams.LineItem.PriceData.ProductData.builder()
                    .setName("{{PRICE_DATA_NAME}}")
                    .build())
                  .setCurrency("{{PRICE_DATA_CURRENCY}}")
                  .setUnitAmount({{PRICE_DATA_UNIT_AMOUNT}}L)
                  .build())
                .build())
            .addLineItem(
              SessionCreateParams.LineItem.builder()
                .setQuantity(1L)
                .setPriceData(
                  SessionCreateParams.LineItem.PriceData.builder()
                  .setProductData(
                    SessionCreateParams.LineItem.PriceData.ProductData.builder()
                    .setName("{{PRICE_DATA_NAME}}")
                    .build())
                  .setCurrency("{{PRICE_DATA_CURRENCY}}")
                  .setUnitAmount({{PRICE_DATA_UNIT_AMOUNT}}L)
                  .setRecurring(
                    SessionCreateParams.LineItem.PriceData.Recurring.builder()
                    .setInterval(SessionCreateParams.LineItem.PriceData.Recurring.Interval.{{PRICE_DATA_INTERVAL}})
                    .setIntervalCount({{PRICE_DATA_INTERVAL_COUNT}}L)
                    .build())
                  .build())
                .build())
            .build();
      Map<String, String> map = new HashMap();
      map.put("clientSecret", session.getRawJsonObject().getAsJsonPrimitive("client_secret").getAsString());


      return map;
    get("/session-status", (request, response) -> {
      RequestOptions options = RequestOptions.builder().build();
      SessionRetrieveParams params =
        SessionRetrieveParams.builder().addExpand("payment_intent").build();
      Session session = Session.retrieve(request.queryParams("session_id"), params, options);

      Map<String, String> map = new HashMap();
      map.put("status", session.getRawJsonObject().getAsJsonPrimitive("status").getAsString());
      map.put("payment_status", session.getRawJsonObject().getAsJsonPrimitive("payment_status").getAsString());
      map.put("payment_intent_id", session.getRawJsonObject().getAsJsonObject("payment_intent").getAsJsonPrimitive("id").getAsString());
      map.put("payment_intent_status", session.getRawJsonObject().getAsJsonObject("payment_intent").getAsJsonPrimitive("status").getAsString());

      return map;
    }, gson::toJson);
    <script src="https://js.stripe.com/dahlia/stripe.js"></script>
    <form id="payment-form">
      <label>
        Email
        <input type="email" id="email"
      /></label>
      <div id="email-errors"></div>
      <h4>Billing Address</h4>
      <div id="billing-address-element">
        <!--Stripe.js injects the Address Element-->
      </div>
      <h4>Billing Address</h4>
      <div id="billing-address-element">
        <!--Stripe.js injects the Address Element-->
      </div>
      <h4>Shipping Address</h4>
      <div id="shipping-address-element">
        <!--Stripe.js injects the Address Element-->
      </div>
      <h4>Payment</h4>
      <div id="currency-selector-element">
        <!--Stripe.js injects the Currency Selector Element-->
      </div>
      <div id="payment-element">
        <!--Stripe.js injects the Payment Element-->
      </div>
      <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Pay now</span>
      </button>
      <div id="payment-message" class="hidden"></div>
    </form>
const stripe = Stripe("<<YOUR_PUBLISHABLE_KEY>>");
const emailInput = document.getElementById("email");
const emailErrors = document.getElementById("email-errors");

const validateEmail = async (email) => {
  const updateResult = await actions.updateEmail(email);
  const isValid = updateResult.type !== "error";

  return { isValid, message: !isValid ? updateResult.error.message : null };
};
  const promise = fetch("/create-checkout-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
  })
    .then((r) => r.json())
    .then((r) => r.clientSecret);
  const promise = fetch('/create.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
  })
    .then((r) => r.json())
    .then((r) => r.clientSecret);
  const appearance = {
    {{APPEARANCE}}
  };

  checkout = stripe.initCheckoutElementsSdk({
    clientSecret: promise,
    elementsOptions: { appearance },
    adaptivePricing: { allowed: true },
  });
  checkout.on('change', (session) => {
    // Handle changes to the checkout session
    document.getElementById('submit').disabled = !session.canConfirm;
    document.querySelector("#button-text").textContent = `Pay ${
      session.total.total.amount
    } now`;
  });
  emailInput.addEventListener("input", () => {
    // Clear any validation errors
    emailErrors.textContent = "";
    emailInput.classList.remove("error");
  });

  emailInput.addEventListener("blur", async () => {
    const newEmail = emailInput.value;
    if (!newEmail) {
      return;
    }

    const { isValid, message } = await validateEmail(newEmail);
    if (!isValid) {
      emailInput.classList.add("error");
      emailErrors.textContent = message;
    }
  });
  const paymentElement = checkout.createPaymentElement();
  paymentElement.mount("#payment-element");
  const billingAddressElement = checkout.createBillingAddressElement();
  billingAddressElement.mount("#billing-address-element");
  const billingAddressElement = checkout.createBillingAddressElement();
  billingAddressElement.mount("#billing-address-element");
  const shippingAddressElement = checkout.createShippingAddressElement();
  shippingAddressElement.mount("#shipping-address-element");
  const currencySelectorElement = checkout.createCurrencySelectorElement();
  currencySelectorElement.mount("#currency-selector-element");
async function handleSubmit(e) {
  e.preventDefault();
  setLoading(true);

  const email = document.getElementById("email").value;
  const { isValid, message } = await validateEmail(email);
  if (!isValid) {
    emailInput.classList.add("error");
    emailErrors.textContent = message;
    showMessage(message);
    setLoading(false);
    return;
  }

  const { error } = await actions.confirm();

  // This point will only be reached if there is an immediate error when
  // confirming the payment. Otherwise, your customer will be redirected to
  // your `return_url`. For some payment methods like iDEAL, your customer will
  // be redirected to an intermediate site first to authorize the payment, then
  // redirected to the `return_url`.
  showMessage(error.message);

  setLoading(false);
}
    <script src="https://js.stripe.com/dahlia/stripe.js"></script>
    <script src="complete.js" defer></script>
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const sessionId = urlParams.get("session_id");
  if (!sessionId) {
    console.log("No session ID found");
    setErrorState();
    return;
  }
  const response = await fetch(`/session-status?session_id=${sessionId}`);
  const response = await fetch("/status.php", {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    method: "POST",
    body: JSON.stringify({ session_id: sessionId }),
  });
  const session = await response.json();
  setSessionDetails(session);
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/react-stripe-js": "^6.0.0",
    "@stripe/stripe-js": "^9.0.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "react-router-dom": "^6.16.0",
    "stripe": "^8.202.0"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@stripe/react-stripe-js": "^6.0.0",
    "@stripe/stripe-js": "^9.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "react-router-dom": "^6.16.0"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://127.0.0.1:4242",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
import React, { useMemo } from "react";
import {loadStripe} from '@stripe/stripe-js';

import {
  CheckoutElementsProvider
} from '@stripe/react-stripe-js/checkout';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
// This is a public sample test API key.
// Don’t submit any personally identifiable information in requests made with this key.
// Sign in to see your own test publishable API key embedded in code samples.
const stripePromise = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
  const clientSecret = useMemo(() => {
    return fetch('/create-checkout-session', {
      method: 'POST',
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);
  const clientSecret = useMemo(() => {
    return fetch('/create.php', {
      method: 'POST',
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);
  const appearance = {
    {{APPEARANCE}}
  };

        <CheckoutElementsProvider
          stripe={stripePromise}
          options={{
            clientSecret,
            elementsOptions: {appearance},
            adaptivePricing: { allowed: true },
          }}
        >
          <Routes>
            <Route path="/checkout" element={<CheckoutForm />} />
            <Route path="/complete" element={<Complete />} />
          </Routes>
        </CheckoutElementsProvider>
  BillingAddressElement,
  BillingAddressElement,
  ShippingAddressElement,
  CurrencySelectorElement,

const validateEmail = async (email, checkout) => {
  const updateResult = await checkout.updateEmail(email);
  const isValid = updateResult.type !== "error";

  return { isValid, message: !isValid ? updateResult.error.message : null };
}

const EmailInput = ({ checkout, email, setEmail, error, setError }) => {
  const handleBlur = async () => {
    if (!email) {
      return;
    }

    const { isValid, message } = await validateEmail(email, checkout);
    if (!isValid) {
      setError(message);
    }
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };

  return (
    <>
      <label>
        Email
        <input
          id="email"
          type="text"
          value={email}
          onChange={handleChange}
          onBlur={handleBlur}
          className={error ? "error" : ""}
        />
      </label>
      {error && <div id="email-errors">{error}</div>}
    </>
  );
};
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState(null);
  const [message, setMessage] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const checkoutState = useCheckout();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }
  const handleSubmit = async (e) => {
    e.preventDefault();

    const {checkout} = checkoutState;
    setIsSubmitting(true);

    const { isValid, message } = await validateEmail(email, checkout);
    if (!isValid) {
      setEmailError(message);
      setMessage(message);
      setIsSubmitting(false);
      return;
    }

    const confirmResult = await checkout.confirm();

    // This point will only be reached if there is an immediate error when
    // confirming the payment. Otherwise, your customer will be redirected to
    // your `return_url`. For some payment methods like iDEAL, your customer will
    // be redirected to an intermediate site first to authorize the payment, then
    // redirected to the `return_url`.
    if (confirmResult.type === 'error') {
      setMessage(confirmResult.error.message);
    }

    setIsSubmitting(false);
  };
      <EmailInput
        checkout={checkoutState.checkout}
        email={email}
        setEmail={setEmail}
        error={emailError}
        setError={setEmailError}
      />
      <h4>Billing Address</h4>
      <BillingAddressElement/>
      <h4>Billing Address</h4>
      <BillingAddressElement/>
      <h4>Shipping Address</h4>
      <ShippingAddressElement/>
      <CurrencySelectorElement/>
      <PaymentElement id="payment-element" />
          `Pay ${checkoutState.checkout.total.total.amount} now`
  const [status, setStatus] = useState(null);
  const [paymentIntentId, setPaymentIntentId] = useState('');
  const [paymentStatus, setPaymentStatus] = useState('');
  const [paymentIntentStatus, setPaymentIntentStatus] = useState('');
  const [iconColor, setIconColor] = useState('');
  const [icon, setIcon] = useState('');
  const [text, setText] = useState('');

  useEffect(() => {
    const SuccessIcon =
      <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fillRule="evenodd" clipRule="evenodd" d="M15.4695 0.232963C15.8241 0.561287 15.8454 1.1149 15.5171 1.46949L6.14206 11.5945C5.97228 11.7778 5.73221 11.8799 5.48237 11.8748C5.23253 11.8698 4.99677 11.7582 4.83452 11.5681L0.459523 6.44311C0.145767 6.07557 0.18937 5.52327 0.556912 5.20951C0.924454 4.89575 1.47676 4.93936 1.79051 5.3069L5.52658 9.68343L14.233 0.280522C14.5613 -0.0740672 15.1149 -0.0953599 15.4695 0.232963Z" fill="white"/>
      </svg>;
    const ErrorIcon =
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fillRule="evenodd" clipRule="evenodd" d="M1.25628 1.25628C1.59799 0.914573 2.15201 0.914573 2.49372 1.25628L8 6.76256L13.5063 1.25628C13.848 0.914573 14.402 0.914573 14.7437 1.25628C15.0854 1.59799 15.0854 2.15201 14.7437 2.49372L9.23744 8L14.7437 13.5063C15.0854 13.848 15.0854 14.402 14.7437 14.7437C14.402 15.0854 13.848 15.0854 13.5063 14.7437L8 9.23744L2.49372 14.7437C2.15201 15.0854 1.59799 15.0854 1.25628 14.7437C0.914573 14.402 0.914573 13.848 1.25628 13.5063L6.76256 8L1.25628 2.49372C0.914573 2.15201 0.914573 1.59799 1.25628 1.25628Z" fill="white"/>
      </svg>;

    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const sessionId = urlParams.get('session_id');

    fetch("/status.php", {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
      body: JSON.stringify({ session_id: sessionId }),
    })
    fetch(`/session-status?session_id=${sessionId}`)
      .then((res) => res.json())
      .then((data) => {
        setStatus(data.status);
        setPaymentIntentId(data.payment_intent_id);
        setPaymentStatus(data.payment_status);
        setPaymentIntentStatus(data.payment_intent_status);

        if (data.status === 'complete') {
          setIconColor('#30B130');
          setIcon(SuccessIcon);
          setText('Payment succeeded');
        } else {
          setIconColor('#DF1B41');
          setIcon(ErrorIcon);
          setText('Something went wrong, please try again.');
        }
      });
  }, []);

    return (
      <div id="payment-status">
        <div id="status-icon" style={{backgroundColor: iconColor}}>
        {icon}
      </div>
      <h2 id="status-text">{text}</h2>
      <div id="details-table">
        <table>
          <tbody>
            <tr>
              <td className="TableLabel">Payment Intent ID</td>
              <td id="intent-id" className="TableContent">{paymentIntentId}</td>
            </tr>
            <tr>
              <td className="TableLabel">Status</td>
              <td id="intent-status" className="TableContent">{status}</td>
            </tr>
            <tr>
              <td className="TableLabel">Payment Status</td>
              <td id="session-status" className="TableContent">{paymentStatus}</td>
            </tr>
            <tr>
              <td className="TableLabel">Payment Intent Status</td>
              <td id="payment-intent-status" className="TableContent">{paymentIntentStatus}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <a href={`https://dashboard.stripe.com/payments/${paymentIntentId}`} id="view-details" rel="noopener noreferrer" target="_blank">View details 
        <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M3.125 3.49998C2.64175 3.49998 2.25 3.89173 2.25 4.37498V11.375C2.25 11.8582 2.64175 12.25 3.125 12.25H10.125C10.6082 12.25 11 11.8582 11 11.375V9.62498C11 9.14173 11.3918 8.74998 11.875 8.74998C12.3582 8.74998 12.75 9.14173 12.75 9.62498V11.375C12.75 12.8247 11.5747 14 10.125 14H3.125C1.67525 14 0.5 12.8247 0.5 11.375V4.37498C0.5 2.92524 1.67525 1.74998 3.125 1.74998H4.875C5.35825 1.74998 5.75 2.14173 5.75 2.62498C5.75 3.10823 5.35825 3.49998 4.875 3.49998H3.125Z" fill="#0055DE"/>            <path d="M8.66672 0C8.18347 0 7.79172 0.391751 7.79172 0.875C7.79172 1.35825 8.18347 1.75 8.66672 1.75H11.5126L4.83967 8.42295C4.49796 8.76466 4.49796 9.31868 4.83967 9.66039C5.18138 10.0021 5.7354 10.0021 6.07711 9.66039L12.7501 2.98744V5.83333C12.7501 6.31658 13.1418 6.70833 13.6251 6.70833C14.1083 6.70833 14.5001 6.31658 14.5001 5.83333V0.875C14.5001 0.391751 14.1083 0 13.6251 0H8.66672Z" fill="#0055DE"/></svg>
      </a>
      <a id="retry-button" href="/checkout">Test another payment</a>
  </div>
    )
\## Set Price ID

In the back end code, replace `{{PRICE_ID}}` with a Price ID (`price_xxx`) that you created.

1. Build the server

~~~
pip3 install -r requirements.txt
~~~
1. Build the server

~~~
bundle install
~~~
1. Build the server

~~~
composer install
~~~
1. Build the server

~~~
dotnet restore
~~~
1. Build the server

~~~
mvn package
~~~

2. Run the server

~~~
export FLASK_APP=server.py
python3 -m flask run --port=4242
~~~

2. Run the server

~~~
ruby server.rb -o 0.0.0.0
~~~

2. Run the server

~~~
php -S 127.0.0.1:4242 --docroot=public
~~~

2. Run the server

~~~
dotnet run
~~~

2. Run the server

~~~
java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server
~~~

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)
1. Run the server

~~~
go run server.go
~~~

2. Build the client app

~~~
npm install
~~~

3. Run the client app

~~~
npm start
~~~

4. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)
1. Run the server

~~~
go run server.go
~~~

2. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)
1. Build the application

~~~
npm install
~~~

2. Run the application

~~~
npm start
~~~

3. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)
1. Build the server

~~~
npm install
~~~

2. Run the server

~~~
npm start
~~~

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)
\### Development

1. Build the application
~~~shell
$ npm install
~~~

2. _Optional_: download and run the [Stripe CLI](https://stripe.com/docs/stripe-cli)
~~~shell
$ stripe listen --forward-to localhost:3000/api/webhooks
~~~

3. Run the application
~~~shell
$ STRIPE_WEBHOOK_SECRET=$(stripe listen --print-secret) npm run dev
~~~

4. Go to [localhost:3000](http://localhost:3000)

### Production

1. Build the application
~~~shell
$ npm install

$ npm build
~~~

2. Run the application
~~~shell
$ npm start
~~~
## Nächste Schritte

#### [Einzelposten dynamisch aktualisieren](https://docs.stripe.com/payments/checkout/dynamically-update-line-items.md)

Erfahren Sie, wie Sie Einzelposten in Ihrer Checkout-Sitzung dynamisch ändern, wenn Nutzer/innen Produkte hinzufügen, entfernen oder ändern.

#### [Bestellungen ausführen](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components)

Richten Sie einen Webhook ein, um Bestellungen nach erfolgreicher Zahlung auszuführen. Webhooks sind der zuverlässigste Weg, geschäftskritische Ereignisse zu verarbeiten.

#### [Auszahlungen empfangen](https://docs.stripe.com/payouts.md)

Erfahren Sie, wie Sie Gelder von Ihrem Stripe-Konto auf Ihr Bankkonto überweisen können.

#### [Zahlungen zurückerstatten und stornieren](https://docs.stripe.com/refunds.md)

Bearbeiten Sie Rückerstattungsanfragen über die Stripe-API oder das Dashboard.

#### [Kundenverwaltung](https://docs.stripe.com/customer-management.md)

Lassen Sie Ihre Kundinnen und Kunden ihre Zahlungsdaten, Rechnungen und Abonnements selbst verwalten.

#### [Schaltflächen für die Zahlung mit einem Klick](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components#create-and-mount)

Verwenden Sie das Express Checkout Element, um Zahlungen über Schaltflächen für Ein-Klick-Zahlungen zu akzeptieren.