> ## 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 演示产品

> 探索 Atlas，一个功能齐全的 AI 艺术生成演示应用程序，展示基于使用的计费、订阅和一次性付款与 Dodo Payments 结账集成。

<Frame>
  <img alt="Atlas 演示产品 - 集成计费的 AI 艺术生成平台" 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 是 Dodo Payments 提供的一个功能齐全的演示应用程序，展示了一个 AI 艺术生成平台。它展示了三种计费模型——**基于使用的计费**、**一次性付款**和 **订阅**——并集成了结账流程。

<Info>
  **实时演示**：访问 [atlas.dodopayments.com](https://atlas.dodopayments.com/) 探索该平台并测试所有计费流程。
</Info>

## 概述

Atlas 模拟了一个真实的 AI 艺术生成平台，用户可以根据文本提示创建图像。该演示突出了三种不同的购买流程，每种流程展示了不同的计费模型和结账体验：

* **基于使用的计费**：按生成的图像付费（每张图像 \$0.75）
* **订阅**：无限制专业计划（\$20/月）
* **一次性购买**：信用包（\$7 购买 10 个信用）

完成任何购买后，用户将被重定向到 **Atlas Studio 仪表板**，在这里他们可以实时生成艺术作品并跟踪使用情况。

## 购买流程

Atlas 演示了三种独立的计费流程。每个流程遵循类似的模式，但展示了不同的结账体验和计费模型。

<Tabs>
  <Tab title="Usage-Based Billing">
    <Steps>
      <Step title="Select pay-per-image pricing">
        选择 **按图像付费** 选项（每张图像 \$0.75）用于 AI 艺术生成。这演示了基于使用的计费，客户仅为其使用的部分付费。
      </Step>

      <Step title="Generate artwork">
        输入文本提示并生成图像。系统会自动跟踪用于计费的使用情况。
      </Step>

      <Step title="Complete checkout">
        结账流程包括：

        * **品牌结账页面**：Dodo Payments 结账页面显示您的商家品牌名称和徽标
        * **客户信息**：输入用户详细信息和账单地址
        * **税费计算**：在确认地址后自动计算税费
        * **付款**：输入测试卡信息以完成交易

        <Tip>
          使用测试卡 `4242 4242 4242 4242`，任意未来到期日期和 CVC，以模拟成功交易。
        </Tip>
      </Step>

      <Step title="View confirmation">
        付款后，Atlas 显示带有使用详情和剩余额度的确认页面。
      </Step>

      <Step title="Access dashboard">
        用户会被重定向回 **Atlas Studio 仪表板**，在此他们可以继续生成艺术作品并监控使用情况。
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select subscription plan">
        选择 **无限专业版** 订阅计划（\$20/月）以获得无限制的 AI 艺术生成。
      </Step>

      <Step title="Generate artwork">
        在订阅前，输入提示并生成图像以测试该平台。
      </Step>

      <Step title="Complete checkout">
        订阅结账包括：

        * **品牌结账页面**：在整个结账过程中可见商家品牌
        * **客户信息**：输入用户详细信息和账单地址
        * **税费计算**：根据账单地址自动计算税费
        * **付款**：输入测试卡信息以激活订阅

        <Note>
          订阅会自动按月续订。用户可在购买后从仪表板管理订阅。
        </Note>
      </Step>

      <Step title="View confirmation">
        付款后，Atlas 显示带有订阅激活详情和下次计费日期的确认页面。
      </Step>

      <Step title="Access dashboard">
        用户被重定向至 **Atlas Studio 仪表板**，享有无限制访问以生成艺术作品。
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select credit pack">
        选择 **积分包**（10 积分 \$7）用于 AI 艺术生成。这演示了一次性购买交易。
      </Step>

      <Step title="Generate artwork">
        输入提示并生成图像以在购买积分前预览该平台。
      </Step>

      <Step title="Complete checkout">
        一次性购买结账包括：

        * **品牌结账页**：采用商户品牌的 Dodo Payments 结账页
        * **客户信息**：输入用户详细信息和账单地址
        * **税费计算**：地址确认后自动计算税费
        * **付款**：输入测试卡详情完成购买
      </Step>

      <Step title="View confirmation">
        付款后，Atlas 显示带有“感谢”信息和购买积分详情的确认页面。
      </Step>

      <Step title="Access dashboard">
        用户被重定向至 **Atlas Studio 仪表板**，其购买的积分即可用于生成艺术作品。
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 购买后的仪表板体验

Atlas Studio 仪表板展示了如何在结账完成后实现计费感知功能和权利跟踪。

### 仪表板功能

* **即时访问**：用户可以在购买后立即开始生成艺术作品
* **使用跟踪**：实时显示剩余信用、活跃订阅和生成历史
* **计费管理**：查看购买历史、订阅状态和即将到期的续订
* **无缝集成**：展示如何将用户正确重定向回您的应用程序，并进行适当的权利跟踪

<Check>
  仪表板体验展示了购买后用户流程的最佳实践，包括权限验证和使用监控。
</Check>

## 技术实现

Atlas 使用 [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript) 构建，展示了如何用几行代码集成计费流程。

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    了解如何将 Dodo Payments 结账流程集成到您的应用中。
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    探索 TypeScript SDK 文档和 API 参考。
  </Card>
</CardGroup>

## 开源

Atlas 是一个开源项目。探索代码库，了解如何在真实应用程序中实现计费流程。

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  浏览 Atlas 源代码并从实现中学习。
</Card>