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

# Sản phẩm Demo Atlas

> Khám phá Atlas, một ứng dụng demo tạo nghệ thuật AI hoàn toàn chức năng, trình bày mô hình thanh toán dựa trên mức sử dụng, đăng ký và thanh toán một lần với tích hợp thanh toán Dodo Payments.

<Frame>
  <img alt="Atlas Demo Product - Nền tảng tạo nghệ thuật AI với tích hợp thanh toán" 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 là một ứng dụng demo hoàn toàn chức năng của Dodo Payments, trình bày một nền tảng tạo nghệ thuật AI. Nó thể hiện cả ba mô hình thanh toán—**thanh toán dựa trên mức sử dụng**, **thanh toán một lần**, và **đăng ký**—với các quy trình thanh toán tích hợp.

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

## Tổng Quan

Atlas mô phỏng một nền tảng tạo nghệ thuật AI thực tế, nơi người dùng tạo hình ảnh từ các gợi ý văn bản. Demo nổi bật ba quy trình mua sắm khác nhau, mỗi quy trình thể hiện các mô hình thanh toán và trải nghiệm thanh toán khác nhau:

* **Thanh Toán Dựa Trên Mức Sử Dụng**: Thanh toán theo hình ảnh được tạo ra (0,75 USD mỗi hình ảnh)
* **Đăng Ký**: Gói Pro không giới hạn (20 USD/tháng)
* **Mua Một Lần**: Gói tín dụng (7 USD cho 10 tín dụng)

Sau khi hoàn tất bất kỳ giao dịch mua nào, người dùng sẽ được chuyển hướng đến **bảng điều khiển Atlas Studio** nơi họ có thể tạo tác phẩm nghệ thuật và theo dõi mức sử dụng của mình theo thời gian thực.

## Quy Trình Mua Sắm

Atlas trình bày ba quy trình thanh toán riêng biệt. Mỗi quy trình theo một mẫu tương tự nhưng thể hiện các trải nghiệm thanh toán và mô hình thanh toán khác nhau.

<Tabs>
  <Tab title="Usage-Based Billing">
    <Steps>
      <Step title="Select pay-per-image pricing">
        Chọn tùy chọn **trả theo từng hình ảnh** (\$0.75 cho mỗi ảnh) để tạo nghệ thuật AI. Điều này thể hiện mô hình thanh toán theo mức sử dụng, nơi khách hàng chỉ trả cho những gì họ tiêu thụ.
      </Step>

      <Step title="Generate artwork">
        Nhập một đoạn mô tả văn bản và tạo một hình ảnh. Hệ thống tự động theo dõi mức sử dụng cho mục đích thanh toán.
      </Step>

      <Step title="Complete checkout">
        Quy trình thanh toán bao gồm:

        * **Trang thanh toán có thương hiệu**: Trang thanh toán Dodo Payments hiển thị tên thương hiệu và logo của bạn
        * **Thông tin khách hàng**: Nhập thông tin người dùng và địa chỉ thanh toán
        * **Tính thuế**: Thuế được tính tự động sau khi xác nhận địa chỉ
        * **Thanh toán**: Nhập thông tin thẻ thử nghiệm để hoàn tất giao dịch

        <Tip>
          Sử dụng thẻ thử nghiệm `4242 4242 4242 4242` với ngày hết hạn trong tương lai và CVC để mô phỏng giao dịch thành công.
        </Tip>
      </Step>

      <Step title="View confirmation">
        Sau khi thanh toán, Atlas hiển thị màn hình xác nhận với chi tiết mức sử dụng và số tín dụng còn lại.
      </Step>

      <Step title="Access dashboard">
        Người dùng được chuyển hướng trở lại **bảng điều khiển Atlas Studio**, nơi họ có thể tiếp tục tạo tác phẩm nghệ thuật và theo dõi mức sử dụng.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select subscription plan">
        Chọn gói đăng ký **Unlimited Pro** (\$20/tháng) để tạo nghệ thuật AI không giới hạn.
      </Step>

      <Step title="Generate artwork">
        Nhập một mô tả và tạo một hình ảnh để thử nghiệm nền tảng trước khi đăng ký.
      </Step>

      <Step title="Complete checkout">
        Quy trình thanh toán đăng ký bao gồm:

        * **Trang thanh toán có thương hiệu**: Thương hiệu của người bán được hiển thị trong suốt quy trình thanh toán
        * **Thông tin khách hàng**: Nhập thông tin người dùng và địa chỉ thanh toán
        * **Tính thuế**: Tính thuế tự động dựa trên địa chỉ thanh toán
        * **Thanh toán**: Nhập thông tin thẻ thử nghiệm để kích hoạt đăng ký

        <Note>
          Đăng ký tự động gia hạn hàng tháng. Người dùng có thể quản lý đăng ký từ bảng điều khiển sau khi mua.
        </Note>
      </Step>

      <Step title="View confirmation">
        Sau khi thanh toán, Atlas hiển thị màn hình xác nhận với chi tiết kích hoạt đăng ký và ngày thanh toán tiếp theo.
      </Step>

      <Step title="Access dashboard">
        Người dùng được chuyển hướng đến **bảng điều khiển Atlas Studio** với quyền truy cập không giới hạn để tạo tác phẩm nghệ thuật.
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select credit pack">
        Chọn gói **Credit Pack** (\$7 cho 10 tín dụng) để tạo nghệ thuật AI. Điều này minh họa giao dịch mua một lần.
      </Step>

      <Step title="Generate artwork">
        Nhập một mô tả và tạo một hình ảnh để xem trước nền tảng trước khi mua tín dụng.
      </Step>

      <Step title="Complete checkout">
        Quy trình thanh toán mua một lần bao gồm:

        * **Trang thanh toán có thương hiệu**: Dodo Payments checkout với thương hiệu của người bán
        * **Thông tin khách hàng**: Nhập thông tin người dùng và địa chỉ thanh toán
        * **Tính thuế**: Tự động tính thuế sau khi xác nhận địa chỉ
        * **Thanh toán**: Nhập thông tin thẻ thử nghiệm để hoàn tất giao dịch
      </Step>

      <Step title="View confirmation">
        Sau khi thanh toán, Atlas hiển thị màn hình xác nhận với thông điệp "cảm ơn" và chi tiết tín dụng đã mua.
      </Step>

      <Step title="Access dashboard">
        Người dùng được chuyển hướng đến **bảng điều khiển Atlas Studio** nơi tín dụng vừa mua có sẵn ngay lập tức để tạo tác phẩm nghệ thuật.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Trải Nghiệm Bảng Điều Khiển Sau Khi Mua

Bảng điều khiển Atlas Studio trình bày cách triển khai các tính năng nhận thức về thanh toán và theo dõi quyền lợi sau khi hoàn tất thanh toán.

### Tính Năng Bảng Điều Khiển

* **Truy cập ngay lập tức**: Người dùng có thể bắt đầu tạo tác phẩm nghệ thuật ngay lập tức sau khi mua
* **Theo dõi mức sử dụng**: Hiển thị theo thời gian thực về tín dụng còn lại, trạng thái đăng ký và lịch sử tạo
* **Quản lý thanh toán**: Xem lịch sử mua sắm, trạng thái đăng ký và các gia hạn sắp tới
* **Tích hợp liền mạch**: Trình bày cách chuyển hướng người dùng trở lại ứng dụng của bạn với theo dõi quyền lợi đúng cách

<Check>
  Trải nghiệm trên bảng điều khiển minh họa các thực hành tốt nhất cho luồng người dùng sau khi mua, bao gồm xác minh quyền truy cập và theo dõi mức sử dụng.
</Check>

## Triển Khai Kỹ Thuật

Atlas được xây dựng bằng [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript), trình bày cách tích hợp các quy trình thanh toán chỉ với một vài dòng mã.

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Tìm hiểu cách tích hợp các luồng thanh toán Dodo Payments vào ứng dụng của bạn.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    Khám phá tài liệu SDK TypeScript và tham chiếu API.
  </Card>
</CardGroup>

## Mã Nguồn Mở

Atlas là một dự án mã nguồn mở. Khám phá mã nguồn để xem cách các quy trình thanh toán được triển khai trong một ứng dụng thực tế.

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  Duyệt mã nguồn Atlas và học hỏi từ phần triển khai.
</Card>