revenuecat-paywall

revenuecat-paywall: RevenueCat のペイウォールを表示する

RevenueCat ダッシュボードで作成・設定したペイウォールを、ネイティブの RevenueCatUI コンポーネントを使って表示したい場合に、このスキルを使用します。このスキルでは、カスタムペイウォールを一から作成する方法は扱いません。その場合は revenuecat-purchase-flow を使用し、Purchases.getOfferings(…) を直接呼び出してください。どちらを選ぶか決めていない場合は、integrate-revenuecat の Section 5c を参照してください。ダッシュボードのペイウォールを作成、編集、評価、監査するには、revenuecat-paywall-design を使用してください。

前提条件：integrate-revenuecat の実行が完了している必要があります。ペイウォールを読み込む前に、Purchases.configure(…) が成功していなければなりません。

1. プラットフォームを検出する

作業ディレクトリを調べ、上から順に最初に一致したものを選びます。

1. React Native：package.json に react-native-purchases のエントリがある、または依存関係に react-native がある場合です。ペイウォールのパッケージは react-native-purchases-ui です。platforms/react-native.md を読みます。expo も依存関係にある場合は、Expo プロジェクトとして記録します。
2. Flutter：プロジェクトルートに pubspec.yaml がある場合です。ペイウォールのパッケージは purchases_ui_flutter です。platforms/flutter.md を読みます。
3. Kotlin Multiplatform：build.gradle.kts に kotlin { … } のマルチプラットフォームソースセットブロックがある、または com.revenuecat.purchases:purchases-kmp* に依存している場合です。ペイウォールのモジュールは purchases-kmp-ui です。platforms/kmp.md を読みます。
4. Android（ネイティブ）：build.gradle(.kts) で com.android.application を適用している（かつ KMP ではない）場合です。ペイウォールの依存関係は com.revenuecat.purchases:purchases-ui です。platforms/android.md を読みます。
5. iOS（ネイティブ）：プロジェクトルートに Package.swift、*.xcodeproj、*.xcworkspace、または Podfile がある場合です。ペイウォールのプロダクトは RevenueCatUI です。platforms/ios.md を読みます。

複数に一致する場合（例：Flutter プロジェクト内に ios/ フォルダーがある場合）は、ビルドを管理する最も外側のプロジェクトを選びます。それでも判断できない場合は、設定するプラットフォームをユーザーに確認してください。

2. 共通の概念（すべてのプラットフォーム）

• ペイウォールには、RevenueCat ダッシュボードでペイウォールを関連付けた Offering が必要です。 SDK は getOfferings() を通じて Offering を取得します。ペイウォールが設定された Offering がない場合、RevenueCatUI はデフォルトのペイウォールレイアウトにフォールバックします。本番環境ではこれは望ましくありません。
• Offering とエンタイトルメントの違い。 ユーザーは Offering 内のパッケージを通じてプロダクトを購入します。アクセス権はエンタイトルメント（通常は "premium" または "pro"）によって付与されます。プレミアム機能へのアクセス制御には、Offering ではなくエンタイトルメントを使用してください。
• 表示方法は 3 パターンあります：
  • (a) エンタイトルメントを持たないユーザー向けの初回起動時のモーダル。通常はエンタイトルメントを確認し、ない場合にのみペイウォールを表示する「必要に応じて表示」ヘルパーを使います。
  • (b) プレミアム画面へのアクセス制限。ユーザーがプレミアム機能をタップすると、画面の読み込み前にペイウォールが開きます。
  • (c) 設定画面の「アップグレード」ボタンなど、CTA をタップしたときに条件付きで表示します。
• 購入フローは RevenueCatUI が管理します。 RevenueCatUI のペイウォールと併せて、Purchases.purchase(…) を手動で呼び出さないでください。ペイウォールが内部で呼び出します。アプリのコードで処理するには、閉じたとき、または購入が完了したときのコールバックをリッスンしてください。
• ほとんどのプラットフォームでは、閉じるボタンはオプトイン方式です。 モーダルでペイウォールを表示し、ユーザーが閉じられるようにする必要がある場合は、displayCloseButton = true（iOS／Flutter／RN）または setShouldDisplayDismissButton(true)（Android／KMP）を指定してください。つまみのあるシートの背後に表示する場合や、ペイウォールをナビゲーションコントローラーでラップする場合は省略してください。
• ユーザーが完全なカスタム UI を選んでいる場合は、このスキルを使用しないでください。 Purchases.getOfferings() を呼び出し、独自のコンポーネントをレンダリングしてください。RevenueCatUI は、ダッシュボードのテンプレート化されたペイウォール専用です。

3. 実装

検出結果に対応するプラットフォームのファイルを読みます。

• platforms/ios.md
• platforms/android.md
• platforms/kmp.md
• platforms/flutter.md
• platforms/react-native.md

各プラットフォームのファイルには、インストールコマンド、ペイウォールを表示するための正確なコードスニペット、リッスンするコールバックの形式がすべて記載されています。

4. 確認

以下を満たすまでは、連携が完了したと見なさないでください。

1. 対象プラットフォームでプロジェクトがビルドできること。
2. アプリが起動し、ペイウォールを表示するコードパスが実行され、ダッシュボードで設定したテンプレートを使ってペイウォール UI が表示されること（デフォルトのフォールバックレイアウトではなく）。
3. パッケージをタップしてサンドボックス購入を完了すると、ペイウォールが閉じ、購入完了コールバックが呼び出されること（または、命令型 API の場合は PURCHASED の結果が返されること）。
4. 購入せずにペイウォールを閉じると、閉じる／キャンセルのコールバックが呼び出されること。

ペイウォールにテンプレートではなくデフォルトのフォールバックレイアウトが表示される場合、ダッシュボードでオファリングにペイウォールが設定されていません。ダッシュボードで修正してから、もう一度お試しください。