# 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

# PaywallView

Embed a Superwall paywall inline in your React Native layout, instead of presenting it full-screen.

`<PaywallView />` embeds a Superwall paywall directly inside a React Native layout — for example, inline within a scroll view, as a bottom overlay, or inside your own full-screen `Modal`. It's an alternative to the default full-screen presentation triggered by `registerPlacement`/`usePlacement`.

Give the view an explicit width and height, and unmount it when the surrounding content no longer needs it. Each mounted `PaywallView` owns its own native paywall, so use different placements for paywalls that are mounted at the same time.

## Props

<TypeTable
  type="{
  placement: {
    type: &#x22;string&#x22;,
    description: &#x22;The placement whose paywall should be retrieved.&#x22;,
    required: true,
  },
  params: {
    type: &#x22;Record<string, any>?&#x22;,
    description: &#x22;Optional parameters used to evaluate and render the placement.&#x22;,
  },
  renderFallback: {
    type: &#x22;(state: PaywallFallbackState) => ReactNode&#x22;,
    description: &#x22;Renders UI while the paywall is loading or after it is skipped, fails, or dismisses. Returning `null` for a terminal state removes the PaywallView from the layout.&#x22;,
  },
  onPresent: {
    type: &#x22;(paywallInfo: PaywallInfo) => void&#x22;,
    description: &#x22;Called once the paywall has been retrieved and attached to the inline host.&#x22;,
  },
  onDismiss: {
    type: &#x22;(paywallInfo: PaywallInfo, result: PaywallResult, shouldDismiss: boolean) => void&#x22;,
    description: &#x22;Called when the embedded paywall finishes an interaction.&#x22;,
  },
  onSkip: {
    type: &#x22;(reason: PaywallSkippedReason) => void&#x22;,
    description: &#x22;Called when campaign rules intentionally skip the requested paywall.&#x22;,
  },
  onError: {
    type: &#x22;(error: string) => void&#x22;,
    description: &#x22;Called when the paywall cannot be retrieved or attached.&#x22;,
  },
}"
/>

`<PaywallView />` also accepts the standard React Native `ViewProps` (except `children`), such as `style`, which are forwarded to the wrapping `View`.

### PaywallFallbackState

`renderFallback` is called with one of the following states:

<TypeTable
  type="{
  loading: {
    type: '{ status: &#x22;loading&#x22; }',
    description: &#x22;The paywall is being retrieved.&#x22;,
  },
  skipped: {
    type: '{ status: &#x22;skipped&#x22;; reason: PaywallSkippedReason }',
    description: &#x22;Campaign rules intentionally skipped the requested paywall.&#x22;,
  },
  error: {
    type: '{ status: &#x22;error&#x22;; error: string }',
    description: &#x22;The paywall could not be retrieved or attached.&#x22;,
  },
  dismissed: {
    type: '{ status: &#x22;dismissed&#x22;; paywallInfo: PaywallInfo; result: PaywallResult }',
    description: &#x22;The paywall was dismissed and `shouldDismiss` was `true`.&#x22;,
  },
}"
/>

While the paywall is presented, `renderFallback` is not called (`PaywallView` renders the native paywall instead).

## Example

```tsx
import { PaywallView } from "expo-superwall";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";

function InlinePaywall() {
  return (
    <PaywallView
      placement="campaign_trigger"
      style={styles.paywallFrame}
      renderFallback={(state) => {
        if (state.status === "loading") {
          return (
            <View style={styles.placeholder}>
              <ActivityIndicator />
            </View>
          );
        }

        if (state.status === "error") {
          return (
            <View style={styles.placeholder}>
              <Text>Unable to load this offer.</Text>
            </View>
          );
        }

        // Skipped or dismissed: render nothing so no empty native view is left behind.
        return null;
      }}
      onPresent={(paywallInfo) => console.log("Presented", paywallInfo.name)}
      onDismiss={(paywallInfo, result, shouldDismiss) => {
        if (shouldDismiss) {
          console.log("Dismissed with result", result.type);
        }
      }}
      onSkip={(reason) => console.log("Skipped", reason.type)}
      onError={(error) => console.log("Error", error)}
    />
  );
}

const styles = StyleSheet.create({
  paywallFrame: {
    height: 330,
    borderRadius: 20,
    overflow: "hidden",
  },
  placeholder: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
    justifyContent: "center",
  },
});
```

## Presenting a second paywall from an embedded one

An embedded paywall can trigger a custom action (configured in the paywall editor) to present a second, full-screen paywall — for example an "or, view all plans" button on an inline paywall. Listen for the action with [`useSuperwallEvents`](/docs/expo/sdk-reference/hooks/useSuperwallEvents)'s `onCustomPaywallAction`, then mount a second `PaywallView` (for example inside a React Native `Modal`) for the full-screen placement. See the [`article-paywall` example](https://github.com/superwall/expo-superwall/blob/main/example/app/article-paywall.tsx) in the SDK repo for a complete inline-article pattern with both an inline paywall and a full-screen follow-up paywall.

## Related Components

* [`<SuperwallProvider />`](/docs/expo/sdk-reference/components/SuperwallProvider) - Required root component that configures the SDK
* [`useSuperwallEvents`](/docs/expo/sdk-reference/hooks/useSuperwallEvents) - Subscribe to custom paywall actions and other SDK events