SubSovereign em React Native — guia de integração

Este guia aborda o @subsovereign/react-native (sdk-react-native/), um cliente de dados e um renderizador nativo de paywall em um único pacote. O paywall que você projeta no painel do SubSovereign é renderizado aqui com primitivos nativos do React Native (View/Text/Pressable), a partir da mesma configuração dos SDKs para iOS, Android, web, React e Flutter.

Já usa o @subsovereign/js-sdk em React Native? Isso também funciona (consulte o Guia Web & React Native) — este pacote adiciona o componente nativo <Paywall> e um cliente de dados sem dependências nativas (apenas fetch puro).

Antes de começar

Um servidor SubSovereign em execução, um app registrado no painel (um appId e uma chave de API de função SDK), níveis de acesso (por exemplo, pro) vinculados aos seus produtos de loja e um paywall publicado.

Etapa 1 — Instalação

O pacote está em sdk-react-native/ e ainda não está no npm — adicione-o como uma dependência de caminho ou git (ou copie a pasta para o seu projeto):

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

Opcionais úteis, usados automaticamente quando presentes (nunca dependências obrigatórias):

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

Etapa 2 — Configure uma vez, ao iniciar o 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',
});

Etapa 3 — Verifique o que o usuário pode acessar

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

Embrulhe em try/catch; em caso de erro, mantenha o usuário com o último acesso conhecido e tente novamente depois — nunca bloqueie um usuário pagante por um problema de rede.

Etapa 4 — Exiba o paywall e realize vendas

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

Execute a compra com a sua biblioteca de faturamento normalmente e, em seguida, faça a validação no servidor:

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

Reexecute checkEntitlements() depois e desbloqueie o acesso.

Privacidade (GDPR)

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

Botão de retirada da UE (Compliance Passport)

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

<WithdrawalButton subscriptionId={sub.id} />

Exibe o botão proeminente e rotulado, confirma uma vez e envia de forma idempotente. Observação: este botão não busca a configuração de retirada do app primeiro — se você desativar ou limitar por jurisdição as retiradas no painel, controle a visibilidade dele com SubSovereign.getWithdrawalConfig(). O método SubSovereign.withdraw(subscriptionId, opts) também está disponível para UIs personalizadas (passe channel: Platform.OS).

Referência rápida

Próximos passos

• Tutorial completo da camada de dados (flags, eliminação, exportação): Guia Web & React Native.
• Novato nos conceitos? Leia Como o SubSovereign funciona.