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

# Prodotto Demo Atlas

> Esplora Atlas, un'applicazione demo di generazione di arte AI completamente funzionale che mostra la fatturazione basata sull'uso, abbonamenti e pagamenti una tantum con integrazione del checkout di Dodo Payments.

<Frame>
  <img alt="Atlas Demo Product - Piattaforma di generazione arte AI con fatturazione integrata" 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 è un'applicazione demo completamente funzionale di Dodo Payments che mostra una piattaforma di generazione di arte AI. Dimostra tutti e tre i modelli di fatturazione—**fatturazione basata sull'uso**, **pagamenti una tantum** e **abbonamenti**—con flussi di checkout integrati.

<Info>
  **Demo dal vivo**: visita [atlas.dodopayments.com](https://atlas.dodopayments.com/) per esplorare la piattaforma e testare tutti i flussi di fatturazione.
</Info>

## Panoramica

Atlas simula una piattaforma reale di generazione di arte AI in cui gli utenti creano immagini da prompt testuali. La demo evidenzia tre flussi di acquisto distinti, ognuno dei quali dimostra diversi modelli di fatturazione e esperienze di checkout:

* **Fatturazione Basata sull'Uso**: Paga per immagine generata (\$0.75 per immagine)
* **Abbonamento**: Piano Pro illimitato (\$20/mese)
* **Acquisto Una Tantum**: Pacchetti di crediti (\$7 per 10 crediti)

Dopo aver completato un acquisto, gli utenti vengono reindirizzati al **dashboard di Atlas Studio** dove possono generare opere d'arte e monitorare il loro utilizzo in tempo reale.

## Flussi di Acquisto

Atlas dimostra tre flussi di fatturazione separati. Ogni flusso segue uno schema simile ma mostra diverse esperienze di checkout e modelli di fatturazione.

<Tabs>
  <Tab title="Usage-Based Billing">
    <Steps>
      <Step title="Select pay-per-image pricing">
        Scegli l'opzione **pay-per-image** (0,75\$ per immagine) per la generazione di arte AI. Questo dimostra la fatturazione basata sul consumo, dove i clienti pagano solo per ciò che utilizzano.
      </Step>

      <Step title="Generate artwork">
        Inserisci un prompt testuale e genera un'immagine. Il sistema tiene automaticamente traccia dell'utilizzo ai fini della fatturazione.
      </Step>

      <Step title="Complete checkout">
        Il processo di checkout include:

        * **Pagina di checkout brandizzata**: La pagina di checkout di Dodo Payments mostra il nome e il logo del tuo marchio
        * **Informazioni sul cliente**: Inserisci i dettagli dell'utente e l'indirizzo di fatturazione
        * **Calcolo delle tasse**: Le tasse vengono calcolate automaticamente dopo la conferma dell'indirizzo
        * **Pagamento**: Inserisci i dettagli della carta di test per completare la transazione

        <Tip>
          Usa la carta di test `4242 4242 4242 4242` con qualsiasi data di scadenza futura e CVC per simulare transazioni riuscite.
        </Tip>
      </Step>

      <Step title="View confirmation">
        Dopo il pagamento, Atlas visualizza una schermata di conferma con i dettagli dell'utilizzo e i crediti rimanenti.
      </Step>

      <Step title="Access dashboard">
        Gli utenti vengono reindirizzati nuovamente alla **dashboard di Atlas Studio**, dove possono continuare a generare opere d'arte e monitorare il tracciamento dell'utilizzo.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select subscription plan">
        Scegli il piano di abbonamento **Unlimited Pro** (20\$/mese) per la generazione illimitata di arte AI.
      </Step>

      <Step title="Generate artwork">
        Inserisci un prompt e genera un'immagine per testare la piattaforma prima di abbonarti.
      </Step>

      <Step title="Complete checkout">
        Il checkout dell'abbonamento include:

        * **Pagina di checkout brandizzata**: Il branding del commerciante è visibile durante tutto il processo di checkout
        * **Informazioni sul cliente**: Inserisci i dettagli dell'utente e l'indirizzo di fatturazione
        * **Calcolo delle tasse**: Calcolo automatico delle tasse in base all'indirizzo di fatturazione
        * **Pagamento**: Inserisci i dettagli della carta di test per attivare l'abbonamento

        <Note>
          Gli abbonamenti si rinnovano automaticamente ogni mese. Gli utenti possono gestire il loro abbonamento dalla dashboard dopo l'acquisto.
        </Note>
      </Step>

      <Step title="View confirmation">
        Dopo il pagamento, Atlas visualizza una schermata di conferma con i dettagli dell'attivazione dell'abbonamento e la prossima data di fatturazione.
      </Step>

      <Step title="Access dashboard">
        Gli utenti vengono reindirizzati alla **dashboard di Atlas Studio** con accesso illimitato per generare opere d'arte.
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select credit pack">
        Scegli un **Credit Pack** (7\$ per 10 crediti) per la generazione di arte AI. Questo dimostra le transazioni a pagamento singolo.
      </Step>

      <Step title="Generate artwork">
        Inserisci un prompt e genera un'immagine per provare la piattaforma prima di acquistare crediti.
      </Step>

      <Step title="Complete checkout">
        Il checkout per l'acquisto singolo include:

        * **Pagina di checkout personalizzata**: Dodo Payments checkout con il branding del merchant
        * **Informazioni cliente**: Inserisci i dati dell'utente e l'indirizzo di fatturazione
        * **Calcolo delle tasse**: Calcolo automatico delle tasse dopo la conferma dell'indirizzo
        * **Pagamento**: Inserisci i dettagli della carta di test per completare l'acquisto
      </Step>

      <Step title="View confirmation">
        Dopo il pagamento, Atlas visualizza una schermata di conferma con un messaggio di ringraziamento e i dettagli dei crediti acquistati.
      </Step>

      <Step title="Access dashboard">
        Gli utenti vengono reindirizzati alla **dashboard di Atlas Studio**, dove i crediti acquistati sono immediatamente disponibili per generare opere d'arte.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Esperienza del Dashboard Post-Acquisto

Il dashboard di Atlas Studio dimostra come implementare funzionalità consapevoli della fatturazione e monitoraggio dei diritti dopo il completamento del checkout.

### Caratteristiche del Dashboard

* **Accesso immediato**: Gli utenti possono iniziare a generare opere d'arte immediatamente dopo l'acquisto
* **Monitoraggio dell'utilizzo**: Visualizzazione in tempo reale dei crediti rimanenti, abbonamenti attivi e cronologia delle generazioni
* **Gestione della fatturazione**: Visualizza la cronologia degli acquisti, lo stato dell'abbonamento e i prossimi rinnovi
* **Integrazione senza soluzione di continuità**: Mostra come reindirizzare gli utenti di nuovo alla tua applicazione con un corretto monitoraggio dei diritti

<Check>
  L'esperienza della dashboard dimostra le migliori pratiche per i flussi utente post-acquisto, inclusa la verifica dei diritti e il monitoraggio dell'utilizzo.
</Check>

## Implementazione Tecnica

Atlas è costruito utilizzando il [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript), dimostrando come integrare flussi di fatturazione con poche righe di codice.

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Scopri come integrare i flussi di checkout di Dodo Payments nella tua applicazione.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    Esplora la documentazione SDK TypeScript e il riferimento API.
  </Card>
</CardGroup>

## Open Source

Atlas è un progetto open-source. Esplora il codice sorgente per vedere come sono implementati i flussi di fatturazione in un'applicazione reale.

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  Sfoglia il codice sorgente di Atlas e approfondisci l'implementazione.
</Card>