> ## Documentation Index
> Fetch the complete documentation index at: https://docs.launchtoday.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Superwall Overview

> Paywall A/B testing and optimization to maximize subscription revenue

Superwall is a paywall optimization platform that helps you maximize subscription revenue through A/B testing, remote configuration, and analytics.

## What's Included

Launch includes a ready-to-use Superwall integration:

* **Superwall Provider** - Context for paywall state
* **Placement System** - Trigger paywalls at specific points
* **Remote Paywalls** - Design in dashboard, no code changes
* **A/B Testing** - Test different paywall variants

## Why Superwall?

<CardGroup cols={2}>
  <Card title="A/B Testing" icon="flask">
    Test paywall variations to find what converts best.
  </Card>

  <Card title="No-Code Updates" icon="wand-magic-sparkles">
    Change paywalls remotely without shipping app updates.
  </Card>

  <Card title="Conversion Analytics" icon="chart-pie">
    Deep insights into what drives subscriptions.
  </Card>

  <Card title="Placements" icon="map-pin">
    Trigger paywalls at strategic moments in your app.
  </Card>
</CardGroup>

## How It Works

```
Your App                  Superwall                 App Store
─────────                ──────────                ─────────
  Calls Placement  ──▶    Shows Paywall     ──▶    Handles Purchase
                          (from dashboard)          via StoreKit
```

Unlike RevenueCat where you fetch products and build a paywall, Superwall handles everything:

1. **Your App** - Calls a placement (e.g., "upgrade\_tapped")
2. **Superwall** - Shows the paywall configured for that placement
3. **App Store** - Handles the actual purchase via StoreKit

## Usage

### Show Paywall

The template includes a demo in the Payments screen. Tapping "Superwall" presents the paywall immediately.

```tsx theme={null}
import { usePlacement } from "expo-superwall";

function MyComponent() {
  const { registerPlacement } = usePlacement({
    onDismiss: () => console.log("Paywall dismissed"),
  });

  const showPaywall = () => {
    registerPlacement({
      placement: "campaign_trigger",
      feature: () => {
        // Called if user has access (already subscribed)
      },
    });
  };

  return <Button onPress={showPaywall} title="Upgrade" />;
}
```

### Placements

Placements are events in your app where you want to show a paywall:

* `campaign_trigger` - Generic trigger for testing
* `feature_locked` - When user tries to access a premium feature
* `onboarding_complete` - After user finishes onboarding

In the Superwall dashboard, you link Campaigns to Placements.

## File Structure

```
apps/mobile/lib/payments/
├── config.ts              # API keys and env helpers
├── superwall/
│   ├── provider.tsx       # SuperwallPaymentProvider context
│   └── index.ts           # Exports
└── types.ts               # Shared types

apps/mobile/app/payments/
└── superwall.tsx          # Paywall screen
```

## Test Checklist

* Paywall appears from the placement
* Prices display correctly (not NaN)
* Sandbox purchase succeeds

## Troubleshooting

See [Superwall Troubleshooting](/payments/superwall-troubleshooting).

## Remove / Disable

To disable Superwall while you configure products, set:

`apps/mobile/features/feature-registry.tsx` → `featureFlags.payments = false`

For production removal guidance, see [Removing Features](/essentials/removing-features).

## Next Steps

<CardGroup cols={2}>
  <Card title="Setup Guide" icon="wrench" href="/payments/superwall-setup">
    Configure App Store Connect and Superwall
  </Card>

  <Card title="Troubleshooting" icon="bug" href="/payments/superwall-troubleshooting">
    Common errors and solutions
  </Card>
</CardGroup>