# 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

# Stacks

From a component standpoint, stacks are the foundation of every layout. Most components and snippets will start with a stack. Under the hood, they mimic a flexbox layout.

> **Tip:** If you are new to CSS Flexbox, try out this interactive [tool](https://flexbox.help). Or, simply change the properties in the editor to see realtime changes.

### Stack Specific Properties

Stacks have unique properties:

![](https://2a2314a4-superwall-docs.staffbar.workers.dev/docs/images/pweditor_stacks_1.png)

* **Axis**: Determines the arrangement of items within the stack.
  1. `Horizontal`: Items are arranged left to right.
  2. `Vertical`: Items are arranged top to bottom.
  3. `Layered`: Items are stacked on top of each other.

* **Vertical**: Controls the vertical alignment of the items within the stack.
  1. `Top`: Aligns items to the top of the container.
  2. `Center`: Aligns items vertically in the center of the container.
  3. `Bottom`: Aligns items to the bottom of the container.
  4. `Stretch`: Stretches items to fill the vertical space of the container.
  5. `Baseline`: Aligns items according to their baseline.

* **Horizontal**: Controls the horizontal alignment of the items within the stack.
  1. `Left`: Aligns items to the left of the container.
  2. `Center`: Aligns items horizontally in the center of the container.
  3. `Right`: Aligns items to the right of the container.
  4. `Fill Equally`: Distributes items evenly across the container, filling the space equally.
  5. `Space Evenly`: Distributes items with equal space around them.
  6. `Space Around`: Distributes items with space around them, with half-size space on the edges.
  7. `Space Between`: Distributes items with space only between them, with no space at the edges.

* **Spacing**: Defines the amount of space between items within the stack, measured in pixels by default.

* **Wrap**: Specifies how items within the stack should behave when they exceed the container's width.
  1. `Don't Wrap`: Items remain in a single line and do not wrap onto a new line.
  2. `Wrap`: Items wrap onto the next line when they exceed the container's width.
  3. `Wrap Reverse`: Items wrap onto the previous line in reverse order.

* **Scroll**: Determines the scrolling behavior of the stack.
  1. `None`: Disables scrolling within the stack.
  2. `Normal`: Enables standard scrolling behavior.
  3. `Paging`: Enables paginated scrolling, allowing users to swipe through pages of items. See "Creating Carousels" below.
  4. `Infinite`: Endless scrolling, items clone and repeat themselves once they reach the end.

* **Snap Position**: Defines the position at which items snap into place during paging. Only relevant if `Scroll` is set to `Paging`.
  1. `Start`: Items snap to the start of the container.
  2. `Center`: Items snap to the center of the container.
  3. `End`: Items snap to the end of the container.

* **Auto Paging**: Controls whether a carousel's contents should automatically page between items. Only relevant if `Scroll` is set to `Paging`.
  1. `Disabled`: Auto paging is turned off, and items page via user interaction.
  2. `Enabled`: Auto paging is turned on and items will automatically page according to the paging delay.

* **Paging Delay**: The duration to automatically advance the slides. Only relevant if `Scroll` is set to `Paging` and `Auto Paging` is set to `Enabled`.

* **Infinite Scroll Speed**: The amount of pixels per frame that the carousel should advance. Only relevant if `Scroll` is set to `Infinite`.

To see how to use stacks for common designs, check out these pages:

* [Carousel](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-carousel-component)
* [Autoscrolling](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-autoscroll-component)
* [Slides](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-slides-component)
* [Navigation](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-navigation-component)