SubSovereign sur React Native — guide d’intégration

Ce guide couvre @subsovereign/react-native (sdk-react-native/) — un client de données et un moteur de rendu natif de paywall dans un seul package. Le paywall que vous concevez dans le tableau de bord SubSovereign s’affiche ici avec des primitives RN natives (View/Text/Pressable), à partir de la même configuration que les SDK iOS, Android, web, React et Flutter.

Vous utilisez déjà @subsovereign/js-sdk en React Native ? Cela fonctionne aussi (voir le guide Web & React Native) — ce package ajoute le composant natif <Paywall> et un client de données sans dépendances natives (simple fetch).

Avant de commencer

Un serveur SubSovereign en cours d’exécution, une application enregistrée dans le tableau de bord (un appId et une clé API de rôle SDK), des niveaux d’accès (par exemple pro) liés à vos produits en magasin, et un paywall publié.

Étape 1 — Installation

Le package se trouve dans sdk-react-native/ et n’est pas encore sur npm — ajoutez-le en tant que dépendance locale ou git (ou copiez le dossier dans votre projet) :

npm install ./sdk-react-native   # path dependency while it's pre-npm

Petits plus optionnels, utilisés automatiquement s’ils sont présents (jamais de dépendances forcées) :

npx expo install expo-linear-gradient   # gradient paywall backgrounds
npm install react-native-video          # hero video (falls back to image without it)

Étape 2 — Configuration unique au démarrage de l’application

import { SubSovereign } from '@subsovereign/react-native';

SubSovereign.configure({
  apiKey:  'YOUR_SDK_KEY',
  appId:   'your-app-id',
  baseUrl: 'https://subs.yourdomain.com/api/v1', // YOUR self-hosted server
  userId:  currentUser.id,                        // your own stable user id
  locale:  'en',
});

Étape 3 — Vérifier ce à quoi l’utilisateur a accès

const result = await SubSovereign.checkEntitlements();
if (result.hasAccess) showPremiumContent();
else showPaywall();

Encadrez dans un try/catch ; en cas d’erreur, conservez l’accès connu de l’utilisateur et réessayez plus tard — ne bloquez jamais un utilisateur payant à cause d’un problème réseau.

Étape 4 — Afficher le paywall et vendre

import { Paywall, usePaywallConfig } from '@subsovereign/react-native';
import { Platform } from 'react-native';

const config = await SubSovereign.getPaywallConfig(Platform.OS); // or usePaywallConfig(params)

<Paywall config={config} onSelectProduct={(productId) => buy(productId)} />

Effectuez l’achat avec votre bibliothèque de facturation comme d’habitude, puis faites vérifier la transaction côté serveur :

// Android (Play Billing) — built into this client:
await SubSovereign.validateGooglePurchase({ purchaseToken, productId, accessLevelId: 'pro' });

// iOS (StoreKit): use the Web/JS data SDK's validateApplePurchase —
// this client does not ship an Apple call. See web.en.md Step 4.

Relancez checkEntitlements() ensuite pour débloquer l’accès.

Vie privée (RGPD)

await SubSovereign.recordConsent({ purpose: 'analytics', granted: true });

Bouton de rétractation UE (Compliance Passport)

import { WithdrawalButton } from '@subsovereign/react-native';

<WithdrawalButton subscriptionId={sub.id} />

Affiche le bouton étiqueté en évidence, confirme une fois, et soumet de manière idempotente. Remarque : ce bouton ne récupère pas la configuration de rétractation de l’application — si vous désactivez ou limitez géographiquement les rétractations dans le tableau de bord, contrôlez vous-même sa visibilité avec SubSovereign.getWithdrawalConfig(). SubSovereign.withdraw(subscriptionId, opts) est également disponible pour des interfaces personnalisées (passez channel: Platform.OS).

Référence rapide

Prochaines étapes

• Tutoriel complet sur la couche de données (flags, effacement, export) : guide Web & React Native.
• Nouveau sur les concepts ? Lisez Comment fonctionne SubSovereign.