Weiter zum Inhalt
Konto erstellen oder anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellenAnmelden
Übersicht
Billing
ÜbersichtÜber die Billing APIs
Abonnements
Steuer
Übersicht
Berichte
ÜbersichtBerichte für mehrere Konten
Daten
Übersicht

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 an und leitet Kundinnen und Kunden zu einem vordefinierten Bezahlvorgang weiter. Der Bezahlvorgang verwendet Stripe Checkout, um den Kauf abzuschließen.
  • Unterstützen Sie gängige Abo-Geschäftsmodelle wie Pauschaltarife, pro Nutzer/in, gestaffelte Preisgestaltung 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 <script> tag and web component. Stripe automatically generates the tag. You copy and paste it into your website’s code.

Im folgenden Diagramm ist zusammengefasst, wie Kund/innen von der Anzeige einer Preistabelle zum Abschluss des Bezahlvorgangs gelangen.

Preistabelle erstellen

  1. Rufen Sie im Dashboard Produktkatalog > Preistabellen auf.
  2. Klicken Sie auf +Preistabelle erstellen.
  3. 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.
  4. 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.
  5. 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.

  6. Konfigurieren Sie das Kundenportal, indem Sie auf Weiter klicken.
  7. 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.

Vorsicht

Die Preistabelle verwendet den veröffentlichbaren API-Schlüssel Ihres Kontos. Wenn Sie den API Key widerrufen, müssen Sie den Einbettungscode mit Ihrem neuen veröffentlichbaren API-Schlüssel aktualisieren.

pricing-page.html
HTML
React
No results
<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=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

  >
  </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.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/products \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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. 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.

Vorsicht

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:

TypBeschreibung
TextZum Erfassen von Freiformtext mit bis zu 255 Zeichen.
Nur ZiffernWird verwendet, um nur numerische Werte mit bis zu 255 Stellen zu erfassen.
DropdownBietet 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 Nutzerdefinierte Felder hinzufügen.
  2. Wählen Sie einen Feldtyp zum Hinzufügen aus.
  3. Geben Sie eine Bezeichnung für das Feld ein.
  4. (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 -Ereignis nach Abschluss der Zahlung gesendet. Registrieren Sie ein Ereignisziel, 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 konfigurieren. Verwenden Sie das Attribut Kunden-E-Mail, 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 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 sein.

pricing-page.html
HTML
React
No results
<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=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    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 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 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 der Checkout-Sitzung und trägt die E-Mail-Adresse automatisch auf der Zahlungsseite ein.

pricing-page.html
HTML
React
No results
<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=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    customer-email="{{CUSTOMER_EMAIL}}"
  >
  </stripe-pricing-table>
</body>

Bestandskundin oder -kunden übergeben Optional

Sie können ein vorhandenes Kundenobjekt 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 an den Client zurück.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/customer_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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 aus der Kundensitzung fest.

pricing-page.html
HTML
React
No results
<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=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    customer-session-client-secret="{{CLIENT_SECRET}}"
  >
  </stripe-pricing-table>
</body>

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 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 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. Registrieren Sie ein Ereignisziel, 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.

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 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.

Vorsicht

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.

pricing-page.html
HTML
React
No results
<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=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    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 oder Ihre Website weiterleiten, um ihr Abonnement zu verwalten. Erfahren Sie mehr über die Beschränkung von Kundinnen und Kunden auf ein Abonnement.

Lassen Sie Kund/innen ihre Abonnements verwalten

Teilen Sie einen Link zu Ihrem Kundenportal, 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 erstellen und teilen.

Inhaltssicherheitsrichtlinie

Wenn Sie eine Sicherheitsrichtlinie für Inhalte 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.
  • 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 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-Modul von Python oder das npm-Modul des http-Servers.
  • Connect: Die Preistabelle ist nicht für Connect ausgelegt und unterstützt keine Funktionen wie das Erheben von Gebühren durch eine Plattform.