How to Build a Subscription Paywall in SwiftUI

import StoreKit
import SwiftUI

// MARK: - Store error

enum StoreError: Error {
    case failedVerification
}

// MARK: - ViewModel

@Observable
final class PaywallViewModel {
    var products: [Product] = []
    var selectedProduct: Product?
    var isPurchasing = false
    var isPro = false
    var errorMessage: String?

    // Replace with your actual product IDs from App Store Connect
    private let productIDs = ["com.yourapp.premium.monthly",
                              "com.yourapp.premium.annual"]

    init() {
        Task {
            await loadProducts()
            await refreshEntitlements()
        }
    }

    func loadProducts() async {
        do {
            let fetched = try await Product.products(for: productIDs)
            products = fetched.sorted { $0.price < $1.price }
            selectedProduct = products.first
        } catch {
            errorMessage = "Could not load products: \(error.localizedDescription)"
        }
    }

    func purchase(_ product: Product) async {
        isPurchasing = true
        defer { isPurchasing = false }
        do {
            let result = try await product.purchase()
            switch result {
            case .success(let verification):
                let transaction = try checkVerified(verification)
                await transaction.finish()
                isPro = true
            case .userCancelled, .pending:
                break
            @unknown default:
                break
            }
        } catch {
            errorMessage = error.localizedDescription
        }
    }

    func restore() async {
        do {
            try await AppStore.sync()
            await refreshEntitlements()
        } catch {
            errorMessage = error.localizedDescription
        }
    }

    // Check every current entitlement on launch / after restore
    private func refreshEntitlements() async {
        for await result in Transaction.currentEntitlements {
            if case .verified(let tx) = result,
               tx.productType == .autoRenewable,
               tx.revocationDate == nil {
                isPro = true
                return
            }
        }
    }

    private func checkVerified<T>(_ result: VerificationResult<T>) throws -> T {
        switch result {
        case .unverified: throw StoreError.failedVerification
        case .verified(let value): return value
        }
    }
}

// MARK: - Paywall view

struct PaywallView: View {
    @Environment(\.dismiss) private var dismiss
    @State private var vm = PaywallViewModel()

    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 28) {
                    // Hero
                    VStack(spacing: 10) {
                        Image(systemName: "crown.fill")
                            .font(.system(size: 64))
                            .foregroundStyle(.yellow)
                            .accessibilityHidden(true)
                        Text("Go Premium")
                            .font(.largeTitle.bold())
                        Text("One subscription — every feature, zero ads.")
                            .font(.subheadline)
                            .foregroundStyle(.secondary)
                            .multilineTextAlignment(.center)
                    }
                    .padding(.top, 40)

                    // Feature bullets
                    VStack(alignment: .leading, spacing: 14) {
                        FeatureRow(icon: "infinity",       text: "Unlimited projects")
                        FeatureRow(icon: "icloud.fill",    text: "iCloud sync across devices")
                        FeatureRow(icon: "wand.and.stars", text: "AI-powered suggestions")
                        FeatureRow(icon: "bell.badge",     text: "Priority support")
                    }
                    .padding(.horizontal, 24)

                    // Product picker
                    if vm.products.isEmpty {
                        ProgressView("Loading plans…")
                            .accessibilityLabel("Loading subscription plans")
                    } else {
                        VStack(spacing: 10) {
                            ForEach(vm.products, id: \.id) { product in
                                ProductRow(
                                    product: product,
                                    isSelected: vm.selectedProduct?.id == product.id
                                ) { vm.selectedProduct = product }
                            }
                        }
                        .padding(.horizontal, 20)
                    }

                    // CTA
                    Button {
                        guard let p = vm.selectedProduct else { return }
                        Task { await vm.purchase(p) }
                    } label: {
                        Group {
                            if vm.isPurchasing {
                                ProgressView().tint(.white)
                            } else {
                                Text("Subscribe Now")
                                    .fontWeight(.semibold)
                            }
                        }
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(vm.selectedProduct == nil ? Color.gray : Color.blue)
                        .foregroundStyle(.white)
                        .clipShape(RoundedRectangle(cornerRadius: 14))
                    }
                    .disabled(vm.isPurchasing || vm.selectedProduct == nil)
                    .padding(.horizontal, 20)
                    .accessibilityLabel("Subscribe to \(vm.selectedProduct?.displayName ?? "selected plan")")

                    Button("Restore Purchases") {
                        Task { await vm.restore() }
                    }
                    .font(.footnote)
                    .foregroundStyle(.secondary)

                    Text("Subscriptions auto-renew unless cancelled 24 h before the renewal date.")
                        .font(.caption2)
                        .foregroundStyle(.tertiary)
                        .multilineTextAlignment(.center)
                        .padding(.horizontal, 32)
                }
                .padding(.bottom, 40)
            }
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button("Close") { dismiss() }
                        .accessibilityLabel("Close paywall")
                }
            }
            .alert("Something went wrong", isPresented: Binding(
                get: { vm.errorMessage != nil },
                set: { if !$0 { vm.errorMessage = nil } }
            )) {
                Button("OK") { vm.errorMessage = nil }
            } message: {
                Text(vm.errorMessage ?? "")
            }
        }
    }
}

// MARK: - Feature row

struct FeatureRow: View {
    let icon: String
    let text: String

    var body: some View {
        HStack(spacing: 14) {
            Image(systemName: icon)
                .foregroundStyle(.blue)
                .frame(width: 22)
                .accessibilityHidden(true)
            Text(text).font(.body)
        }
        .accessibilityElement(children: .combine)
        .accessibilityLabel(text)
    }
}

// MARK: - Product row

struct ProductRow: View {
    let product: Product
    let isSelected: Bool
    let onSelect: () -> Void

    var body: some View {
        Button(action: onSelect) {
            HStack(spacing: 12) {
                VStack(alignment: .leading, spacing: 4) {
                    Text(product.displayName).font(.headline)
                    if let intro = product.subscription?.introductoryOffer {
                        Text("Starts with \(intro.displayPrice) intro offer")
                            .font(.caption)
                            .foregroundStyle(.green)
                    }
                }
                Spacer()
                VStack(alignment: .trailing, spacing: 2) {
                    Text(product.displayPrice)
                        .font(.title3.bold())
                    if let sub = product.subscription {
                        Text("/ \(sub.subscriptionPeriod.unit.localizedDescription)")
                            .font(.caption)
                            .foregroundStyle(.secondary)
                    }
                }
                Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
                    .foregroundStyle(isSelected ? .blue : .secondary)
                    .font(.title3)
            }
            .padding(14)
            .background(
                RoundedRectangle(cornerRadius: 14)
                    .stroke(isSelected ? Color.blue : Color.secondary.opacity(0.25),
                            lineWidth: isSelected ? 2 : 1)
            )
        }
        .buttonStyle(.plain)
        .accessibilityAddTraits(isSelected ? [.isSelected] : [])
        .accessibilityLabel("\(product.displayName), \(product.displayPrice)")
        .accessibilityHint(isSelected ? "Selected" : "Tap to select this plan")
    }
}

// MARK: - Preview

#Preview {
    PaywallView()
}