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

# Expo Boilerplate

> Construisez des applications mobiles React Native avec Dodo Payments en utilisant notre boilerplate Expo. Inclut l'intégration de la caisse, le traitement des paiements et le support TypeScript.

<Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/expo-boilerplate">
  Boilerplate complet Expo + React Native + Dodo Payments
</Card>

## Aperçu

Un boilerplate prêt pour la production pour intégrer Dodo Payments dans des applications Expo/React Native. Ce modèle inclut la création de sessions de caisse, le traitement des paiements et une configuration TypeScript appropriée pour vous aider à commencer à accepter des paiements dans votre application mobile rapidement.

<Info>
  Ce boilerplate utilise Expo SDK avec TypeScript et inclut des exemples d'implémentations pour les sessions de checkout et le traitement des paiements.
</Info>

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/78N1qw14m0Y" title="Expo Boilerplate Demo | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

## Prérequis

* Node.js 18+
* Expo CLI ou EAS CLI
* Compte Dodo Payments (clé API depuis le tableau de bord)
* Simulateur iOS ou Émulateur Android (ou appareil physique)

## Démarrage Rapide

<Steps>
  <Step title="Clone the Repository">
    Clonez le dépôt du boilerplate et placez-vous dans le répertoire du projet :

    ```bash theme={null}
    git clone https://github.com/dodopayments/expo-boilerplate.git
    cd expo-boilerplate
    ```
  </Step>

  <Step title="Get Your API Credentials">
    Obtenez vos identifiants depuis le tableau de bord Dodo Payments en mode Test :

    * **Clé API** : Allez à **Développeur → Clés API** dans votre [tableau de bord](https://app.dodopayments.com)

    <Tip>
      Commencez en mode Test pour pouvoir tester votre intégration en toute sécurité sans traiter de paiements réels.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Créez un fichier `.env` à la racine du projet :

    ```bash theme={null}
    touch .env
    ```

    Ajoutez vos identifiants Dodo Payments :

    ```bash .env theme={null}
    EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
    ```

    <Warning>
      Ne validez jamais votre fichier `.env` dans le contrôle de version. Il est déjà inclus dans `.gitignore`.
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    Installez les paquets npm requis :

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Start the Development Server">
    Démarrez le serveur de développement Expo :

    ```bash theme={null}
    npx expo start
    ```

    Scannez le code QR avec l'application Expo Go sur votre appareil, ou appuyez sur `i` pour le simulateur iOS ou `a` pour l'émulateur Android.

    <Check>
      Vous êtes prêt·e à commencer le développement ! Le boilerplate inclut des écrans et composants d'exemple pour vous aider à comprendre l'intégration.
    </Check>
  </Step>
</Steps>

## Ce Qui Est Inclus

Le boilerplate est livré avec les éléments essentiels préconfigurés :

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    Exemple d'implémentation pour créer et gérer des sessions de checkout
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    Flux de paiement complet avec gestion des succès et des erreurs
  </Card>

  <Card title="TypeScript Support" icon="code">
    Configuration TypeScript complète avec définitions de types appropriées
  </Card>

  <Card title="Expo Router" icon="route">
    Configuration de la navigation avec Expo Router pour un routage fluide
  </Card>
</CardGroup>

## Structure du Projet

```
expo-boilerplate/
├── app/
│   ├── (tabs)/
│   │   └── index.tsx          # Home screen with examples
│   └── checkout.tsx           # Checkout screen
├── components/
│   └── PaymentButton.tsx      # Payment button component
├── lib/
│   └── dodo.ts                # Dodo Payments client setup
├── .env.example               # Environment variables template
└── package.json
```

## Prochaines Étapes

Une fois que vous avez le boilerplate en cours d'exécution :

<Steps>
  <Step title="Create Your Products">
    Ajoutez des produits dans votre [tableau de bord Dodo Payments](https://app.dodopayments.com) pour activer la fonctionnalité de checkout.
  </Step>

  <Step title="Customize the Integration">
    Adaptez le code d'exemple pour répondre aux besoins et au design de votre application.
  </Step>

  <Step title="Test on Real Devices">
    Testez le flux de paiement sur des appareils physiques afin de vous assurer que tout fonctionne correctement.
  </Step>

  <Step title="Go Live">
    Lorsque vous serez prêt·e, passez aux clés API en mode Live et compilez votre application pour la production.
  </Step>
</Steps>

## Construction pour la Production

<Steps>
  <Step title="Install EAS CLI">
    ```bash theme={null}
    npm install -g eas-cli
    ```
  </Step>

  <Step title="Configure EAS">
    ```bash theme={null}
    eas build:configure
    ```
  </Step>

  <Step title="Build Your App">
    Pour iOS :

    ```bash theme={null}
    eas build --platform ios
    ```

    Pour Android :

    ```bash theme={null}
    eas build --platform android
    ```
  </Step>
</Steps>

## Ressources Supplémentaires

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Guide détaillé pour implémenter des paiements dans les applications mobiles
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    Documentation d'intégration spécifique à React Native
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Guide détaillé pour mettre en œuvre des paiements ponctuels
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    Explorez la documentation complète de l'API Dodo Payments
  </Card>
</CardGroup>

## Support

Besoin d'aide avec le boilerplate ?

* Rejoignez notre [communauté Discord](https://discord.gg/bYqAp4ayYh) pour des questions et des discussions
* Consultez le [dépôt GitHub](https://github.com/dodopayments/expo-boilerplate) pour les problèmes et les mises à jour
* Contactez notre [équipe de support](mailto:support@dodopayments.com) pour obtenir de l'aide