SubSovereign für React Native — Integrationsanleitung

Dieser Leitfaden behandelt @subsovereign/react-native (sdk-react-native/) – einen Datenclient und einen nativen Paywall-Renderer in einem Paket. Die Paywall, die du im SubSovereign-Dashboard erstellst, wird hier mit nativen React-Native-Primitiven (View/Text/Pressable) aus derselben Konfiguration wie die iOS-, Android-, Web-, React- und Flutter-SDKs gerendert.

Du nutzt bereits @subsovereign/js-sdk in React Native? Das funktioniert ebenfalls (siehe Web- & React-Native-Leitfaden) – dieses Paket fügt die native <Paywall>-Komponente und einen Datenclient ohne native Abhängigkeiten hinzu (reines fetch).

Vorbereitung

Ein laufender SubSovereign-Server, eine im Dashboard registrierte App (eine appId und ein SDK-Rollen-API-Key), Zugangsebenen (z. B. pro), die mit deinen Store-Produkten verknüpft sind, sowie eine veröffentlichte Paywall.

Schritt 1 — Installation

Das Paket befindet sich in sdk-react-native/ und ist noch nicht auf npm verfügbar – füge es als Pfad- oder Git-Abhängigkeit hinzu (oder kopiere den Ordner in dein Projekt):

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

Optionale Helfer, die automatisch genutzt werden (keine harten Abhängigkeiten):

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

Schritt 2 — Einmalige Konfiguration beim App-Start

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',
});

Schritt 3 — Prüfen, auf was der Nutzer zugreifen kann

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

Fange es in try/catch ab; bei Fehlern behalte den letzten bekannten Zugriff bei und versuche es später erneut – sperre niemals zahlende Nutzer aufgrund eines Netzwerkproblems aus.

Schritt 4 — Paywall anzeigen und verkaufen

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)} />

Führe den Kauf wie gewohnt mit deiner Abrechnungsbibliothek durch, lasse dann aber serverseitig prüfen:

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

Führe anschließend checkEntitlements() erneut aus und gewähre Zugriff.

Datenschutz (GDPR)

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

EU-Widerrufsbutton (Compliance Passport)

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

<WithdrawalButton subscriptionId={sub.id} />

Zeigt den deutlich beschrifteten Button an, bestätigt einmalig und sendet idempotent. Hinweis: Dieser Button holt nicht zuerst die Widerrufs-Konfiguration der App ab – falls du Widerrufe im Dashboard deaktivierst oder jurisdiktionell einschränkst, steuere seine Sichtbarkeit selbst mit SubSovereign.getWithdrawalConfig(). SubSovereign.withdraw(subscriptionId, opts) steht ebenfalls für benutzerdefinierte Oberflächen zur Verfügung (übergebe channel: Platform.OS).

Schnellreferenz

Nächste Schritte

• Ausführlichere Datenebenen-Anleitung (Flags, Löschung, Export): Web- & React-Native-Leitfaden.
• Neue Konzepte? Lies Wie SubSovereign funktioniert.