creating-paywall

Creating Paywall

Add a new paywall variant view and wire it into the paywall AB test.

Architecture

The paywall system has two layers:

1. Paywall screen (VIPER) — Core/Paywall/ — already exists, handles products loading, purchase logic, analytics, routing
2. Paywall variant views — Core/Paywall/Paywalls/ — pure UI components that receive data via closures

PaywallView.swift switches on the AB test to render the active variant. New paywalls are added as variant views, not new screens.

Steps

1. Determine the variant name (PascalCase, e.g., MinimalPaywall, FeatureListPaywall)
2. Determine the variant type (custom, storeKit, or revenueCat)
3. Create the variant view file in Core/Paywall/Paywalls/
4. Add a case to PaywallTestOption enum
5. Wire the variant into PaywallView.swift switch statement
6. Add preview(s) for the new variant

Variant Types

Type	When	Products	UI Owner
Custom (most common)	Full control over layout and design	Loaded via presenter, passed as [AnyProduct]	You build it
StoreKit	Apple's native SubscriptionStoreView	Loaded by StoreKit from product IDs	Apple's UI
RevenueCat	RevenueCat's remote paywall UI	Managed by RevenueCat dashboard	RevenueCat SDK

Custom Paywall Template

Custom paywalls are the most common type. They receive products and closures from PaywallView:

import SwiftUI

struct {VariantName}PaywallView: View {

    var products: [AnyProduct] = []
    var onBackButtonPressed: () -> Void = { }
    var onRestorePurchasePressed: () -> Void = { }
    var onPurchaseProductPressed: (AnyProduct) -> Void = { _ in }

    var body: some View {
        ZStack {
            // Background
            Color.blue.ignoresSafeArea()

            VStack(spacing: 0) {
                // Header / marketing content
                // ...

                // Product list
                ForEach(products) { product in
                    // product.title, product.priceStringWithDuration, product.subtitle
                }

                // CTA button (if single product) or tap on product row

                // REQUIRED: Restore purchase link
                Text("Restore Purchase")
                    .underline()
                    .asButton {
                        onRestorePurchasePressed()
                    }

                // REQUIRED: Legal links
                HStack {
                    Link("Privacy Policy", destination: URL(string: Constants.privacyPolicyURL)!)
                    Text("|")
                    Link("Terms of Service", destination: URL(string: Constants.termsOfServiceURL)!)
                }
                .font(.caption2)
                .foregroundStyle(.secondary)
            }
        }
        .overlay(
            Image(systemName: "xmark.circle.fill")
                .font(.title)
                .padding(8)
                .tappableBackground()
                .asButton {
                    onBackButtonPressed()
                }
                .padding(16),
            alignment: .topLeading
        )
    }
}

#Preview {
    {VariantName}PaywallView(products: AnyProduct.mocks)
}