> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Atlas Demo Produkt

> Erkunden Sie Atlas, eine voll funktionsfähige Demo-Anwendung zur KI-Kunstgenerierung, die nutzungsbasierte Abrechnung, Abonnements und Einmalzahlungen mit Dodo Payments Checkout-Integration zeigt.

<Frame>
  <img alt="Atlas Demo-Produkt - KI-Kunstgenerierungsplattform mit integrierter Abrechnung" src="https://mintcdn.com/dodopayments/kx9B5HGzBgLxFWey/images/atlas/atlas-demo-product.png?fit=max&auto=format&n=kx9B5HGzBgLxFWey&q=85&s=df07b04779a208c9e7a6a81e19c97f58" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1556" data-path="images/atlas/atlas-demo-product.png" />
</Frame>

Atlas ist eine voll funktionsfähige Demo-Anwendung von Dodo Payments, die eine KI-Kunstgenerierungsplattform präsentiert. Sie demonstriert alle drei Abrechnungsmodelle—**nutzungsbasierte Abrechnung**, **Einmalzahlungen** und **Abonnements**—mit integrierten Checkout-Prozessen.

<Info>
  **Live-Demo**: Besuche [atlas.dodopayments.com](https://atlas.dodopayments.com/), um die Plattform zu erkunden und alle Abrechnungsabläufe zu testen.
</Info>

## Übersicht

Atlas simuliert eine reale KI-Kunstgenerierungsplattform, auf der Benutzer Bilder aus Textaufforderungen erstellen. Die Demo hebt drei verschiedene Kaufabläufe hervor, die jeweils unterschiedliche Abrechnungsmodelle und Checkout-Erfahrungen demonstrieren:

* **Nutzungsbasierte Abrechnung**: Zahlung pro generiertem Bild (0,75 \$ pro Bild)
* **Abonnement**: Unbegrenzter Pro-Plan (20 \$/Monat)
* **Einmaliger Kauf**: Kreditpakete (7 \$ für 10 Credits)

Nach Abschluss eines Kaufs werden die Benutzer zum **Atlas Studio Dashboard** weitergeleitet, wo sie Kunstwerke generieren und ihre Nutzung in Echtzeit verfolgen können.

## Kaufabläufe

Atlas demonstriert drei separate Abrechnungsflüsse. Jeder Fluss folgt einem ähnlichen Muster, zeigt jedoch unterschiedliche Checkout-Erfahrungen und Abrechnungsmodelle.

<Tabs>
  <Tab title="Usage-Based Billing">
    <Steps>
      <Step title="Select pay-per-image pricing">
        Wähle die **Pay-per-Image**-Option (0,75 \$ pro Bild) für die KI-Kunstgenerierung. Dies demonstriert nutzungsbasierte Abrechnung, bei der Kund:innen nur für das bezahlen, was sie verbrauchen.
      </Step>

      <Step title="Generate artwork">
        Gib einen Texteingabeaufforderung ein und generiere ein Bild. Das System verfolgt automatisch die Nutzung für Abrechnungszwecke.
      </Step>

      <Step title="Complete checkout">
        Der Bezahlvorgang umfasst:

        * **Marken-Checkout-Seite**: Die Dodo Payments-Checkout-Seite zeigt den Markennamen und das Logo Ihres Unternehmens an
        * **Kundeninformationen**: Geben Sie Benutzerdaten und Rechnungsadresse ein
        * **Steuerberechnung**: Steuern werden automatisch nach Bestätigung der Adresse berechnet
        * **Zahlung**: Geben Sie Testkartendaten ein, um die Transaktion abzuschließen

        <Tip>
          Verwende die Testkarte `4242 4242 4242 4242` mit einem beliebigen zukünftigen Ablaufdatum und CVC, um erfolgreiche Transaktionen zu simulieren.
        </Tip>
      </Step>

      <Step title="View confirmation">
        Nach der Zahlung zeigt Atlas einen Bestätigungsbildschirm mit Nutzungsdetails und verbleibenden Guthaben an.
      </Step>

      <Step title="Access dashboard">
        Nutzer:innen werden zurück zum **Atlas Studio Dashboard** geleitet, wo sie weiterhin Kunstwerke generieren und ihre Nutzungsverfolgung überwachen können.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select subscription plan">
        Wähle den **Unlimited Pro**-Abonnementplan (20 \$/Monat) für unbegrenzte KI-Kunstgenerierung.
      </Step>

      <Step title="Generate artwork">
        Gib eine Aufforderung ein und generiere ein Bild, um die Plattform vor dem Abschluss eines Abonnements zu testen.
      </Step>

      <Step title="Complete checkout">
        Der Abonnement-Checkout beinhaltet:

        * **Marken-Checkout-Seite**: Die Markenidentität des Händlers ist während des gesamten Checkout-Prozesses sichtbar
        * **Kundeninformationen**: Geben Sie Benutzerdaten und Rechnungsadresse ein
        * **Steuerberechnung**: Automatische Steuerberechnung basierend auf der Rechnungsadresse
        * **Zahlung**: Geben Sie Testkartendaten ein, um das Abonnement zu aktivieren

        <Note>
          Abonnements verlängern sich automatisch monatlich. Nutzer:innen können ihr Abonnement nach dem Kauf im Dashboard verwalten.
        </Note>
      </Step>

      <Step title="View confirmation">
        Nach der Zahlung zeigt Atlas einen Bestätigungsbildschirm mit Informationen zur Aktivierung des Abonnements und dem nächsten Abrechnungsdatum an.
      </Step>

      <Step title="Access dashboard">
        Nutzer:innen werden zum **Atlas Studio Dashboard** weitergeleitet und haben unbegrenzten Zugriff, um Kunstwerke zu erstellen.
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select credit pack">
        Wähle ein **Credit Pack** (7 \$ für 10 Credits) für die KI-Kunstgenerierung. Dies demonstriert Einmalkäufe.
      </Step>

      <Step title="Generate artwork">
        Gib eine Aufforderung ein und generiere ein Bild, um die Plattform vor dem Kauf von Credits zu testen.
      </Step>

      <Step title="Complete checkout">
        Der Checkout für Einmalkäufe beinhaltet:

        * **Markenseitige Checkout-Seite**: Dodo Payments Checkout mit Händler:innenbranding
        * **Kundeninformationen**: Gib Nutzerdaten und Rechnungsadresse ein
        * **Steuerberechnung**: Automatische Steuerberechnung nach Bestätigung der Adresse
        * **Zahlung**: Gib Testkartendaten ein, um den Kauf abzuschließen
      </Step>

      <Step title="View confirmation">
        Nach der Zahlung zeigt Atlas einen Bestätigungsbildschirm mit einer Dankeschön-Nachricht und Details zu den erworbenen Credits an.
      </Step>

      <Step title="Access dashboard">
        Nutzer:innen werden zum **Atlas Studio Dashboard** weitergeleitet, wo die gekauften Credits sofort zum Erstellen von Kunstwerken bereitstehen.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Dashboard-Erlebnis nach dem Kauf

Das Atlas Studio Dashboard demonstriert, wie man abrechnungsbewusste Funktionen und Berechtigungsverfolgung nach Abschluss des Checkouts implementiert.

### Dashboard-Funktionen

* **Sofortiger Zugang**: Benutzer können sofort nach dem Kauf mit der Generierung von Kunstwerken beginnen
* **Nutzungsverfolgung**: Echtzeit-Anzeige der verbleibenden Credits, aktiven Abonnements und Generierungshistorie
* **Abrechnungsmanagement**: Kaufhistorie, Abonnementstatus und bevorstehende Erneuerungen einsehen
* **Nahtlose Integration**: Zeigt, wie Benutzer mit ordnungsgemäßer Berechtigungsverfolgung zurück zu Ihrer Anwendung umgeleitet werden können

<Check>
  Die Dashboard-Erfahrung zeigt Best Practices für Post-Purchase-User-Flows, einschließlich Berechtigungsüberprüfung und Nutzungsüberwachung.
</Check>

## Technische Implementierung

Atlas ist mit dem [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript) erstellt, das zeigt, wie man Abrechnungsflüsse mit nur wenigen Codezeilen integriert.

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Erfahre, wie du Dodo Payments Checkout-Flows in deine Anwendung integrierst.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    Erkunde die TypeScript-SDK-Dokumentation und die API-Referenz.
  </Card>
</CardGroup>

## Open Source

Atlas ist ein Open-Source-Projekt. Erkunden Sie den Code, um zu sehen, wie Abrechnungsflüsse in einer realen Anwendung implementiert sind.

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  Durchstöbere den Atlas-Quellcode und lerne aus der Implementierung.
</Card>