StoreKitとアプリ内課金の新機能

StoreKitとアプリ内課金の新機能

App Storeのアプリ内課金システムを活用して、これまで以上に優れた購入体験を構築し提供する方法をご紹介します。サブスクリプションのカスタマイズを向上させる、StoreKitのビューコントロールの新しいスタイルと最新のAPIのデモを通じて、トランザクションレベルの情報を表示する新しいフィールドと、Xcodeの新しいテスト機能について解説します。また、StoreKitの重要な非推奨の機能についても確認します。

関連する章
- 0:00 - Introduction
- 0:36 - Core API enhancements
- 3:12 - Merchandise using SwiftUI
- 15:35 - Test in Xcode
- 21:06 - Update to StoreKit 2
リソース
関連ビデオ

WWDC24
- App Storeのオファーの実装
WWDC23
- StoreKit 2とXcodeでのStoreKitテストの新機能
- SwiftUI向けのStoreKitについて
WWDC22
- StoreKitテストの最新情報
WWDC21
- StoreKit 2について
WWDC20
- StoreKit Testing in Xcodeの導入
ダウンロード

こんにちは Rudyです「What’s new in StoreKit and In-App Purchase」にようこそ本セッションでは StoreKitの新機能をご紹介しますまた Xcodeでのテスト体験における機能強化について説明し StoreKitの構成を使って新機能をテストする方法をお教えしますまずフレームワークの新しいコア機能を確認します次にマーチャンダイジングUIの新しい構築方法をいくつかご紹介しますアプリの動作を Xcode内でテストする方法も説明します
最後にアプリをアップデートして StoreKit 2を使用するメリットについて説明しますまずユーザーのユーザートランザクション履歴に関するアップデートの説明から始めましょうこれまでトランザクション履歴APIには自動更新サブスクリプション非自動更新サブスクリプション非消耗型製品未完了の消耗型製品のトランザクションが含まれていましたつまりアプリを使用しているユーザーが消耗型製品を購入した場合消耗型製品の購入の完了済みのトランザクションにはこれらのAPIからはアクセスできませんでした iOS 18以降では完了済みの消費型製品のトランザクションがトランザクション履歴の APIの対象になります
完了済みの消耗型製品の購入に対する手動でのトラッキングが不要になり完了済みかどうかに関わらずすべての消耗型製品のトランザクションをフレームワークがトラッキングしますこれは新しいオプトイン機能でありプロジェクトのinfo.plistファイルで設定できます
消耗型製品の購入の完了済みのトランザクションの受信を開始するには新しい SKIncludeConsumableInAppPurchaseHistory キーの値をtrueに設定しますそのうえで通常通りトランザクションをリッスンします
完了済みの消耗型製品の購入は App Store Server APIからも取得できますまた TransactionとRenewalInfoのデータモデルへの新しいフィールドの追加も行いましたこれにより提供されるのはアプリ内課金のトランザクションレベルの追加情報です Transactionの型の新しいフィールドの 1つ目はcurrencyです名前の通り購入時に使用された通貨を示します
これと共に追加された 2つ目の新しいフィールドはpriceですこのフィールドに入力されるのは App Store Connectで設定した価格です
RenewalInfoモデルでは Transactionモデルのものに相当する 2つの新しいフィールドを追加しました新しいフィールドの1つ目はcurrencyです 2つ目はrenewalPriceです renewalPriceはサブスクリプションの更新時にユーザーに請求される金額です renewalPriceを解釈する際は新しいcurrencyのメンバーから得られるコンテキストを考慮する必要がありますこれは重要な点ですこれらの新しいTransaction APIと renewalInfo APIは Xcode 16でアプリを構築する際に利用できます古いバージョンのOSでアプリを実行する場合でも利用できます iOS 15以降であればOKです古いバージョンのOSでの実行に対応するアプリでこれらのフィールドを利用する方法についてはアプリ内課金のドキュメントを参照してください主要なAPIに今年導入されたアップデートのうち最後にご紹介するのはウィンバックオファーという新しい種類のサブスクリプションオファーですウィンバックオファーは解約した登録者に再登録してもらうために利用できますこの新しいオファータイプは非常に簡単にアプリに統合できます App Store Connectから利用資格をカスタマイズできる新しいパワフルなツールがあるためですさらに StoreKit Message APIにより追加のコードを必要とせずにオファーを販売できる点も便利です
ウィンバックオファーは App Storeで宣伝することもできます例えば Editorialチームはやタブでユーザーごとにパーソナライズされたおすすめのオファーを作成する際にウィンバックオファーを宣伝できますウィンバックオファーの詳細については WWDC24のセッション「Implement App Store Offers」をご覧くださいではアプリ内課金を販売するための新しい方法をいくつか見てみましょう昨年のWWDC23で StoreKitビューの導入を発表して以来デベロッパのみなさんが構築するアプリ内課金UIの素晴らしさに常に驚嘆していますみなさんからのフィードバックを反映してサブスクリプションストアのビューをカスタマイズする優れた方法を開発しましたこれらの優れた新機能を披露するのに最適な方法は Apple推奨のストリーミングアプリである Destination Videoのサブスクリプションのアップセルを作成することですマーチャンダイジングUIのイテレーションを高速化するために Xcodeプレビューを使用するので StoreKitの構成ファイルを製品のメタデータですでに設定していますこれはアプリ内課金UIをXcodeプレビューと連携させるうえで必須の手順です XcodeでStoreKitの構成ファイルを設定する方法の詳細については WWDC22のセッション「What’s new in StoreKit testing」と WWDC20のセッション「Introducing StoreKit Testing in Xcode」をご覧くださいここで作成するDestination Videoのサブスクリプションではユーザーは2つのサブスクリプション方法を選べます
プレミアムプランとより低料金のベーシックです
購入後はサブスクリプションの更新期間を毎月か毎年のいずれかで選びますこれらのプランを販売するサブスクリプションストアを Xcodeで作成する方法を説明します DestinationVideoShopというビューをすでに作成済みですこれはサブスクリプションストアの作成に使用しますまず SubscriptionStoreViewを宣言しサブスクリプションのグループIDを指定します
この1行のコードだけでも素晴らしいスタートですがストアを適切な構造にしてサービスの各レベルがユーザーに分かりやすく表示されるようにしましょうこれを実現するにはプレミアムとベーシックの各サービスレベルのサブスクリプションオプショングループを宣言しますまず追加するのはサブスクリプションストア内でのサブスクリプションオプショングループです
サブスクリプションオプショングループの定義をどの製品が含まれるかを表す条件を使用して行います最初のグループはプレミアムプランの両方のオプションのためのものなので宣言する条件ではサービスレベルがプレミアムのすべての製品を含むように指定します
サブスクリプションストアの構築作業を容易にするために StreamingPassLevelという列挙型を事前に作成しましたこれはプレミアムとベーシックのサービスのレベルをモデル化するために使いますストアが更新されプレミアムプランのみが表示されるようになりましたこれはグループに対し宣言した条件と一致しています
グループへのラベル追加もできますここでは「Premium」にします
次に 2つ目のグループを宣言しますがここからが面白い部分ですさっそく宣言しベーシックのオプションのためのグループを追加します
2つのグループを宣言したのでサブスクリプションストアのビューではタブビューが自動生成されベーシックまたはプレミアムの各プランが表示されるようになりました
新しい画面ではサブスクリプションの選択肢が分かりやすくなっています
SubscriptionStoreViewの重要な機能の一つがカスタムのマーケティングコンテンツとして SwiftUIビューを提供可能にする機能です通常はこのビューを直接 SubscriptionStoreViewに提供しますが階層構造を宣言しているのでマーケティングコンテンツをグループに直接提供します
各サービスの価値の説明が表示されるようにプレビューが更新されました
サブスクリプションオプショングループはどのグループがアクティブかによって異なるマーケティングコンテンツビューを提供できるため非常に便利です使用方法を解説するためにベーシックの価値を説明する修正版のビューを追加します
アクティブなタブを切り替えるとマーケティングコンテンツはベーシックの説明になります
個々のオプショングループの宣言は表現力に優れています宣言がUIの外観とよく似ているためです今回のような構築では一連のサブスクリプションオプショングループを宣言することで実装を効率化できます
次に StreamingPassLevelの値を条件ではなく各製品に対応させて指定します
グループセットは最初のクロージャから返されるそれぞれ固有の値のグループを表しますここでは premiumとbasicにそれぞれ1つずつグループが返されます
これによりマーケティングコンテンツの宣言が容易になりますマーケティングコンテンツビューに Streaming Passのレベルのみを渡すからです
Streaming Pass+はユーザーに多くの価値をもたらすのでマーケティングコンテンツはその価値を十分に伝えるものにすべきです
これでマーケティングコンテンツの情報量が豊富になりました
しかし画面表示の大部分を占有していますストアの高さを抑えるために subscriptionStoreControlStyle モディファイアとコンパクトな新しいスタイルのピッカーを使用します
サブスクリプションオプションのピッカーの占有する表示スペースが大幅に減りましたほかのプランのオプションをさらに見つけやすくするためにコントロールを下部のバーに配置することもできますデフォルトでは下部のバーにあるのは登録のボタンのみですコントロールのスタイルは非常にコンパクトなのでスタイルのモディファイアに配置パラメータ bottomBarを指定できます
サブスクリプションのオプションが常に下部のバーに表示されるようになりましたマーケティングコンテンツのサービス説明を下にスクロールしても常に表示されます
以上で説明したのが新しいパワフルな Subscription Option Group APIと Subscription Option Group Setという便利なAPIの使用法ですピッカーコントロールの新しいコンパクトなスタイルとコントロール配置のためのAPIもご紹介しましたしかし StoreKitビューは今年これ以外の点でも機能強化されています注目の新機能が多数ありますさっそく確認しましょうサブスクリプションオプショングループを使用してストアのコンテンツの構造を宣言する方法を説明しました先ほど構築したストアではタブスタイルを使用してサブスクリプションオプションのグループを表示しましたこの方法はサブスクリプションプランの各オプションの間にサービスレベルなど明確な違いがある場合に最適です
タブはサブスクリプションオプションのグループを表示するスタイルの一つです StoreKitでのグループの表示方法は選択するグループスタイルにより決まります設定の際はモディファイアの subscriptionOptionGroupStyleを SubscriptionStoreViewに使用しますほかのスタイルも選択できますリンクスタイルも使用できますリンクはユーザーに対しナビゲーションコンテナ内でその他のプランオプションを表示したい場合に最適ですコンテナがない場合はナビゲーションリンクをタップするとほかのプランオプションがシートの形でストアに表示されますサブスクリプションオプショングループはサブスクリプションオプションをデベロッパが定義する階層へと整理するための基本要素となりますシンプルかつパワフルなAPIでありグループ内のサブグループやインライングループを作成できます
GroupSet APIも導入されました 1回の宣言で複数のグループを作成できるAPIですまたサブスクリプション期間に基づくグループ化などの最も一般的なユースケースに利用できる便利なAPIとして作成したのが SubscriptionPeriodGroupSetなどです
先ほど Destination Videoのストアを構築する際に配置のためのAPIの使用法を説明しました
この新しいAPIを使うとサブスクリプションのコントロールをサブスクリプションストア内のどこに配置するか選択できます
なお一部のコントロールスタイルでは使用できない配置もあります特定の配置にしか互換性のないコントロールスタイルが存在するためです
安定的に利用できるAPIにするために各コントロールスタイルでどの配置を利用できるかがはっきり確定しているAPIを設計しました
プラットフォームごとにデザインパターンが異なるため iOS 18以降および対応するリリースから新しいレイアウトを使用可能にするプラットフォーム固有の配置を導入しましたこれを説明するために tvOS 18向けの開発をする際のコントロールスタイルのモディファイアを詳しく見てみましょう tvOSではコントロールに使用できる唯一の標準スタイルはボタンスタイルです
ただしこのコントロールスタイルには利用できる配置が複数あります「.automatic」「.leading」「.trailing」「.bottom」です各配置の詳細を説明しますまずは.leadingです tvOS 18で新たに導入された StoreKitビューの横方向のレイアウトではサブスクリプションコントロールを placementの値で指定して画面の端に配置しますマーケティングコンテンツはコントロールの反対側の端に配置されます .leadingの配置を使用していますが .trailingの配置を使って新しい横方向のレイアウトを利用することもできます tvOS 18 SDKで構築されるアプリでは配置の新しいデフォルト値は.trailingですマーケティングコンテンツの高さがコンパクトな垂直レイアウトに適している場合は .bottomの配置を使用できます
Control Placement APIは使い慣れた既存のあらゆるコントロールスタイルで使用できますコントロールスタイルについては iOS 18の3つの新しい標準スタイルをご紹介しますそれぞれ詳しく見てみましょう 1つ目は先ほどご紹介した Compact Pickerスタイルです多層の横方向のレイアウトを初めて採用したピッカー型のコントロールスタイルですコンパクトなスタイルなのでプラン間の明白な違いを強調したい場合に最適です例えば各サブスクリプションプランの期間が異なる一方全プランのサービスレベルは同じという場合などです
Compact Pickerスタイルはサブスクリプションの全オプションを一度に画面に表示できるのでサブスクリプションストアに表示するオプションが 2〜3個の場合に最適ですこれによりユーザーはストア内をスクロールする必要がありません
新しいスタイルの2つ目は Paged Pickerスタイルです Compact Pickerと同様に横方向のレイアウトを採用しています相違点は Compact Pickerが 2〜3個のプランを重ねて表示するのに対し Paged Pickerは横方向のページごとの表示でプランについてより詳細に説明できます 3つ目は Paged Prominent Pickerスタイルですこのスタイルは Paged Pickerスタイルによく似ていますが選択中のサブスクリプションオプションに明確な境界線とズーム効果を適用します
これらの新しいスタイルは垂直方向のスペース節約に優れた効果を発揮します販売するサブスクリプションプランが少数でマーケティングコンテンツなど他の重要なデザイン要素にストア内のスペースを割り当てたい場合に有効です
これらのスタイルの追加により選択肢となる標準スタイルの数が 3から6に増えましたコントロールのスタイルはサブスクリプションストアの重要な要素ですこれらの新しい標準スタイルを配置やグループ化のためのAPIと組み合わせれば App Store上のアプリにおけるアプリ内課金において卓越した体験を創出できますサブスクリプションストアのデザインをさらにカスタマイズしたい場合は iOS 18から導入された優れた機能があります独自のカスタムコントロールスタイルを作成する機能です
またカスタムスタイルを構築しやすいように StoreKitが使用しているのと同じプリミティブを利用可能にしています標準スタイルを作成する際に使われている馴染みのあるものですではサブスクリプションストアを一から構築して独自のスタイルの実装がどれほど簡単かをお見せします
作成するのはファミリー共有に対応したプランに特別なバッジが付くピッカー型のレイアウトを採用したカスタムコントロールスタイルです
カスタムコントロールスタイル作成の最初のステップは SubscriptionStoreControlStyle プロトコルに適合する型を宣言することですこのプロトコルに必須のメソッドはただ1つ makeBodyです
makeBody関数に渡される configurationの値にはカスタムコントロールの作成に必要なすべての情報が含まれていますこのconfigurationの値は新しい SubscriptionPicker APIで使用できます
SubscriptionPickerは 2つのクロージャを想定しています 1つ目のクロージャには販売する各サブスクリプションオプションを表すために使用されるビューを返しますこの設定のためにカスタムの SwiftUIビューを一から作成します
まず VStackとピッカーオプションの表示名を追加します
先ほど作成したヘルパーメソッドを使用して各オプションのローカライズされた価格表示を追加します
次にピッカーでファミリー共有が有効になっているか確認します有効である場合はファミリー共有可能のバッジを追加します
次にサブスクリプションオプションのローカライズされた説明文を追加します
どのオプションが選択されているかを示すためにこのビューをHStackでラップして選択インジケータを追加しピッカーオプションが選択されているという情報を渡します
2つ目のクロージャにはユーザーが選択したプランにサブスクリプション登録するためのビューを作成します意味的にはこのビューはボタンですなぜならユーザーがビューを操作した時に選択したオプションの購入がトリガーされるためです 1つ目のクロージャと同様に独自の登録ボタンを作成するか新しいSubscribeButton APIを使ってクロージャに用意されている optionの引数を渡します
新しいカスタムコントロールスタイルを使用するために必要となるのはコントロールスタイルのモディファイアでサブスクリプションストアのビューを修正しカスタムコントロールスタイルの型のインスタンスを渡すことのみです SubscriptionStoreViewによりこのように簡単に独自のコントロールスタイルを実装できますカスタムコントロールスタイルは App Storeのデータフローなどの StoreKitのパワフルなインフラを活用する優れた方法であると同時にアプリ内課金を通じてサブスクリプションストアでの販売で創造性を存分に発揮できるようにしますここまで SubscriptionStoreViewの新機能をご紹介しました次に App Storeで提供されるアプリのテストをより容易にする Xcodeにおけるテスト体験の強化について説明します XcodeのStoreKitテストはアプリ内課金の体験を構築の早期段階から継続的に最適化するための最良の方法です
XcodeのStoreKitテストではアプリが想定通りに動作するようになるまで App Store Connectでの製品の構成を延期できますそのため主要な機能の開発に専念してアプリの独自性をより高めることができます今年 Xcodeでアプリをテストする方法が多数追加されましたさっそく確認しましょうまずは StoreKitの構成に関するアップデートです Xcode 16の新機能としてアプリのプライバシーポリシーと使用許諾契約をローカルでテストできますこの新しい設定は StoreKit構成ファイルエディタの新しいセクションで行いますこのオプションをクリックするとアプリのプライバシーポリシーと使用許諾契約のエディタが開きますこれらのフィールドに入力された値はユーザーがボタンをタップするとアプリのサブスクリプションストアのビューに表示されます
これもXcode 16の新機能ですがサブスクリプショングループの表示名のローカリゼーションをテストできますこの新しい設定は StoreKit構成エディタのに移動して行いますグループに含まれるサブスクリプションプランの下にという新しいセクションがありますこのセクションの下端にあるボタンをクリックするとエディタが開きローカライズされたグループ表示名を追加できます
ウィンバックオファーのための新しい構成方法も追加されていますウィンバックオファーをテスト構成に追加する方法はすでに馴染みのあるほかのサブスクリプションオファーと同様です StoreKit構成にオファーを追加する方法については WWDC24のセッション「Implement App Store Offers」をご覧ください
次にアプリ内課金の画像をテストできるようテスト構成でサポートを追加しますこの新しい設定は新しいセクションの製品エディタで行います StoreKitの構成で指定する画像はローカルでのテストでのみ使用されるので任意の画像を追加できます画像がアプリでどう表示されるかテストする最も簡単な方法は ProductViewか StoreViewを使って prefersPromotionalIconフラグを trueに設定する方法です
ProductViewの詳細は WWDC23の「Meet StoreKit for SwiftUI」をご覧ください StoreKit構成ファイルのもう1つのアップデートはという新しいセクションです
この設定ではアプリ内課金に関連するシステムダイアログの有効／無効を切り替えられます
デフォルトではシステムダイアログは常に有効ですシステムダイアログを無効にするとアプリ内課金などにおいてダイアログが表示される時は常に自動的にデフォルトのオプションが選択されますこれが特に有用なのは UIの自動テストや手動テストを実施する際にアプリにおけるアプリ内課金のロジックのデフォルトのフローのみをテストする場合です次は Xcodeのトランザクションマネージャに関するアップデートをご紹介しますトランザクションマネージャはアプリ内課金のテストとデバッグに不可欠です様々なことができますが例えばトランザクションの検査や Xcodeからインストールされるあらゆるアプリでの購入に関する各種シミュレーションの実行や XcodeのStoreKitテストの利用が可能ですまたトランザクションマネージャはすべてのデバイスとシミュレータで利用できます Xcodeを使用してトランザクションマネージャに導入予定のアップデートを確認しましょう Destination Videoを実行しているシミュレータでトランザクションマネージャの新機能のデモを行います Xcode 15.2以降では Xcodeからアプリへ直接購入インテントを送信できます
App Storeのおすすめ製品などに対しユーザーがアプリ外で購入プロセスを開始するとアプリは購入インテントを受信します
すると購入データがアプリに送信されこのデータを使用して購入プロセスを完了できます
購入インテントを受信した時のアプリの動作をテストすることが重要ですこのテストを App Storeを経由せず簡単に実行できるようになりましたアプリ内課金のプロモーションやアプリへの購入インテントの実装について WWDC23の「What’s new in StoreKit 2 and StoreKit Testing in Xcode」で詳細をご覧ください Destination Videoアプリで購入インテントをリッスンするためのコードはすでに追加済みなのでテストの方法を説明しますアプリに購入インテントを送信するにはまずトランザクションマネージャのウインドウのフィルタバーの左側にあるをクリックしますアプリの構成済み製品のリストの下に通常の購入と購入インテントのいずれかを選ぶ新しいコントロールがあります
購入インテントを送信する製品を選び購入のタイプをに設定しをクリックすると購入インテントがテストデバイスに送信されます受信した購入インテントを処理するために SwiftUIですでにカスタムUIを構築しています受信した購入インテントを処理することを選択した場合製品販売のためのUIを独自に作成することもできます作成しない場合アプリの起動時にペイメントシートが表示されユーザーはそのシートで購入フローを完了できます以上が Xcodeで購入インテントをテストする方法です iOS 18のもう1つの新機能として請求の問題のメッセージをアプリ内で直接テストできるようになりました請求の問題によりサブスクリプションを更新できない場合問題を通知するメッセージがアプリに表示されますこの場合 StoreKitはシートを使って問題を解決するようユーザーに促します Xcodeではトランザクションマネージャでこのメッセージをテストできます iOS 18を搭載しているデバイスではアプリに表示されるシートでサブスクリプションをキャンセルするか問題を解決するか選べます請求に関する問題をテストするには StoreKitの構成画面ののを有効にします
テストではサブスクリプションの更新が試行されるとトランザクションの横にこのバッジが表示され再請求が開始されたことを示します
シミュレータはすでにメッセージを受信しており問題解決のためのシートが表示されています解決のボタンをタップすると請求の問題が修正され更新対象のサブスクリプションが表示されます
以上が請求の問題のメッセージを Xcode内でテストする方法ですアプリ内課金のための従来のAPIを引き続き使用している場合は重要なお知らせがあります iOS 18以降および対応するOSリリースではアプリ内課金のための従来のAPIは統合レシートを含め非推奨です既存のアプリは引き続き動作しますが従来のAPIには機能強化は適用できず今後のOSリリースで追加される新機能も利用できません最適なアプリ内課金を提供するために既存のアプリをアップデートし StoreKit 2を使用されることを強く推奨します StoreKit 2は従来のStoreKit APIに比べ多くの点で機能が向上していますユーザーのトランザクション履歴やサブスクリプション更新情報をいつでもアプリで確認できますフレームワークが自動的に暗号化を検証しますまたStoreKit 2は Swift async/awaitなどの最新の言語機能もサポートするため商品のメタデータの取得購入ユーザーのトランザクション履歴の取得などのタスクを実行できます
さらに Swiftの @backDeployed属性により StoreKit 2では古いOSを搭載したデバイスにインストールしたアプリでも App Storeの最新機能を利用できますほかにも StoreKit 2にはアプリ内課金の処理を大幅に容易にする一連のツールが備わっています今すぐアプリに導入できるAPIの詳細については Apple Developer Webサイトの StoreKitのドキュメントをご確認ください本セッションの内容は以上です内容を簡単にまとめましょうアプリ内課金で最適な体験を提供するための取り組みは StoreKit 2の導入から始まりますサブスクリプションストアのビューに導入された各種の新機能を使えばアプリ内課金の販売が容易になりますアプリ内課金のフローのテストには XcodeのStoreKitテストをお試しください今回紹介した機能やその他の StoreKitの機能の詳細は過去のセッションで確認できます「Meet StoreKit 2」「What’s new in StoreKit Testing」「Meet StoreKit for SwiftUI」をご覧くださいみなさんがStoreKitでどのような体験を構築するか楽しみですご視聴ありがとうございました

import StoreKit
import SwiftUI

struct DestinationVideoShop: View {

  var body: some View {
    SubscriptionStoreView(groupID: Self.subscriptionGroupID) {
      SubscriptionOptionGroupSet { product in
				StreamingPassLevel(product)
      } label: { streamingPassLevel in
       	Text(streamingPassLevel.localizedTitle)
      } marketingContent: { streamingPassLevel in
        StreamingPassMarketingContent(level: streamingPassLevel)
        StreamingPassFeatures(level: streamingPassLevel)
      }
  	}
  	.subscriptionStoreControlStyle(.compactPicker, placement: .bottomBar)
	}

}

9:06 - Subscription Option Groups - Tabs style

SubscriptionStoreView(groupID: Self.subscriptionGroupID) {
  SubscriptionOptionGroupSet { product in
		StreamingPassLevel(product)
  } label: { streamingPassLevel in
    Text(streamingPassLevel.localizedTitle)
  } marketingContent: { _ in
    StreamingPassMarketingContent()
	}
}
.subscriptionStoreControlStyle(.compactPicker, placement: .bottomBar)
.subscriptionStoreOptionGroupStyle(.tabs)

9:20 - Subscription Option Groups - Links style

SubscriptionStoreView(groupID: Self.subscriptionGroupID) {
  SubscriptionOptionGroupSet { product in
		StreamingPassLevel(product)
  } label: { streamingPassLevel in
    Text(streamingPassLevel.localizedTitle)
  } marketingContent: { _ in
    StreamingPassMarketingContent()
	}
}
.subscriptionStoreControlStyle(.compactPicker, placement: .bottomBar)
.subscriptionStoreOptionGroupStyle(.links)

13:41 - Custom control style implementation

import StoreKit
import SwiftUI

struct BadgedPickerControlStyle: SubscriptionStoreControlStyle {
  func makeBody(configuration: Configuration) -> some View {
    SubscriptionPicker(configuration) { pickerOption in
      HStack(alignment: .top) {
        VStack(alignment: .leading) {
          Text(pickerOption.displayName)
          	.font(title2.bold())
          Text(priceDisplay(for: pickerOption))
          if pickerOption.isFamilyShareable {
            FamilyShareableBadge()
          }
          Text(pickerOption.description)
        }
        Spacer()
        SelectionIndicator(pickerOption.isSelected)
      }
    } confirmation: { option in
      SubscribeButton(option)
    }
  }
}

struct DestinationVideoShop: View {

  var body: some View {
    SubscriptionStoreView(groupID: Self.subscriptionGroupID) {
      SubscriptionPeriodGroupSet { _ in
        StreamingPassMarketingContent()
      }
  	}
  	.subscriptionStoreControlStyle(BadgedPickerControlStyle())
	}

}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC24

WWDC23

WWDC22

WWDC21

WWDC20