# 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

# Products

Declare product slots in config.ts, read live store data through useProducts, and follow the three rules that keep prices honest.

Products connect your paywall to the things it sells. You declare them once in `config.ts`, and everything about them — price, period, trial — arrives from the store at runtime, localized and formatted for each user. You never hardcode a price.

## Declare products

Products are **slots**. The key is the reference your code uses; the value is the store identifier:

```ts
import { definePaywall } from "superwall/config";

export default definePaywall({
  name: "Pro",
  products: {
    monthly: "pro_999_month",
    annual: "pro_5999_year",
  },
});
```

The shorthand string and the object form mean the same thing:

```ts
products: {
  annual: "pro_5999_year",                    // shorthand
  monthly: { productId: "pro_999_month" },    // same thing
},
```

Your code only ever speaks in references — `getProduct("annual")`, `purchase("annual")` — so swapping the underlying store product is a one-line config change.

### Web and Stripe products

Web paywalls sell through Stripe, and the Stripe price lives inside the identifier — no separate mapping. The format is `{environment}:{priceId}:{offer}`:

```ts
products: {
  monthly: "live:price_1ABC…:7days-free",
},
```

A paywall can declare both kinds side by side — store products for native, Stripe products for the web. See [Web checkout](/docs/framework/web-checkout) for how the same `purchase()` call sells on both.

### Product data never appears in the file

Price, period, and trial are store-owned and arrive at runtime. `superwall push` refuses to publish a reference the dashboard has no product for — every variable on it would be `undefined` on device. Example identifiers in scaffolds and examples are placeholders to repoint at your own products.

## Read product data

```tsx
import { useProducts } from "superwall/hooks";

const { getProduct } = useProducts();
const annual = getProduct("annual");

annual?.variables.price          // "$59.99" — formatted for the user's region
annual?.variables.monthlyPrice   // "$5.00" — the store's own math
annual?.variables.trialPeriodDays
```

References are typed against your config, so a typo in `getProduct("anual")` is a compile error, not a runtime surprise.

Everything on `variables`, all optional:

| Group              | Variables                                                                                                                                                                                         |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Price              | `price`, `rawPrice`, `currencyCode`, `currencySymbol`                                                                                                                                             |
| Period             | `period` ("year"), `periodly` ("yearly"), `periodDays`, `periodWeeks`, `periodMonths`, `periodYears`                                                                                              |
| Per-interval price | `dailyPrice`, `weeklyPrice`, `monthlyPrice`, `yearlyPrice`                                                                                                                                        |
| Trial              | `trialPeriodDays`, `trialPeriodWeeks`, `trialPeriodMonths`, `trialPeriodYears`, `trialPeriodPrice`, `trialPeriodText` ("7-day"), `trialPeriodEndDate` ("Jul 23, 2026"), per-interval trial prices |
| Locale             | `locale`, `languageCode`                                                                                                                                                                          |
| State              | `identifier`, `isSubscribed`                                                                                                                                                                      |

`period` and `periodly` arrive pre-localized to the device locale — "yearly" becomes "jährlich" on a German device, with no work on your side.

## The three rules

Three habits keep product data honest.

### 1\. Guard every read and design the unpriced state

A declared reference always exists, but its variables may not have arrived yet — and in `superwall dev` they're `undefined` until the studio injects your dashboard's products. Degrade the copy; never invent a number:

```tsx
{annual?.variables.price ? `Subscribe · ${annual.variables.price}` : "Subscribe"}
```

The unpriced state isn't an error state — your paywall will render it, so design it to read as intentional.

### 2\. `Number()` before arithmetic

Numeric-looking variables arrive as **strings** on device (`"59.99"`, `"7"`). A `typeof x === "number"` check passes in dev and silently fails on a real phone — treating every product as trial-less:

```tsx
const days = Number(annual?.variables.trialPeriodDays);
const trialDays = Number.isFinite(days) ? days : 0;
```

### 3\. Display formatted, compute raw

Use `price` and `monthlyPrice` for copy — they're formatted by the store for the user's region and currency. Use `rawPrice` when you need to compute or animate. Never derive a displayed price the store already provides: your division will disagree with the store's own math somewhere in the world.

## Selection state is ordinary React

The framework has no "selected plan" concept — selection is your state, typed against the config:

```tsx
import { type ProductReference } from "superwall/hooks";

const [selected, setSelected] = React.useState<ProductReference>("annual");
```

The `product-selection` [example](/docs/framework/examples) shows the full pattern: a typed plan union, `haptics.selection()` on choice, real `role="radiogroup"` semantics, and a designed unpriced state.

## Create the products on the dashboard

A push refuses if `config.ts` names a product the dashboard doesn't have. Create products in the dashboard, or straight from the CLI:

```bash
superwall products create pro_5999_year \
  --name "Annual" --price 59.99 --period year \
  --trial-days 7 --entitlement <numeric-id>
```

See the [CLI reference](/docs/framework/cli) for the full flags. Once the products exist, continue to [Purchases](/docs/framework/purchases).