# Integrierbare Preistabelle für Abonnements

Zeigen Sie eine Preistabelle für Abonnements auf Ihrer Website an und leiten Sie Kundinnen und Kunden direkt zu Stripe Checkout weiter.

Wenn Ihre Integration [kundenseitig konfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) verwendet, ersetzen Sie in den Codebeispielen Verweise auf `Customer` und Ereignisse durch die entsprechenden Verweise auf die Accounts v2 API. Weitere Informationen finden Sie unter [Kundinnen und Kunden mit Kontoobjekten darstellen](https://docs.stripe.com/connect/use-accounts-as-customers.md).

Sie können das Stripe-Dashboard verwenden, um für folgende Zwecke eine einbettbare Preistabelle zu erstellen:

- Zeigt *Preisinformationen* (The pricing model consists of the products or services you sell, how much they cost, what currency you accept for payments, and the service period to charge (for subscriptions). To build the pricing model, you use Products—what you sell—and Prices—how much and how often to charge for your products) an und leitet Kundinnen und Kunden zu einem vordefinierten Bezahlvorgang weiter. Der Bezahlvorgang verwendet [Stripe Checkout](https://docs.stripe.com/payments/checkout.md), um den Kauf abzuschließen.
- Unterstützen Sie gängige Abo-Geschäftsmodelle wie [Pauschaltarife](https://docs.stripe.com/products-prices/pricing-models.md#flat-rate), [pro Nutzer/in](https://docs.stripe.com/products-prices/pricing-models.md#per-seat), [gestaffelte Preisgestaltung](https://docs.stripe.com/products-prices/pricing-models.md#tiered-pricing) und kostenlose Testzeiträume.
- Erledigen Sie das Konfigurieren, Anpassen und Aktualisieren von Produkt- und Preisinformationen direkt im Dashboard, ohne Code schreiben zu müssen.
- Einbettung in Ihre Website mit einem `<script>`-Tag und einer Webkomponente. Stripe generiert das Tag automatisch. Sie kopieren und fügen es in den Code Ihrer Website ein.

Im folgenden Diagramm ist zusammengefasst, wie Kund/innen von der Anzeige einer Preistabelle zum Abschluss des Bezahlvorgangs gelangen.
Preistabelle (See full diagram at https://docs.stripe.com/payments/checkout/pricing-table)
## Preistabelle erstellen

1. Rufen Sie im Dashboard **Produktkatalog** > [Preistabellen](https://dashboard.stripe.com/pricing-tables) auf.
1. Klicken Sie auf **+Preistabelle erstellen**.
1. Fügen Sie Produkte hinzu, die für Ihre Kundinnen und Kunden relevant sind (bis zu vier pro Preisintervall). Optional können Sie einen kostenlosen Testzeitraum hinzufügen.
1. Passen Sie das Erscheinungsbild in den **Anzeigeeinstellungen** an. Heben Sie ein bestimmtes Produkt hervor und passen Sie Sprache, Farben, Schriftart und Schaltflächendesign an und klicken Sie dann auf **Weiter**.
1. Konfigurieren Sie die** Zahlungseinstellungen**, um auszuwählen, welche Kundeninformationen erfasst werden sollen, welche Optionen dem Kunden/der Kundin angezeigt werden sollen und ob nach einem erfolgreichen Kauf eine Bestätigungsseite angezeigt oder eine Kundin/ein Kunde auf Ihre Website zurückgeleitet werden sollen.
   > #### Höchstmenge bestätigen
   > 
   > Wenn Sie über eine gestaffelte Preisgestaltung verfügen, die Mengen unterstützt, die größer als das Standardmaximum von 99 sind, aktivieren Sie die Eigenschaft **Kundinnen und Kunden die Menge anpassen lassen** und erhöhen Sie den **Höchstwert** entsprechend. Gestaffelte Preisoptionen für Mengen über dem Maximalwert werden in der Auswahl nicht angezeigt.
1. Konfigurieren Sie das [Kundenportal](https://docs.stripe.com/no-code/customer-portal.md), indem Sie auf **Weiter** klicken.
1. Klicken Sie auf **Code kopieren**, um den generierten Code zu kopieren und in Ihre Website einzubetten.

## Preistabelle einbetten

Wenn Sie eine Preistabelle erstellt haben, gibt Stripe automatisch einen Einbettungscode zurück, der aus einem `<script>`-Tag und einer `<stripe-pricing-table>`-Webkomponente besteht. Klicken Sie auf die Schaltfläche **Code kopieren**, um den Code zu kopieren und auf Ihrer Website einzufügen.

Wenn Sie HTML verwenden, fügen Sie den Einbettungscode in den HTML-Code ein. Wenn Sie React verwenden, fügen Sie das `script`-Tag in Ihre `index.html`-Seite ein, um die `<stripe-pricing-table>`-Komponente zu verbinden.

> Die Preistabelle verwendet den [veröffentlichbaren API-Schlüssel](https://docs.stripe.com/keys.md) Ihres Kontos. Wenn Sie den API Key widerrufen, müssen Sie den Einbettungscode mit Ihrem neuen veröffentlichbaren API-Schlüssel aktualisieren.

#### HTML

```html
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id="{{PRICING_TABLE_ID}}"
    publishable-key="<<YOUR_PUBLISHABLE_KEY>>"
  >
  </stripe-pricing-table>
</body>
```

## Preistabelle anpassen

Optional können Sie Ihre Preistabelle anpassen.

### Produktmarketingfunktionen hinzufügen (Optional)

In der Preistabelle können die Marketingfunktionen Ihrer Produkte angezeigt werden, um Ihren Kundinnen und Kunden die Kaufentscheidung zu erleichtern. Um Marketingfunktionen zu einem Produkt in Ihrer Preistabelle hinzuzufügen, gehen Sie zu **Zusätzliche Optionen** > **Funktionsliste**.

Sie können auch Marketingfunktionen hinzufügen, wenn Sie Produkte mit der API erstellen oder aktualisieren.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d name=Professional \
  -d "marketing_features[0][name]=Unlimited boards" \
  -d "marketing_features[1][name]=Up to 20 seats"
```

### Individuelle Handlungsaufforderung hinzufügen (Optional)

In der Preistabelle können Sie ein Produkt mit einer individuellen Handlungsaufforderung konfigurieren, die zu einer beliebigen URL weiterleitet. Das können Sie verwenden, wenn Sie für eines Ihrer Produkte mit individueller Preisgestaltung oder einem High-Touch-Vertriebsprozess arbeiten. Sie können nur für ein Produkt eine Schaltfläche mit individueller Handlungsaufforderung festlegen.

Klicken Sie auf **Produkt mit individueller Schaltfläche für Handlungsaufforderung hinzufügen**, um ein Produkt und eine individuelle Handlungsaufforderung auszuwählen und die richtige URL festzulegen.

Nutzerdefinierte Aktionsaufrufe unterstützen die folgenden Formate:

- Absolute Links, wie `https://wwww.stripe.com`.
- Relative Links wie `/contact`. Wenn Sie Ihre Preistabelle in `wwww.stripe.com/pricing-table` einbetten, navigiert eine URL von `/contact` zu `wwww.stripe.com/pricing-table/contact`.
- Kontaktspezifische Links, die `mailto` und `tel` verwenden. Sie können die URL z.&nbsp;B. so konfigurieren, dass sie `mailto:email@yourcompany.com` oder `tel:xxx-xxx-xxx` ist.
- Links, die zwei Variablen enthalten, `{PRODUCT_ID}` und `{CUSTOMER_EMAIL}`. Stripe füllt die relevante Produkt-ID und die Kunden-E-Mail-Adresse aus, wenn eine Kundin oder ein Kunde auf die Handlungsaufforderung klickt. Damit der Parameter `{CUSTOMER_EMAIL}` funktioniert, müssen Sie die E-Mail-Adresse der Kundin bzw. des Kunden übergeben.

### Benutzerdefinierte Felder hinzufügen (Optional)

Sie können für alle Ihre Produkte und Preise in Ihrer Preistabelle benutzerdefinierte Felder hinzufügen, um zusätzliche Informationen von Ihrer Kundschaft zu erfassen. Die Informationen sind nach Abschluss der Zahlung hilfreich beim Abwickeln des Kaufs.

> Verwenden Sie keine nutzerdefinierten Felder, um persönliche, geschützte oder sensible Daten oder Informationen zu erfassen, die gesetzlich eingeschränkt sind.

Sie können die folgenden Arten von Feldern hinzufügen:

| Typ         | Beschreibung                                                                                           |
| ----------- | ------------------------------------------------------------------------------------------------------ |
| Text        | Zum Erfassen von Freiformtext mit bis zu 255 Zeichen.                                                  |
| Nur Ziffern | Wird verwendet, um nur numerische Werte mit bis zu 255 Stellen zu erfassen.                            |
| Dropdown    | Bietet Ihren Kund/innen eine Liste von Optionen zur Auswahl. Sie können bis zu 10 Optionen hinzufügen. |

1. Klicken Sie im Abschnitt **Zahlungseinstellungen** auf N**utzerdefinierte Felder hinzufügen**.
1. Wählen Sie einen Feldtyp zum Hinzufügen aus.
1. Geben Sie eine Bezeichnung für das Feld ein.
1. (Optional) Aktivieren Sie das gewünschte Feld.

Nachdem Ihr/e Kund/in die Zahlung abgeschlossen hat, können Sie die Felder auf der Seite mit den Zahlungsdetails im Dashboard anzeigen.

Die nutzerdefinierten Felder werden auch im [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) -Ereignis nach Abschluss der Zahlung gesendet. Registrieren Sie ein [Ereignisziel](https://docs.stripe.com/event-destinations.md), um das Ereignis an Ihrem Endpoint zu empfangen.

### Lokale Währungen anzeigen (Optional)

Zeigen Sie Preise in Ihrer Preistabelle oder Ihrem Bezahlvorgang automatisch in der lokalen Währung Ihrer Kund/innen an, indem Sie [Preise in mehreren Währungen](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) konfigurieren. Verwenden Sie das Attribut [Kunden-E-Mail](https://docs.stripe.com/payments/checkout/pricing-table.md#customer-email), um zu testen, wie Ihre Preistabelle und Zahlungsseite Kund/innen in verschiedenen Ländern angezeigt werden.

Legen Sie in der `stripe-pricing-table` die Eigenschaft [customer_email](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-customer_email) fest und fügen Sie ein Suffix des Formulars `+location_XX` in den lokalen Teil der E-Mail ein. `XX` muss ein gültiger [aus zwei Buchstaben bestehender ISO-Ländercode](https://www.nationsonline.org/oneworld/country_code_list.htm) sein.

#### HTML

```html
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id="{{PRICING_TABLE_ID}}"
    publishable-key="<<YOUR_PUBLISHABLE_KEY>>"customer-email="test+location_FR@email.com"
  >
  </stripe-pricing-table>
</body>
```

Wenn Sie die Preistabelle anzeigen, entspricht die Währung der Standardwährung des Landes, das Sie in `customer_email` angeben (in diesem Fall Frankreich).

### Nutzererfahrung nach der Kaufabwicklung anpassen (Optional)

Nach erfolgreicher Zahlung erhalten Ihre Kundinnen und Kunden eine lokalisierte Bestätigungsmeldung, in der ihnen für ihren Kauf gedankt wird. Sie können die Bestätigungsnachricht anpassen oder eine Weiterleitung zu einer URL Ihrer Wahl einrichten. Um das Bestätigungsverhalten für eine Preistabelle zu ändern, klicken Sie beim Erstellen oder Aktualisieren der Preistabelle auf den Abschnitt **Bestätigungsseite**.

Wenn Sie Ihre Kundinnen und Kunden auf Ihre eigene Bestätigungsseite weiterleiten, können Sie `{CHECKOUT_SESSION_ID}` in die Weiterleitungs-URL die aktuelle Checkout-Sitzungs-ID des Kunden/der Kundin aufnehmen, um sie dynamisch zu übergeben. Dies kann hilfreich sein, wenn Sie die Meldung über erfolgreiche Zahlungen auf Ihrer Website auf der Grundlage der Informationen in der Checkout-Sitzung anpassen möchten.

### Kostenlose Testzeiträume konfigurieren (Optional)

Wenn Sie eine kostenlose Testversion zu einem bestimmten Preis anbieten möchten, wählen Sie **Kostenlose Testversion aufnehmen** aus und legen Sie deren Dauer fest, wenn Sie eine [Preistabelle](https://dashboard.stripe.com/test/pricing-tables) erstellen oder bearbeiten. Nachdem Kundinnen und Kunden ihre Zahlungsdetails bestätigt haben, werden sie zu einer Seite weitergeleitet, auf der sie ihre Testversion starten können. Die neue Seite ist Teil einer Checkout-Sitzung.

#### Testversionen ohne Zahlungsmethoden konfigurieren

Damit sich Kund/innen für ein Abonnement registrieren können, ohne Angaben zur Zahlungsmethode zu machen, wählen Sie **Kostenlose Testversion hinzufügen** aus und klicken Sie dann auf **Weiter**. Wählen Sie als Nächstes **Zahlungsmethodeninformationen nur bei Bedarf erfassen** aus.

Richten Sie [E-Mail-Erinnerungen](https://docs.stripe.com/payments/checkout/free-trials.md#collect-payment) ein, um Informationen zur Zahlungsmethode von Kundinnen und Kunden vor Ablauf der Testphase zu erfassen. Andernfalls unterbricht Stripe die Testversion.

### Kunden-E-Mail übergeben (Optional)

Die `<stripe-pricing-table>`-Webkomponente unterstützt das Festlegen der `customer-email`-Eigenschaft. Wenn die Eigenschaft festgelegt ist, übergibt die Preistabelle sie an das Attribut [customer_email](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-customer_email) der Checkout-Sitzung und trägt die E-Mail-Adresse automatisch auf der Zahlungsseite ein.

#### HTML

```html
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id="{{PRICING_TABLE_ID}}"
    publishable-key="<<YOUR_PUBLISHABLE_KEY>>"customer-email="{{CUSTOMER_EMAIL}}"
  >
  </stripe-pricing-table>
</body>
```

### Bestandskundin oder -kunden übergeben (Optional)

Sie können ein vorhandenes [Kundenobjekt](https://docs.stripe.com/api/customers.md) für Checkout-Sitzungen, die anhand der Preistabelle erstellt wurden, zur Verfügung stellen. Erstellen Sie eine Kundensitzung für eine/n Nutzer/in, den/die Sie bereits serverseitig authentifiziert haben, und geben Sie das [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) an den Client zurück.

```curl
curl https://api.stripe.com/v1/customer_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "components[pricing_table][enabled]=true"
```

Legen Sie das `customer-session-client-secret`-Attribut für die `<stripe-pricing-table>`-Webkomponente auf das [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) aus der Kundensitzung fest.

#### HTML

```html
<body>
  <h1>We offer plans that help any business!</h1>
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id="{{PRICING_TABLE_ID}}"
    publishable-key="<<YOUR_PUBLISHABLE_KEY>>"customer-session-client-secret="{{CLIENT_SECRET}}"
  >
  </stripe-pricing-table>
</body>
```

#### Ablauf des Client-Geheimnisses der Kundin/des Kunden

Sie haben 30&nbsp;Minuten Zeit, das Client-Geheimnis in die Preistabelle aufzunehmen. Nachdem Sie die Preistabelle gerendert haben, haben Sie weitere 30&nbsp;Minuten Zeit, um eine Zahlung abzuschließen, bevor die Kundensitzung abläuft. Wenn Sie eine Checkout-Sitzung mit einer abgelaufenen Kundensitzung erstellen, verwerfen wir das Client-Geheimnis und erstellen die Checkout-Sitzung ohne zugehörige Kundin oder zugehörigen Kunden.

Wenn die Kundensitzung nach der Erstellung, aber vor der Bestätigung abläuft, schlägt die Zahlungsbestätigung fehl.

## Preistabelle aktualisieren

Preistabellen können auf der entsprechenden Detailseite im Dashboard aktualisiert werden. Wählen Sie auf der Seite **Produktkatalog** die Registerkarte [Preistabellen](https://dashboard.stripe.com/pricing-tables) und suchen und wählen Sie dann die Preistabelle aus, die Sie bearbeiten möchten.

Klicken Sie auf der Detailseite der Preistabelle auf **Preistabelle bearbeiten**. Sie können ändern, welche Produkte und Preise Sie anzeigen, und die Einstellungen der Zahlungsseite konfigurieren. Wenn Sie Ihre Änderungen speichern, aktualisiert Stripe automatisch die Nutzeroberfläche der Preistabelle.

## Abonnements verwalten

Wenn ein/e Kund/in ein Abonnement kauft, wird es auf der [Abonnementseite](https://dashboard.stripe.com/subscriptions) im Dashboard angezeigt.

### Ausführung mit der Stripe API handhaben

Die Preistabellenkomponente nutzt Stripe Checkout, um eine vorgefertigte, gehostete Zahlungsseite zu erstellen. Wenn eine Zahlung mit Checkout abgeschlossen wird, sendet Stripe das Ereignis [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed). Registrieren Sie ein [Ereignisziel](https://docs.stripe.com/event-destinations.md), um das Ereignis an Ihrem Endpoint zu empfangen und die Ausführung und den Abgleich zu verarbeiten. Weitere Informationen finden Sie im [Checkout-Ausführungsleitfaden](https://docs.stripe.com/checkout/fulfillment.md).

Die `<stripe-pricing-table>`-Webkomponente unterstützt das Festlegen der `client-reference-id`-Eigenschaft. Wenn die Eigenschaft festgelegt ist, übergibt die Preistabelle sie an das Attribut [client_reference_id](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_reference_id) der Checkout-Sitzung, damit Sie die Checkout-Sitzung mit Ihrem internen System abgleichen können. Dabei kann es sich um eine authentifizierte Nutzer-ID oder eine ähnliche Zeichenfolge handeln. `client-reference-id` kann aus alphanumerischen Zeichen, Bindestrichen oder Unterstrichen bestehen und einen beliebigen Wert von bis zu 200 Zeichen haben. Ungültige Werte werden stillschweigend gelöscht und Ihre Preistabelle funktioniert weiterhin wie erwartet.

> Da die Preistabelle auf Ihrer Website eingebettet ist und für alle zugänglich ist, stellen Sie sicher, dass `client-reference-id` keine sensiblen Informationen oder Geheimnisse wie Passwörter oder API-Keys enthält.

#### HTML

```html
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id="{{PRICING_TABLE_ID}}"
    publishable-key="<<YOUR_PUBLISHABLE_KEY>>"client-reference-id="{{CLIENT_REFERENCE_ID}}"
  >
  </stripe-pricing-table>
</body>
```

### Kundinnen und Kunden auf ein Abonnement beschränken

Sie können Kundinnen und Kunden, die bereits ein Abonnement haben, an das *Kundenportal* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details) oder Ihre Website weiterleiten, um ihr Abonnement zu verwalten. Erfahren Sie mehr über [die Beschränkung von Kundinnen und Kunden auf ein Abonnement](https://docs.stripe.com/payments/checkout/limit-subscriptions.md).

### Lassen Sie Kund/innen ihre Abonnements verwalten

Teilen Sie einen Link zu Ihrem *Kundenportal* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details), in dem sich Kund/innen mit ihrer E-Mail-Adresse anmelden können, um Abonnements zu verwalten, Zahlungsmethoden zu aktualisieren usw. Erfahren Sie, wie Sie Ihren [Kundenportal-Link](https://docs.stripe.com/customer-management/activate-no-code-customer-portal.md) erstellen und teilen.

## Inhaltssicherheitsrichtlinie

Wenn Sie eine *Sicherheitsrichtlinie für Inhalte* (Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks) bereitgestellt haben, sind für Preistabellen die folgenden Richtlinien erforderlich:

- `frame-src`,`https://js.stripe.com`
- `script-src`, `https://js.stripe.com`

## Beschränkungen

- **Geschäftsmodelle**: Die Preistabelle unterstützt Abo-Geschäftsmodelle wie Pauschaltarife, Preise pro Nutzer/in, gestaffelte Preisgestaltung und Testzeiträume. Sie unterstützt keine auf [nutzungsbasierten Preismodelle](https://docs.stripe.com/products-prices/pricing-models.md#usage-based-pricing).
- **Produkt- und Preislimits**: Sie können die Preistabelle so konfigurieren, dass maximal vier Produkte mit bis zu drei Preisen pro Produkt angezeigt werden. Sie können für alle Produkte nur insgesamt drei eindeutige Preisintervalle konfigurieren.
- **Kontoerstellung**: Über den Handlungsaufruf der Preistabelle gelangen Kundinnen und Kunden direkt zum Bezahlvorgang. Das Hinzufügen eines Zwischenschritts (zum Beispiel die Aufforderung an die Kundinnen und Kunden, vor dem Abschließen des Kaufs ein Konto auf Ihrer Website zu erstellen) wird derzeit nicht unterstützt.
- **Begrenzung**: Die Preistabelle hat eine [Begrenzung](https://docs.stripe.com/rate-limits.md) von bis zu 50&nbsp;Lesevorgängen pro Sekunde. Wenn Sie mehrere Preistabellen haben, gilt die Begrenzung für diese Tabellen gemeinsam.
- **Checkout-Weiterleitung**: Die Preistabelle kann Kundinnen und Kunden nicht an den Bezahlvorgang weiterleiten, wenn Ihr Website-Anbieter den Code in eine Sandbox einbettet, ohne dass das Attribut `allow-top-navigation` aktiviert ist. Wenden Sie sich an Ihren Website-Provider, um diese Einstellung zu aktivieren.
- **Lokales Testen der Preistabelle**: Für das Rendern der Preistabelle ist eine Website-Domain erforderlich. Um die Preistabelle lokal zu testen, verwenden Sie einen lokalen HTTP-Server und hosten Sie die Datei `index.html` Ihrer Website über die `localhost`-Domain. Um einen lokalen HTTP-Server zu betreiben, verwenden Sie das [SimpleHTTPServer](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server)-Modul von Python oder das npm-Modul des [http-Servers](https://www.npmjs.com/package/http-server).
- **Connect**: Die Preistabelle ist nicht für *Connect* ausgelegt und unterstützt keine Funktionen wie das Erheben von Gebühren durch eine Plattform.