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 les bonnes docs Adapty dans le bon ordre.

Avant de commencer : configuration du tableau de bord

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)

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

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.

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
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").
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
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
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 avant de commencer à coder.

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

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
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 et intégrations attribution.

Fournir les docs 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 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.

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

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 ci-dessous étape par étape pour vous assurer que tout fonctionne.

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 parcours d’implémentation 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 ci-dessous.

Parcours d’implémentation

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

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 : Vous créez des paywalls dans l’éditeur no-code d’Adapty, et le SDK les affiche automatiquement.
Paywalls créés manuellement : 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 : 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.

Installer et configurer le 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 :

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

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

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 pour les instructions de configuration.

Guides :

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

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 :

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

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 :

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

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

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

Envoyez ceci à votre LLM :

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

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

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

Ignorez cette étape si votre app ne dispose 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

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

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

Envoyez ceci à votre LLM :

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

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

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 : Liste toutes les pages avec des liens .md. Une norme émergente 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 : 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 et react-native-llms-full.txt spécifiques à React Native : sous-ensembles propres à la plateforme qui économisent des tokens par rapport au site complet.