Abonnement-Integration erstellen

Abonnements und wiederkehrende Zahlungen erstellen und verwalten

Web

iOS

Android

React Native

togethere.work

Integrationsaufwand

Kaum 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

Erstellen Sie Ihre Produkte und die zugehörigen Preise im Dashboard oder mit der Stripe-CLI.

In diesem Beispiel wird ein Festpreisdienst mit zwei verschiedenen Service-Level-Optionen verwendet: Basic und Premium. Für jede Service-Level-Option müssen Sie ein Produkt und einen wiederkehrenden Preis erstellen. (Wenn Sie eine einmalige Gebühr, z. B. für die Einrichtung, hinzufügen möchten, erstellen Sie ein drittes Produkt mit einem einmaligen Preis. Der Einfachheit halber verzichtet dieses Beispiel auf eine einmalige Gebühr).

In diesem Beispiel wird jedes Produkt in monatlichen Intervallen abgerechnet. Der Preis für das Basic-Produkt beträgt 5 USD. Der Preis für das Premium-Produkt beträgt 15 USD.

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.

Informationen zu anderen Preismodellen finden Sie in den Billing-Beispielen.

Checkout-Sitzung erstellen

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

Übergeben Sie beim Erstellen einer Checkout-Sitzung folgende Parameter:

Um das Formular für eingebettete Zahlungen zu verwenden, setzen Sie ui_mode auf embedded.
Um Abonnements zu erstellen, wenn Ihre Kundin/Ihr Kunde bezahlt, legen Sie Modus auf subscription fest.
Um die Seite zu definieren, zu der Ihre Kundinnen/Kunden nach Abschluss bzw. Versuch der Zahlung zurückkehrt, 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 Kundinnen/Kunden weitergeleitet werden. Die Rückgabeseite 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. Nehmen Sie das Stripe.js-Skript in Ihre Seite auf, 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/basil/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öffentlichbaren API-Schlüssel.

Client-Geheimnis der Checkout 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.

Checkout initialisieren

Initialisieren Sie Checkout mit Ihrer fetchClientSecret-Funktion und verbinden Sie es mit dem Platzhalter <div> in Ihrem Zahlungsformular. Checkout wird in einem iFrame gerendert, der Zahlungsdaten 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ückgabeseite anzeigen

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

Notiz

Während der Zahlung leiten einige Zahlungsmethoden die Kundin/den Kunden auf eine Zwischenseite weiter, zum Beispiel eine Bankautorisierungsseite. Wenn sie diese Seite ausgefüllt haben, leitet Stripe sie zu Ihrer Rückgabeseite 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 den Status der Checkout-Sitzung mithilfe der Checkout-Sitzungs-ID in der URL abzurufen, sobald Ihre Rückgabeseite geladen wird.

Die Sitzung verarbeiten

Verarbeiten Sie das Ergebnis entsprechend dem Sitzungsstatus:

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 Ihre Kundinnen/Kunden es erneut versuchen können.

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
  });
});

OptionalDas Kundenportal konfigurieren

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.

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

Eine Portalsitzung erstellen

Um das Portal zu Ihrer Kundenerfahrung 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 einen Standard-Weiterleitungslink für das Portal auch im Dashboard festlegen.

Übergeben Sie einen optionalen return_url-Wert für die Seite auf Ihrer Website, auf die Ihre Kunden und Kundinnen nach der Verwaltung eines Abonnements weitergeleitet werden:

Kund/innen an das Kundenportal senden

Fügen Sie im Frontend eine Schaltfläche hinzu, die über die success_url 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 kehrt der Kunde über die return_url auf Ihre Website zurück. Fahren Sie fort mit Ereignisse überwachen, um den Status des Abonnements der Kundin / des Kunden zu verfolgen.

Wenn Sie das Kundenportal so konfigurieren, dass Aktionen wie die Kündigung eines Abonnements zugelassen werden, sollten Sie zusätzliche Ereignisse überwachen.

Zugriff bereitstellen

Nachdem das Abonnement nun aktiv ist, gewähren Sie Ihren Nutzer/innen Zugriff auf Ihre Dienstleistung. Beobachten Sie dazu die Ereignisse customer.subscription.created, customer.subscription.updated und customer.subscription.deleted. Diese Ereignisse übergeben ein Abonnementobjekt, das ein status-Feld enthält, welches anzeigt, ob das Abonnement aktiv oder überfällig ist oder gekündigt wurde. Eine vollständige Statusliste finden Sie unter Abonnementlebenszyklus. Weitere Informationen zum Verwalten des Zugriffs auf die Funktion Ihres Produkts finden Sie im Dokument zur Integration von Berechtigungen.

In Ihrem Webhook-Handler:

Überprüfen Sie den Abonnementstatus. Wenn es active ist, hat Ihr/e Nutzer/in für Ihr Produkt bezahlt.
Prüfen Sie das Produkt, auf das die Kundin/der Kunde ein Abo abgeschlossen 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 die product.id, subscription.id und den 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.

The status of a subscription might change at any point during its lifetime, even if your application doesn’t directly make any calls to Stripe. For example, a renewal might fail due to an expired credit card, which puts the subscription into a past due status. Or, if you implement the customer portal, a user might cancel their subscription without directly visiting your application. Implementing your handler correctly keeps your application status in sync with Stripe.

Integration testen

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 Abonnementänderungsereignisse wie Upgrades und Kündigungen zu überwachen. Erfahren Sie mehr über Abonnement-Webhooks. Sie können Ereignisse im Dashboard oder mit der Stripe-CLI anzeigen.

Erfahren Sie mehr über das Testen Ihrer Billing-Integration.