Intégrer Adapty dans votre application React Native avec l'aide de l'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 la bonne documentation Adapty dans le bon ordre.

Avant de commencer : configuration du tableau de bord

Adapty nécessite quelques réglages dans le tableau de bord avant d’écrire du code SDK. Vous pouvez le faire via un assistant LLM interactif ou manuellement depuis le Dashboard.

Approche par skill (recommandée)

Le skill Adapty CLI permet à votre LLM de configurer votre application, vos produits, vos niveaux d’accès, vos paywalls et vos placements directement — sans ouvrir le Dashboard à chaque étape. Il vous suffit de connecter vos stores dans le Dashboard.

npx skills add adaptyteam/adapty-cli --skill adapty-cli

Une fois le skill ajouté, exécutez /adapty-cli dans votre agent. Il vous guidera à chaque étape — y compris lorsqu’il faut ouvrir le Dashboard pour connecter vos stores.

Approche via le tableau de bord

Si vous préférez tout configurer manuellement, voici ce dont vous avez besoin avant d’écrire le moindre code. Votre LLM ne peut pas récupérer les valeurs du tableau de bord à votre place — vous devrez les fournir vous-même.

Connectez vos app stores : Dans l’Adapty Dashboard, rendez-vous dans App settings → General. Connectez l’App Store et Google Play si votre application cible les deux plateformes. C’est indispensable pour que les achats fonctionnent. Connecter les app stores
Copiez votre clé SDK publique : Dans l’Adapty Dashboard, rendez-vous dans App settings → General, puis repérez la section API keys. Dans le code, c’est la chaîne que vous passez à adapty.activate("YOUR_PUBLIC_SDK_KEY").
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 fournit via des paywalls. Ajouter des produits
Créez un flow ou un paywall et un placement : Dans l’Adapty Dashboard, créez un flow (ou un paywall si vous construisez l’interface vous-même), puis assignez-le à un placement sur la page Placements. Dans le code, l’ID de placement est la chaîne que vous passez à adapty.getFlow("YOUR_PLACEMENT_ID"). Créer un paywall
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érifier est profile.accessLevels['premium']?.isActive. Le niveau d’accès premium par défaut convient à la plupart des applications. Si les utilisateurs payants ont accès à différentes fonctionnalités selon le produit (par exemple, un plan basic ou un plan pro), créez des niveaux d’accès supplémentaires avant de commencer à coder.

Tip

Une fois que vous avez les cinq éléments, vous êtes prêt à écrire du code. Dites à votre LLM : « Ma clé SDK publique est X, mon identifiant de placement est Y » afin qu’il puisse générer le code d’initialisation et de récupération du paywall.

À configurer quand vous serez prêt

Ces éléments ne sont pas nécessaires pour commencer à coder, mais vous en aurez besoin à mesure que votre intégration évolue :

Tests A/B : À configurer sur la page Placements. Aucune modification du code n’est nécessaire. Tests A/B
Flows et placements supplémentaires : Ajoutez d’autres appels getFlow avec des IDs de placement différents.
Intégrations analytics : À configurer sur la page Integrations. La configuration varie selon l’intégration. Voir intégrations analytics et intégrations attribution.

Fournir la documentation Adapty à votre LLM

Utiliser Context7 (recommandé)

Context7 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 ce que vous demandez — pas besoin de coller des URLs manuellement.

Context7 fonctionne avec Cursor, Claude Code, Windsurf et d’autres outils compatibles MCP. Pour le configurer, lancez :

npx ctx7 setup

Cela détecte votre éditeur et configure le serveur Context7. Pour une configuration manuelle, consultez le dépôt GitHub de 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 la nécessité de coller manuellement des liens vers la documentation, l’ordre d’implémentation est important. Suivez le guide d’implémentation ci-dessous étape par étape pour vous assurer que tout fonctionne correctement.

Utiliser les docs en texte brut

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.

Chaque étape du guide d’implémentation ci-dessous inclut un bloc « Envoyer à votre LLM » avec des liens .md à coller.

Pour accéder à davantage de documentation en une seule fois, consultez les fichiers d’index et les sous-ensembles par plateforme ci-dessous.

Guide d’implémentation pas à pas

La suite de ce guide présente l’intégration d’Adapty dans l’ordre de mise en œuvre. Chaque étape indique la documentation à transmettre à votre LLM, ce que vous devriez obtenir une fois terminé, et les problèmes courants.

Planifiez votre intégration

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 le mode plan de Cursor ou de Claude Code), utilisez-le pour que le LLM puisse lire à la fois la structure de votre projet et la documentation Adapty avant d’écrire du code.

Indiquez à votre LLM l’approche que vous utilisez pour les achats — cela détermine les guides qu’il devra suivre :

Adapty Flow & Paywall Builder : Vous créez des flows dans le builder no-code d’Adapty, et le SDK les affiche automatiquement.
Paywalls créées manuellement : Vous construisez votre propre UI de paywall en code, mais utilisez toujours Adapty pour récupérer les produits et gérer les achats.
Mode Observer : Vous conservez votre infrastructure d’achats existante et utilisez Adapty uniquement pour l’analytique et les intégrations.

Vous ne savez pas quoi choisir ? Consultez le tableau comparatif dans le guide de démarrage rapide.

Installer et configurer le SDK

Ajoutez la dépendance du SDK Adapty via npm (ou yarn) et activez-le avec votre clé SDK publique. C’est la base — rien d’autre ne fonctionne sans elle.

Nous avons des guides d’installation distincts pour les projets Expo et les projets React Native purs — choisissez celui qui correspond à votre configuration.

Guides :

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

Checkpoint

Attendu : L’application se compile et s’exécute sur iOS et Android. Les logs du bundler Metro affichent le log d’activation Adapty.
Piège : “Public API key is missing” → vérifiez que vous avez remplacé le placeholder par votre vraie clé issue de App settings.

Afficher les paywalls et gérer les achats

Récupérez un paywall par son identifiant 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 pour les instructions de configuration.

Guides :

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

Checkpoint

Attendu : Le paywall s’affiche avec vos produits configurés. Appuyer sur un produit déclenche la boîte de dialogue d’achat sandbox.
Piège : Flow vide ou erreur getFlow → vérifiez que l’ID de placement correspond exactement à celui du tableau de bord et que le placement a une audience assignée.

Guides :

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

Checkpoint

Expected: 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.
Gotcha: 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 :

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

Résultat attendu : Après un achat sandbox via votre flow d’achat existant, la transaction apparaît dans l’Event Feed du tableau de bord Adapty.
Piège 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

Après un achat, vérifiez le profil utilisateur pour un niveau d’accès actif afin de contrôler l’accès au contenu premium.

Guide : Vérifier le statut de l’abonnement

Envoyez ceci à votre LLM :

Read these Adapty docs before writing code:
- https://adapty.io/docs/fr/react-native-check-subscription-status.md

Tip

Checkpoint

Résultat attendu : Après un achat en sandbox, profile.accessLevels['premium']?.isActive renvoie true.
Attention : 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

Associez les comptes utilisateurs de votre application aux profils Adapty pour que les achats persistent sur tous les appareils.

Important

Ignorez cette étape si votre application ne nécessite pas d’authentification.

Guide : Identifier les utilisateurs

Envoyez ceci à votre LLM :

Read these Adapty docs before writing code:
- https://adapty.io/docs/fr/react-native-quickstart-identify.md

Tip

Checkpoint

Attendu : Après avoir appelé adapty.identify("your-user-id"), la section Profiles du tableau de bord affiche votre identifiant utilisateur personnalisé.
À noter : Appelez identify après l’activation mais avant de récupérer les paywalls pour éviter une attribution à un profil anonyme.

Préparer la mise en production

Une fois votre intégration validée en sandbox, suivez la liste de vérification avant la mise en production pour vous assurer que tout est prêt.

Guide : Liste de vérification avant la mise en production

Envoyez ceci à votre LLM :

Read these Adapty docs before releasing:
- https://adapty.io/docs/fr/release-checklist.md

Tip

Checkpoint

Attendu : Tous les éléments de la checklist confirmés : connexions aux stores, notifications serveur, flux d’achat, vérifications du niveau d’accès et exigences de confidentialité.
Écueil : 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 documentation en texte brut

Si vous avez besoin de donner à votre LLM un contexte plus large au-delà des pages individuelles, nous hébergeons des fichiers d’index qui listent ou regroupent l’ensemble de la documentation Adapty :

llms.txt : Liste toutes les pages avec des liens .md. Un standard émergent 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 le joindre à la conversation en tant que fichier.
llms-full.txt : L’ensemble de la documentation Adapty regroupée en un seul fichier. Très volumineux — à utiliser uniquement si vous avez besoin d’une vue d’ensemble complète.
react-native-llms.txt et react-native-llms-full.txt spécifiques à React Native : des sous-ensembles propres à cette plateforme qui permettent d’économiser des tokens par rapport au site complet.