Começar

Instalação e configuração

Do zero ao SDK rodando no app. Leva uns 5 minutos.

Requisitos

React Native (qualquer versão recente)
iOS 15 ou superior
Android API 24 ou superior (Android 7+)

Instalar o pacote

Também funciona com yarn add ou pnpm add.

bash

npm install @virex-tech/paywallo-sdk

expo-application, expo-device e expo-localization são peer deps obrigatórias. O SDK importa elas de forma estática, sem elas o build quebra (não há fallback):

bash

npx expo install expo-application expo-device expo-localization

expo-tracking-transparency é opcional: só necessária se o app for pedir o prompt de ATT (ver "Configurar o Provider" abaixo).

Setup nativo

No iOS, roda pod install depois do npm install. O autolinking cuida do resto. No Android não precisa fazer nada, o autolinking resolve tudo.

bash

cd ios && pod install

Já tem um development build instalado? Rebuilda depois de instalar o SDK. Módulo nativo novo não aparece só com reload de JS:

bash

npx expo run:ios
# ou
npx expo run:android

Configurar o Provider

No arquivo raiz do app (App.tsx), envolve tudo com o PaywalloProvider. A appKey vem do dashboard na aba SDK. Abaixo estão todos os campos disponíveis em PaywalloConfig:

Resolva o ATT antes de montar o Provider (iOS)

No iOS, peça a permissão de App Tracking Transparency (ATT) e espere o usuário responder antes de renderizar o PaywalloProvider. Se o Provider montar primeiro, o SDK inicializa com attStatus=undetermined, sem IDFA e sem madid no CAPI, o que degrada a atribuição do install. Hoje isso acontece em 87,3% dos installs iOS.

O SDK não pede mais o prompt de ATT sozinho. Foi removido. Timing e copy do prompt são responsabilidade do app, e isso decide a taxa de opt-in: medido nos nossos clientes, o Fitcal converte 42,0% contra 1,8% do PeptPro, 23x de variação só por causa do timing/copy do prompt. Requer NSUserTrackingUsageDescription no Info.plist.

tsx

import * as TrackingTransparency from "expo-tracking-transparency";
import { Platform } from "react-native";

async function bootstrap() {
  if (Platform.OS === "ios") {
    await TrackingTransparency.requestTrackingPermissionsAsync();
  }
  // só agora renderiza <PaywalloProvider>
}

tsx

import { PaywalloProvider } from "@virex-tech/paywallo-sdk";
import * as Application from "expo-application";

export default function App() {
  return (
    <PaywalloProvider
      config={{
        // Obrigatório: obtido no dashboard, aba SDK
        appKey: "pk_xxxxxxxx",
        // Versão real do app nos eventos (padrão: "unknown")
        appVersion: Application.nativeApplicationVersion ?? undefined,
        // Logs do SDK no console. Use __DEV__ pra não vazar em prod
        debug: __DEV__,
        // "Production" (padrão) ou "Sandbox" pra testar IAP sem cobrar
        environment: "Production",
        // Textos da tela de erro do paywall (todos opcionais)
        errorStrings: { title: "Ops", retry: "Tentar novamente", close: "Fechar" },
        // Placements pré-carregados: present fica quase instantâneo
        preloadPaywalls: ["onboarding"],
        // SKAdNetwork (iOS): conversion value do funil, ligado por padrão.
        // Deixe false se outro SDK do app já for dono do conversion value:
        // o valor é único por app e dois donos corrompem o sinal.
        skan: true,
      }}
    >
      <YourApp />
    </PaywalloProvider>
  );
}

O Provider dispara $app_installed assim que monta. Não é preciso chamar manualmente. Mas "disparar sozinho" não é "correto sozinho": a qualidade da atribuição desse evento depende do ATT já estar resolvido no momento em que o Provider sobe (ver acima).

Verificar que funcionou

Primeiro, ative debug: __DEV__ no config. Com o app rodando, esse log aparece no console confirmando que o SDK iniciou:

text

[Paywallo] initialized successfully

Chamadas no boot: use waitUntilReady() antes de identify/track no cold start. Sem ele, o SDK pode não estar pronto ainda e vai lançar "SDK not initialized".

tsx

// No boot (useEffect ou equivalente):
await PaywalloClient.waitUntilReady();
await PaywalloClient.identify({
  email: user.email,
  properties: { userId: user.id }, // obrigatório pra linkar o device ao usuário
});

Apps multi-língua: use setCurrentLanguage() e setDefaultLanguage() para localizar os paywalls.

Essa página foi útil?

Desenvolvido e mantido por Virex