SubSovereign en React Native — guía de integración

Esta guía cubre @subsovereign/react-native (sdk-react-native/) — un cliente de datos y un renderizador nativo de paywall en un solo paquete. El paywall que diseñas en el panel de control de SubSovereign se renderiza aquí con primitivos nativos de React Native (View/Text/Pressable), desde la misma configuración que los SDK de iOS, Android, web, React y Flutter.

¿Ya usas @subsovereign/js-sdk en React Native? También funciona (consulta la guía de Web y React Native) — este paquete añade el componente nativo <Paywall> y un cliente de datos sin dependencias nativas (solo fetch puro).

Antes de empezar

Un servidor SubSovereign en ejecución, una app registrada en el panel de control (un appId y una clave de API de rol SDK), niveles de acceso (por ejemplo, pro) vinculados a tus productos de tienda, y un paywall publicado.

Paso 1 — Instalación

El paquete está en sdk-react-native/ y aún no está en npm — añádelo como una dependencia de ruta o git (o copia la carpeta en tu proyecto):

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

Opcionales que se usan automáticamente si están presentes (nunca dependencias obligatorias):

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

Paso 2 — Configuración inicial, al iniciar tu 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',
});

Paso 3 — Comprobar qué puede acceder el usuario

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

Envuelve la llamada en try/catch; en caso de error, mantén al usuario con su último acceso conocido y vuelve a intentarlo más tarde — nunca bloquees a un usuario de pago por un fallo de red.

Paso 4 — Mostrar el paywall y vender

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

Ejecuta la compra con tu biblioteca de facturación como de costumbre y luego haz que el servidor la verifique:

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

Vuelve a ejecutar checkEntitlements() después y desbloquea el acceso.

Privacidad (RGPD)

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

Botón de desistimiento en la UE (Passport de Cumplimiento)

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

<WithdrawalButton subscriptionId={sub.id} />

Muestra el botón etiquetado de forma destacada, confirma una vez y envía la solicitud de forma idempotente. Nota: este botón no consulta primero la configuración de desistimiento de la app — si desactivas o limitas por jurisdicción los desistimientos en el panel de control, controla su visibilidad tú mismo con SubSovereign.getWithdrawalConfig(). También está disponible SubSovereign.withdraw(subscriptionId, opts) para interfaces personalizadas (pasa channel: Platform.OS).

Referencia rápida

Pasos siguientes

• Tutorial completo del nivel de datos (banderas, borrado, exportación): guía de Web y React Native.
• ¿Nuevas en los conceptos? Lee Cómo funciona SubSovereign.