Ajoutez un programme d’affiliation ou de parrainage à votre app React Native.

Ce que fait le SDK dans une app React Native

Un seul package couvre iOS, Android et tous les workflows Expo. Il remplit trois rôles :

• Il trouve le créateur derrière une installation. checkAttribution répond une seule fois par installation. Un code saisi donne une correspondance exacte ; sinon, la correspondance par clic relie l’installation à un clic récent sur le lien du créateur, dans les 72 heures. Pas d’IDFA, pas de pop-up ATT.

• Il accepte les codes de parrainage saisis. applyCode, ou le champ prêt à l’emploi ReferralCodeInput, couvre les mentions en podcast ou en vidéo, où personne ne clique sur un lien.

• Il relie les achats au parrainage. Avec RevenueCat, il marque l’abonné ; en direct avec le store, il signale l’achat signé par le store, qu’InfluTo vérifie auprès d’Apple ou de Google. Une commission n’existe qu’après cette vérification.

Étape 1 : installer le package

Ajoutez le SDK et AsyncStorage, qui conserve l’état local du SDK. AsyncStorage est un module natif : il doit figurer dans les dépendances de votre propre app pour l’autolinking. Dans React Native pur, lancez ensuite pod install dans ios/.

Avec Expo, il n’y a rien d’autre à ajouter et aucun config plugin : le SDK est du JavaScript pur au-dessus d’AsyncStorage, il tourne donc dans Expo Go, les development builds et les builds de production. Il requiert React Native 0.60+ et React 16.8+.

npm install @influto/react-native-sdk
# AsyncStorage is a native module — install it in the app too
npm install @react-native-async-storage/async-storage

Étape 2 : initialiser une fois, puis vérifier l’attribution

Appelez initialize une seule fois, le plus tôt possible, et attendez qu’il se termine avant tout le reste. Il lève une erreur en cas d’échec (clé incorrecte, pas de réseau) : interceptez-la, journalisez-la et continuez ; le lancement suivant réessaie.

checkAttribution indique si l’installation vient d’un parrainage et via quel code. Le résultat est fixé une fois par installation, stocké sur l’appareil, et sans risque de blocage : une erreur réseau renvoie attributed: false. Servez-vous-en pour accueillir les utilisateurs parrainés ou afficher l’offre annoncée par leur créateur.

La clé d’API (it_…, dans Setup & SDK) sert en développement comme en production. Gardez-la hors du code versionné, par exemple dans un .env ignoré par git, lu via les variables EXPO_PUBLIC_ d’Expo. Voici un App.tsx type pour une app RevenueCat, dans l’ordre :

import { useEffect } from 'react';
import Purchases from 'react-native-purchases';
import InfluTo from '@influto/react-native-sdk';

export default function App() {
  useEffect(() => {
    (async () => {
      Purchases.configure({ apiKey: REVENUECAT_API_KEY }); // RevenueCat apps: configure it first
      try {
        await InfluTo.initialize({
          apiKey: process.env.EXPO_PUBLIC_INFLUTO_API_KEY!,
          appVersion: '1.4.0',
          debug: __DEV__,
        });
      } catch (error) {
        console.warn('InfluTo initialize failed', error); // retried on the next launch
        return;
      }
      const attribution = await InfluTo.checkAttribution();
      await InfluTo.identifyUser(await Purchases.getAppUserID());
    })();
  }, []);
  // …
}

Étape 3 : ajouter un champ de code de parrainage

Beaucoup de parrainages arrivent sous forme de code prononcé à voix haute, sans clic. applyCode(code) valide le code et l’applique s’il est valide ; les espaces sont retirés et les lettres passées en majuscules pour vous. Un code invalide renvoie valid: false avec un error_code comme CODE_NOT_FOUND ou CODE_EXPIRED.

Ou ajoutez ReferralCodeInput depuis @influto/react-native-sdk/ui. Il préremplit le code pour une installation attribuée par lien, reprend vos couleurs, vos polices et vos libellés traduits, et n’affiche le nom du créateur que si vous l’activez.

// Validate, then apply a code the user typed
const result = await InfluTo.applyCode('FITGURU30');
if (result.valid && result.applied) {
  // Unlock the offer
}

// Or drop in the ready-made UI:
import { ReferralCodeInput } from '@influto/react-native-sdk/ui';
<ReferralCodeInput onApplied={(result) => {/* ... */}} />

Étape 4 : relier les achats, via RevenueCat ou en direct avec le store

InfluTo ne verse de commission que sur les achats vérifiés auprès du store. Choisissez un seul chemin par plateforme ; iOS peut être en direct avec le store pendant qu’Android reste sur RevenueCat.

• RevenueCat : rien à brancher dans le code. Avec react-native-purchases installé, le SDK définit influto_code et influto_referral sur l’abonné quand un parrainage est trouvé ou qu’un code est appliqué. Connectez ensuite le webhook dans Setup & SDK, automatiquement avec une clé secrète RevenueCat v2 ou à la main.

• En direct avec le store : installez expo-iap ou react-native-iap, ajoutez vos identifiants App Store et Google Play dans Settings → Validation, puis passez la plateforme en mode direct avec le store. initialize capture alors les nouveaux achats et rattrape les achats existants, chacun signalé une seule fois. Définissez autoCapture: false si vous préférez appeler reportPurchase vous-même.

Le piège avec RevenueCat : l’attribut n’est écrit qu’une fois, quand le parrainage est trouvé, et l’écriture est ignorée si RevenueCat n’est pas encore configuré. Configurez Purchases, puis appelez initialize, puis checkAttribution, et utilisez identifyUser avec l’app user ID RevenueCat comme solution de secours.

Le piège en direct avec le store : listez les produits Android à achat unique dans oneTimeProductIds, et signalez-les vous-même avec le prix et la devise si votre bibliothèque IAP n’expose pas le prix, sinon ils sont enregistrés à 0 $. Ce que le SDK détecte tout seul :

Notes sur Expo et React Native

La plupart des problèmes d’intégration dans React Native viennent du montage et de l’ordre d’exécution :

• Expo Go convient, pas les bibliothèques de store. Expo Go exécute le SDK InfluTo, mais expo-iap, react-native-iap et RevenueCat contiennent du code natif : faites vos achats de test dans un development build. Dans Expo Go, la capture automatique ne fait simplement rien, sans danger.

• Initialisez une fois, à la racine. Pas dans un écran qui se monte plusieurs fois. Appelez identifyUser une fois par connexion, pas depuis le rendu.

• AsyncStorage dans votre propre package.json. Sinon, son module natif n’est pas lié et le SDK ne peut pas conserver son état.

Étape 5 : testez avant d’inviter des créateurs

Les achats sandbox ne déplacent jamais d’argent et ne modifient pas vos statistiques : répétez le test autant de fois que vous voulez.

1. 1

   Vérifiez que le SDK est connecté. Après le premier initialize réussi, Setup & SDK affiche « SDK connected » avec la plateforme et la version du SDK ; debug: __DEV__ journalise chaque étape.

2. 2

   Simulez un achat. La simulation d’achat dans Setup & SDK envoie un achat de test sandbox dans le vrai pipeline d’InfluTo. Saisissez l’un de vos codes pour voir sa résolution ; elle ne valide jamais une étape de configuration.

3. 3

   Installez via un lien de créateur. Rejoignez votre campagne avec un second compte créateur, ouvrez son lien de parrainage sur un appareil de test, installez votre development build et lancez-le. Saisir le code reste le test le plus fiable.

4. 4

   Faites un achat sandbox. Achetez avec un testeur sandbox ou TestFlight, ou un testeur de licence Google Play. Le journal Integration, réglé sur Sandbox, montre l’achat attribué à votre code.

clearAttribution() réinitialise l’appareil pour un nouvel essai.

Ou laissez votre agent de code s’en charger

Vous travaillez dans Claude Code, Codex ou Cursor ? Connectez le serveur MCP d’InfluTo et demandez l’intégration : l’agent associe « expo » à ce SDK, écrit les étapes ci-dessus et surveille influto_integration_status jusqu’à ce qu’un achat sandbox arrive avec son attribution.