# 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

# Hooks

React hooks for identity, placements, events, and reactive SDK state.

> **Warning:** **Beta**The Web SDK is in beta and its API may change between releases.

All hooks must be used under a [`SuperwallProvider`](/docs/web/react/provider).

## `useUser`

Identity, attributes, and subscription state in one object. It re-renders when any of them change.

```tsx
import { useUser } from "@superwall/paywalls-react";

function Account() {
  const {
    id,
    aliasId,
    effectiveId,
    isLoggedIn,
    attributes,
    subscriptionStatus,
    entitlements,
    identify,
    signOut,
    setAttributes,
    // also available: integrationAttributes, customerInfo,
    // setIntegrationAttribute, setIntegrationAttributes
  } = useUser();

  return (
    <>
      <p>{isLoggedIn ? id : "anonymous"}</p>
      <button onClick={() => identify("user_42")}>Sign in</button>
      <button onClick={() => signOut()}>Sign out</button>
    </>
  );
}
```

`entitlements` is derived from `subscriptionStatus` and contains the active ones.

## `usePlacement`

Returns a `register` function plus the state of the latest placement from this hook's calls. The state is local to the component.

```tsx
import { usePlacement } from "@superwall/paywalls-react";

function UpgradeButton() {
  const { register, state } = usePlacement({
    onPresent: (info) => console.log("opened", info.identifier),
    onDismiss: (_info, result) => console.log("dismissed", result),
    onSkip: (reason) => console.log("skipped", reason),
    onError: (error) => console.error(error),
  });

  return (
    <>
      <button onClick={() => register({ placement: "checkout" })}>Upgrade</button>
      <p>paywall: {state.type}</p>
    </>
  );
}
```

The handler you pass fires alongside the global delegate rather than replacing it.

> **Note:** The `state` is per-hook, so two components never see each other's outcomes. The SDK still allows
> only one paywall on screen at a time. If another component already has one up, `register`
> resolves as `{ type: "error" }` with a `PaywallAlreadyPresentedError`.

## `useSuperwall`

The instance itself, for anything the other hooks do not cover.

```tsx
const sw = useSuperwall();
const products = await sw.purchases.getProducts();
```

## `useSignal`

Subscribes to any `Readable<T>` the SDK exposes and re-renders on change.

```tsx
import { useSignal, useSuperwall } from "@superwall/paywalls-react";

function PaywallBadge() {
  const sw = useSuperwall();
  const isPresented = useSignal(sw.isPaywallPresented);
  return isPresented ? <span>Paywall open</span> : null;
}
```

## `useSuperwallEvent`

Subscribes to a typed SDK event for the lifetime of the component.

```tsx
useSuperwallEvent("subscriptionStatus_didChange", () => {
  refetchAccount();
});
```

Cleanup is handled on unmount. See [Events](/docs/web/guides/events) for what is emitted.

## `useDelegate`

Registers a global delegate from inside React.

```tsx
useDelegate({
  onSubscriptionStatusChange: (from, to) => {
    console.log("subscription", from.status, "->", to.status);
  },
});
```

> **Warning:** Only one delegate is active at a time. `useDelegate` overrides a `delegate` passed to
> `SuperwallProvider`, and when the last `useDelegate` unmounts it clears the delegate entirely,
> including the provider's. Use one or the other, not both.

Custom placements defined in the paywall editor arrive as an event rather than through the delegate:

```tsx
useSuperwallEvent("custom_placement", (e) => {
  if (e.detail.placementName === "contact_support") openIntercom();
});
```

## `useCustomPaywall`

Renders your own paywall UI instead of the default iframe. The SDK still runs the full trigger pipeline and fires the same lifecycle events.

The hook does not present anything on its own. Call `register()` yourself. `paywall` is `null` until a paywall presents, and carries the state snapshot and the controller.

```tsx
const { register, paywall } = useCustomPaywall({ placement: "checkout" });

return (
  <>
    <button onClick={() => void register()}>Upgrade</button>
    {paywall && (
      <MyPaywall
        products={paywall.state.products}
        busy={paywall.state.transaction.phase === "purchasing"}
        onBuy={(product) => void paywall.controller.buy(product)}
        onRestore={() => void paywall.controller.restore()}
        onClose={() => paywall.controller.close()}
      />
    )}
  </>
);
```

`controller.buy` takes the `Product` the user chose. `paywall.state` also carries `restoration` and `paywallInfo`.

## `SuperwallPaywall`

A declarative gate that renders the SDK's default paywall, not your own UI. It calls `register` on mount, shows `loading` until the paywall presents, and renders `children` once the feature unlocks.

```tsx
<SuperwallPaywall placement="checkout" loading={<Spinner />}>
  <ProFeature />
</SuperwallPaywall>
```

Pass `inline` to mount the paywall iframe in place instead of as a full-viewport overlay.

> **Note:** Custom paywall rendering is the least stable part of the beta API. Check the
> [example apps](https://github.com/superwall/Superwall-Web/tree/main/example) before building on it.