One of the significant developments at WWDC 23 this year was the enhancement of StoreKit, which has been in our lives since WWDC 19. With SwiftUI &amp; StoreKit, Paywall screens have become incredibly fast and customizable. So let’s start looking at how to do that.
Currently, StoreKit can list our products and subscription plans with just one line. It automatically fetches the memberships or products and the user&#8217;s current status defined on the App Store, seamlessly integrating them with our SwiftUI customizations.
<figure class="graf graf--figure">
<figure class="graf graf--figure">
<figure class="graf graf--figure"><img class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/1600/1*uTDiEul8wJfF_Diu7L7cTg.png" alt="merchandising in-app purchase diagram" width="1600" height="1000" data-image-id="1*uTDiEul8wJfF_Diu7L7cTg.png" data-width="3360" data-height="2100" /></figure>
</figure>
</figure>
<h2>Key Components for Paywalls and Subscription Screens</h2>
To create paywalls or subscription screens for our applications, having knowledge of 3 main subjects is generally sufficient.
<ul>
<li>StoreView: For products list</li>
<li>ProductView: For each product</li>
<li>SubscriptionStoreView: For subscription items</li>
</ul>
Let&#8217;s start with StoreView. StoreView automatically creates a list using the purchase options we define in the App Store and presents it within our app. Also, each part offers incredible flexibility based on our customization requests.
<figure class="graf graf--figure"><img class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/1600/1*uz4SfT_mkqSrfbGKcK4-rQ.png" alt="StoreView code" width="1600" height="1000" data-image-id="1*uz4SfT_mkqSrfbGKcK4-rQ.png" data-width="3360" data-height="2100" /></figure>
Next up is the ProductView. As you can imagine, many of us would prefer to showcase our products in a visually appealing manner using SwiftUI, rather than simply presenting them in a list format. The ProductView represents an individual product, and we refer to the views we place within it as product views. This allows us, as developers, to easily customize the appearance according to our desired design. Furthermore, the ProductView can be styled in three different ways using just a single modifier.
<figure class="graf graf--figure">
<figure class="graf graf--figure"><img class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/1600/1*bWW5mH0QTf8Ds50RnvegVg.png" alt="ProductView code" width="1600" height="1000" data-image-id="1*bWW5mH0QTf8Ds50RnvegVg.png" data-width="3360" data-height="2100" /></figure>
</figure>
On the other hand, the SubscriptionStoreView enables us to display subscription options, another method of purchase, on the screen with just a single line of code, similar to the StoreView.
<figure class="graf graf--figure"><img class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/1600/1*eOLNxjeVt3dA324yWt-wkA.png" alt="SubscriptionStoreView code" width="1600" height="1000" data-image-id="1*eOLNxjeVt3dA324yWt-wkA.png" data-width="3360" data-height="2100" /></figure>
Certainly, with the power of SwiftUI, we can customize the SubscriptionStoreView in various ways. For instance, we can add a background image, remove the default blur effect behind the products, and give the subscribe button a distinct appearance. The flexibility of SwiftUI allows us to tailor the subscription store screen to match our app&#8217;s unique design and branding.
<figure class="graf graf--figure"><img class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/1600/1*ytoIjNuUbSDnkMbNrSI2ew.png" alt="SubscriptionStoreView screen 2" width="1600" height="1000" data-image-id="1*ytoIjNuUbSDnkMbNrSI2ew.png" data-width="3360" data-height="2100" /></figure>
<h2>Processing Transactions and Purchases with StoreKit</h2>
Now let&#8217;s focus on the primary purpose of this integration. How do we make transactions based on our purchases and results? Using the onInAppPurchaseCompletion(_:_:) closure provided by StoreKit, we can finalize the application purchase by utilizing the transaction result and transaction information.
<figure class="graf graf--figure"><img class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/1600/1*l0xk48dDUncIeJ4mgtYXXg.png" alt="Purchases with StoreKit" width="1600" height="1000" data-image-id="1*l0xk48dDUncIeJ4mgtYXXg.png" data-width="3360" data-height="2100" /></figure>
<h2>Extensive Customization Options for Paywall Screens</h2>
Isn&#8217;t that enough for you? So let&#8217;s check out the tons of customization options.
<ul>
<li>By default, the ProductView includes the redacted property, which allows for obscuring or placeholder content. Additionally, you can customize the appearance of the ProductView using the placeholder modifier to define the specific placeholder content or styling you desire.</li>
<li>You can update the icon appearance to Apple standards with the prefersPromotionalIcon option.</li>
<li>By utilizing the ProductViewStyle modifier, you have the flexibility to customize your products during both the upload process and after they have been uploaded.</li>
<li>With the StoreButton modifier, you can add incredibly fast options to your screen.
<ul>
<li>Cancel</li>
<li>Restore purchases</li>
<li>Redeem code</li>
<li>Sign in</li>
<li>Policies</li>
</ul>
</li>
</ul>
Except for internal privatizations, StoreKit currently offers 3 different types of listing options in this integration.
<figure class="graf graf--figure"><img class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/1600/1*YSdezzz3An74gRkGfqElEA.png" alt="storekit control styles" width="1600" height="1000" data-image-id="1*YSdezzz3An74gRkGfqElEA.png" data-width="3360" data-height="2100" /></figure>
<figure class="graf graf--figure"><img class="graf-image alignright" src="https://cdn-images-1.medium.com/max/1600/1*-6iI1Dfe0fs9bKKphQcsww.png" alt="storekit control styles" width="1600" height="1000" data-image-id="1*-6iI1Dfe0fs9bKKphQcsww.png" data-width="3360" data-height="2100" />
<figure class="graf graf--figure"><img class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/1600/1*wZIbXLkbIozDyH6znw5mtg.png" alt="storekit control styles" width="1600" height="1000" data-image-id="1*wZIbXLkbIozDyH6znw5mtg.png" data-width="3360" data-height="2100" /></figure>
</figure>
<h2>Summary</h2>
Apple has added a really cool feature for developers by combining StoreKit and SwiftUI. Especially a lot of customization options and easy integration is really easy. In our article, we examined together how we can make Paywall and Subscription screens with StoreKit and what we can customize.
To stay updated with upcoming posts about Apple sessions, be sure to subscribe to our newsletter below.
Hoping to write lots of SwiftUI with new topics. Happy coding. 🧡💙

Save time, reduce costs and increase developer productivity now.

StoreKit for SwiftUI

Related Posts

App Store Connect – Why Assign Developers Emails to It?

Lost iOS Certificates? Here’s What to Do

Elevate Your Mobile CI/CD with Appcircle’s .NET MAUI Support

Understanding the Difference Between Testing Distribution and Enterprise App Store

StoreKit for SwiftUI

Related Posts

App Store Connect – Why Assign Developers Emails to It?

Lost iOS Certificates? Here’s What to Do

Elevate Your Mobile CI/CD with Appcircle’s .NET MAUI Support

Understanding the Difference Between Testing Distribution and Enterprise App Store

Subscribe to Appcircle Circle