# 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. 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. - Embed into your website with a ` ``` #### React ```html ``` ```jsx import * as React from 'react'; function PricingPage() { // Paste the stripe-pricing-table snippet in your React component return ( ); } export default PricingPage; ``` ```typescript import * as React from 'react'; // If using TypeScript, add the following snippet to your file as well. declare global { namespace JSX { interface IntrinsicElements { 'stripe-pricing-table': React.DetailedHTMLProps, HTMLElement>; } } } ``` ## 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 "<>:" \ -d name=Professional \ -d "marketing_features[0][name]"="Unlimited boards" \ -d "marketing_features[1][name]"="Up to 20 seats" ``` ```cli stripe products create \ --name=Professional \ -d "marketing_features[0][name]"="Unlimited boards" \ -d "marketing_features[1][name]"="Up to 20 seats" ``` ```ruby # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys client = Stripe::StripeClient.new("<>") product = client.v1.products.create({ name: 'Professional', marketing_features: [{name: 'Unlimited boards'}, {name: 'Up to 20 seats'}], }) ``` ```python # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys client = StripeClient("<>") # For SDK versions 12.4.0 or lower, remove '.v1' from the following line. product = client.v1.products.create({ "name": "Professional", "marketing_features": [{"name": "Unlimited boards"}, {"name": "Up to 20 seats"}], }) ``` ```php // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys $stripe = new \Stripe\StripeClient('<>'); $product = $stripe->products->create([ 'name' => 'Professional', 'marketing_features' => [['name' => 'Unlimited boards'], ['name' => 'Up to 20 seats']], ]); ``` ```java // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys StripeClient client = new StripeClient("<>"); ProductCreateParams params = ProductCreateParams.builder() .setName("Professional") .addMarketingFeature( ProductCreateParams.MarketingFeature.builder().setName("Unlimited boards").build() ) .addMarketingFeature( ProductCreateParams.MarketingFeature.builder().setName("Up to 20 seats").build() ) .build(); // For SDK versions 29.4.0 or lower, remove '.v1()' from the following line. Product product = client.v1().products().create(params); ``` ```node // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys const stripe = require('stripe')('<>'); const product = await stripe.products.create({ name: 'Professional', marketing_features: [ { name: 'Unlimited boards', }, { name: 'Up to 20 seats', }, ], }); ``` ```go // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys sc := stripe.NewClient("<>") params := &stripe.ProductCreateParams{ Name: stripe.String("Professional"), MarketingFeatures: []*stripe.ProductCreateMarketingFeatureParams{ &stripe.ProductCreateMarketingFeatureParams{Name: stripe.String("Unlimited boards")}, &stripe.ProductCreateMarketingFeatureParams{Name: stripe.String("Up to 20 seats")}, }, } result, err := sc.V1Products.Create(context.TODO(), params) ``` ```dotnet // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys var options = new ProductCreateOptions { Name = "Professional", MarketingFeatures = new List { new ProductMarketingFeatureOptions { Name = "Unlimited boards" }, new ProductMarketingFeatureOptions { Name = "Up to 20 seats" }, }, }; var client = new StripeClient("<>"); var service = client.V1.Products; Product product = service.Create(options); ``` ### 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. 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

We offer plans that help any business!

``` #### React ```jsx import * as React from 'react'; function PricingPage() { // Paste the stripe-pricing-table snippet in your React component return ( ); } export default PricingPage; ``` 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 ``-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

We offer plans that help any business!

``` #### React ```jsx import * as React from 'react'; function PricingPage() { // Paste the stripe-pricing-table snippet in your React component return ( ); } export default PricingPage; ``` ### 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 "<>:" \ -d customer="{{CUSTOMER_ID}}" \ -d "components[pricing_table][enabled]"=true ``` ```cli stripe customer_sessions create \ --customer="{{CUSTOMER_ID}}" \ -d "components[pricing_table][enabled]"=true ``` ```ruby # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys client = Stripe::StripeClient.new("<>") customer_session = client.v1.customer_sessions.create({ customer: '{{CUSTOMER_ID}}', components: {pricing_table: {enabled: true}}, }) ``` ```python # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys client = StripeClient("<>") # For SDK versions 12.4.0 or lower, remove '.v1' from the following line. customer_session = client.v1.customer_sessions.create({ "customer": "{{CUSTOMER_ID}}", "components": {"pricing_table": {"enabled": True}}, }) ``` ```php // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys $stripe = new \Stripe\StripeClient('<>'); $customerSession = $stripe->customerSessions->create([ 'customer' => '{{CUSTOMER_ID}}', 'components' => ['pricing_table' => ['enabled' => true]], ]); ``` ```java // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys StripeClient client = new StripeClient("<>"); CustomerSessionCreateParams params = CustomerSessionCreateParams.builder() .setCustomer("{{CUSTOMER_ID}}") .setComponents( CustomerSessionCreateParams.Components.builder() .setPricingTable( CustomerSessionCreateParams.Components.PricingTable.builder() .setEnabled(true) .build() ) .build() ) .build(); // For SDK versions 29.4.0 or lower, remove '.v1()' from the following line. CustomerSession customerSession = client.v1().customerSessions().create(params); ``` ```node // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys const stripe = require('stripe')('<>'); const customerSession = await stripe.customerSessions.create({ customer: '{{CUSTOMER_ID}}', components: { pricing_table: { enabled: true, }, }, }); ``` ```go // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys sc := stripe.NewClient("<>") params := &stripe.CustomerSessionCreateParams{ Customer: stripe.String("{{CUSTOMER_ID}}"), Components: &stripe.CustomerSessionCreateComponentsParams{ PricingTable: &stripe.CustomerSessionCreateComponentsPricingTableParams{ Enabled: stripe.Bool(true), }, }, } result, err := sc.V1CustomerSessions.Create(context.TODO(), params) ``` ```dotnet // Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys var options = new CustomerSessionCreateOptions { Customer = "{{CUSTOMER_ID}}", Components = new CustomerSessionComponentsOptions { PricingTable = new CustomerSessionComponentsPricingTableOptions { Enabled = true, }, }, }; var client = new StripeClient("<>"); var service = client.V1.CustomerSessions; CustomerSession customerSession = service.Create(options); ``` Legen Sie das `customer-session-client-secret`-Attribut für die ``-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

We offer plans that help any business!

``` #### React ```jsx import * as React from 'react'; function PricingPage() { return ( ); } export default PricingPage; ``` #### Ablauf des Client-Geheimnisses der Kundin/des Kunden Sie haben 30 Minuten Zeit, das Client-Geheimnis in die Preistabelle aufzunehmen. Nachdem Sie die Preistabelle gerendert haben, haben Sie weitere 30 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 ``-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

We offer plans that help any business!

``` #### React ```jsx import * as React from 'react'; function PricingPage() { // Paste the stripe-pricing-table snippet in your React component return ( ); } export default PricingPage; ``` ### 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 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.