> ## 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

> Utforska Atlas, en fullt fungerande AI-konstgenereringsdemonstrationsapplikation som visar användningsbaserad fakturering, prenumerationer och engångsbetalningar med Dodo Payments kassa integration.

<Frame>
  <img alt="Atlas Demo Product - AI-konstgenereringsplattform med integrerad fakturering" 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 är en fullt fungerande demonstrationsapplikation från Dodo Payments som visar en AI-konstgenereringsplattform. Den demonstrerar alla tre faktureringsmodeller—**användningsbaserad fakturering**, **engångsbetalningar** och **prenumerationer**—med integrerade kassa-flöden.

<Info>
  **Live Demo**: Besök [atlas.dodopayments.com](https://atlas.dodopayments.com/) för att utforska plattformen och testa alla faktureringsflöden.
</Info>

## Översikt

Atlas simulerar en verklig AI-konstgenereringsplattform där användare skapar bilder från textprompter. Demon framhäver tre distinkta köpflöden, var och en som visar olika faktureringsmodeller och kassaupplevelser:

* **Användningsbaserad fakturering**: Betala per genererad bild (\$0.75 per bild)
* **Prenumeration**: Obegränsad Pro-plan (\$20/månad)
* **Engångsköp**: Kreditpaket (\$7 för 10 krediter)

Efter att ha slutfört ett köp omdirigeras användarna till **Atlas Studio dashboard** där de kan generera konstverk och spåra sin användning i realtid.

## Köpflöden

Atlas demonstrerar tre separata faktureringsflöden. Varje flöde följer ett liknande mönster men visar olika kassaupplevelser och faktureringsmodeller.

<Tabs>
  <Tab title="Användningsbaserad fakturering">
    <Steps>
      <Step title="Välj betalning per bild-prissättning">
        Välj **betalning per bild**-alternativet (\$0.75 per bild) för AI-konstgenerering. Detta demonstrerar användningsbaserad fakturering där kunder betalar endast för det de konsumerar.
      </Step>

      <Step title="Generera konstverk">
        Ange en textprompt och generera en bild. Systemet spårar automatiskt användningen för faktureringsändamål.
      </Step>

      <Step title="Slutför kassan">
        Kassa-processen inkluderar:

        * **Märkt kassa-sida**: Dodo Payments kassa-sida visar ditt varumärkes namn och logotyp
        * **Kundinformation**: Ange användardetaljer och faktureringsadress
        * **Skatteberäkning**: Skatter beräknas automatiskt efter adressbekräftelse
        * **Betalning**: Ange testkortdetaljer för att slutföra transaktionen

        <Tip>
          Använd testkort `4242 4242 4242 4242` med ett framtida utgångsdatum och CVC för att simulera framgångsrika transaktioner.
        </Tip>
      </Step>

      <Step title="Visa bekräftelse">
        Efter betalning visar Atlas en bekräftelseskärm med användningsdetaljer och återstående krediter.
      </Step>

      <Step title="Åtkomst till dashboard">
        Användare omdirigeras tillbaka till **Atlas Studio dashboard** där de kan fortsätta generera konstverk och övervaka sin användning.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Prenumeration">
    <Steps>
      <Step title="Välj prenumerationsplan">
        Välj **Obegränsad Pro** prenumerationsplan (\$20/månad) för obegränsad AI-konstgenerering.
      </Step>

      <Step title="Generera konstverk">
        Ange en prompt och generera en bild för att testa plattformen innan du prenumererar.
      </Step>

      <Step title="Slutför kassan">
        Prenumerationskassan inkluderar:

        * **Märkt kassa-sida**: Varumärkesprofilen är synlig under hela kassa-processen
        * **Kundinformation**: Ange användardetaljer och faktureringsadress
        * **Skatteberäkning**: Automatisk skatteberäkning baserat på faktureringsadress
        * **Betalning**: Ange testkortdetaljer för att aktivera prenumerationen

        <Note>
          Prenumerationer förnyas automatiskt varje månad. Användare kan hantera sin prenumeration från dashboarden efter köp.
        </Note>
      </Step>

      <Step title="Visa bekräftelse">
        Efter betalning visar Atlas en bekräftelseskärm med detaljer om prenumerationsaktivering och nästa faktureringsdatum.
      </Step>

      <Step title="Åtkomst till dashboard">
        Användare omdirigeras till **Atlas Studio dashboard** med obegränsad åtkomst för att generera konstverk.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Engångsköp">
    <Steps>
      <Step title="Välj kreditpaket">
        Välj ett **Kreditpaket** (\$7 för 10 krediter) för AI-konstgenerering. Detta demonstrerar engångsköpstransaktioner.
      </Step>

      <Step title="Generera konstverk">
        Ange en prompt och generera en bild för att förhandsgranska plattformen innan du köper krediter.
      </Step>

      <Step title="Slutför kassan">
        Engångsköpets kassa inkluderar:

        * **Märkt kassa-sida**: Dodo Payments kassa med varumärkesprofil
        * **Kundinformation**: Ange användardetaljer och faktureringsadress
        * **Skatteberäkning**: Automatisk skatteberäkning efter adressbekräftelse
        * **Betalning**: Ange testkortdetaljer för att slutföra köpet
      </Step>

      <Step title="Visa bekräftelse">
        Efter betalning visar Atlas en bekräftelseskärm med ett "tack"-meddelande och detaljer om köpta krediter.
      </Step>

      <Step title="Åtkomst till dashboard">
        Användare omdirigeras till **Atlas Studio dashboard** där deras köpta krediter omedelbart är tillgängliga för att generera konstverk.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Dashboard-upplevelse efter köp

Atlas Studio dashboard demonstrerar hur man implementerar faktureringsmedvetna funktioner och rättighetsövervakning efter att kassan har slutförts.

### Dashboard-funktioner

* **Omedelbar åtkomst**: Användare kan börja generera konstverk omedelbart efter köp
* **Användningstracking**: Realtidsvisning av återstående krediter, aktiva prenumerationer och generationshistorik
* **Fakturahantering**: Visa köphistorik, prenumerationsstatus och kommande förnyelser
* **Sömlös integration**: Visar hur man omdirigerar användare tillbaka till din applikation med korrekt rättighetsövervakning

<Check>
  Dashboard-upplevelsen demonstrerar bästa praxis för användarflöden efter köp, inklusive rättighetsverifiering och användningsövervakning.
</Check>

## Teknisk implementering

Atlas är byggd med [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript), vilket demonstrerar hur man integrerar faktureringsflöden med bara några rader kod.

<CardGroup cols={2}>
  <Card title="Integrationsguide" icon="book" href="/developer-resources/integration-guide">
    Lär dig hur du integrerar Dodo Payments kassa-flöden i din applikation.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    Utforska dokumentationen och API-referensen för TypeScript SDK.
  </Card>
</CardGroup>

## Öppen källkod

Atlas är ett open-source-projekt. Utforska kodbasen för att se hur faktureringsflöden implementeras i en verklig applikation.

<Card title="Visa på GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  Bläddra i Atlas källkod och lär dig av implementeringen.
</Card>