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: Standardpreis | 15 USD
Basic-Produkt: Basic-Dienstleistung mit minimalem Funktionsumfang
- Preis: Standardpreis | 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 dem Test- in den Live-Modus zu kopieren.

Wenn Sie mehrere Abrechnungsintervalle anbieten, können Sie mit Checkout für Kundinnen/Kunden Upselling auf längere Zahlungsintervalle durchführen und so Ihre Umsätze im Voraus steigern.

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 eingebettete Checkout 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 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/v3/"></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

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.
Überprüfen Sie das Produkt, das die Kundin/der Kunde abonniert hat, und gewähren Sie Zugang zu Ihrer Dienstleistung. Bei der Überprüfung des Produkts sind Sie im Vergleich zur Überprüfung des Preises flexibler, falls Sie den Preis oder das Abrechnungsintervall ä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.

Der Status eines Abonnements kann sich während seiner Laufzeit jederzeit ändern, auch wenn Ihre Anwendung Stripe nicht direkt aufruft. Beispielsweise kann eine Verlängerung aufgrund einer abgelaufenen Kreditkarte fehlschlagen, wodurch das Abonnement in einen überfälligen Status versetzt wird. Oder wenn Sie das Kundenportal implementieren, können Nutzer/innen ihr Abonnement kündigen, ohne Ihre Anwendung direkt aufzurufen. Durch die korrekte Implementierung Ihres Handlers wird der Anwendungsstatus mit Stripe synchronisiert.

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 `000-000` aus. Die 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 `000-000` 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 Ihres/Ihrer Kund/in 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.