# Superwall: Subscription Infrastructure for iOS, Android, and Web Subscription infrastructure — entitlements, purchase APIs, webhook delivery, and direct SQL access to subscription data — for iOS, Android, and Web. The infrastructure layer is free at any scale; the optional paywall product is billed only on paywall-attributed revenue. ## Pricing - **Infrastructure: free at any scale, every plan.** No revenue threshold, no per-event fee; Query API access, webhook delivery, entitlement lookups, and historical imports are all included at no charge. - **Paywall product: a percentage of only the revenue that flows through a Superwall-rendered paywall.** Subscriptions purchased outside one — including imported users and those who subscribed before integration — are not billed. Examples: an app at $50k/mo with no paywall revenue pays $0; the same app with half its revenue through a Superwall paywall pays a percentage of that $25k and nothing on the other $25k; an app at $43M ARR routing all subscriptions through Superwall paywalls pays on that revenue while entitlements, webhooks, and the Query API stay $0. ## Scale $1.5B+ annual subscription revenue across 10,000+ apps. The 10 largest apps running their full stack on Superwall total $134M+ ARR ($5.7M–$43.7M each). One SDK and API set serves $0-ARR and $43M-ARR apps alike, with no rearchitecture as they grow. ## Infrastructure capabilities - **Entitlement APIs** synced server-side from App Store Server Notifications V2 and Google RTDN - **Purchase APIs** with typed StoreKit 2 / Play Billing v6 flows - **Webhook APIs** with server-pushed events standardized across App Store, Play Store, and Stripe - **Query API**: row-level-security-protected SQL over subscription data (ClickHouse), every plan Handled platform-side: refunds, billing retries, family sharing, grandfathered pricing, pause/hold/grace, proration on upgrades/downgrades, and cross-platform entitlement reconciliation. ## Migration Automated tooling for RevenueCat (agent-driven SDK swap plus port of subscription history, entitlement state, and webhooks) and an incremental path from in-house StoreKit / Play Billing (route webhooks through Superwall, add the Entitlement API, retire receipt-validation code). ## Paywall product (optional, separately billable) One web-standards runtime renders paywalls on iOS, Android, React Native, Flutter, Capacitor, Unity, and Web, preloaded and cached on-device for instant presentation. Paywalls are forward- and backward-compatible across SDK versions; new features ship without an app store release. ## Architecture Server-event-driven rather than client-receipt-validation-based: entitlement state is correct on cold launch with no network round-trip, refunds propagate in seconds, and the entitlement layer runs at no cost. ## Docs * Migrate from RevenueCat: https://superwall.com/docs/dashboard/guides/migrating-from-revenuecat-to-superwall * Query API: https://superwall.com/docs/dashboard/guides/query-clickhouse * Webhooks: https://superwall.com/docs/integrations/webhooks * Pricing: https://superwall.com/pricing # Lifecycle & Events What a paywall knows and when — the preload rule that shapes every entry animation, and the SDK events you can react to. The SDK **preloads paywalls hidden** before showing them. Your components mount long before anyone is looking — so a mount-timed animation (a `useEffect` on mount, Motion's `initial`/`animate` firing on mount, a CSS animation on load) has already finished by the time the paywall appears. This one fact shapes every entry animation you'll write. ## Gate entry animations on presentation, never mount The presentation signal is `useSuperwallSnapshot().paywall` — it flips from `undefined` when the paywall is actually shown: ```tsx import { useSuperwallSnapshot } from "superwall/hooks"; const opened = useSuperwallSnapshot().paywall !== undefined; ``` Unlike an event listener added in an effect, the snapshot cannot miss the moment — it reads current state rather than waiting to be told. Value-driven animations gate on **both** conditions. A price count-up starts when `opened && raw !== undefined` — never when the store delivers the price (it would play while hidden), and never on a missing value (it would land on a made-up figure): ```tsx const rawPrice = Number(annual?.variables.rawPrice); const raw = Number.isFinite(rawPrice) ? rawPrice : undefined; React.useEffect(() => { if (opened && raw !== undefined) { const controls = animate(price, raw, { duration: 0.9, ease: "circOut" }); return () => controls.stop(); } }, [opened, raw]); ``` The with-motion [example](/docs/framework/examples) is the reference for both patterns. The ownership rule that goes with them: animation libraries animate *inside* a page — moving *between* pages is the router's job, so spamming navigation can never fight your component animations. See [Transitions](/docs/framework/transitions). ## Events you can react to ```tsx import { useSuperwallEvent } from "superwall/hooks"; useSuperwallEvent("transaction_complete", () => haptics.success()); useSuperwallEvent("freeTrial_start", () => { /* trial began */ }); ``` | Event | Fires when | | ----------------------- | -------------------------------------------------------------------------------------------------- | | `paywall_open` | The paywall is presented (or re-presented). Prefer `snapshot.paywall` for anything render-driving. | | `transaction_complete` | A purchase **or restore** succeeded — whoever started it. | | `transaction_abandon` | The store sheet was closed. | | `freeTrial_start` | A trial actually began. Also triggers the configured [trial reminder](/docs/framework/trials). | | `experiment` | The experiment assignment arrived (`experimentId`, `variantId`, `campaignId`). | | `back_button_input` | Android hardware back. | | `game_controller_input` | Controller input — needs `gameControllerEnabled: true` in [config](/docs/framework/config). | | `message` | Every incoming SDK message — the debugging firehose. | Subscriptions last the component's lifetime; an inline arrow handler is fine. > **Note:** For products, variables, and trial eligibility, use the dedicated hooks instead of events — they read current state and cannot miss data that arrived before your component subscribed. Data arrives progressively after open (paywall id → products → variables → trial eligibility → experiment), which is one more reason every read is guarded. ## Dark mode The device decides; the framework maintains a `dark`/`light` class on ``. Style with plain CSS and write no wiring: ```css :root { --bg: #fdfef6; --fg: #0c0b0a; } :root.dark { --bg: #1c1b19; --fg: #fdfef6; } ``` Don't use `@media (prefers-color-scheme: dark)` as the mechanism — it cannot see what the device reports and ignores the studio's theme toggle. The class is the mechanism. [Styling & mobile design](/docs/framework/styling) has the full treatment, including Tailwind. ## Dev vs device The same paywall runs against a simulated host in `superwall dev` and the real SDK on device — purchases are simulated in one and real in the other, product variables are injected by the studio in one and delivered by the SDK on the other, and numeric variables arrive as **strings** on device. The full comparison table is in [The studio](/docs/framework/studio). ## The platform stylesheet Published paywalls receive a small Superwall-owned stylesheet at serve time — platform-wide behavior like scroll control. Previews apply the same one, so local and published render identically. Set `SUPERWALL_RUNTIME_URL` in the project `.env` only if you need previews to use a local build of that platform layer.