Додайте партнерську чи реферальну програму у свій застосунок на React Native.

Що SDK робить у застосунку на React Native

Один пакет підходить для iOS, Android і всіх сценаріїв роботи з Expo. Він виконує три завдання:

• Знаходить автора, через якого прийшло встановлення. checkAttribution дає відповідь один раз на встановлення. Код, введений вручну, збігається точно. Інакше встановлення зіставляється з недавнім кліком по посиланню автора протягом 72 годин. Без IDFA і без запиту ATT.

• Приймає реферальні коди, введені вручну. applyCode або готове поле ReferralCodeInput підходить для згадок у подкастах і відео, де ніхто не тапає посилання.

• Пов'язує покупки з рефералом. З RevenueCat він позначає підписника. У store-direct передає покупку, підписану магазином, а InfluTo перевіряє її в Apple або Google. Комісія з'являється лише після цієї перевірки.

Крок 1: встановіть пакет

Додайте SDK і AsyncStorage, де зберігається локальний стан SDK. AsyncStorage — нативний модуль, тому для автолінкування він має бути у власних залежностях вашого застосунку. У bare React Native після цього виконайте pod install у папці ios/.

В Expo більше нічого додавати не потрібно, і конфігураційного плагіна немає. SDK — це звичайний JavaScript поверх AsyncStorage, тож він працює в Expo Go, у development-збірках і в production-збірках. Потрібні React Native 0.60+ і 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

Крок 2: ініціалізуйте один раз і перевірте атрибуцію

Викличте initialize один раз, якомога раніше, і дочекайтеся завершення, перш ніж робити щось інше. У разі збою (неправильний ключ, немає мережі) метод кидає помилку: перехопіть її, запишіть у лог і працюйте далі. Наступного запуску SDK спробує знову.

checkAttribution повідомляє, чи встановлення прийшло за рекомендацією, і з яким кодом. Це визначається один раз на встановлення, зберігається на пристрої й не ламає застосунок: помилка мережі просто повертає attributed: false. Використовуйте це, щоб привітати запрошених користувачів або показати пропозицію, яку анонсував їхній автор.

API-ключ (it_…, на сторінці Setup & SDK) однаково працює і для розробки, і для продакшену. Не зберігайте його у вихідному коді, який потрапляє в репозиторій. Наприклад, тримайте його в .env, доданому до .gitignore, і читайте через змінні Expo з префіксом EXPO_PUBLIC_. Типовий App.tsx для застосунку з RevenueCat, по порядку:

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());
    })();
  }, []);
  // …
}

Крок 3: додайте поле для реферального коду

Багато рефералів приходять із кодом, який назвали вголос, а не з тапом по посиланню. applyCode(code) перевіряє код і застосовує його, якщо він дійсний. Пробіли по краях обрізаються, а літери стають великими автоматично. Недійсний код повертає valid: false і error_code, наприклад CODE_NOT_FOUND або CODE_EXPIRED.

Або підключіть ReferralCodeInput з @influto/react-native-sdk/ui. Він підставляє код, якщо встановлення прийшло за посиланням, підтримує ваші кольори, шрифти й перекладені підписи, а ім'я автора показує, лише якщо ви це ввімкнете.

// 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) => {/* ... */}} />

Крок 4: підключіть покупки — RevenueCat або store-direct

InfluTo платить комісію лише за покупки, підтверджені магазином. Для кожної платформи оберіть рівно один шлях: iOS може працювати у store-direct, а Android — залишатися на RevenueCat.

• RevenueCat: у коді підключати нічого не потрібно. Якщо встановлено react-native-purchases, SDK записує підписнику influto_code та influto_referral, коли знайдено реферала або застосовано код. Потім підключіть вебхук на сторінці Setup & SDK: автоматично, із секретним ключем RevenueCat v2, або вручну.

• Store-direct: встановіть expo-iap або react-native-iap, додайте облікові дані App Store і Google Play в Settings → Validation та переведіть платформу в store-direct. Тоді initialize фіксує нові покупки й донаповнює наявні, кожну передає лише раз. Якщо хочете самі викликати reportPurchase, задайте autoCapture: false.

Підводний камінь RevenueCat: атрибут записується один раз, коли знайдено реферала, і запис пропускається, якщо RevenueCat ще не налаштовано. Спершу налаштуйте Purchases, потім викличте initialize, потім checkAttribution, а як запасний варіант викличте identifyUser з app user ID з RevenueCat.

Підводний камінь store-direct: разові продукти Android перелічіть у oneTimeProductIds. Якщо ваша IAP-бібліотека не віддає ціну, передавайте такі покупки самі, вказавши price і currency, інакше вони запишуться з сумою $0. Що SDK підхоплює самостійно:

Нотатки про Expo і React Native

Більшість проблем інтеграції в React Native виникає через монтування та порядок викликів:

• Expo Go підходить, а бібліотеки магазинів — ні. SDK InfluTo працює в Expo Go, але expo-iap, react-native-iap і RevenueCat містять нативний код, тому тестові покупки робіть у development-збірці. Автофіксація в Expo Go тихо нічого не робить, і це безпечно.

• Ініціалізуйте один раз, у корені. Не в екрані, який монтується повторно. identifyUser викликайте один раз за вхід в акаунт, а не під час рендеру.

• AsyncStorage — у вашому package.json. Інакше його нативний модуль не підключиться, і SDK не зможе зберігати свій стан.

Крок 5: протестуйте, перш ніж запрошувати авторів

Sandbox-покупки не переміщують гроші й не змінюють вашу статистику, тож тест можна повторювати скільки завгодно:

1. 1

   Переконайтеся, що SDK підключився. Після першого успішного initialize на сторінці Setup & SDK з'явиться «SDK connected» з платформою та версією SDK. Параметр debug: __DEV__ виводить у лог кожен крок.

2. 2

   Симулюйте покупку. Кнопка Simulate a purchase на сторінці Setup & SDK надсилає тестову sandbox-покупку через справжній конвеєр InfluTo. Введіть один зі своїх кодів, щоб побачити, як він спрацює. Цей тест ніколи не позначає крок налаштування як виконаний.

3. 3

   Встановіть застосунок за посиланням автора. Приєднайтеся до своєї кампанії з другого акаунта автора, відкрийте його реферальне посилання на тестовому пристрої, встановіть development-збірку й запустіть її. Найнадійніший тест — ввести код вручну.

4. 4

   Зробіть sandbox-покупку. Купуйте як sandbox-тестувальник, тестувальник TestFlight або license tester у Google Play. У журналі Integration, перемкненому на Sandbox, буде видно покупку, зараховану на ваш код.

clearAttribution() скидає стан пристрою для наступного прогону.

Або доручіть це кодовому агенту

Працюєте в Claude Code, Codex чи Cursor? Підключіть MCP-сервер InfluTo і попросіть зробити інтеграцію: агент зіставить «expo» з цим SDK, напише кроки вище й перевірятиме influto_integration_status, доки не надійде покупка в пісочниці з атрибуцією.