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

# Produit Démo Atlas

> Explorez Atlas, une application de démonstration de génération d'art AI entièrement fonctionnelle mettant en avant la facturation basée sur l'utilisation, les abonnements et les paiements uniques avec l'intégration de Dodo Payments pour le paiement.

<Frame>
  <img alt="Produit Démo Atlas - Plateforme de génération d'art IA avec facturation intégrée" 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 est une application de démonstration entièrement fonctionnelle de Dodo Payments qui met en avant une plateforme de génération d'art AI. Elle démontre les trois modèles de facturation—**facturation basée sur l'utilisation**, **paiements uniques**, et **abonnements**—avec des flux de paiement intégrés.

<Info>
  **Démo en direct** : Rendez-vous sur [atlas.dodopayments.com](https://atlas.dodopayments.com/) pour explorer la plateforme et tester tous les flux de facturation.
</Info>

## Aperçu

Atlas simule une plateforme de génération d'art AI du monde réel où les utilisateurs créent des images à partir de prompts textuels. La démo met en avant trois flux d'achat distincts, chacun démontrant différents modèles de facturation et expériences de paiement :

* **Facturation Basée sur l'Utilisation** : Paiement par image générée (0,75 \$ par image)
* **Abonnement** : Plan Pro illimité (20 \$/mois)
* **Achat Unique** : Packs de crédits (7 \$ pour 10 crédits)

Après avoir complété un achat, les utilisateurs sont redirigés vers le **tableau de bord Atlas Studio** où ils peuvent générer des œuvres d'art et suivre leur utilisation en temps réel.

## Flux d'Achat

Atlas démontre trois flux de facturation séparés. Chaque flux suit un schéma similaire mais met en avant différentes expériences de paiement et modèles de facturation.

<Tabs>
  <Tab title="Usage-Based Billing">
    <Steps>
      <Step title="Select pay-per-image pricing">
        Choisissez l'option **pay-per-image** (0,75 \$ par image) pour la génération d'art IA. Cela illustre la facturation basée sur l'usage où les clients ne paient que ce qu'ils consomment.
      </Step>

      <Step title="Generate artwork">
        Saisissez une invite textuelle et générez une image. Le système suit automatiquement l'utilisation à des fins de facturation.
      </Step>

      <Step title="Complete checkout">
        Le processus de paiement comprend :

        * **Page de paiement de marque** : La page de paiement Dodo Payments affiche le nom et le logo de votre marque de commerçant
        * **Informations client** : Entrez les détails de l'utilisateur et l'adresse de facturation
        * **Calcul des taxes** : Les taxes sont automatiquement calculées après confirmation de l'adresse
        * **Paiement** : Entrez les détails de la carte de test pour compléter la transaction

        <Tip>
          Utilisez la carte de test `4242 4242 4242 4242` avec n'importe quelle date d'expiration future et le CVC pour simuler des transactions réussies.
        </Tip>
      </Step>

      <Step title="View confirmation">
        Après le paiement, Atlas affiche un écran de confirmation avec les détails d'utilisation et les crédits restants.
      </Step>

      <Step title="Access dashboard">
        Les utilisateurs sont redirigés vers le **tableau de bord Atlas Studio** où ils peuvent continuer à générer des œuvres et surveiller leur suivi d'utilisation.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select subscription plan">
        Choisissez le plan d'abonnement **Unlimited Pro** (20 \$/mois) pour une génération d'art IA illimitée.
      </Step>

      <Step title="Generate artwork">
        Saisissez une invite et générez une image pour tester la plateforme avant de vous abonner.
      </Step>

      <Step title="Complete checkout">
        Le paiement de l'abonnement comprend :

        * **Page de paiement de marque** : La marque du commerçant est visible tout au long du processus de paiement
        * **Informations client** : Entrez les détails de l'utilisateur et l'adresse de facturation
        * **Calcul des taxes** : Calcul automatique des taxes basé sur l'adresse de facturation
        * **Paiement** : Entrez les détails de la carte de test pour activer l'abonnement

        <Note>
          Les abonnements se renouvellent automatiquement chaque mois. Les utilisateurs peuvent gérer leur abonnement depuis le tableau de bord après l'achat.
        </Note>
      </Step>

      <Step title="View confirmation">
        Après le paiement, Atlas affiche un écran de confirmation avec les détails d'activation de l'abonnement et la prochaine date de facturation.
      </Step>

      <Step title="Access dashboard">
        Les utilisateurs sont redirigés vers le **tableau de bord Atlas Studio** avec un accès illimité à la génération d'œuvres.
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select credit pack">
        Choisissez un **Pack de crédits** (7 \$ pour 10 crédits) pour la génération d'art IA. Cela illustre des transactions d'achat ponctuelles.
      </Step>

      <Step title="Generate artwork">
        Saisissez une invite et générez une image pour prévisualiser la plateforme avant d'acheter des crédits.
      </Step>

      <Step title="Complete checkout">
        Le paiement unique inclut :

        * **Page de paiement personnalisée** : Dodo Payments checkout avec l'identité visuelle du marchand
        * **Informations client** : saisissez les coordonnées de l'utilisateur et l'adresse de facturation
        * **Calcul des taxes** : calcul automatique des taxes après confirmation de l'adresse
        * **Paiement** : saisissez les informations de la carte de test pour finaliser l'achat
      </Step>

      <Step title="View confirmation">
        Après le paiement, Atlas affiche un écran de confirmation avec un message de remerciement et les détails des crédits achetés.
      </Step>

      <Step title="Access dashboard">
        Les utilisateurs sont redirigés vers le **tableau de bord Atlas Studio** où leurs crédits achetés sont immédiatement disponibles pour générer des œuvres.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Expérience du Tableau de Bord Après Achat

Le tableau de bord Atlas Studio démontre comment mettre en œuvre des fonctionnalités conscientes de la facturation et le suivi des droits après la finalisation du paiement.

### Fonctionnalités du Tableau de Bord

* **Accès immédiat** : Les utilisateurs peuvent commencer à générer des œuvres d'art immédiatement après l'achat
* **Suivi d'utilisation** : Affichage en temps réel des crédits restants, des abonnements actifs et de l'historique de génération
* **Gestion de la facturation** : Voir l'historique des achats, l'état de l'abonnement et les renouvellements à venir
* **Intégration transparente** : Montre comment rediriger les utilisateurs vers votre application avec un suivi approprié des droits

<Check>
  L'expérience du tableau de bord illustre les bonnes pratiques pour les flux utilisateur post-achat, y compris la vérification des droits et la surveillance de l'utilisation.
</Check>

## Mise en Œuvre Technique

Atlas est construit en utilisant le [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript), démontrant comment intégrer des flux de facturation avec juste quelques lignes de code.

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Découvrez comment intégrer les flux de paiement Dodo Payments dans votre application.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    Explorez la documentation du SDK TypeScript et la référence de l'API.
  </Card>
</CardGroup>

## Open Source

Atlas est un projet open-source. Explorez le code source pour voir comment les flux de facturation sont implémentés dans une application réelle.

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  Parcourez le code source d'Atlas et apprenez de l'implémentation.
</Card>