Master In-App Subscriptions SubscriptionStoreView in SwiftUI

In-app subscriptions are a core part of modern iOS apps, but implementing them correctly can feel overwhelming. With StoreKit 2, Apple introduced SubscriptionStoreView, a native SwiftUI view that handles product display, purchasing, restoration, and App Store compliance for you. In this article, you’ll learn how to use SubscriptionStoreView to build a clean, reliable subscription experience in SwiftUI

If you prefer learning by building a complete app, DevTechie.com offers a dedicated course that walks through in-app purchase setup, customization, and proven best practices for shipping production-ready apps.

Master In App Purchase in SwiftUI & iOS 26 with SwiftData
Master In-App Purchases with modern Apple tools. This course teaches you how to design, implement, and manage…www.devtechie.com

Since the introduction of StoreKit 2, building and testing in-app purchases in Xcode has become significantly easier. For this article, we’ll add a StoreKit Configuration file to the Xcode project and set up a few auto-renewable subscriptions. For a detailed, step-by-step walkthrough, refer to the Master In-App Purchases course on DevTechie.com.

Once the StoreKit configuration file is set up and assigned to the current Xcode scheme, we can move on to building the view.

Using SubscriptionStoreView is as straightforward as using VStack or any other SwiftUI view. All you need to do is choose one of the initializers provided by SubscriptionStoreView.

We’ll use the groupID initializer, which accepts a subscription group identifier defined in the StoreKit configuration file or in the App Store Connect.

It takes just a single line of code to create a clean, well-designed in-app purchase page.

import StoreKit
struct SampleStoreView: View {
    var body: some View {
        SubscriptionStoreView(groupID: "97C2B0A4")
    }
}

We can customize the appearance and behavior of SubscriptionStoreView using its dedicated view modifiers.

Control Styles

We can use subscriptionStoreControlStyle modifier to set the control style for subscription store views within a view.

Automatic style: sets the control style based on the platform and current context.

.subscriptionStoreControlStyle(.automatic)

Button Style: Displays buttons for each subscription plan

.subscriptionStoreControlStyle(.buttons)

Compact Picker: Shows plans in a compact picker style for selection with a single button to subscribe.

.subscriptionStoreControlStyle(.compactPicker)

Paged Picker: Picker with pagination style

.subscriptionStoreControlStyle(.pagedPicker)

Paged Prominent Picker: Paged picker but prominent :) 

.subscriptionStoreControlStyle(.pagedProminentPicker)

Picker style

.subscriptionStoreControlStyle(.picker)

Prominent Picker: default for iOS at the time of writing.

.subscriptionStoreControlStyle(.prominentPicker)

Subscription Store Button Label

This modifier helps style the subscription button based on available choices. 

Automatic sets the button style based on the current context.

Using the .multiline button label style allows the purchase button to show multiple lines, including pricing and free-tier details.

.subscriptionStoreButtonLabel(.multiline)

Subscription Store Policy Destination

Use this modifier to provide URLs for the privacy policy and terms of use, which are required by Apple when submitting your app to the App Store.

import StoreKit

struct SampleStoreView: View {
    
    var body: some View {
        SubscriptionStoreView(groupID: "97C2B0A4")
            .subscriptionStoreControlStyle(.pagedProminentPicker, placement: .bottomBar)
            .subscriptionStoreControlStyle(.automatic)
            .subscriptionStoreButtonLabel(.multiline)
            .subscriptionStorePolicyDestination(url: URL(string: "https://www.devtechie.com/all-devtechie-courses")!, for: .privacyPolicy)
            .subscriptionStorePolicyDestination(url: URL(string: "https://www.devtechie.com/all-devtechie-courses")!, for: .termsOfService)
    }
}

Background

We can set background color for the view using background modifier.

import StoreKit

struct SampleStoreView: View {
    
    var body: some View {
        SubscriptionStoreView(groupID: "97C2B0A4")
            .subscriptionStoreControlStyle(.pagedProminentPicker, placement: .bottomBar)
            .subscriptionStoreControlStyle(.automatic)
            .subscriptionStoreButtonLabel(.multiline)
            .subscriptionStorePolicyDestination(url: URL(string: "https://www.devtechie.com/all-devtechie-courses")!, for: .privacyPolicy)
            .subscriptionStorePolicyDestination(url: URL(string: "https://www.devtechie.com/all-devtechie-courses")!, for: .termsOfService)
            .background(LinearGradient(colors: [.orange.opacity(0.3), .pink.opacity(0.3)], startPoint: .top, endPoint: .bottom))
            
    }
}

Subscription Store Picker Item Background

Use this modifier to set background as well as shape of the picker.

struct SampleStoreView: View {
    
    var body: some View {
        SubscriptionStoreView(groupID: "97C2B0A4")
            .subscriptionStoreControlStyle(.automatic)
            .subscriptionStoreButtonLabel(.multiline)
            .subscriptionStorePolicyDestination(url: URL(string: "https://www.devtechie.com/all-devtechie-courses")!, for: .privacyPolicy)
            .subscriptionStorePolicyDestination(url: URL(string: "https://www.devtechie.com/all-devtechie-courses")!, for: .termsOfService)
            .background(LinearGradient(colors: [.orange.opacity(0.3), .pink.opacity(0.3)], startPoint: .top, endPoint: .bottom))
            .subscriptionStorePickerItemBackground(.thinMaterial,
                                                   in: UnevenRoundedRectangle(topLeadingRadius: 20.0,
                                                                              bottomLeadingRadius: 0.0,
                                                                              bottomTrailingRadius: 50.0,
                                                                              topTrailingRadius: 0.0,
                                                                              style: .circular))
    }
}

Custom Policy View

Policy doesn’t have to be a link but it can also be a custom view.

Create a new view.

struct PrivacyPolicyView: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.orange.opacity(0.3), .pink.opacity(0.3)], startPoint: .top, endPoint: .bottom)
            Text("DevTechie's Privacy Policy")
                .font(.headline)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .ignoresSafeArea()
    }
}

Use this view with another overload of subscriptionStorePolicyDestination modifier.

struct SampleStoreView: View {
    
    var body: some View {
        SubscriptionStoreView(groupID: "97C2B0A4")
            .subscriptionStoreControlStyle(.automatic)
            .subscriptionStoreButtonLabel(.multiline)
            .subscriptionStorePolicyDestination(for: .privacyPolicy) {
                PrivacyPolicyView()
            }
            .subscriptionStorePolicyDestination(url: URL(string: "https://www.devtechie.com/all-devtechie-courses")!, for: .termsOfService)
            .background(LinearGradient(colors: [.orange.opacity(0.3), .pink.opacity(0.3)], startPoint: .top, endPoint: .bottom))
            .subscriptionStorePickerItemBackground(.thinMaterial,
                                                   in: UnevenRoundedRectangle(topLeadingRadius: 20.0,
                                                                              bottomLeadingRadius: 0.0,
                                                                              bottomTrailingRadius: 50.0,
                                                                              topTrailingRadius: 0.0,
                                                                              style: .circular))
    }
}

Check out DevTechie’s complete in app purchase course to build entire app with IAP. 

Master In App Purchase in SwiftUI & iOS 26 with SwiftData
Master In-App Purchases with modern Apple tools. This course teaches you how to design, implement, and manage…www.devtechie.com

Visit https://www.devtechie.com for more