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 in Ihre Website ein, um Ihren Kundinnen und Kunden Preisinformationen anzuzeigen und sie auf eine Bezahlseite zu leiten
Übersicht
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
- Rufen Sie im Dashboard Produktkatalog > Preistabellen auf.
- Klicken Sie auf +Preistabelle erstellen.
- 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.
- 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.
- 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.
- Konfigurieren Sie das Kundenportal, indem Sie auf Weiter klicken.
- Klicken Sie auf Code kopieren, um den generierten Code zu kopieren und in Ihre Website einzubetten.
Auszahlungspreistabelle anpassen
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.
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.-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.
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 in Ihrer Website eingebettet und für jeden zugänglich ist, stellen Sie sicher, dass client-reference-id keine sensiblen Informationen oder Geheimschlüssel wie Passwörter oder API enthält.
Beschränkungen
- Geschäftsmodelle: Die Preistabelle unterstützt gängige Abonnement-Geschäftsmodelle wie Flatrate, pro Nutzer/in, gestaffelte Preismodelle und Testversionen. Andere erweiterte 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.-Datei Ihrer Website über diehtml 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.