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

# Produk Demo Atlas

> Jelajahi Atlas, aplikasi demo pembuatan karya seni AI yang berfungsi penuh dan menampilkan penagihan berbasis penggunaan, langganan, serta pembayaran satu kali dengan integrasi checkout <Frame>.

<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 adalah aplikasi demo yang berfungsi penuh dari Dodo Payments yang menampilkan platform pembuatan karya seni AI. Aplikasi ini mendemonstrasikan ketiga model penagihan—**penagihan berbasis penggunaan**, **pembayaran satu kali**, dan **langganan**—dengan alur checkout terintegrasi.

<Info>
  **Demo Langsung**: Kunjungi [atlas.dodopayments.com](https://atlas.dodopayments.com/) untuk menjelajahi platform dan menguji semua alur penagihan.
</Info>

## Ringkasan

Atlas menyimulasikan platform pembuatan karya seni AI di dunia nyata, tempat pengguna membuat gambar dari prompt teks. Demo ini menyoroti tiga alur pembelian berbeda, yang masing-masing mendemonstrasikan model penagihan dan pengalaman checkout yang berbeda:

* **Penagihan Berbasis Penggunaan**: Bayar per gambar yang dihasilkan (\$0.75 per gambar)
* **Langganan**: Paket Pro tanpa batas (\$20/bulan)
* **Pembelian Satu Kali**: Paket kredit (\$7 untuk 10 kredit)

Setelah menyelesaikan pembelian apa pun, pengguna diarahkan ke **dashboard Atlas Studio**, tempat mereka dapat membuat karya seni dan memantau penggunaan secara real-time.

## Alur Pembelian

Atlas mendemonstrasikan tiga alur penagihan terpisah. Setiap alur mengikuti pola yang serupa, tetapi menampilkan pengalaman checkout dan model penagihan yang berbeda.

<Tabs>
  <Tab title="Usage-Based Billing">
    <Steps>
      <Step title="Select pay-per-image pricing">
        Pilih opsi **bayar per gambar** (\$0.75 per gambar) untuk pembuatan karya seni AI. Ini mendemonstrasikan penagihan berbasis penggunaan, yaitu pelanggan hanya membayar sesuai yang mereka gunakan.
      </Step>

      <Step title="Generate artwork">
        Masukkan prompt teks dan buat gambar. Sistem secara otomatis melacak penggunaan untuk keperluan penagihan.
      </Step>

      <Step title="Complete checkout">
        Proses checkout mencakup:

        * **Halaman checkout bermerek**: Halaman checkout Dodo Payments menampilkan nama dan logo merek merchant Anda
        * **Informasi pelanggan**: Masukkan detail pengguna dan alamat penagihan
        * **Perhitungan pajak**: Pajak dihitung secara otomatis setelah alamat dikonfirmasi
        * **Pembayaran**: Masukkan detail kartu pengujian untuk menyelesaikan transaksi

        <Tip>
          Gunakan kartu pengujian `4242 4242 4242 4242` dengan tanggal kedaluwarsa dan CVC apa pun di masa mendatang untuk menyimulasikan transaksi yang berhasil.
        </Tip>
      </Step>

      <Step title="View confirmation">
        Setelah pembayaran, Atlas menampilkan layar konfirmasi dengan detail penggunaan dan kredit yang tersisa.
      </Step>

      <Step title="Access dashboard">
        Pengguna diarahkan kembali ke **dashboard Atlas Studio**, tempat mereka dapat terus membuat karya seni dan memantau penggunaan.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select subscription plan">
        Pilih paket langganan **Unlimited Pro** (\$20/bulan) untuk pembuatan karya seni AI tanpa batas.
      </Step>

      <Step title="Generate artwork">
        Masukkan prompt dan buat gambar untuk menguji platform sebelum berlangganan.
      </Step>

      <Step title="Complete checkout">
        Checkout langganan mencakup:

        * **Halaman checkout bermerek**: Branding merchant terlihat di seluruh proses checkout
        * **Informasi pelanggan**: Masukkan detail pengguna dan alamat penagihan
        * **Perhitungan pajak**: Perhitungan pajak otomatis berdasarkan alamat penagihan
        * **Pembayaran**: Masukkan detail kartu pengujian untuk mengaktifkan langganan

        <Note>
          Langganan diperpanjang secara otomatis setiap bulan. Pengguna dapat mengelola langganan mereka dari dashboard setelah pembelian.
        </Note>
      </Step>

      <Step title="View confirmation">
        Setelah pembayaran, Atlas menampilkan layar konfirmasi dengan detail aktivasi langganan dan tanggal penagihan berikutnya.
      </Step>

      <Step title="Access dashboard">
        Pengguna diarahkan ke **dashboard Atlas Studio** dengan akses tanpa batas untuk membuat karya seni.
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select credit pack">
        Pilih **Paket Kredit** (\$7 untuk 10 kredit) untuk pembuatan karya seni AI. Ini mendemonstrasikan transaksi pembelian satu kali.
      </Step>

      <Step title="Generate artwork">
        Masukkan prompt dan buat gambar untuk melihat pratinjau platform sebelum membeli kredit.
      </Step>

      <Step title="Complete checkout">
        Checkout pembelian satu kali mencakup:

        * **Halaman checkout bermerek**: Checkout Dodo Payments dengan branding merchant
        * **Informasi pelanggan**: Masukkan detail pengguna dan alamat penagihan
        * **Perhitungan pajak**: Perhitungan pajak otomatis setelah alamat dikonfirmasi
        * **Pembayaran**: Masukkan detail kartu pengujian untuk menyelesaikan pembelian
      </Step>

      <Step title="View confirmation">
        Setelah pembayaran, Atlas menampilkan layar konfirmasi dengan pesan "terima kasih" dan detail kredit yang dibeli.
      </Step>

      <Step title="Access dashboard">
        Pengguna diarahkan ke **dashboard Atlas Studio**, tempat kredit yang mereka beli langsung tersedia untuk membuat karya seni.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Pengalaman Dashboard Setelah Pembelian

Dashboard Atlas Studio mendemonstrasikan cara menerapkan fitur yang memahami penagihan dan pelacakan entitlement setelah checkout selesai.

### Fitur Dashboard

* **Akses langsung**: Pengguna dapat segera mulai membuat karya seni setelah pembelian
* **Pelacakan penggunaan**: Tampilan real-time untuk kredit yang tersisa, langganan aktif, dan riwayat pembuatan
* **Manajemen penagihan**: Lihat riwayat pembelian, status langganan, dan perpanjangan mendatang
* **Integrasi mulus**: Menunjukkan cara mengarahkan pengguna kembali ke aplikasi Anda dengan pelacakan entitlement yang tepat

<Check>
  Pengalaman dashboard ini mendemonstrasikan praktik terbaik untuk alur pengguna setelah pembelian, termasuk verifikasi entitlement dan pemantauan penggunaan.
</Check>

## Implementasi Teknis

Atlas dibuat menggunakan [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript), yang mendemonstrasikan cara mengintegrasikan alur penagihan hanya dengan beberapa baris kode.

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Pelajari cara mengintegrasikan alur checkout Dodo Payments ke dalam aplikasi Anda.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    Jelajahi dokumentasi TypeScript SDK dan referensi API.
  </Card>
</CardGroup>

## Open Source

Atlas adalah proyek open source. Jelajahi codebase untuk melihat bagaimana alur penagihan diterapkan dalam aplikasi nyata.

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  Jelajahi kode sumber Atlas dan pelajari implementasinya.
</Card>