# REACT-NATIVE - Adapty Documentation (Full Content) This file contains the complete content of all documentation pages for this platform. Locale: fr Generated on: 2026-08-11T07:13:23.541Z Total files: 57 --- # File: react-native-sdk-overview --- --- title: "React Native SDK overview" description: "Découvrez le SDK React Native Adapty et ses fonctionnalités clés." --- [![Release](https://img.shields.io/github/v/release/adaptyteam/AdaptySDK-React-Native.svg?style=flat&logo=react)](https://github.com/adaptyteam/AdaptySDK-React-Native/releases) Bienvenue ! Nous sommes là pour simplifier vos achats intégrés 🚀 Nous avons conçu le SDK React Native Adapty pour vous libérer des contraintes des achats intégrés et vous permettre de vous concentrer sur ce que vous faites le mieux – créer des applications extraordinaires. Voici ce dont nous nous occupons pour vous : - Gestion des achats, validation des reçus et gestion des abonnements prêts à l'emploi - Création et test de flows et de paywalls sans mise à jour de l'application - Analyses d'achats détaillées sans aucune configuration – cohortes, LTV, churn et analyse de funnel inclus - Statut d'abonnement utilisateur toujours à jour entre les sessions et les appareils - Intégration avec des services d'attribution marketing et d'analyse en une seule ligne de code Que votre application soit développée avec **Expo** ou en **React Native pur**, le SDK Adapty prend en charge les deux environnements. :::note Avant de plonger dans le code, vous devrez intégrer Adapty avec App Store Connect et Google Play Console, puis configurer vos produits dans le tableau de bord. Consultez notre [guide de démarrage rapide](quickstart) pour tout configurer en premier. ::: ## Premiers pas \{#get-started\} 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. Voici ce que nous allons aborder dans le guide d'intégration : 1. [Installer et configurer le SDK](sdk-installation-reactnative) : Ajoutez le SDK comme dépendance à votre projet et activez-le dans le code. Adapty fonctionne aussi bien avec **Expo** que dans des projets **React Native purs**. 2. [Activer les achats via les flows](react-native-quickstart-paywalls) : Configurez le flow d'achat pour que les utilisateurs puissent acheter des produits. Pour créer votre propre interface, consultez plutôt [Implémenter les paywalls manuellement](react-native-quickstart-manual). 3. [Vérifier le statut d'abonnement](react-native-check-subscription-status) : Vérifiez automatiquement l'état de l'abonnement de l'utilisateur et contrôlez son accès au contenu payant. 4. [Identifier les utilisateurs (optionnel)](react-native-quickstart-identify) : Associez les utilisateurs à leurs profils Adapty pour garantir la cohérence de leurs données sur tous les appareils. ### En action \{#see-it-in-action\} Envie de voir comment tout s'assemble ? Nous avons ce qu'il vous faut : - **Exemples d'applications** : Consultez nos [exemples complets](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples) qui illustrent la configuration complète - **Tutoriel vidéo** : Suivez notre vidéo d'implémentation étape par étape ci-dessous
## Concepts clés \{#main-concepts\} Avant de plonger dans le code, familiarisons-nous avec les concepts essentiels qui font fonctionner Adapty. La force de l'approche Adapty, c'est que seuls les placements sont codés en dur dans votre application. Tout le reste – produits, designs de paywalls, tarifs et offres – peut être géré de façon flexible depuis l'Adapty Dashboard sans mise à jour de l'application : 1. [**Produit**](product) - Tout ce qui est disponible à l'achat dans votre application – abonnement, produit consommable ou accès à vie. 2. **Flow ou paywall** - Des produits regroupés avec une configuration, rattachés à un placement. Deux variantes : - **[Flow](adapty-flow-builder)** - Interface visuelle sans code, construite dans le Flow Builder. Adapty affiche l'interface et gère l'achat pour vous. - **[Paywall](paywalls)** - Pas de configuration visuelle ; vous construisez l'interface dans votre propre code et appelez `makePurchase` vous-même. Voir [Implémenter les paywalls manuellement](react-native-quickstart-manual). Dans le code SDK, les deux sont récupérés via la même méthode `getFlow`. 3. [**Placement**](placements) - Un point stratégique dans le parcours utilisateur où vous souhaitez afficher un flow ou un paywall. Les placements représentent le « où » et le « quand » de votre stratégie de monétisation. Les placements courants incluent : - `main` - L'emplacement principal de votre paywall - `onboarding` - Affiché pendant le flow d'onboarding de l'utilisateur - `settings` - Accessible depuis les paramètres de votre application Commencez par les bases comme `main` ou `onboarding` pour votre première intégration, puis [réfléchissez aux autres endroits de votre application où les utilisateurs pourraient être prêts à acheter](choose-meaningful-placements). 4. [**Profil**](profiles-crm) - Lorsque des utilisateurs achètent un produit, un **niveau d'accès** est attribué à leur profil, que vous utilisez pour définir l'accès aux fonctionnalités payantes. --- # File: sdk-installation-reactnative --- --- title: "Installer et configurer le SDK React Native" description: "Guide étape par étape pour installer le SDK Adapty sur React Native pour les applications basées sur les abonnements." --- Adapty fournit un SDK React Native entièrement natif qui fonctionne aussi bien dans les projets **Expo** qu'en **React Native pur**. Ces environnements utilisant des systèmes de build différents, les étapes d'installation diffèrent également. Choisissez le guide d'installation correspondant à votre projet : --- # File: sdk-installation-react-native-expo --- --- title: "Installer et configurer le SDK Adapty React Native dans un projet Expo" description: "Guide étape par étape pour installer le SDK Adapty React Native dans un projet Expo pour les applications basées sur des abonnements." --- :::important Ce guide couvre l'installation et la configuration du SDK React Native d'Adapty **dans un projet Expo**. Si vous utilisez **React Native pur (sans Expo)**, suivez le [guide d'installation React Native](sdk-installation-react-native-pure) à la place. ::: Adapty SDK comprend deux modules clés pour une intégration fluide dans votre application React Native : - **Core Adapty** : ce module est indispensable au bon fonctionnement d'Adapty dans votre application. - **AdaptyUI** : ce module est nécessaire si vous utilisez le [Adapty Paywall Builder](adapty-paywall-builder), un outil no-code convivial pour créer facilement des paywalls multiplateformes. AdaptyUI est automatiquement activé avec le module principal. Si vous souhaitez un tutoriel complet sur l'implémentation des achats intégrés dans votre application React Native, consultez [celui-ci](https://adapty.io/blog/react-native-in-app-purchases-tutorial/). :::tip Vous voulez voir un exemple concret de l'intégration du SDK Adapty dans une application Expo ? Consultez nos exemples d'applications : - [Exemple de build Expo dev](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples/FocusJournalExpo) pour toutes les fonctionnalités, y compris les achats réels et le Paywall Builder - [Exemple Expo Go & Web](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples/ExpoGoWebMock) pour les tests en mode simulation ::: Pour une présentation complète de l'implémentation, vous pouvez également regarder la vidéo :
## Prérequis \{#requirements\} Le SDK React Native d'Adapty requiert iOS 15.0+. La compilation pour iOS nécessite **Swift 6.0** ou une version ultérieure. Le [mode enfants](kids-mode-react-native) requiert **Swift 6.1** ou une version ultérieure. :::info À partir du SDK v3.17, le SDK Adapty utilise Google Play Billing Library v8.0.0 par défaut. ::: :::info L'installation du SDK correspond à l'étape 5 de la configuration d'Adapty. Avant que les achats fonctionnent dans votre app, vous devez également connecter votre app aux stores, puis créer des produits, un paywall et un placement dans l'Adapty Dashboard. Le [guide de démarrage rapide](quickstart) décrit toutes les étapes requises. ::: ## Installer le SDK Adapty \{#install-adapty-sdk\} :::important À partir de la v4, le SDK Adapty React Native ne prend plus en charge l'installation CocoaPods de ses dépendances natives. Si vous avez besoin de la v4 ou d'une version ultérieure (pour le [Flow Builder](adapty-flow-builder)), suivez plutôt [SDK Adapty 4.0 : activer Swift Package Manager](#adapty-sdk-40-enable-swift-package-manager) ci-dessous. ::: [![Release](https://img.shields.io/github/v/release/adaptyteam/AdaptySDK-React-Native.svg?style=flat&logo=react)](https://github.com/adaptyteam/AdaptySDK-React-Native/releases) :::important [Expo Dev Client](https://docs.expo.dev/versions/latest/sdk/dev-client/) (un build de développement personnalisé) est requis pour utiliser Adapty dans un projet Expo. Expo Go ne prend pas en charge les modules natifs personnalisés, vous pouvez donc l'utiliser uniquement avec le [**mode mock**](#set-up-mock-mode-for-expo-go--expo-web) pour le développement UI/logique (pas d'achats réels ni de rendu AdaptyUI/Paywall Builder). ::: 1. Installez le SDK Adapty (cela installe également `@adapty/core` automatiquement) : ```sh npx expo install react-native-adapty npx expo prebuild ``` 2. Compilez votre application pour le développement avec EAS ou un build local : ```sh # For iOS eas build --profile development --platform ios # For Android eas build --profile development --platform android ``` ```sh # For iOS npx expo run:ios # For Android npx expo run:android ``` 3. Démarrez le serveur de développement : ```sh npx expo start --dev-client ``` ### Adapty SDK 4.0 : activer Swift Package Manager \{#adapty-sdk-40-enable-swift-package-manager\} Le SDK React Native 4.0 — qui ajoute la prise en charge du [Flow Builder](adapty-flow-builder) — nécessite **React Native 0.75 ou une version ultérieure**. Installez le SDK : ```sh npx expo install react-native-adapty@^4.0.0 ``` v4 récupère les SDK iOS natifs (`Adapty`, `AdaptyUI`, `AdaptyPlugin`) via Swift Package Manager plutôt que les sous-dépendances CocoaPods ([le dépôt de specs CocoaPods passe en lecture seule en décembre 2026](https://blog.cocoapods.org/CocoaPods-Specs-Repo/)). SPM requiert des frameworks dynamiques, que vous activez dans Expo avec le plugin [`expo-build-properties`](https://docs.expo.dev/versions/latest/sdk/build-properties/). Ajoutez-le dans `app.json` (ou `app.config.js`) : ```json showLineNumbers title="app.json" { "expo": { "plugins": [ [ "expo-build-properties", { "ios": { "useFrameworks": "dynamic", "buildReactNativeFromSource": true } } ] ] } } ``` `buildReactNativeFromSource` est requis à partir d'**Expo SDK 57 et versions ultérieures**. Expo SDK 57 embarque un framework React Native prébuild dont les headers ne sont pas accessibles aux autres packages lorsque les frameworks sont dynamiques, ce qui entraîne des erreurs de build iOS du type `'React/RCTBridge.h' file not found` dans `expo-updates` ou `@expo/ui`. Compiler React Native depuis les sources permet d'éviter ce conflit, au prix de builds iOS plus longs. Avec Expo SDK 56 ou antérieur, cette option peut être omise. Installez ensuite le plugin et regénérez le projet natif : ```sh npx expo install expo-build-properties npx expo prebuild --clean ``` Consultez [Migrer le SDK Adapty React Native vers la v4](migration-to-react-native-sdk-v4) pour la migration complète. ## Activer le module Adapty du SDK \{#activate-adapty-module-of-adapty-sdk\} Pour obtenir votre **Public SDK Key** : 1. Accédez à l'Adapty Dashboard et naviguez vers [**App settings → General**](https://app.adapty.io/settings/general). 2. Dans la section **Api keys**, copiez la **Public SDK Key** (et NON la Secret Key). 3. Remplacez `"YOUR_PUBLIC_SDK_KEY"` dans le code. Ou obtenez-la de façon programmatique via l'[Adapty CLI](developer-cli) : ``` npm install -g adapty adapty auth login adapty apps list ``` Ou, directement : ``` npx adapty auth login adapty apps list ``` - Assurez-vous d'utiliser la **Public SDK key** pour l'initialisation d'Adapty — la **Secret key** ne doit être utilisée que pour l'[API côté serveur](getting-started-with-server-side-api). - Les **SDK keys** sont propres à chaque application, donc si vous avez plusieurs applications, veillez à choisir la bonne. Copiez le code suivant dans `App.tsx` pour activer Adapty : ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` :::important Attendez que `activate` soit résolu avant d'appeler toute autre méthode du SDK Adapty. Consultez [Ordre d'appel dans le SDK React Native](react-native-sdk-call-order) pour la séquence complète. ::: Configurez maintenant les paywalls dans votre application : - Si vous utilisez le [Adapty Paywall Builder](adapty-paywall-builder), suivez le [guide de démarrage du Paywall Builder](react-native-quickstart-paywalls). - Si vous créez votre propre interface de paywall, consultez le [guide de démarrage pour les paywalls personnalisés](react-native-quickstart-manual). :::tip Pour éviter les erreurs d'activation dans l'environnement de développement, consultez les [conseils](#development-environment-tips). ::: ## Activer le module AdaptyUI du SDK Adapty \{#activate-adaptui-module-of-adapty-sdk\} Si vous prévoyez d'utiliser le [Paywall Builder](adapty-paywall-builder), vous avez besoin du module AdaptyUI. Il est activé automatiquement lors de l'activation du module principal ; vous n'avez rien d'autre à faire. ## Configuration optionnelle \{#optional-setup\} ### Journalisation \{#logging\} #### Configurer le système de journalisation \{#set-up-the-logging-system\} Adapty enregistre les erreurs et d'autres informations importantes pour vous aider à comprendre ce qui se passe. Les niveaux suivants sont disponibles : | Level | Description | | ---------- | ------------------------------------------------------------ | | `error` | Seules les erreurs seront enregistrées | | `warn` | Les erreurs et les messages du SDK qui ne causent pas d'erreurs critiques, mais méritent attention, seront enregistrés | | `info` | Les erreurs, avertissements et divers messages d'information seront enregistrés | | `verbose` | Toute information supplémentaire pouvant être utile lors du débogage, telle que les appels de fonctions, les requêtes API, etc., sera enregistrée | Vous pouvez définir le niveau de journalisation dans votre application avant ou pendant la configuration d'Adapty : ```typescript showLineNumbers title="App.tsx" // Set log level before activation // 'verbose' is recommended for development and the first production release adapty.setLogLevel('verbose'); // Or set it during configuration adapty.activate('YOUR_PUBLIC_SDK_KEY', { logLevel: 'verbose', }); ``` ### Politiques de données \{#data-policies\} Adapty ne stocke pas les données personnelles de vos utilisateurs sauf si vous les envoyez explicitement, mais vous pouvez mettre en place des politiques de sécurité des données supplémentaires pour respecter les directives du store ou du pays. #### Désactiver la collecte et le partage des adresses IP \{#disable-ip-address-collection-and-sharing\} Lors de l'activation du module Adapty, définissez `ipAddressCollectionDisabled` sur `true` pour désactiver la collecte et le partage des adresses IP des utilisateurs. La valeur par défaut est `false`. Utilisez ce paramètre pour renforcer la confidentialité des utilisateurs, vous conformer aux réglementations régionales de protection des données (comme le RGPD ou le CCPA), ou réduire la collecte de données inutiles lorsque les fonctionnalités basées sur l'IP ne sont pas requises pour votre application. ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ipAddressCollectionDisabled: true, }); ``` #### Désactiver la collecte et le partage de l'identifiant publicitaire \{#disable-advertising-id-collection-and-sharing\} Lors de l'activation du module Adapty, définissez `ios.idfaCollectionDisabled` (iOS) ou `android.adIdCollectionDisabled` (Android) sur `true` pour désactiver la collecte des identifiants publicitaires. La valeur par défaut est `false`. Utilisez ce paramètre pour respecter les règles de l'App Store ou du Play Store, éviter d'afficher la demande d'autorisation App Tracking Transparency, ou si votre application n'a pas besoin d'attribution publicitaire ni d'analyses basées sur les identifiants publicitaires. ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { idfaCollectionDisabled: true, }, android: { adIdCollectionDisabled: true, }, }); ``` #### Configurer le cache média pour AdaptyUI \{#set-up-media-cache-configuration-for-adaptyui\} Par défaut, AdaptyUI met en cache les médias (images et vidéos, par exemple) pour améliorer les performances et réduire la consommation réseau. Vous pouvez personnaliser ces paramètres en fournissant une configuration personnalisée. Utilisez `mediaCache` pour remplacer les paramètres de cache par défaut : ```typescript adapty.activate('YOUR_PUBLIC_SDK_KEY', { mediaCache: { memoryStorageTotalCostLimit: 200 * 1024 * 1024, // Optional: memory cache size in bytes memoryStorageCountLimit: 2147483647, // Optional: max number of items in memory diskStorageSizeLimit: 200 * 1024 * 1024, // Optional: disk cache size in bytes }, }); ``` | Paramètre | Requis | Description | |-----------|--------|-------------| | memoryStorageTotalCostLimit | optionnel | Taille totale du cache en mémoire, en octets. Valeur par défaut spécifique à la plateforme. | | memoryStorageCountLimit | optionnel | Nombre maximum d'éléments dans le cache mémoire. Valeur par défaut spécifique à la plateforme. | | diskStorageSizeLimit | optionnel | Taille maximale des fichiers sur le disque, en octets. Valeur par défaut spécifique à la plateforme. | ### Activer les niveaux d'accès locaux (Android) \{#enable-local-access-levels-android\} Par défaut, les [niveaux d'accès locaux](local-access-levels) sont activés sur iOS et désactivés sur Android. Pour les activer également sur Android, définissez `localAccessLevelAllowed` sur `true` : ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { android: { localAccessLevelAllowed: true, }, }); ``` ### Effacer les données lors d'une restauration de sauvegarde \{#clear-data-on-backup-restore\} Lorsque `clearDataOnBackup` est défini sur `true`, le SDK détecte quand l'application est restaurée depuis une sauvegarde iCloud et supprime toutes les données SDK stockées localement, y compris les informations de profil en cache, les détails des produits et les paywalls. Le SDK s'initialise ensuite dans un état vierge. La valeur par défaut est `false`. :::note Seul le cache local du SDK est supprimé. L'historique des transactions avec Apple et les données utilisateur sur les serveurs Adapty restent inchangés. ::: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { clearDataOnBackup: true }, }); ``` ## Conseils pour l'environnement de développement \{#development-environment-tips\} #### Configurer le mode mock pour Expo Go / Expo Web \{#set-up-mock-mode-for-expo-go--expo-web\} Les environnements Expo Go et Expo Web n'ont pas accès aux modules natifs d'Adapty. Pour éviter les erreurs d'exécution tout en pouvant continuer à développer et tester l'interface et la logique de vos paywalls, Adapty propose un **mode mock**. ::::important Le mode mock n'est **pas** un outil pour tester de vrais achats : - Il **n'ouvre pas** les flux d'achat de l'App Store / Google Play et **ne crée pas** de vraies transactions. - Il **n'affiche pas** les paywalls/onboardings créés avec **Adapty Paywall Builder (AdaptyUI)**. - Les modules natifs d'Adapty sont **complètement contournés** — même l'absence de fichiers SDK natifs dans le build Xcode/Android ou une clé API invalide ne déclenchera pas d'erreurs. Pour tester de vrais achats et des paywalls Paywall Builder, utilisez un Expo Dev Client / build de production où le mode mock est automatiquement désactivé. :::: **Par défaut**, le SDK détecte automatiquement les environnements Expo Go et web et active le mode mock. Aucune configuration n'est nécessaire, sauf si vous souhaitez personnaliser les données mock. Lorsque le mode mock est actif : - Toutes les méthodes Adapty retournent des données mock sans effectuer de requêtes réseau vers les serveurs d'Adapty. - Par défaut, le profil mock initial n'a pas d'abonnements actifs. - Par défaut, `makePurchase(...)` simule un achat réussi et accorde l'accès premium. Vous pouvez personnaliser les données fictives avec `mockConfig` lors de l'activation. Consultez le format de configuration et les paramètres pris en charge [ici](https://react-native.adapty.io/interfaces/adaptymockconfig). ```typescript showLineNumbers title="App.tsx" try { await adapty.activate('YOUR_PUBLIC_SDK_KEY', { mockConfig: { // Customize the initial mock profile (optional) }, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); } ``` Si vous devez appeler des méthodes du SDK avant l'activation (comme `isActivated()` ou `setLogLevel()`), utilisez `enableMock()` avant `activate()`. Si le bridge est déjà initialisé, cette méthode ne fait rien. ```typescript showLineNumbers title="App.tsx" adapty.enableMock(); // Optional: pass mockConfig to customize mock data // Now you can call methods before activation await adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` #### Différer l'activation du SDK à des fins de développement \{#delay-sdk-activation-for-development-purposes\} Adapty récupère à l'avance toutes les données utilisateur nécessaires lors de l'activation du SDK, ce qui permet un accès plus rapide aux données fraîches. Cependant, cela peut poser un problème dans le simulateur iOS, qui demande fréquemment une authentification pendant le développement. Bien qu'Adapty ne puisse pas contrôler le flux d'authentification StoreKit, il peut différer les requêtes effectuées par le SDK pour obtenir des données utilisateur fraîches. En activant la propriété `__debugDeferActivation`, l'appel d'activation est suspendu jusqu'à ce que vous effectuiez le prochain appel au SDK Adapty. Cela évite les demandes d'authentification inutiles si elles ne sont pas nécessaires. Il est important de noter que **cette fonctionnalité est destinée uniquement au développement**, car elle ne couvre pas tous les scénarios utilisateurs possibles. En production, l'activation ne doit pas être retardée, car les appareils réels mémorisent généralement les données d'authentification et ne redemandent pas les identifiants à répétition. Voici l'approche recommandée : ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __debugDeferActivation: isSimulator(), // 'isSimulator' from any 3rd party library }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` #### Résoudre les erreurs d'activation du SDK lors du Fast Refresh de React Native \{#troubleshoot-sdk-activation-errors-on-react-natives-fast-refresh\} Lors du développement avec le SDK Adapty dans React Native, vous pouvez rencontrer l'erreur : `Adapty can only be activated once. Ensure that the SDK activation call is not made more than once.` Cela se produit parce que la fonctionnalité de fast refresh de React Native déclenche plusieurs appels d'activation pendant le développement. Pour éviter cela, utilisez l'option `__ignoreActivationOnFastRefresh` définie sur `__DEV__` (le flag du mode développement de React Native). ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __ignoreActivationOnFastRefresh: __DEV__, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` ## Résolution des problèmes \{#troubleshooting\} #### Erreur de version iOS minimale \{#minimum-ios-version-error\} Lors d'une compilation pour iOS, vous pourriez voir une erreur concernant la **version iOS minimale** ou la cible de déploiement. Adapty requiert **iOS 15.0+**. Étant donné qu'Expo génère le projet iOS (y compris le `Podfile`) lors de l'exécution de `expo prebuild`, **vous ne devez pas modifier le `Podfile` directement**. Configurez plutôt la cible de déploiement via le plugin de configuration `expo-build-properties`. 1. Installez le plugin : ```sh npx expo install expo-build-properties ``` 2. Mettez à jour votre configuration Expo (`app.json` ou `app.config.js`) pour définir la cible de déploiement iOS : ``` { "expo": { // ...other Expo config... "plugins": [ [ "expo-build-properties", { "ios": { // Adapty requires iOS 15.0+. "deploymentTarget": "15.0" } } ], ] } } ``` 3. Régénérez le projet iOS natif et reconstruisez : ``` npx expo prebuild --clean npx expo run:ios # or `eas build -p ios` on your CI ``` #### Conflit de manifeste Android Auto Backup \{#android-auto-backup-manifest-conflict\} Lors de l'utilisation d'Expo avec plusieurs SDK qui configurent Android Auto Backup (comme Adapty, AppsFlyer ou expo-secure-store), vous pouvez rencontrer un conflit lors de la fusion des manifestes. Une erreur type ressemble à ceci : `Manifest merger failed : Attribute application@fullBackupContent value=(@xml/secure_store_backup_rules) from AndroidManifest.xml:24:248-306 is also present at [io.adapty:android-sdk:3.12.0] AndroidManifest.xml:9:18-70 value=(@xml/adapty_backup_rules).` Pour résoudre ce conflit, vous devez laisser le plugin Adapty gérer la configuration de sauvegarde Android. Si votre projet utilise également `expo-secure-store`, désactivez sa propre configuration de sauvegarde pour éviter les conflits. Voici comment configurer votre `app.json` : ```json title="app.json" { "expo": { "plugins": [ ["react-native-adapty", { "replaceAndroidBackupConfig": true }], ["expo-secure-store", { "configureAndroidBackup": false }] ] } } ``` L'option `replaceAndroidBackupConfig` est `false` par défaut. Lorsqu'elle est activée, elle permet au plugin Adapty de contrôler les règles de sauvegarde Android. Ajoutez `"configureAndroidBackup": false` si vous utilisez `expo-secure-store` pour éviter les avertissements, car la configuration de sauvegarde de SecureStore sera désormais gérée par Adapty. :::important Cette configuration respecte uniquement les exigences de sauvegarde pour Adapty, AppsFlyer et expo-secure-store. Si d'autres bibliothèques de votre projet définissent des règles de sauvegarde personnalisées, vous devrez les configurer manuellement. ::: --- # File: sdk-installation-react-native-pure --- --- title: "Installer et configurer le SDK Adapty dans un projet React Native pur" description: "Guide étape par étape pour installer le SDK Adapty sur React Native pour les applications basées sur les abonnements." --- :::important Ce guide s'applique uniquement aux **projets React Native purs (sans Expo)**. Si vous utilisez **Expo**, suivez plutôt le [guide d'installation pour Expo](sdk-installation-react-native-expo). ::: Le SDK Adapty comprend deux modules clés pour une intégration fluide dans votre application React Native : - **Core Adapty** : ce module est indispensable au bon fonctionnement d'Adapty dans votre application. - **AdaptyUI** : ce module est nécessaire si vous utilisez le [Adapty Paywall Builder](adapty-paywall-builder), un outil no-code convivial pour créer facilement des paywalls multiplateformes. AdaptyUI est activé automatiquement avec le module principal. :::tip Vous voulez voir un exemple concret d'intégration du SDK Adapty dans une application mobile ? Consultez nos [exemples d'applications](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples), qui illustrent la configuration complète, notamment l'affichage des paywalls, les achats et d'autres fonctionnalités de base. ::: ## Prérequis \{#requirements\} Le SDK React Native d'Adapty requiert iOS 15.0 ou supérieur. La compilation pour iOS nécessite **Swift 6.0** ou une version ultérieure. Le [mode Kids](kids-mode-react-native) requiert **Swift 6.1** ou une version ultérieure. :::info À partir du SDK v3.17, Adapty SDK utilise Google Play Billing Library v8.0.0 par défaut. ::: :::info L'installation du SDK correspond à l'étape 5 de la configuration d'Adapty. Avant que les achats fonctionnent dans votre app, vous devez également connecter votre app aux stores, puis créer des produits, un paywall et un placement dans l'Adapty Dashboard. Le [guide de démarrage rapide](quickstart) décrit toutes les étapes requises. ::: ## Installer le SDK Adapty \{#install-adapty-sdk\} :::important À partir de la v4, le SDK React Native d'Adapty ne prend plus en charge l'installation CocoaPods de ses dépendances natives. Si vous avez besoin de la v4 ou d'une version ultérieure (pour le [Flow Builder](adapty-flow-builder)), suivez plutôt [SDK Adapty 4.0 : activer Swift Package Manager](#adapty-sdk-40-enable-swift-package-manager) ci-dessous. ::: [![Release](https://img.shields.io/github/v/release/adaptyteam/AdaptySDK-React-Native.svg?style=flat&logo=react)](https://github.com/adaptyteam/AdaptySDK-React-Native/releases) 1. Installez le SDK Adapty (cela installe également `@adapty/core` automatiquement) : ```sh showLineNumbers title="Shell" # using npm npm install react-native-adapty # or using yarn yarn add react-native-adapty ``` 2. Pour iOS, installez les pods : ```sh showLineNumbers title="Shell" cd ios && pod install ```
Pour Android, si votre version de React Native est antérieure à 0.73.0 (cliquez pour développer) Mettez à jour le fichier `/android/build.gradle`. Assurez-vous que la dépendance `kotlin-gradle-plugin:1.8.0` ou une version plus récente est présente : ```groovy showLineNumbers title="/android/build.gradle" ... buildscript { ... dependencies { ... classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.0" } } ... ```
### SDK Adapty 4.0 : activer Swift Package Manager \{#adapty-sdk-40-enable-swift-package-manager\} Le SDK React Native 4.0 — qui ajoute la prise en charge du [Flow Builder](adapty-flow-builder) — nécessite **React Native 0.75 ou une version ultérieure**. Installez le SDK : ```sh showLineNumbers title="Shell" npm install react-native-adapty@^4.0.0 # or using yarn yarn add react-native-adapty@^4.0.0 ``` La v4 récupère les SDK iOS natifs (`Adapty`, `AdaptyUI`, `AdaptyPlugin`) via Swift Package Manager plutôt que via des sous-dépendances CocoaPods ([le dépôt de specs CocoaPods passe en lecture seule en décembre 2026](https://blog.cocoapods.org/CocoaPods-Specs-Repo/)). SPM nécessite des frameworks dynamiques — ajoutez ce qui suit dans la cible de votre `ios/Podfile`, puis réinstallez les pods : ```ruby showLineNumbers title="ios/Podfile" use_frameworks! :linkage => :dynamic ``` ```sh showLineNumbers title="Shell" cd ios && pod install --repo-update ``` Si vous récupériez auparavant `Adapty`, `AdaptyUI` ou `AdaptyPlugin` en tant que sous-dépendances CocoaPods, supprimez d'abord toute ligne `pod 'Adapty'`, `pod 'AdaptyUI'` ou `pod 'AdaptyPlugin'` de votre `Podfile`. :::warning Passer de la liaison statique par défaut aux frameworks dynamiques peut entrer en conflit avec des bibliothèques qui ne prennent pas encore en charge les en-têtes modulaires, et est incompatible avec Flipper. Consultez [Migrer le SDK React Native Adapty vers la v4](migration-to-react-native-sdk-v4) pour plus de détails. ::: ## Activer le module Adapty du SDK Adapty \{#activate-adapty-module-of-adapty-sdk\} Pour obtenir votre **Public SDK Key** : 1. Accédez à l'Adapty Dashboard et naviguez vers [**App settings → General**](https://app.adapty.io/settings/general). 2. Dans la section **Api keys**, copiez la **Public SDK Key** (et NON la Secret Key). 3. Remplacez `"YOUR_PUBLIC_SDK_KEY"` dans le code. Ou obtenez-la de façon programmatique via l'[Adapty CLI](developer-cli) : ``` npm install -g adapty adapty auth login adapty apps list ``` Ou, directement : ``` npx adapty auth login adapty apps list ``` - Assurez-vous d'utiliser la **Public SDK key** pour l'initialisation d'Adapty — la **Secret key** ne doit être utilisée que pour l'[API côté serveur](getting-started-with-server-side-api). - Les **SDK keys** sont propres à chaque application, donc si vous avez plusieurs applications, veillez à choisir la bonne. Copiez le code suivant dans `App.tsx` pour activer Adapty : ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` :::important Attendez que `activate` soit résolu avant d'appeler toute autre méthode du SDK Adapty. Consultez [Ordre des appels dans le SDK React Native](react-native-sdk-call-order) pour la séquence complète. ::: Configurez maintenant les paywalls dans votre application : - Si vous utilisez [Adapty Paywall Builder](adapty-paywall-builder), suivez le [démarrage rapide avec Paywall Builder](react-native-quickstart-paywalls). - Si vous créez votre propre interface de paywall, consultez le [démarrage rapide pour les paywalls personnalisés](react-native-quickstart-manual). :::tip Pour éviter les erreurs d'activation en environnement de développement, utilisez les [conseils](#development-environment-tips). ::: ## Activer le module AdaptyUI du SDK Adapty \{#activate-adaptyui-module-of-adapty-sdk\} Si vous prévoyez d'utiliser le [Paywall Builder](adapty-paywall-builder), vous avez besoin du module AdaptyUI. Il est activé automatiquement lorsque vous activez le module principal ; vous n'avez rien d'autre à faire. ## Configuration optionnelle \{#optional-setup\} ### Journalisation \{#logging\} #### Configurer le système de journalisation \{#set-up-the-logging-system\} Adapty enregistre les erreurs et d'autres informations importantes pour vous aider à comprendre ce qui se passe. Les niveaux suivants sont disponibles : | Niveau | Description | | ---------- | ------------------------------------------------------------ | | `error` | Seules les erreurs seront enregistrées | | `warn` | Les erreurs et les messages du SDK qui ne causent pas d'erreurs critiques mais méritent attention seront enregistrés | | `info` | Les erreurs, avertissements et divers messages d'information seront enregistrés | | `verbose` | Toute information supplémentaire pouvant être utile lors du débogage, comme les appels de fonctions, les requêtes API, etc., sera enregistrée | Vous pouvez définir le niveau de journalisation dans votre application avant ou pendant la configuration d'Adapty : ```typescript showLineNumbers title="App.tsx" // Set log level before activation // 'verbose' is recommended for development and the first production release adapty.setLogLevel('verbose'); // Or set it during configuration adapty.activate('YOUR_PUBLIC_SDK_KEY', { logLevel: 'verbose', }); ``` ### Politiques de données \{#data-policies\} Adapty ne stocke pas les données personnelles de vos utilisateurs à moins que vous ne les envoyiez explicitement, mais vous pouvez mettre en place des politiques de sécurité des données supplémentaires pour vous conformer aux directives des stores ou des pays. #### Désactiver la collecte et le partage des adresses IP \{#disable-ip-address-collection-and-sharing\} Lors de l'activation du module Adapty, définissez `ipAddressCollectionDisabled` sur `true` pour désactiver la collecte et le partage des adresses IP des utilisateurs. La valeur par défaut est `false`. Utilisez ce paramètre pour renforcer la confidentialité des utilisateurs, vous conformer aux réglementations régionales de protection des données (comme le RGPD ou le CCPA), ou réduire la collecte de données inutile lorsque les fonctionnalités basées sur l'IP ne sont pas requises pour votre application. ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ipAddressCollectionDisabled: true, }); ``` #### Désactiver la collecte et le partage de l'identifiant publicitaire \{#disable-advertising-id-collection-and-sharing\} Lors de l'activation du module Adapty, définissez `ios.idfaCollectionDisabled` (iOS) ou `android.adIdCollectionDisabled` (Android) sur `true` pour désactiver la collecte des identifiants publicitaires. La valeur par défaut est `false`. Utilisez ce paramètre pour vous conformer aux politiques de l'App Store/Play Store, éviter de déclencher la demande App Tracking Transparency, ou si votre application ne nécessite pas d'attribution publicitaire ni d'analyse basée sur les identifiants publicitaires. ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { idfaCollectionDisabled: true, }, android: { adIdCollectionDisabled: true, }, }); ``` #### Configurer le cache média pour AdaptyUI \{#set-up-media-cache-configuration-for-adaptyui\} Par défaut, AdaptyUI met en cache les médias (images et vidéos) pour améliorer les performances et réduire l'utilisation du réseau. Vous pouvez personnaliser les paramètres du cache en fournissant une configuration personnalisée. Utilisez `mediaCache` pour remplacer les paramètres de cache par défaut : ```typescript adapty.activate('YOUR_PUBLIC_SDK_KEY', { mediaCache: { memoryStorageTotalCostLimit: 200 * 1024 * 1024, // Optional: memory cache size in bytes memoryStorageCountLimit: 2147483647, // Optional: max number of items in memory diskStorageSizeLimit: 200 * 1024 * 1024, // Optional: disk cache size in bytes }, }); ``` Paramètres : | Paramètre | Requis | Description | |-----------|----------|-------------| | memoryStorageTotalCostLimit | optionnel | Taille totale du cache en mémoire en octets. Par défaut, valeur spécifique à la plateforme. | | memoryStorageCountLimit | optionnel | Limite du nombre d'éléments dans le stockage en mémoire. Par défaut, valeur spécifique à la plateforme. | | diskStorageSizeLimit | optionnel | Limite de taille des fichiers sur le disque en octets. Par défaut, valeur spécifique à la plateforme. | ### Activer les niveaux d'accès locaux (Android) \{#enable-local-access-levels-android\} Par défaut, les [niveaux d'accès locaux](local-access-levels) sont activés sur iOS et désactivés sur Android. Pour les activer également sur Android, définissez `localAccessLevelAllowed` sur `true` : ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { android: { localAccessLevelAllowed: true, }, }); ``` ### Effacer les données lors de la restauration d'une sauvegarde \{#clear-data-on-backup-restore\} Lorsque `clearDataOnBackup` est défini sur `true`, le SDK détecte quand l'application est restaurée depuis une sauvegarde iCloud et supprime toutes les données SDK stockées localement, y compris les informations de profil en cache, les détails des produits et les paywalls. Le SDK s'initialise alors avec un état vierge. La valeur par défaut est `false`. :::note Seul le cache local du SDK est supprimé. L'historique des transactions avec Apple et les données utilisateur sur les serveurs Adapty restent inchangés. ::: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { clearDataOnBackup: true }, }); ``` ## Conseils pour l'environnement de développement \{#development-environment-tips\} #### Retarder l'activation du SDK à des fins de développement \{#delay-sdk-activation-for-development-purposes\} Adapty pré-charge toutes les données utilisateur nécessaires lors de l'activation du SDK, permettant un accès plus rapide aux données actualisées. Cela peut toutefois poser problème dans le simulateur iOS, qui demande fréquemment une authentification lors du développement. Bien qu'Adapty ne puisse pas contrôler le flux d'authentification StoreKit, il peut différer les requêtes effectuées par le SDK pour obtenir des données utilisateur actualisées. En activant la propriété `__debugDeferActivation`, l'appel d'activation est suspendu jusqu'à ce que vous effectuiez le prochain appel au SDK Adapty. Cela évite les demandes d'authentification inutiles si elles ne sont pas nécessaires. Il est important de noter que **cette fonctionnalité est destinée uniquement au développement**, car elle ne couvre pas tous les scénarios utilisateur possibles. En production, l'activation ne doit pas être différée, car les appareils réels mémorisent généralement les données d'authentification et ne demandent pas répétitivement les identifiants. Voici l'approche recommandée : ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __debugDeferActivation: isSimulator(), // 'isSimulator' from any 3rd party library }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` #### Résoudre les erreurs d'activation du SDK avec le Fast Refresh de React Native \{#troubleshoot-sdk-activation-errors-on-react-natives-fast-refresh\} Lors du développement avec le SDK Adapty dans React Native, vous pouvez rencontrer l'erreur : `Adapty can only be activated once. Ensure that the SDK activation call is not made more than once.` Cela se produit parce que la fonctionnalité de rechargement rapide de React Native déclenche plusieurs appels d'activation pendant le développement. Pour éviter cela, utilisez l'option `__ignoreActivationOnFastRefresh` définie sur `__DEV__` (le drapeau de mode développement de React Native). ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __ignoreActivationOnFastRefresh: __DEV__, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` #### Configurer le mode mock pour les tests locaux \{#set-up-mock-mode-for-local-testing\} Pour le développement local et les tests, vous pouvez activer le mode mock afin d'éviter d'avoir besoin de comptes sandbox App Store/Google Play et d'accélérer les itérations. Le mode mock contourne complètement les modules natifs d'Adapty et renvoie des données simulées. :::important Le mode mock **n'est pas** un outil pour tester de vrais achats : - Il **n'ouvre pas** les flux d'achat App Store / Google Play et **ne crée pas** de vraies transactions. - Il **n'affiche pas** les paywalls/onboardings créés avec **Adapty Paywall Builder (AdaptyUI)**. - Les modules natifs d'Adapty sont **complètement contournés** — même des fichiers SDK natifs manquants dans la build Xcode/Android ou une clé API invalide ne déclencheront pas d'erreurs. - Aucune donnée n'est envoyée aux serveurs d'Adapty. Pour tester de vrais achats et les paywalls Paywall Builder, désactivez le mode mock et utilisez des comptes sandbox. ::: Pour activer le mode mock, définissez `enableMock` sur `true` : ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { enableMock: true, }); ``` Lorsque le mode mock est actif : - Toutes les méthodes Adapty renvoient des données mock sans effectuer de requêtes réseau vers les serveurs d'Adapty. - Par défaut, le profil mock initial n'a pas d'abonnements actifs. - Par défaut, `makePurchase(...)` simule un achat réussi et accorde l'accès premium. Vous pouvez personnaliser les données mock en utilisant `mockConfig` lors de l'activation. Consultez le format de configuration et les paramètres pris en charge [ici](https://react-native.adapty.io/interfaces/adaptymockconfig). ```typescript showLineNumbers title="App.tsx" try { await adapty.activate('YOUR_PUBLIC_SDK_KEY', { mockConfig: { // Customize the initial mock profile (optional) }, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); } ``` Si vous avez besoin d'appeler des méthodes du SDK avant l'activation (comme `isActivated()` ou `setLogLevel()`), utilisez `enableMock()` avant `activate()`. Si le bridge est déjà initialisé, cette méthode ne fait rien. ```typescript showLineNumbers title="App.tsx" adapty.enableMock(); // Optional: pass mockConfig to customize mock data // Now you can call methods before activation await adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` ## Dépannage \{#troubleshooting\} #### Erreur de version iOS minimale \{#minimum-ios-version-error\} Si vous obtenez une erreur de version iOS minimale, mettez à jour votre Podfile : ```diff -platform :ios, min_ios_version_supported +platform :ios, '15.0' ``` #### Conflit de manifeste Android Auto Backup \{#android-auto-backup-manifest-conflict\} Certains SDKs (dont Adapty) embarquent leur propre configuration Android Auto Backup. Si vous utilisez plusieurs SDKs qui définissent des règles de sauvegarde, la fusion du manifeste Android peut échouer avec une erreur mentionnant `android:fullBackupContent`, `android:dataExtractionRules` ou `android:allowBackup`. Symptômes typiques : `Manifest merger failed: Attribute application@dataExtractionRules value=(@xml/your_data_extraction_rules) is also present at [com.other.sdk:library:1.0.0] value=(@xml/other_sdk_data_extraction_rules)` :::note Ces modifications doivent être effectuées dans votre répertoire de la plateforme Android (généralement situé dans le dossier `android/` de votre projet). ::: Pour résoudre ce problème, vous devez : - Indiquer au gestionnaire de fusion de manifeste d'utiliser les valeurs de votre application pour les attributs liés à la sauvegarde. - Créer des fichiers de règles de sauvegarde qui fusionnent les règles d'Adapty avec celles des autres SDKs. #### 1. Ajoutez l'espace de noms `tools` à votre manifeste \{#1-add-the-tools-namespace-to-your-manifest\} Dans votre fichier `AndroidManifest.xml`, assurez-vous que la balise racine `` inclut tools : ```xml ... ``` #### 2. Remplacez les attributs de sauvegarde dans `` \{#2-override-backup-attributes-in-application\} Dans le même fichier `AndroidManifest.xml`, mettez à jour la balise `` afin que votre application fournisse les valeurs finales et indique au gestionnaire de fusion de remplacer les valeurs des bibliothèques : ```xml ... ``` Si un SDK définit également `android:allowBackup`, incluez-le dans `tools:replace` : ```xml tools:replace="android:allowBackup,android:fullBackupContent,android:dataExtractionRules" ``` #### 3. Créez les fichiers de règles de sauvegarde fusionnés \{#3-create-merged-backup-rules-files\} Créez des fichiers XML dans le répertoire `res/xml/` de votre projet Android, en combinant les règles d'Adapty avec celles des autres SDKs. Android utilise des formats de règles de sauvegarde différents selon la version de l'OS, donc créer les deux fichiers garantit la compatibilité avec toutes les versions d'Android prises en charge par votre application. :::note Les exemples ci-dessous utilisent AppsFlyer comme exemple de SDK tiers. Remplacez ou ajoutez des règles pour tout autre SDK que vous utilisez dans votre application. ::: **Pour Android 12 et supérieur** (utilise le nouveau format de règles d'extraction de données) : ```xml title="sample_data_extraction_rules.xml" ``` **Pour Android 11 et inférieur** (utilise l'ancien format de sauvegarde complète) : ```xml title="sample_backup_rules.xml" #### Les achats échouent après le retour depuis une autre application sur Android \{#purchases-fail-after-returning-from-another-app-in-android\} Si l'Activity qui démarre le flux d'achat utilise un `launchMode` non standard, Android peut la recréer ou la réutiliser de manière incorrecte lorsque l'utilisateur revient depuis Google Play, une application bancaire ou un navigateur. Cela peut entraîner la perte du résultat de l'achat ou son traitement comme annulé. Pour que les achats fonctionnent correctement, utilisez uniquement les modes de lancement `standard` ou `singleTop` pour l'Activity qui démarre le flux d'achat, et évitez tout autre mode. Dans votre `AndroidManifest.xml`, assurez-vous que l'Activity qui démarre le flux d'achat est définie sur `standard` ou `singleTop` : ```xml ``` #### Erreurs de build Swift 6 causées par le remplacement de SWIFT_VERSION dans le Podfile \{#swift-6-build-errors-caused-by-podfile-swift_version-override\} Lors de la compilation de votre application React Native pour iOS, vous pouvez voir des erreurs de compilation Swift 6 sur les cibles de pod Adapty. Les symptômes typiques incluent des incompatibilités `@Sendable` dans `AdaptyUIBuilderLogic`, une conformité `Sendable` manquante sur les types Adapty, ou des erreurs d'isolation d'acteur. Les pods Adapty déclarent `s.swift_version = '6.0'` et nécessitent Swift 6 pour être compilés. Votre propre code d'application peut rester sur Swift 5 — seules les cibles de pod Adapty (`Adapty`, `AdaptyUI`, `AdaptyUIBuilder`, `AdaptyLogger`, `AdaptyPlugin`) doivent être compilées avec Swift 6. La cause la plus fréquente est un hook `post_install` dans `ios/Podfile` qui réécrit `SWIFT_VERSION` pour chaque cible de pod : ```ruby showLineNumbers title="ios/Podfile" post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['SWIFT_VERSION'] = '5.9' end end end ``` **Correctif** : Excluez les cibles de pod Adapty du remplacement : ```ruby showLineNumbers title="ios/Podfile" post_install do |installer| installer.pods_project.targets.each do |target| next if %w[Adapty AdaptyUI AdaptyUIBuilder AdaptyLogger AdaptyPlugin].include?(target.name) target.build_configurations.each do |config| config.build_settings['SWIFT_VERSION'] = '5.9' end end end ``` Exécutez ensuite `pod install` depuis le répertoire `ios/` et recompilez. Pour vérifier, ouvrez `ios/Pods/Pods.xcodeproj`, sélectionnez la cible de pod `Adapty` → **Build Settings** → **Swift Language Version**. Elle devrait indiquer **Swift 6**. --- # File: react-native-quickstart-paywalls --- --- title: "Activer les achats avec le Flow Builder dans le SDK React Native" description: "Guide de démarrage rapide pour activer les achats intégrés avec Adapty Flow Builder." --- Pour activer les achats intégrés, vous devez comprendre trois concepts clés : - [**Produits**](product) – tout ce que les utilisateurs peuvent acheter (abonnements, consommables, accès à vie) - [**Flows**](adapty-flow-builder) – des séquences d'écrans qui présentent des produits aux utilisateurs, créées dans le Flow Builder sans code. Le SDK les récupère via `getFlow`. Si vous préférez créer l'interface dans votre propre code, utilisez plutôt un paywall — voir [Implémenter des paywalls manuellement](react-native-quickstart-manual). - [**Placements**](placements) – où et quand vous affichez des flows dans votre application (par exemple `main`, `onboarding`, `settings`). Vous associez des flows à des placements dans le tableau de bord, puis vous les demandez par ID de placement dans votre code. Cela facilite l'exécution de tests A/B et l'affichage de flows différents selon les utilisateurs. Adapty vous propose trois façons d'activer les achats dans votre application. Choisissez celle qui correspond à vos besoins : | Implémentation | Complexité | Quand l'utiliser | |---|---|---| | Adapty Flow Builder | ✅ Facile | Vous [créez un flow complet et prêt à l'achat dans le builder sans code](quickstart-paywalls). Adapty le rend automatiquement et gère tout le processus d'achat, la validation des reçus et la gestion des abonnements en arrière-plan. | | Paywalls créés manuellement | 🟡 Moyen | Vous implémentez l'interface de votre paywall dans le code de votre application, mais vous récupérez tout de même l'objet flow depuis Adapty pour garder de la flexibilité dans les offres de produits. Voir le [guide](react-native-quickstart-manual). | | Mode observateur | 🔴 Difficile | Vous disposez déjà de votre propre infrastructure de gestion des achats et souhaitez continuer à l'utiliser. Notez que le mode observateur a ses limitations dans Adapty. Voir l'[article](observer-vs-full-mode). | :::important **Les étapes ci-dessous montrent comment implémenter un flow créé dans l'Adapty Flow Builder.** Si vous préférez créer l'interface du paywall vous-même, voir [Implémenter des paywalls manuellement](react-native-quickstart-manual). ::: Pour afficher un flow créé dans l'Adapty Flow Builder, vous n'avez besoin que de : 1. **Récupérer le flow** : Obtenez-le depuis Adapty. 2. **L'afficher et laisser Adapty gérer les achats** : Affichez la vue dans votre application. 3. **Gérer les actions des boutons** : Associez les interactions utilisateur aux réponses de votre application. Par exemple, ouvrir des liens ou fermer le flow quand les utilisateurs cliquent sur des boutons. ## Avant de commencer \{#before-you-start\} Avant de commencer, effectuez ces étapes : 1. Connectez votre application à l'[App Store](initial_ios) et/ou à [Google Play](initial-android) dans l'Adapty Dashboard. 2. [Créez vos produits](create-product) dans Adapty. 3. [Créez un flow et ajoutez-y des produits](create-paywall). 4. [Créez un placement et ajoutez-y votre flow](create-placement). 5. [Installez et activez le SDK Adapty](sdk-installation-reactnative) dans le code de votre application. Ce guide utilise les API du SDK Adapty React Native v4. ## 1. Récupérer le flow \{#1-get-the-flow\} Vos flows sont associés à des placements configurés dans le tableau de bord. Les placements vous permettent d'afficher des flows différents selon les audiences ou d'exécuter des [tests A/B](ab-tests). Pour obtenir un flow créé dans l'Adapty Flow Builder, récupérez l'objet `flow` par l'ID de [placement](placements) en utilisant la méthode `getFlow`. Le flow contient les éléments d'interface et les styles nécessaires à son affichage. ```typescript showLineNumbers title="React Native" try { const flow = await adapty.getFlow('YOUR_PLACEMENT_ID'); // the requested flow } catch (error) { // handle the error } ``` ## 2. Afficher le flow \{#2-display-the-flow\} Maintenant que vous avez le flow, quelques lignes suffisent pour l'afficher. Pour intégrer un flow dans votre arborescence de composants existante, utilisez directement le composant `AdaptyFlowView` dans votre hiérarchie de composants React Native : ```typescript showLineNumbers title="React Native (TSX)" function MyFlow({ flow }) { const onPurchaseCompleted = useCallback( (result, product) => result.type !== 'user_cancelled', [], ); return ( ); } ``` Pour afficher le flow comme un écran indépendant, créez une `view` avec la méthode `createFlowView`, définissez ses gestionnaires d'événements, puis appelez `view.present()`. Chaque `view` ne peut être utilisée qu'une seule fois. Si vous devez afficher le flow à nouveau, appelez `createFlowView` une nouvelle fois pour créer une nouvelle instance de `view`. ```typescript showLineNumbers title="React Native" try { const view = await createFlowView(flow); view.setEventHandlers({ onPurchaseCompleted(result, product) { return result.type !== 'user_cancelled'; }, }); await view.present(); } catch (error) { // handle the error } ``` :::tip Pour plus de détails sur l'affichage d'un flow, consultez notre [guide](react-native-present-paywalls). ::: ## 3. Gérer les actions des boutons \{#3-handle-button-actions\} Quand les utilisateurs cliquent sur des boutons dans le flow, le SDK React Native gère automatiquement les achats, la restauration, la fermeture du flow et l'ouverture des URLs. Cependant, d'autres boutons ont des ID personnalisés ou prédéfinis et nécessitent que vous gériez leurs actions dans votre code. Ou bien, vous pouvez souhaiter remplacer leur comportement par défaut. Par exemple, voici le comportement par défaut du bouton de fermeture. Vous n'avez pas besoin de l'ajouter dans le code, mais vous pouvez voir ici comment procéder si nécessaire. Pour le composant React, gérez les actions directement dans le composant `AdaptyFlowView` : ```typescript showLineNumbers title="React Native (TSX)" function MyFlow({ flow }) { const onCloseButtonPress = useCallback( () => true, // allow the flow to close [], ); const onCustomAction = useCallback( (actionId) => false, [], ); return ( ); } ``` Pour la présentation modale, implémentez les gestionnaires d'événements via `setEventHandlers` : ```typescript showLineNumbers title="React Native" const unsubscribe = view.setEventHandlers({ onCloseButtonPress() { return true; // allow the flow to close }, }); ``` :::tip Consultez nos guides sur la gestion des [actions](react-native-handle-paywall-actions) et des [événements](react-native-handling-events-1) des boutons. ::: ## Étapes suivantes \{#next-steps\} :::tip Des questions ou des problèmes ? Consultez notre [forum d'assistance](https://adapty.featurebase.app/) où vous trouverez des réponses aux questions fréquentes ou pourrez poser les vôtres. Notre équipe et notre communauté sont là pour vous aider ! ::: Votre flow est prêt à être affiché dans l'application. [Testez vos achats](react-native-test) pour vous assurer que vous pouvez effectuer un achat test depuis le flow. Vous devez maintenant [vérifier le niveau d'accès des utilisateurs](react-native-check-subscription-status) pour vous assurer d'afficher un flow ou d'accorder l'accès aux fonctionnalités payantes aux bons utilisateurs. ## Exemple complet \{#full-example\} Voici comment toutes les étapes de ce guide peuvent être intégrées ensemble dans votre application. ```javascript showLineNumbers title="React Native (TSX)" export default function FlowScreen() { const [flow, setFlow] = useState(null); const loadFlow = async () => { try { const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID'); setFlow(flowData); } catch (error) { console.warn('Error loading flow:', error); } }; const onCloseButtonPress = useCallback( () => true, [], ); const onPurchaseCompleted = useCallback( (result, product) => result.type !== 'user_cancelled', [], ); useEffect(() => { loadFlow(); }, []); return ( {flow ? ( ) : (