Abrechnungsübersicht

Erfahren Sie, wie Sie Abonnements und Abrechnung in Ihrer Anwendung verwalten.

Hinweis: Dies sind Beispiel- bzw. Platzhalterinhalte zu Demonstrationszwecken.

Das Abrechnungssystem unterstützt abonnementbasierte Preismodelle mit mehreren Stufen und Zahlungsanbietern.

Unterstützte Anbieter

Stripe

Branchenübliche Zahlungsabwicklung mit umfassendem Funktionsumfang:

  • Kreditkartenzahlungen
  • Abonnementverwaltung
  • Rechnungserstellung
  • Steuerberechnung
  • Kundenportal

Paddle

Merchant-of-Record-Lösung, die Folgendes übernimmt:

  • Globale Steuer-Compliance
  • Zahlungsabwicklung
  • Abonnementabrechnung
  • Umsatzrückgewinnung

Abonnementstufen

Definieren Sie Ihre Abonnementstufen in der Abrechnungskonfiguration:

export const plans = [
  {
    id: 'free',
    name: 'Free',
    price: 0,
    features: ['Feature 1', 'Feature 2'],
  },
  {
    id: 'pro',
    name: 'Professional',
    price: 29,
    interval: 'month',
    features: ['All Free features', 'Feature 3', 'Feature 4'],
  },
  {
    id: 'enterprise',
    name: 'Enterprise',
    price: 99,
    interval: 'month',
    features: ['All Pro features', 'Feature 5', 'Priority support'],
  },
];

Lebenszyklus eines Abonnements

  1. Kunde wählt einen Plan – Der Nutzer wählt eine Abonnementstufe
  2. Zahlung wird verarbeitet – Der Anbieter übernimmt den Zahlungseinzug
  3. Webhook wird empfangen – Ihre App erhält eine Bestätigung
  4. Abonnement wird aktiviert – Der Nutzer erhält Zugriff auf die Funktionen
  5. Wiederkehrende Abrechnung – Automatische Verlängerung in jedem Zeitraum
  6. Kündigung – Der Nutzer kann jederzeit kündigen

Abonnements verwalten

Ein Abonnement erstellen

import { createCheckoutSession } from '~/lib/billing/checkout';

const session = await createCheckoutSession({
  accountId: user.accountId,
  planId: 'pro',
  returnUrl: '/dashboard',
});

// Nutzer zur Zahlungsseite weiterleiten
redirect(session.url);

Abonnementstatus prüfen

import { getSubscription } from '~/lib/billing/subscription';

const subscription = await getSubscription(accountId);

if (subscription.status === 'active') {
  // Nutzer hat ein aktives Abonnement
}

Ein Abonnement kündigen

import { cancelSubscription } from '~/lib/billing/subscription';

await cancelSubscription(subscriptionId);

Verarbeitung von Webhooks

Webhooks benachrichtigen Ihre Anwendung über Abrechnungsereignisse:

export async function POST(request: Request) {
  const signature = request.headers.get('stripe-signature');
  const payload = await request.text();

  const event = stripe.webhooks.constructEvent(
    payload,
    signature,
    process.env.STRIPE_WEBHOOK_SECRET
  );

  switch (event.type) {
    case 'customer.subscription.created':
      await handleSubscriptionCreated(event.data.object);
      break;
    case 'customer.subscription.updated':
      await handleSubscriptionUpdated(event.data.object);
      break;
    case 'customer.subscription.deleted':
      await handleSubscriptionCanceled(event.data.object);
      break;
  }

  return new Response('OK');
}

Testen

Verwenden Sie für die Entwicklung Zugangsdaten im Testmodus:

  • Testkarte: 4242 4242 4242 4242
  • Ein beliebiges Ablaufdatum in der Zukunft
  • Ein beliebiger CVC

Alle Testtransaktionen erscheinen im Test-Dashboard Ihres Anbieters.