--- title: "Intégrer Adapty dans votre application React Native avec l'aide de l'IA" description: "Un guide pas à pas pour intégrer Adapty dans votre application React Native avec Cursor, Context7, ChatGPT, Claude ou d'autres outils IA." --- Ce guide vous accompagne étape par étape dans l'intégration d'Adapty dans votre application React Native à l'aide d'un outil de codage IA — vous lui fournissez les bonnes docs Adapty dans le bon ordre. For a fully automated integration, use the [adapty-sdk-integration skill](https://github.com/adaptyteam/adapty-sdk-integration-skill): it runs the whole integration from your AI coding tool in one command. ## Avant de commencer : configuration du tableau de bord \{#before-you-start-dashboard-setup\} Adapty nécessite une configuration dans le tableau de bord avant d'écrire le moindre code SDK. Vous pouvez le faire via un skill LLM interactif, ou manuellement depuis le Dashboard. ### Approche par skill (recommandée) \{#skill-approach-recommended\} Le skill Adapty CLI permet à votre LLM de configurer votre app, vos produits, niveaux d'accès, paywalls et placements directement — sans ouvrir le Dashboard à chaque étape. Il vous suffit de [connecter vos stores](integrate-payments) dans le Dashboard. ``` npx skills add adaptyteam/adapty-cli --skill adapty-cli ``` Une fois le skill ajouté, lancez `/adapty-cli` dans votre agent. Il vous guidera à chaque étape — y compris pour savoir quand ouvrir le Dashboard afin de connecter vos stores. ### Approche manuelle via le Dashboard \{#dashboard-approach\} Si vous préférez tout configurer manuellement, voici ce dont vous avez besoin avant d'écrire du code. Votre LLM ne peut pas récupérer les valeurs du tableau de bord à votre place — vous devrez les lui fournir. 1. **Connectez vos stores** : Dans l'Adapty Dashboard, allez dans **App settings → General**. Connectez l'App Store et Google Play si votre app cible les deux plateformes. C'est indispensable pour que les achats fonctionnent. [Connecter les stores](integrate-payments) 2. **Copiez votre clé SDK publique** : Dans l'Adapty Dashboard, allez dans **App settings → General**, puis trouvez la section **API keys**. Dans le code, c'est la chaîne que vous passez à `adapty.activate("YOUR_PUBLIC_SDK_KEY")`. 3. **Créez au moins un produit** : Dans l'Adapty Dashboard, rendez-vous sur la page **Products**. Vous ne référencez pas les produits directement dans le code — Adapty les livre via les paywalls. [Ajouter des produits](quickstart-products) 4. **Créez un paywall et un placement** : Dans l'Adapty Dashboard, créez un paywall sur la page **Paywalls**, puis assignez-le à un placement sur la page **Placements**. Dans le code, l'ID du placement est la chaîne que vous passez à `adapty.getPaywall("YOUR_PLACEMENT_ID")`. [Créer un paywall](quickstart-paywalls) 5. **Configurez les niveaux d'accès** : Dans l'Adapty Dashboard, configurez-les par produit sur la page **Products**. Dans le code, la chaîne vérifiée dans `profile.accessLevels['premium']?.isActive`. Le niveau d'accès `premium` par défaut convient à la plupart des apps. Si les utilisateurs payants accèdent à des fonctionnalités différentes selon le produit (par exemple un plan `basic` vs un plan `pro`), [créez des niveaux d'accès supplémentaires](assigning-access-level-to-a-product) avant de commencer à coder. :::tip Une fois que vous avez ces cinq éléments, vous êtes prêt à coder. Dites à votre LLM : "Ma clé SDK publique est X, mon ID de placement est Y" pour qu'il génère du code d'initialisation et de récupération de paywall correct. ::: ### À configurer quand vous êtes prêt \{#set-up-when-ready\} Ces éléments ne sont pas indispensables pour démarrer, mais vous en aurez besoin à mesure que votre intégration mûrit : - **Tests A/B** : Configurez-les sur la page **Placements**. Aucune modification de code nécessaire. [Tests A/B](ab-tests) - **Paywalls et placements supplémentaires** : Ajoutez d'autres appels `getPaywall` avec des IDs de placement différents. - **Intégrations analytics** : Configurez-les sur la page **Integrations**. La configuration varie selon l'intégration. Voir [intégrations analytics](analytics-integration) et [intégrations attribution](attribution-integration). ## Fournir les docs Adapty à votre LLM \{#feed-adapty-docs-to-your-llm\} ### Utiliser Context7 (recommandé) \{#use-context7-recommended\} [Context7](https://context7.com) est un serveur MCP qui donne à votre LLM un accès direct à la documentation Adapty à jour. Votre LLM récupère automatiquement les bonnes docs en fonction de vos questions — pas besoin de coller des URL manuellement. Context7 fonctionne avec **Cursor**, **Claude Code**, **Windsurf** et d'autres outils compatibles MCP. Pour le configurer, lancez : ``` npx ctx7 setup ``` Cette commande détecte votre éditeur et configure le serveur Context7. Pour une configuration manuelle, consultez le [dépôt GitHub Context7](https://github.com/upstash/context7). Une fois configuré, référencez la bibliothèque Adapty dans vos prompts : ``` Use the adaptyteam/adapty-docs library to look up how to install the React Native SDK ``` :::warning Même si Context7 supprime le besoin de coller des liens de docs manuellement, l'ordre d'implémentation reste important. Suivez le [parcours d'implémentation](#implementation-walkthrough) ci-dessous étape par étape pour vous assurer que tout fonctionne. ::: ### Utiliser les docs en texte brut \{#use-plain-text-docs\} Vous pouvez accéder à n'importe quelle doc Adapty en texte brut Markdown. Ajoutez `.md` à la fin de son URL, ou cliquez sur **Copy for LLM** sous le titre de l'article. Par exemple : [adapty-cursor-react-native.md](https://adapty.io/docs/fr/adapty-cursor-react-native.md). Chaque étape du [parcours d'implémentation](#implementation-walkthrough) ci-dessous inclut un bloc "Envoyez ceci à votre LLM" avec des liens `.md` à coller. Pour accéder à plus de documentation en une fois, consultez les [fichiers d'index et sous-ensembles par plateforme](#plain-text-doc-index-files) ci-dessous. ## Parcours d'implémentation \{#implementation-walkthrough\} Le reste de ce guide parcourt l'intégration d'Adapty dans l'ordre d'implémentation. Chaque étape inclut les docs à envoyer à votre LLM, ce que vous devriez voir une fois terminé, et les problèmes courants. ### Planifier votre intégration \{#plan-your-integration\} Avant de vous lancer dans le code, demandez à votre LLM d'analyser votre projet et de créer un plan d'implémentation. Si votre outil IA dispose d'un mode planification (comme Cursor ou le mode plan de Claude Code), utilisez-le pour que le LLM puisse lire à la fois la structure de votre projet et les docs Adapty avant d'écrire du code. Indiquez à votre LLM quelle approche vous utilisez pour les achats — cela détermine les guides qu'il devra suivre : - [**Adapty Paywall Builder**](adapty-paywall-builder) : Vous créez des paywalls dans l'éditeur no-code d'Adapty, et le SDK les affiche automatiquement. - [**Paywalls créés manuellement**](react-native-making-purchases) : Vous construisez votre propre interface de paywall dans le code, mais utilisez quand même Adapty pour récupérer les produits et gérer les achats. - [**Mode Observer**](observer-vs-full-mode) : Vous conservez votre infrastructure d'achat existante et utilisez Adapty uniquement pour l'analytics et les intégrations. Vous ne savez pas lequel choisir ? Lisez le [tableau comparatif dans le guide de démarrage](react-native-quickstart-paywalls). ### Installer et configurer le SDK \{#install-and-configure-the-sdk\} Ajoutez la dépendance Adapty SDK via npm (ou yarn) et activez-la avec votre clé SDK publique. C'est la base — rien d'autre ne fonctionne sans ça. Nous avons des guides d'installation distincts pour Expo et les projets React Native bare — choisissez celui qui correspond à votre configuration. **Guides :** - [Installer avec Expo](sdk-installation-react-native-expo) - [Installer avec React Native bare](sdk-installation-react-native-pure) Envoyez ceci à votre LLM (choisissez celui qui correspond à votre configuration, ou envoyez les deux) : ``` Read these Adapty docs before writing code: - https://adapty.io/docs/fr/sdk-installation-react-native-expo.md - https://adapty.io/docs/fr/sdk-installation-react-native-pure.md ``` :::tip[Point de contrôle] - **Attendu :** L'app se compile et tourne sur iOS et Android. Les logs de Metro bundler affichent le log d'activation Adapty. - **Problème fréquent :** "Public API key is missing" → vérifiez que vous avez remplacé le placeholder par votre vraie clé depuis App settings. ::: ### Afficher les paywalls et gérer les achats \{#show-paywalls-and-handle-purchases\} Récupérez un paywall par ID de placement, affichez-le et gérez les événements d'achat. Les guides dont vous avez besoin dépendent de la façon dont vous gérez les achats. Testez chaque achat en sandbox au fur et à mesure — n'attendez pas la fin. Consultez [Tester les achats en sandbox](test-purchases-in-sandbox) pour les instructions de configuration. **Guides :** - [Activer les achats avec les paywalls (guide de démarrage)](react-native-quickstart-paywalls) - [Récupérer les paywalls Paywall Builder et leur configuration](react-native-get-pb-paywalls) - [Afficher les paywalls](react-native-present-paywalls) - [Gérer les événements de paywall](react-native-handling-events-1) - [Répondre aux actions des boutons](react-native-handle-paywall-actions) Envoyez ceci à votre LLM : ``` Read these Adapty docs before writing code: - https://adapty.io/docs/fr/react-native-quickstart-paywalls.md - https://adapty.io/docs/fr/react-native-get-pb-paywalls.md - https://adapty.io/docs/fr/react-native-present-paywalls.md - https://adapty.io/docs/fr/react-native-handling-events-1.md - https://adapty.io/docs/fr/react-native-handle-paywall-actions.md ``` :::tip[Point de contrôle] - **Attendu :** Le paywall s'affiche avec vos produits configurés. Appuyer sur un produit déclenche la boîte de dialogue d'achat sandbox. - **Problème fréquent :** Paywall vide ou erreur `getPaywall` → vérifiez que l'ID de placement correspond exactement à celui du tableau de bord et que le placement a bien une audience assignée. ::: **Guides :** - [Activer les achats dans votre paywall personnalisé (guide de démarrage)](react-native-quickstart-manual) - [Récupérer les paywalls et les produits](fetch-paywalls-and-products-react-native) - [Afficher un paywall conçu via Remote Config](present-remote-config-paywalls-react-native) - [Effectuer des achats](react-native-making-purchases) - [Restaurer les achats](react-native-restore-purchase) Envoyez ceci à votre LLM : ``` Read these Adapty docs before writing code: - https://adapty.io/docs/fr/react-native-quickstart-manual.md - https://adapty.io/docs/fr/fetch-paywalls-and-products-react-native.md - https://adapty.io/docs/fr/present-remote-config-paywalls-react-native.md - https://adapty.io/docs/fr/react-native-making-purchases.md - https://adapty.io/docs/fr/react-native-restore-purchase.md ``` :::tip[Point de contrôle] - **Attendu :** Votre paywall personnalisé affiche les produits récupérés depuis Adapty. Appuyer sur un produit déclenche la boîte de dialogue d'achat sandbox. - **Problème fréquent :** Tableau de produits vide → vérifiez que le paywall a des produits assignés dans le tableau de bord et que le placement a une audience. ::: **Guides :** - [Présentation du mode Observer](observer-vs-full-mode) - [Implémenter le mode Observer](implement-observer-mode-react-native) - [Signaler les transactions en mode Observer](report-transactions-observer-mode-react-native) Envoyez ceci à votre LLM : ``` Read these Adapty docs before writing code: - https://adapty.io/docs/fr/observer-vs-full-mode.md - https://adapty.io/docs/fr/implement-observer-mode-react-native.md - https://adapty.io/docs/fr/report-transactions-observer-mode-react-native.md ``` :::tip[Point de contrôle] - **Attendu :** Après un achat sandbox via votre flux d'achat existant, la transaction apparaît dans l'**Event Feed** du tableau de bord Adapty. - **Problème fréquent :** Aucun événement → vérifiez que vous signalez bien les transactions à Adapty et que les notifications serveur sont configurées pour les deux stores. ::: ### Vérifier le statut de l'abonnement \{#check-subscription-status\} Après un achat, vérifiez le profil utilisateur pour un niveau d'accès actif afin de restreindre le contenu premium. **Guide :** [Vérifier le statut de l'abonnement](react-native-check-subscription-status) Envoyez ceci à votre LLM : ``` Read these Adapty docs before writing code: - https://adapty.io/docs/fr/react-native-check-subscription-status.md ``` :::tip[Point de contrôle] - **Attendu :** Après un achat sandbox, `profile.accessLevels['premium']?.isActive` retourne `true`. - **Problème fréquent :** `accessLevels` vide après l'achat → vérifiez que le produit a un niveau d'accès assigné dans le tableau de bord. ::: ### Identifier les utilisateurs \{#identify-users\} Liez les comptes utilisateurs de votre app aux profils Adapty pour que les achats persistent sur tous les appareils. :::important Ignorez cette étape si votre app ne dispose pas d'authentification. ::: **Guide :** [Identifier les utilisateurs](react-native-quickstart-identify) Envoyez ceci à votre LLM : ``` Read these Adapty docs before writing code: - https://adapty.io/docs/fr/react-native-quickstart-identify.md ``` :::tip[Point de contrôle] - **Attendu :** Après avoir appelé `adapty.identify("your-user-id")`, la section **Profiles** du tableau de bord affiche votre ID utilisateur personnalisé. - **Problème fréquent :** Appelez `identify` après l'activation mais avant de récupérer les paywalls pour éviter une attribution de profil anonyme. ::: ### Préparer la mise en production \{#prepare-for-release\} Une fois votre intégration fonctionnelle en sandbox, parcourez la checklist de mise en production pour vous assurer que tout est prêt. **Guide :** [Checklist de mise en production](release-checklist) Envoyez ceci à votre LLM : ``` Read these Adapty docs before releasing: - https://adapty.io/docs/fr/release-checklist.md ``` :::tip[Point de contrôle] - **Attendu :** Tous les éléments de la checklist confirmés : connexions aux stores, notifications serveur, flux d'achat, vérifications des niveaux d'accès et exigences de confidentialité. - **Problème fréquent :** Notifications serveur manquantes → configurez les App Store Server Notifications dans **App settings → iOS SDK** et les Google Play Real-Time Developer Notifications dans **App settings → Android SDK**. ::: ## Fichiers d'index de docs en texte brut \{#plain-text-doc-index-files\} Si vous devez donner à votre LLM un contexte plus large au-delà des pages individuelles, nous hébergeons des fichiers d'index qui listent ou combinent toute la documentation Adapty : - [`llms.txt`](https://adapty.io/docs/fr/llms.txt) : Liste toutes les pages avec des liens `.md`. Une [norme émergente](https://llmstxt.org/) pour rendre les sites web accessibles aux LLMs. Notez que pour certains agents IA (par ex. ChatGPT), vous devrez télécharger `llms.txt` et l'uploader dans le chat en tant que fichier. - [`llms-full.txt`](https://adapty.io/docs/fr/llms-full.txt) : Toute la documentation du site Adapty combinée en un seul fichier. Très volumineux — à utiliser uniquement quand vous avez besoin d'une vue d'ensemble complète. - [`react-native-llms.txt`](https://adapty.io/docs/fr/react-native-llms.txt) et [`react-native-llms-full.txt`](https://adapty.io/docs/fr/react-native-llms-full.txt) spécifiques à React Native : sous-ensembles propres à la plateforme qui économisent des tokens par rapport au site complet.