SubSovereign — przewodnik po integracji z React Native

Ten przewodnik dotyczy pakietu @subsovereign/react-native (sdk-react-native/), który łączy w sobie klienta danych oraz natywny renderer płatnej ściany (paywall) w jednym pakiecie. Płatna ściana, którą projektujesz w panelu SubSovereign, renderuje się tutaj z wykorzystaniem natywnych komponentów React Native (View/Text/Pressable) na podstawie tej samej konfiguracji, co w przypadku SDK dla iOS, Android, web, React i Flutter.

Jeśli już używasz pakietu @subsovereign/js-sdk w React Native, również działa (zobacz Przewodnik po web i React Native) — ten pakiet dodaje natywny komponent <Paywall> oraz klienta danych bez zależności natywnych (zwykły fetch).

Zanim zaczniesz

Działający serwer SubSovereign, zarejestrowana aplikacja w panelu (z appId oraz kluczem API roli SDK), poziomy dostępu (np. pro) powiązane z produktami w sklepie oraz opublikowana płatna ściana.

Krok 1 — Instalacja

Pakiet znajduje się w folderze sdk-react-native/ i nie jest jeszcze dostępny na npm — dodaj go jako zależność ścieżki lub z repozytorium git (lub skopiuj folder do swojego projektu):

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

Opcjonalne ułatwienia, używane automatycznie (nigdy nie są wymaganymi zależnościami):

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

Krok 2 — Konfiguracja raz, przy uruchomieniu aplikacji

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

Krok 3 — Sprawdź, do czego użytkownik ma dostęp

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

Owiń to w try/catch; w przypadku błędu pozostaw użytkownika na ostatnio znanym poziomie dostępu i spróbuj ponownie później — nigdy nie blokuj płacącego użytkownika z powodu chwilowego problemu z siecią.

Krok 4 — Pokaż płatną ścianę i dokonaj sprzedaży

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

Zrealizuj zakup za pomocą swojej biblioteki rozliczeniowej, a następnie zweryfikuj go po stronie serwera:

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

Uruchom ponownie checkEntitlements(), aby odblokować dostęp.

Prywatność (RODO)

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

Przycisk wycofania (EU) (Compliance Passport)

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

<WithdrawalButton subscriptionId={sub.id} />

Wyświetla widoczny, opisany przycisk, potwierdza jednokrotnie i wysyła żądanie idempotentnie. Uwaga: ten przycisk nie pobiera konfiguracji wycofania aplikacji z panelu — jeśli wyłączysz lub ograniczasz wycofania w panelu, samodzielnie zablokuj jego widoczność za pomocą SubSovereign.getWithdrawalConfig(). Dostępna jest również metoda SubSovereign.withdraw(subscriptionId, opts) dla niestandardowych interfejsów (przekaż channel: Platform.OS).

Szybki przegląd

Następne kroki

• Pełny przewodnik po warstwie danych (flagi, usuwanie, eksport): Przewodnik po web i React Native.
• Nowy w temacie? Przeczytaj Jak działa SubSovereign.