Entwickeln einer Abonnement-Lösung für ein KI-Start-up mit einem nutzungsbasierten Preismodell

Vor der Integration mit Stripe müssen Sie ein Stripe-Konto erstellen.

1. Erstellen Sie ein Konto, indem Sie Ihre E-Mail-Adresse, Ihren vollständigen Namen und Ihr Land eingeben und ein Passwort erstellen.
2. Füllen Sie Ihr Unternehmensprofil aus.
3. Klicken Sie im Dashboard auf Ihre E-Mail-Adresse verifizieren. Eine E-Mail zur Verifizierung wird an Ihre E-Mail-Adresse gesendet.
4. Ihre E-Mail-Adresse verifizieren.

Bevor Sie Live-Transaktionen verarbeiten, testen Sie Ihre Integration mit den Testtools von Stripe, einschließlich Sandboxes und Test-Uhren. Richten Sie diese frühzeitig ein, damit Sie Ihre Integration iterieren und optimieren können, bevor Sie live gehen.

Sandbox erstellen

Erstellen Sie zunächst eine Sandbox. Konfigurieren Sie die Sandbox so, dass sie zu Ihrer Konfiguration im Live-Modus passt, damit Sie Änderungen fortlaufend testen und inszenieren können.

Test-Uhr erstellen

Erstellen Sie als Nächstes eine Test-Uhr, um die Vorwärtsbewegung der Zeit in Sandbox zu simulieren. Wenn Sie die Test-Uhr erhöhen, ändern Ressourcen wie Abonnements den Status und lösen Webhook-Ereignisse aus.

1. -Rufen Sie im Stripe Dashboard die Seite Test-Uhren im Dashboard auf.
2. Klicken Sie auf + Neue Simulation.
3. Geben Sie im Modal Neue Simulation erstellen einen Namen für die Simulation ein. Damit können Sie die Simulation beschreiben, die Sie testen, beispielsweise Annual renewal oder Free trial.
4. Stellen Sie einen bestimmten Zeitpunkt für die Uhr ein. Dies ist der Startpunkt Ihrer Simulation. Es kann ein Zeitpunkt in der Zukunft oder in der Vergangenheit sein. Sie können ihn jedoch nur zeitlich nach vorne verschieben, nachdem Sie ihn festgelegt haben.

Um Abonnement-Szenarien zu simulieren, klicken Sie auf das Dropdown-Menü Hinzufügen und wählen Sie Kundin/Kunde aus. Sie müssen nur einen Namen für die Kundin/den Kunden eingeben, aber für einige Szenarien, wie Steuereinzug und -berechnung, müssen Sie weitere Informationen hinzufügen, wie Rechnungs- und Versandadressen.

Klicken Sie als Nächstes auf das Dropdown-Menü Hinzufügen und wählen Sie Abonnement aus. Konfigurieren Sie das Abo entsprechend Ihrem Szenario.

Sie können weitere Kun/innen und Kunden sowie Abonnements hinzufügen, um gemäß dem Rest dieses Leitfadens fortzufahren.

In diesem Beispiel berechnet Hypernian-Kundinnen und -Kunden den Zugriff auf seine LLM-Dienste nach einem Preismodell mit Festgebühr und Überschreitungen zu den folgenden Sätzen:

Um dieses Modell zu implementieren, erstellen Sie einen Zähler zur Erfassung der Nutzung, Produkte und Preise zur Darstellung Ihres Dienstes, eine Kundin/einen Kunden und ein Kundenabonnement.

Zähler erstellen

Zähler geben an, wie Zählerereignisse über einen Abrechnungszeitraum hinweg zusammengefasst werden. Zählerereignisse stellen alle Aktionen dar, die Kundinnen/Kunden in Ihrem System durchführen (beispielsweise API-Anfragen). Zähler sind an Preise gebunden und bilden die Grundlage für das, was in Rechnung gestellt wird.

Für das Hypernian-Beispiel sind Zählerereignisse die Anzahl der Token, die ein Kunde/eine Kundin in einer Abfrage verwendet. Der Zähler ist die Summe der Token über einen Monat.

Sie können das Stripe Dashboard oder die API verwenden, um einen Zähler zu konfigurieren. Um die API mit der Stripe CLI zum Erstellen eines Zählers zu verwenden, starten sie mit der Stripe CLI.

Preismodell erstellen

Verwenden Sie das Stripe-Dashboard oder die API, um ein Preismodell zu erstellen, das Ihre Produkte und deren Preisoptionen umfasst. Preise legen die Stückkosten, die Währung und den Rechnungsstellungszeitraum fest.

Für das Hypernian-Beispiel erstellen Sie ein Produkt mit einem zählerverknüpften Preis von 0,04 USD pro hundert Einheiten, das in einem monatlichen Intervall abgerechnet wird. Sie verwenden den Zähler, das Sie im vorherigen Schritt erstellt haben.

Erstellen Sie als Nächstes die monatliche Gebühr von 100 USD.

Um einen Promo-Code einzurichten, erstellen Sie einen Gutschein und einen Promo-Code und wenden den Promo-Code dann auf ein Abo an.

Gutschein erstellen

Gutscheine können im Dashboard oder mit der API erstellt werden:

Berechtigte Produkte festlegen

Wenn Sie Änderungen an einem Abo vornehmen, berechnet Stripe die anteilmäßige Verrechnung und wendet vorhandene Rabatte an. Sie können die anteiligen Posten auf der erzeugten Rechnung nicht weiter rabattieren.

Gutscheine auf Abonnements anwenden

Nachdem Sie Gutscheine erstellt haben, erstellen Sie einen Rabatt, indem Sie sie auf ein Abonnement anwenden. Sie können den Gutschein anwenden, wenn Sie das Abonnement erstellen oder indem Sie das bestehende Abonnement eines Kunden/einer Kundin aktualisieren.

Auch wenn für Kundinnen/Kunden keine gespeicherte Zahlungsmethode vorhanden ist, können Sie ein Abo erstellen, sofern nach Anwendung von Gutscheinen keine sofortige Zahlung erforderlich ist.

Gutscheine auf Checkout anwenden

Sie können Gutscheine auf Checkout-Sitzungen anwenden, indem Sie den discounts-Parameter in der API einrichten. Um Sitzungen mit angewendeten Rabatt zu erstellen, übergeben Sie die Gutschein-ID in dem Parameter coupon an das Array discounts.

curl https://api.stripe.com/v1/checkout/sessions \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"=card \
  -d "line_items[][price]"=
"{{PRICE_ID}}" \
  -d "line_items[][quantity]"=1 \
  -d mode=subscription \
  -d "discounts[][coupon]"="{{COUPON_ID}}" \
  -d success_url="https://example.com/success" \

Verwenden Sie Stripe Elements und die Checkout Sessions API, um eine Checkout-Seite als Teil einer vollständig angepassten Abo-Integration zu erstellen.

Um ein Abonnement einzurichten, müssen Sie Kund/in erstellen. Sie können Adress- und Zahlungsdaten mit dem Express Checkout Element erfassen. Anschließend können Sie diese Informationen verwenden, um das Abo mit der Checkout Sessions API zu erstellen.

Stripe einrichten

Installieren Sie den Stripe-Client Ihrer Wahl:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Installieren Sie dann die Stripe-CLI. Mit der Stripe-CLI können Sie Webhooks testen und Stripe-APIs aufrufen. In diesem Leitfaden wird erklärt, wie Sie mithilfe der CLI ein Preismodell einrichten können.

# Install Homebrew to run this command: https://brew.sh/
brew install stripe/stripe-cli/stripe

# Connect the CLI to your dashboard
stripe login

Weitere Installationsoptionen finden Sie unter Mit der Stripe-CLI loslegen.

Kundin/Kunden erstellen

Stripe benötigt für jedes Abonnement eine/einen Kundin/Kunden. Erfassen Sie im Frontend Ihrer Anwendung alle benötigten Informationen von Ihren Nutzerinnen/Nutzern und übergeben Sie diese ans Backend.

Wenn Sie Adressdaten erfassen müssen, können Sie mit dem Adresselement eine Liefer- oder Rechnungsadresse für Ihre Kundinnen und Kunden erfassen. Weitere Informationen zum Adresselement finden Sie auf der Seite Adresselement.

<form id="signup-form">
  <label>
    Email
    <input id="email" type="email" placeholder="Email address" value="test@example.com" required />
  </label>

  <button type="submit">
    Register
  </button>
</form>

const emailInput = document.querySelector('#email');

fetch('/create-customer', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: emailInput.value,
  }),
}).then(r => r.json());

Erstellen Sie das Stripe Customer-Objekt auf dem Server.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d email={{CUSTOMER_EMAIL}} \
  -d name={{CUSTOMER_NAME}} \
  -d "shipping[address][city]"=Brothers \
  -d "shipping[address][country]"=US \
  -d "shipping[address][line1]"="27 Fredrick Ave" \
  -d "shipping[address][postal_code]"=97712 \
  -d "shipping[address][state]"=CA \
  -d "shipping[name]"={{CUSTOMER_NAME}} \
  -d "address[city]"=Brothers \
  -d "address[country]"=US \
  -d "address[line1]"="27 Fredrick Ave" \
  -d "address[postal_code]"=97712 \
  -d "address[state]"=CA

Zahlungsmethoden aktivieren

Standardmäßig verwendet Stripe Ihre Zahlungsmethodeneinstellungen, um zu bestimmen, welche Zahlungsmethoden im Express Checkout Element aktiviert sind. Sie können auch bestimmte Zahlungsmethoden in Ihrer Checkout-Sitzung mit dem Attribut payment_method_types konfigurieren.

Unterstützte Zahlungsmethoden

Apple Pay und Google Pay sind automatisch aktiviert, wenn der Zahlungsmethodentyp card verwendet wird. Wenn Sie Link verwenden, müssen Sie auch den Zahlungsmethodentyp card übergeben.

Checkout-Sitzung erstellen

Definieren Sie im Backend Ihrer Anwendung einen Endpoint, der die Sitzung erstellt, die Ihr Frontend aufrufen kann. Sie benötigen die Preis-ID des Abos, das der/die Kunde/Kundin abschließt – Ihr Frontend übergibt diesen Wert.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer={{CUSTOMER_ID}} \
  -d ui_mode=custom \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d return_url={{RETURN_URL}} \
  -d mode=subscription

Checkout initialisieren

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}

<div id="checkout-container"></div>

Testzeitraum einrichten

Um einen kostenlosen 7-tägigen Testzeitraum für Ihren Dienst anzubieten, übergeben Sie beim Erstellen der Checkout-Sitzung trial_period_days.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer={{CUSTOMER_ID}} \
  -d ui_mode=custom \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d return_url={{RETURN_URL}} \
  -d mode=subscription \
  -d "subscription_data[trial_period_days]"=7

Stripe Elements einrichten

<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckout({
  clientSecret
});

Erstellen und verbinden Sie das Express Checkout Element

Ein Express Checkout Element enthält ein iframe, dass die Zahlungsdaten über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlvorgangseite muss ebenfalls mit https://, beginnen, nicht mit http://, damit Ihre Integration funktioniert.

<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>

// Create and mount the Express Checkout Element
const expressCheckoutElement = checkout.createExpressCheckoutElement();
expressCheckoutElement.mount('#express-checkout-element');

Kundendaten erfassen und Einzelposten anzeigen

Die auf dem Server erstellte Checkout-Sitzung ermittelt automatisch die Posten, den Gesamtbetrag und die verfügbaren Zahlungsmethoden. Das Express Checkout Element verwendet diese Informationen, um die entsprechende Oberfläche anzuzeigen.

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  expressCheckoutElement.on('confirm', (event) => {
    loadActionsResult.actions.confirm({expressCheckoutConfirmEvent: event});
  });
}

expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: event.address
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: event.shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

Zahlung übermitteln

<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

Um Ihre Backend-Logik einzurichten, müssen Sie einen Endpoint einrichten, der die von Stripe gesendeten Webhook Ereignisse überwachen kann. Diese Ereignisse werden immer dann ausgelöst, wenn sich der Status in Stripe ändert, z. B. wenn für Abonnements neue Rechnungen erstellt werden. Richten Sie in Ihrer Anwendung einen HTTP-Handler ein, der eine POST-Anfrage akzeptiert, die das Webhook-Ereignis enthält, und überprüfen Sie die Signatur des Ereignisses.

Verwenden Sie während der Entwicklung die Registerkarte Ereignisse in Workbench, um Ereignisse zu überwachen und zu filtern.

Für die Produktionsphase können Sie eine Webhook-Endpoint-URL über das Dashboard oder mit der Webhook Endpoints API einrichten.

Weitere Informationen zu abonnementspezifischen Webhooks finden Sie unter Abonnement-Ereignisse.

Gewähren Sie Ihren Kundinnen und Kunden nach erfolgreicher Zahlung Zugriff auf Ihre Dienstleistung. In den meisten Fällen können Sie Ihnen Zugriff auf Ihre Dienstleistung gewähren, wenn Folgendes zutrifft:

• Sie erhalten das Ereignis invoice.paid.
• Der Status des Abos ist active. Sie können den Status auf der Seite Abonnements im Dashboard oder über die API zum Abrufen des Abos und Überprüfen des Status überprüfen.

Weitere Informationen zu Abo-spezifischen Webhooks, Abonnement-Ereignissen.

Testen Sie Ihre Integration, bevor Sie live gehen.

1. Öffnen Sie im Dashboard Ihre Kontoeinstellungen.
2. Geben Sie Ihren Unternehmenstyp, Ihre Steuerangaben, Ihre Unternehmensdaten, Ihre persönlichen Verifizierungsinformationen und Ihre Informationen für die Kundschaft (z. B. eine Zahlungsbeschreibung in der Abrechnung) ein.
3. Fügen Sie Bankdaten hinzu, um zu bestätigen, wo Ihr Geld ausgezahlt wird.
4. Richten Sie die Zwei-Schritte-Authentifizierung zum Schutz Ihres Kontos ein.
5. Optional können Sie automatischem Steuereinzug oder umsatzbasierte Klimaspenden hinzufügen.
6. Prüfen Sie die eingegebenen Informationen und klicken Sie auf Zustimmen und absenden.
7. Nachdem Sie Ihr Profil aktiviert haben, aktualisiert Stripe Sie vom Sandbox-Modus in den Live-Modus.

Erfahren Sie mehr über die Aktivierung Ihres Stripe-Kontos.