Abonnement-Integration erstellen

Abonnements und wiederkehrende Zahlungen erstellen und verwalten

Checkout

Elements

Mobil

togethere.work

Integrationsaufwand

Low-Code

Anpassung der Nutzeroberfläche

Passen Sie das Erscheinungsbild an.

Integrationstyp

Verwenden Sie vorgefertigte, integrierte Formulare, um Zahlungen einzuziehen und Abonnements zu verwalten.

Server einrichten

Stripe einrichten

Installieren Sie den Stripe-Client Ihrer Wahl:

Produkt und Preis erstellen

Wiederkehrende Preismodelle umfassen die Produkte und Dienstleistungen, die Sie anbieten, die Preise dafür, welche Währungen Sie für Zahlungen verwenden und den Leistungszeitraum (für Abos). Verwenden Sie zum Aufbau des Preismodells Produkte (was Sie anbieten) und Preise (Höhe und Abrechnungsintervall).

In diesem Beispiel wird ein Pauschalpreisdienst mit zwei verschiedenen Service-Optionen verwendet: Basis und Premium. Für jede Service-Option müssen Sie ein Produkt und einen wiederkehrenden Preis erstellen. Um eine einmalige Gebühr, z. B. für die Einrichtung, hinzufügen möchten, erstellen Sie ein drittes Produkt mit einem einmaligen Preis.

Jedes Produkt wird in monatlichen Intervallen abgerechnet. Der Preis für das Basisprodukt beträgt 5 USD. Der Preis für das Premiumprodukt beträgt 15 USD. Ein Beispiel mit drei Stufen finden Sie im Leitfaden zu Pauschalpreismodellen.

Gehen Sie zur Seite Produkt hinzufügen und erstellen Sie zwei Produkte. Fügen Sie für jedes Produkt einen Preis hinzu, jeweils mit einem monatlich wiederkehrenden Abrechnungszeitraum:

Premium-Produkt: Premium-Dienstleistung mit zusätzlichen Funktionen
- Preis: Pauschalpreis | 15 USD
Basic-Produkt: Basic-Dienstleistung mit minimalem Funktionsumfang
- Preis: Pauschalpreis | 5 USD

Zeichnen Sie nach Erstellung der Preise die Preis-IDs auf, sodass diese in anderen Schritten verwendet werden können. Preis-IDs sehen in etwa wie folgt aus: price_G0FvDp6vZvdwRZ.

Wenn Sie bereit sind, verwenden Sie die Schaltfläche In Live-Modus kopieren oben rechts auf der Seite, um Ihr Produkt aus der Sandbox in den Live-Modus zu kopieren.

Wenn Sie mehrere Rechnungsstellungszeiträume anbieten, verwenden Sie Checkout, um Kundinnen und Kunden längere Rechnungsstellungszeiträume als Upsell anzubieten und mehr Umsatz im Voraus zu erzielen.

Weitere Preismodelle finden Sie unter Abrechnungsbeispiele.

Checkout-Sitzung erstellen

Fügen Sie auf Ihrem Server einen Endpoint hinzu, der eine Checkout-Sitzung erstellt.

Übergeben Sie beim Erstellen der Checkout-Sitzung die folgenden Parameter:

Um das Formular für eingebettete Zahlungen zu verwenden, setzen Sie ui_mode auf embedded.
Um Abos beim Bezahlvorgang Ihrer Kundin/Ihres Kunden zu erstellen, setzen Sie mode auf subscription.
Um die Seite zu definieren, zu der Ihre Kund/innen nach Abschluss bzw. Versuch der Zahlung zurückkehren, geben Sie eine return_url an. Fügen Sie die Vorlagenvariable {CHECKOUT_SESSION_ID} in die URL ein. Checkout ersetzt die Variable durch die Checkout-Sitzungs-ID, bevor Ihre Kund/innen weitergeleitet werden. Die Rückkehrseite erstellen und hosten Sie auf Ihrer Website.
Um Ihre Abo- und Kündigungsbedingungen sowie einen Link bereitzustellen, über den Ihre Kundinnen und Kunden ihr Abo aktualisieren oder kündigen können, verwenden Sie optional einen benutzerdefinierten Text. Wir empfehlen, E-Mail-Erinnerungen und Benachrichtigungen für Ihre Abonnentinnen und Abonnenten zu konfigurieren.

Um Checkout zu verbinden, verwenden Sie das in der Antwort der Checkout-Sitzung zurückgegebene client_secret.

Personalisierte Abonnementseite erstellen
Client

Checkout verbinden

Stripe.js laden

Verwenden Sie Stripe.js, um PCI-konform zu bleiben, indem Sie sicherstellen, dass die Zahlungsdaten ohne Umweg über Ihren Server direkt an Stripe gesendet werden. Laden Sie Stripe.js immer von js.stripe.com, um die Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie es nicht selbst.

Zahlungsformular definieren

Um die Kundeninformationen sicher zu erfassen, erstellen Sie den leeren Platzhalter div. Stripe fügt einen iFrame in div ein.

Checkout ist als Teil von Stripe.js verfügbar. Binden Sie das Stripe.js-Skript in Ihre Seite ein, indem Sie es zum Header Ihrer HTML-Datei hinzufügen. Als Nächstes erstellen Sie einen leeren DOM-Knoten (Container), der zum Verbinden verwendet wird.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Accept a payment</title>
    <meta name="description" content="A demo of a payment on Stripe" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <!-- Add the Stripe.js script here -->
    <script src="https://js.stripe.com/clover/stripe.js"></script>
    <script src="checkout.js" defer></script>
  </head>
  <body>
    <!-- Display a payment form -->
      <div id="checkout">
        <!-- Checkout inserts the payment form here -->
      </div>
  </body>
</html>

Stripe.js initialisieren

Initialisieren Sie Stripe.js mit Ihrem veröffentlichungsfähigen API-Schlüssel.

Client-Geheimnis der Checkout-Sitzung abrufen

Erstellen Sie eine asynchrone fetchClientSecret-Funktion, die eine Anfrage an Ihren Server stellt, um eine Checkout-Sitzung zu erstellen und das Client-Geheimnis abzurufen.

Bezahlvorgang initialisieren

Initialisieren Sie Checkout mit Ihrer fetchClientSecret-Funktion und verbinden Sie sie mit dem Platzhalter <div> in Ihrem Zahlungsformular. Checkout wird in einem iFrame gerendert, der Zahlungsinformationen sicher über eine HTTPS-Verbindung an Stripe sendet.

Vermeiden Sie es, Checkout in einem anderen iFrame zu platzieren, da bei einigen Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung erforderlich ist.

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Eine Rückkehrseite anzeigen

Nachdem Ihre Kund/innen einen Zahlungsversuch unternommen haben, leitet Stripe sie auf eine Rückkehrseite weiter, die Sie auf Ihrer Website hosten. Als Sie die Checkout-Sitzung erstellt haben, haben Sie die URL der Rückkehrseite im Parameter return_url angegeben.

Hinweis

Während der Zahlung leiten einige Zahlungsmethoden die Kund/innen auf eine Zwischenseite weiter, zum Beispiel eine Bankautorisierungsseite. Wenn sie diese Seite ausgefüllt haben, leitet Stripe sie zu Ihrer Rückkehrseite weiter.

Endpoint erstellen, um eine Checkout-Sitzung abzurufen

Fügen Sie einen Endpoint hinzu, um den Status einer Checkout-Sitzung mit der Checkout-Sitzungs-ID in der URL abzurufen.

Eine Checkout-Sitzung abrufen

Um Details für die Checkout-Sitzung zu verwenden, stellen Sie sofort eine Anfrage an den Endpoint auf Ihrem Server, um mithilfe der Checkout-Sitzungs-ID in der URL den Status der Checkout-Sitzung abzurufen, sobald Ihre Rückkehrseite geladen wird.

Die Sitzung verarbeiten

Das Ergebnis basierend auf dem Status der Sitzung verarbeiten:

complete: Die Zahlung war erfolgreich. Verwenden Sie die Informationen aus der Checkout-Sitzung, um eine Bestätigungsseite zu rendern.
open: Die Zahlung ist fehlgeschlagen oder wurde storniert. Stellen Sie erneut eine Verbindung zu Checkout her, damit Ihr/e Kund/in es nochmals versuchen kann.

return.js
// Retrieve a Checkout Session
// Use the session ID
initialize();

async function initialize() {
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const sessionId = urlParams.get('session_id');
  const response = await fetch(`/session-status?session_id=${sessionId}`);
  const session = await response.json();
// Handle the session according to its status
  if (session.status == 'open') {
    // Remount embedded Checkout
    window.location.replace('http://localhost:4242/checkout.html')
  } else if (session.status == 'complete') {
    document.getElementById('success').classList.remove('hidden');
    document.getElementById('customer-email').textContent = session.customer_email;
    // Show success page
    // Optionally use session.payment_status or session.customer_email
    // to customize the success page
  }
}

server.js
// Add an endpoint to fetch the Checkout Session status
app.get('/session_status', async (req, res) => {
  const session = await stripe.checkout.sessions.retrieve(req.query.session_id);
  const customer = await stripe.customers.retrieve(session.customer);

  res.send({
    status: session.status,
    payment_status: session.payment_status,
    customer_email: customer.email
  });
});

OptionalKonfigurieren Sie das Kundenportal

Sie können das Kundenportal einrichten, damit Ihre Kundinnen/Kunden ihre bestehenden Abonnements und Rechnungen direkt verwalten können.

Sie können das Portal im Dashboard konfigurieren. Um die Abwanderung zu reduzieren, können Sie das Portal so konfigurieren, dass Kundinnen/Kunden ihre Zahlungsmethoden im Falle fehlgeschlagener Zahlungen aktualisieren können.

Damit Ihre Kundinnen/Kunden das Kundenportal leichter finden und ihre Abonnements verwalten können, fügen Sie eine Schaltfläche auf Ihrer Website hinzu. Durch Anklicken dieser Schaltfläche werden diese zu der von Stripe gehosteten Kundenportal-Seite weitergeleitet.

Erfahren Sie mehr über das Kundenportal und andere Optionen zur Kundenverwaltung.

Eine Portalsitzung erstellen

Um ein Kundenportal hinzuzufügen, definieren Sie einen Endpoint, der die Kundenportal-Sitzung erstellt, die von Ihrem Frontend aufgerufen wird. Hier steht CUSTOMER_ID für die von einer Checkout-Sitzung erstellte Kunden-ID, die Sie beim Verarbeiten des Webhooks checkout.session.completed gespeichert haben. Sie können auch im Dashboard einen Standard-Weiterleitungslink für das Portal festlegen.

Übergeben Sie einen optionalen return_url-Wert für die Seite auf Ihrer Website, auf die Ihre Kund/innen nach der Verwaltung ihres Abos weitergeleitet werden:

Kunden zum Kundenportal senden

Fügen Sie im Frontend eine Schaltfläche auf der Seite unter der success_url hinzu, die auf das Kundenportal verweist:

success.html
Vollständiges Beispiel anzeigen
<html>
  <head>
    <title>Manage Billing</title>
  </head>
  <body>
    <form action="/customer-portal" method="POST">
      <!-- Note: If using PHP set the action to /customer-portal.php -->
      <button type="submit">Manage Billing</button>
    </form>
  </body>
</html>

Nach dem Verlassen des Kundenportals kehren die Kund/innen über die return_url auf Ihre Website zurück. Fahren Sie fort mit Ereignisse überwachen, um den Abo-Status der Kund/innen zu tracken.

Wenn Sie das Kundenportal so konfigurieren, dass Aktionen wie die Kündigung eines Abos zugelassen werden, achten Sie darauf, zusätzliche Ereignisse zu überwachen.

Zugriff bereitstellen

Wenn das Abo aktiv ist, gewähren Sie Ihren Nutzer/innen Zugriff auf Ihren Dienst. Überwachen Sie dazu die Ereignisse customer.subscription.created, customer.subscription.updated und customer.subscription.deleted. Diese Ereignisse übergeben ein Abo-Objekt, das ein status-Feld enthält, das anzeigt, ob das Abo aktiv oder überfällig ist oder gekündigt wurde. Eine vollständige Statusliste finden Sie im Abonnementlebenszyklus. Um den Zugriff auf die Funktion Ihres Produkts zu verwalten, informieren Sie sich über die Integration von Berechtigungen.

In Ihrem Webhook-Handler:

Überprüfen Sie den Status des Abos. Wenn er active ist, hat der/die Nutzer/in für Ihr Produkt bezahlt.
Prüfen Sie das Produkt, das die Kundin/der Kunde abonniert hat, und gewähren Sie Zugang zu Ihrem Dienst. Das Überprüfen des Produkts anstelle des Preises gibt Ihnen mehr Flexibilität, falls Sie die Preisgestaltung oder den Rechnungsstellungszeitraum ändern müssen.
Speichern Sie product.id, subscription.id und subscription.status in Ihrer Datenbank zusammen mit der bereits gespeicherten customer.id. Überprüfen Sie diesen Datensatz, wenn Sie entscheiden, welche Funktionen für die Nutzer/innen Ihrer Anwendung aktiviert werden sollen.

Der Status eines Abos kann sich während seiner Laufzeit jederzeit ändern, auch wenn Ihre Anwendung keine direkten Aufrufe an Stripe tätigt. So kann beispielsweise eine Verlängerung aufgrund einer abgelaufenen Karte fehlschlagen, wodurch das Abo in einen überfälligen Status versetzt wird. Oder, wenn Sie das Kundenportal implementieren, könnte ein/e Nutzer/in das Abo kündigen, ohne Ihre Anwendung direkt aufzurufen. Durch die korrekte Implementierung Ihres Handlers bleibt der Status Ihrer Anwendung mit Stripe synchronisiert.

Testen Sie Ihre Integration.

Zahlungsmethoden testen

Verwenden Sie die folgende Tabelle, um verschiedene Zahlungsmethoden und -szenarien zu testen.

Zahlungsmethode	Szenario	So führen Sie den Test durch
BECS-Lastschrift	Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren.	Füllen Sie das Formular mit der Kontonummer `900123456` und BSB `000000` aus. Der bestätigte PaymentIntent geht zunächst in den Status `processing` über und dann drei Minuten später in den Status `succeeded`.
BECS-Lastschrift	Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl.	Füllen Sie das Formular mit der Kontonummer `111111113` und BSB `000000` aus.
Kreditkarte	Die Kartenzahlung ist erfolgreich, und es ist keine Authentifizierung erforderlich.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4242 4242 4242 4242` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Kreditkarte	Für die Kartenzahlung ist eine Authentifizierung erforderlich.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0025 0000 3155` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Kreditkarte	Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0000 0000 9995` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
SEPA-Lastschrift	Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren.	Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über.
SEPA-Lastschrift	Der Status der PaymentIntent Ihrer Kundin/Ihre Kundin wechselt von `processing` zu `requires_payment_method`.	Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus.

Ereignisse überwachen

Richten Sie Webhooks ein, um Änderungsereignisse für Abos wie Upgrades und Kündigungen zu überwachen. Sie können Webhook-Ereignisse für Abos im Dashboard oder mit Stripe CLI anzeigen.

Erfahren Sie mehr über das Testen Ihrer Abrechnungsintegration.