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

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 eine Tabelle zu erstellen, die Ihren Kundinnen und Kunden verschiedene Preisstufen für Abonnements anzeigt. Sie müssen keinen nutzerdefinierten Code schreiben, um eine Preistabelle zu erstellen oder einzubetten. In diesem Leitfaden wird Folgendes beschrieben:

  • Verwenden Sie das Stripe-Dashboard, um die Nutzeroberflächenkomponente zu konfigurieren
  • Kopieren Sie den generierten Code aus dem Dashboard
  • Betten Sie den Code auf Ihrer Website ein, um Ihren Kundinnen und Kunden Preisinformationen anzuzeigen und sie zu einer Zahlungsseite weiterzuleiten.

Übersicht

Die Preistabelle ist eine eingebettete Nutzeroberfläche, die Preisinformationen anzeigt und Kundinnen und Kunden zum Bezahlvorgang leitet.

Binden Sie eine Preistabelle auf Ihrer Website ein, um Preisdetails anzuzeigen und Kundinnen und Kunden in Bezahlvorgänge umzuwandeln.

Eine Preistabelle ist ein integrierbares Element der Nutzeroberfläche, für das Folgendes gilt:

  • Zeigt Preisinformationen an und leitet Kundinnen und Kunden zu einem vordefinierten Bezahlvorgang weiter. Der Bezahlvorgang verwendet Stripe Checkout, um den Kauf abzuschließen.
  • Unterstützt gängige Abonnement-Geschäftsmodelle wie Flatrate, pro Nutzer/in, gestaffelte Preise und kostenlose Testversionen.
  • Damit können Sie Produkt- und Preisinformationen direkt im Dashboard konfigurieren, anpassen und aktualisieren, ohne Code schreiben zu müssen.
  • Einbettung in Ihre Website mit einem <script>-Tag und einer Webkomponente. Stripe generiert das Tag automatisch. Sie kopieren es 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 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 anpassen

Auszahlungspreistabelle anpassen

Zahlungseinstellungen konfigurieren

Zahlungseinstellungen konfigurieren

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.

Detailseite der Preistabelle

Kopieren Sie den Code der Preistabelle und integrieren Sie ihn auf Ihrer Website.

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>

Abonnements verfolgen

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>

OptionalProduktmarketing-Funktionen hinzufügen

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.

Produktmarketing-Funktionen hinzufügen

Produktmarketing-Funktionen hinzufügen

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"

OptionalNutzerdefinierten Aktionsaufruf hinzufügen

In der Preistabelle können Sie ein Produkt mit einem nutzerdefinierten Aktionsaufruf konfigurieren, der zu einer beliebigen URL weiterleitet. Sie können dies verwenden, wenn Sie nutzerdefinierte Preise oder einen High-Touch-Verkaufsprozess für eines Ihrer Produkte haben.

Klicken Sie auf Add product with custom call-to-action button, um ein Produkt und einen nutzerdefinierten Aktionsaufruf auszuwählen und die URL festzulegen.

Nutzerdefinierten Aktionsaufruf hinzufügen

Nutzerdefinierten Aktionsaufruf hinzufügen

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 entsprechende Produkt-ID und die Kunden-E-Mail aus, wenn ein Kunde/eine Kundin auf den Aktionsaufruf klickt.

Vorsicht

Zurzeit können Sie nur für ein Produkt einen nutzerdefinierten Aktionsaufruf einrichten. Vergewissern Sie sich, dass der von Ihnen angegebene Link korrekt ist. Sie müssen die Kunden-E-Mail-Adresse übergeben, damit der {CUSTOMER_EMAIL}-Parameter funktioniert.

OptionalKunden-E-Mail übergeben

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>

OptionalVorhandene/n Kunden/Kundin übergeben

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, um das Client-Geheimnis in die Preistabelle aufzunehmen. Nach dem Rendern der Preistabelle haben Sie weitere 30 Minuten Zeit, 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/n Kunden/Kundin.

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

OptionalErlebnis nach der Kaufabwicklung anpassen

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.

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

OptionalKostenlose Testversionen konfigurieren

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.

Kostenlose Testversion für Ihre Produkte konfigurieren

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.

OptionalSicherheitsrichtlinien für Inhalte

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

OptionalLassen Sie Kundinnen und Kunden ihre Abonnements verwalten
Kein Code

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.

OptionalLokale Währungen anzeigen

Zeigen Sie Preise automatisch in der Preistabelle und beim Bezahlvorgang in der Landeswährung Ihrer Kundinnen/Kunden an, indem Sie Preise in mehreren Währungen konfigurieren. Verwenden Sie das Attribut customer-email, um zu testen, wie Ihre Preistabelle und Zahlungsseite Kundinnen/Kunden 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).

OptionalNutzerdefinierte Felder hinzufügen

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 dem Zahlungsformular nutzerdefinierte Felder für all Ihre Produkte und Preise in Ihrer Preistabelle hinzufügen, um zusätzliche Informationen von Ihren Kundinnen und Kunden zu erfassen. Die Informationen sind nach Abschluss der Zahlung verfügbar und eignen sich für den Kaufvorgang. 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.

Beschränkungen

  • Geschäftsmodelle: Die Preistabelle unterstützt Abonnement-Geschäftsmodelle wie Flatrate, pro Nutzer/in, gestaffelte Preismodelle und Testversionen. Nutzungsbasierte Preismodelle werden nicht unterstützt.
  • 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 drei eindeutige Preisintervalle konfigurieren.
  • Kontoerstellung: Über den Aktionsaufruf der Preistabelle gelangen Kundinnen und Kunden direkt zum Bezahlvorgang. Das Hinzufügen eines Zwischenschritts (z. B. die Aufforderung an die Kundinnen und Kunden, vor dem Bezahlvorgang ein Konto auf Ihrer Website zu erstellen), werden derzeit nicht unterstützt.
  • Ratenbegrenzung: Die Preistabelle hat eine Ratenbegrenzung von bis zu 50 Lesevorgängen pro Sekunde. Wenn Sie mehrere Preistabellen haben, wird die Ratenbegrenzung gemeinsam genutzt.
  • Checkout-Weiterleitung: Die Preistabelle kann Kundinnen und Kunden nicht an Checkout weiterleiten, wenn Ihr Website-Anbieter den Code in einen iFrame einbettet, ohne dass das allow-top-navigation-Attribut aktiviert ist. Wenden Sie sich an Ihren Website-Anbieter, um diese Einstellung zu aktivieren.
  • Lokales Testen der Preistabelle:Die Preistabelle erfordert zum Rendern eine Website-Domain Um die Preistabelle lokal zu testen, führen Sie einen lokalen HTTP-Server aus, um die index.html-Datei Ihrer Website über die localhost-Domain zu hosten. Um einen lokalen HTTP-Server auszuführen, verwenden Sie den SimpleHTTPServer von Python oder das NPM-Modul http-server.
  • Connect: Die Preistabelle ist nicht für die Verwendung mit Connect konzipiert und unterstützt keine Funktionen wie die Erhebung von Gebühren durch eine Plattform.

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.

War diese Seite hilfreich?
JaNein