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

> Explore Atlas, an open-source AI art generation demo that runs prepaid credits, credit-based plans, subscriptions, and one-time purchases on Dodo Payments checkout.

<Frame>
  <img alt="Atlas Demo Product - AI art generation platform with integrated billing" 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 is a working demo application by Dodo Payments: an AI art generation platform where every purchase flow runs on Dodo Payments checkout in test mode. It shows **credit-based billing**, **subscriptions**, and **one-time payments** from plan selection to the post-purchase dashboard.

<Info>
  **Live Demo**: Visit [atlas.dodopayments.com](https://atlas.dodopayments.com/) to explore the platform and test every billing flow.
</Info>

## Overview

Atlas simulates an AI art generation platform where users create images from text prompts. Its **Pricing** page offers four plans, each a different billing model:

* **Starter Credits** (prepaid credits): \$10 for 10 credits that never expire.
* **Credit Pack** (credit-based subscription): \$10 per month for 25 credits per month, with 50% credit rollover and low-balance alerts.
* **Unlimited Pro** (subscription): \$20 per month for unlimited image generation.
* **Special Downloads** (one-time purchase): \$12 for a pack of 12 artworks.

Yearly billing lowers the Credit Pack to \$8 per month and Unlimited Pro to \$16 per month. A **Checkout Mode** selector on the Pricing page opens checkout as a redirect, an overlay, or inline on the page.

After a purchase, signed-in users land on the **Atlas Studio dashboard**, where they generate artwork and track their credits or plan status.

## Purchase Flows

The three flows follow the same pattern. Each one uses a different billing model and product type.

<Tabs>
  <Tab title="Credit-Based Billing">
    <Steps>
      <Step title="Select the Credit Pack">
        On the **Pricing** page, click **Buy credits** on the **Credit Pack** plan (\$10 per month for 25 credits). Each image a customer generates uses credits from a monthly allowance, and unused credits partly roll over.
      </Step>

      <Step title="Sign In or Continue as a Guest">
        Atlas asks whether to sign in, which saves the purchase to an account, or to continue as a guest.
      </Step>

      <Step title="Complete Checkout">
        The checkout process includes:

        * **Branded checkout page**: The Dodo Payments checkout page shows the merchant's brand name and logo.
        * **Customer information**: The customer enters their details and billing address.
        * **Tax calculation**: Tax is calculated after the customer confirms their address.
        * **Payment**: The customer enters test card details to complete the transaction.

        <Tip>
          Use test card `4242 4242 4242 4242` with expiry `06/32` and CVV `123` to simulate a successful payment. See [Testing Process](/miscellaneous/testing-process) for more test cards.
        </Tip>
      </Step>

      <Step title="View Confirmation">
        After the payment succeeds, Atlas confirms the purchase. A signed-in user goes to the dashboard. A guest sees a payment summary with the plan and payment status.
      </Step>

      <Step title="Access Dashboard">
        Signed-in users land on the **Atlas Studio dashboard**, which shows the credits left this month and deducts credits as they generate artwork.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select Subscription Plan">
        On the **Pricing** page, click **Get started** on the **Unlimited Pro** plan (\$20 per month) for unlimited AI art generation.
      </Step>

      <Step title="Sign In or Continue as a Guest">
        Atlas asks whether to sign in, which saves the purchase to an account, or to continue as a guest.
      </Step>

      <Step title="Complete Checkout">
        The subscription checkout includes:

        * **Branded checkout page**: Merchant branding appears throughout checkout.
        * **Customer information**: The customer enters their details and billing address.
        * **Tax calculation**: Tax is calculated from the billing address.
        * **Payment**: The customer enters test card details to start the subscription.

        <Note>
          The subscription renews automatically at the end of each billing period, monthly or yearly.
        </Note>
      </Step>

      <Step title="View Confirmation">
        After the payment succeeds, Atlas confirms the subscription. A guest sees a payment summary with the plan and payment status.
      </Step>

      <Step title="Access Dashboard">
        Signed-in users land on the **Atlas Studio dashboard** with unlimited image generation.
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select a One-Time Plan">
        On the **Pricing** page, choose **Starter Credits** (\$10 for 10 credits that never expire) and click **Buy credits**, or choose **Special Downloads** (\$12 for 12 artworks) and click **Get Art Pack**. Each is a single payment with no renewal.
      </Step>

      <Step title="Sign In or Continue as a Guest">
        Atlas asks whether to sign in, which saves the purchase to an account, or to continue as a guest.
      </Step>

      <Step title="Complete Checkout">
        The one-time purchase checkout includes:

        * **Branded checkout page**: Dodo Payments checkout with the merchant's branding.
        * **Customer information**: The customer enters their details and billing address.
        * **Tax calculation**: Tax is calculated after the customer confirms their address.
        * **Payment**: The customer enters test card details to complete the purchase.
      </Step>

      <Step title="View Confirmation">
        After the payment succeeds, Atlas confirms the purchase. A guest sees a payment summary with the plan and payment status.
      </Step>

      <Step title="Access Dashboard">
        Signed-in users land on the **Atlas Studio dashboard**. Starter Credits are available to generate artwork as soon as the payment succeeds.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Post-Purchase Dashboard Experience

The Atlas Studio dashboard shows how to build billing-aware features after checkout: it reads what the customer bought and unlocks the matching access.

### Dashboard Features

* **Immediate access**: Users start generating artwork right after the purchase.
* **Usage tracking**: The dashboard shows the credits left on credit plans, or unlimited status on Unlimited Pro, next to the images the user generated.
* **Plan status**: The dashboard names the active plan, such as **Unlimited Pro (Subscription)** or **Credit Pack (Credit-Based)**.
* **Return to your app**: The flow shows how to send customers back to your application after checkout and grant the access they paid for.

<Check>
  The dashboard follows good practice for post-purchase flows: it verifies the purchase before it grants access, and it shows usage in the app.
</Check>

## Technical Implementation

Atlas is a Next.js application. Its route handlers call the Dodo Payments API directly, for example `POST /checkouts` to create a checkout session, and the `dodopayments-checkout` package opens checkout as an overlay or inline on the page. To build the same flows with a typed client, use the [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript).

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Integrate Dodo Payments checkout flows into your application.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    TypeScript SDK documentation and API reference.
  </Card>
</CardGroup>

## Open Source

Atlas is open source. Read the code to see how each billing flow is implemented in a real application.

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  Browse the Atlas source code.
</Card>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.