SubSovereign voor React Native — integratiehandleiding

Deze handleiding behandelt @subsovereign/react-native (sdk-react-native/) — een dataclient en een native paywall-renderer in één pakket. De paywall die je ontwerpt in het SubSovereign-dashboard wordt hier gerenderd met native React Native-primitieven (View/Text/Pressable), vanuit dezelfde configuratie als de iOS-, Android-, web-, React- en Flutter-SDK’s.

Gebruik je al @subsovereign/js-sdk in React Native? Dat werkt ook (zie de Web & React Native-handleiding) — dit pakket voegt de native <Paywall>-component toe en een dataclient zonder native afhankelijkheden (alleen fetch).

Voordat je begint

Een draaiende SubSovereign-server, een app geregistreerd in het dashboard (een appId en een SDK-rol API-sleutel), toegangsniveaus (bijv. pro) gekoppeld aan je store-producten, en een gepubliceerde paywall.

Stap 1 — Installeren

Het pakket staat in sdk-react-native/ en staat nog niet op npm — voeg het toe als pad- of git-afhankelijkheid (of kopieer de map naar je project):

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

Optionele gemaksfuncties, die automatisch worden gebruikt (nooit harde afhankelijkheden):

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

Stap 2 — Eenmalig configureren bij het starten van je app

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

Stap 3 — Controleren wat de gebruiker kan openen

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

Verpak het in try/catch; bij een fout houd je de gebruiker op hun laatste bekende toegang en probeer je het later opnieuw — zet nooit een betalende gebruiker buit door een netwerkstoring.

Stap 4 — De paywall tonen en verkopen

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

Voer de aankoop uit met je factureringsbibliotheek zoals gebruikelijk, en laat vervolgens de server deze verifiëren:

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

Voer daarna checkEntitlements() opnieuw uit en schakel toegang in.

Privacy (GDPR)

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

EU-annuleringsknop (Compliance Passport)

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

<WithdrawalButton subscriptionId={sub.id} />

Toont de opvallende gelabelde knop, bevestigt eenmaal en verstuurt idempotent. Opmerking: deze knop haalt de annuleringsconfiguratie van de app niet eerst op — als je annuleringen uitschakelt of jurisdictiegebonden beperkt in het dashboard, regel dan zelf de zichtbaarheid met SubSovereign.getWithdrawalConfig(). SubSovereign.withdraw(subscriptionId, opts) is ook beschikbaar voor aangepaste UIs (geef channel: Platform.OS door).

Snelle referentie

Volgende stappen

• Volledige datalaag-uitleg (vlaggen, wissen, exporteren): Web & React Native-handleiding.
• Nieuw met de concepten? Lees Hoe SubSovereign werkt.