• Projects
  • Service
  • About
  • branding.bz
  • Podcast
  • Tips
  • FAQ
  • Recruit
  • Download
  • Contact
  • branding.bz(ブランド構築SaaS)
  • DESIGN NOW(デザインメディア)
  • X
  • LinkedIn
  • Spotify
  • Facebook

213-0011 神奈川県川崎市高津区久本3-6-7-303

© 2026 ID INC. All rights reserved

claude-skills/スキル
SKILLOfficialdevelopment

revenuecat-paywall

プラグイン
rc
ソース
GitHub で見る ↗
説明

RevenueCat UIのSDK(ソフトウェア開発キット)を使用して、アプリ内にRevenueCatのペイウォール(購入を促すポップアップ画面)を表示します。 次のような場合に使用: - ユーザーがペイウォールの追加をリクエストした - RevenueCatのペイウォールを表示したい - PaywallViewを表示したい - RevenueCatUIを統合したい - プレミアム機能の画面をペイウォールで保護したい - PaywallActivityを起動したい - presentPaywall または presentPaywallIfNeeded を呼び出したい - ダッシュボードで設定されたペイウォールUIをiOS・Android・Kotlin Multiplatform・Flutter・React Nativeで表示したい ※ダッシュボード上のペイウォール自体を作成・編集・評価・監査する場合は、revenuecat-paywall-design を使用してください。

原文を表示

Display a RevenueCat paywall inside an app using the RevenueCatUI SDK. Use when the user asks to add a paywall, show a RevenueCat paywall, present PaywallView, integrate RevenueCatUI, gate a premium screen with a paywall, launch PaywallActivity, call presentPaywall or presentPaywallIfNeeded, or show the dashboard configured paywall UI on iOS, Android, Kotlin Multiplatform, Flutter, or React Native. To create, edit, evaluate, or audit the dashboard paywall itself, use revenuecat-paywall-design.

ユースケース
  • ユーザーがペイウォール表示をリクエスト
  • プレミアム機能へのアクセスを制限
  • RevenueCatのペイウォールUIを統合
  • 複数プラットフォーム対応ペイウォール表示
本文(日本語訳)

revenuecat-paywall: RevenueCat ペイウォール(購入画面)を表示する

次のような場合に使用: ユーザーに RevenueCat ダッシュボード(設定管理画面)で構築・設定したペイウォールを、RevenueCatUI の公式コンポーネントを使って表示したい場合。このスキルはカスタムペイウォールをゼロから作成する方法には対応していません。その場合は、revenuecat-purchase-flow(利用可能な場合)と Purchases.getOfferings(…) を直接使うか、ダッシュボードペイウォール自体を作成・編集・評価・確認するには 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 ダッシュボードにペイウォール付きのオファリング(販売パッケージ)が必要です。 SDK は getOfferings() でオファリングを取得します。ペイウォールが設定されたオファリングがない場合、RevenueCatUI はデフォルトのペイウォールレイアウトに切り替わります。本番環境ではこれは望ましくありません。

  • オファリング vs. 権利。 ユーザーはオファリング内のプランを通じて商品を購入します。アクセス許可は権利(通常は "premium" や "pro")で付与されます。プレミアム機能はオファリングではなく権利でロックしてください。

  • 3 つの表示パターン:

    • (a) 初回起動時のモーダル(ポップアップ画面): 権利のないユーザー向け。通常は権利をチェックして、権利がない場合だけペイウォールを表示するヘルパー関数で制御します。
    • (b) ゲート画面: ユーザーがプレミアム機能をタップすると、画面が読み込まれる前にペイウォールが開きます。
    • (c) CTA ボタンでの条件付き表示: 設定内の「アップグレード」ボタンなど、タップで条件付けされたもの。
  • RevenueCatUI が購入フロー全体を管理します。 RevenueCatUI ペイウォールと一緒に Purchases.purchase(…) を手動で呼び出さないでください。ペイウォール内部から呼び出されます。ペイウォール閉鎖またはに購入完了時のコールバック(コンポーネントからの通知)をリッスンしてアプリロジックで対応してください。

  • 閉じるボタンはほとんどのプラットフォームでオプトイン(明示的な指定が必要)です。 モーダルでペイウォールが表示される場合で、ユーザーが出る方法を必要とするなら、displayCloseButton = true(iOS / Flutter / React Native)または 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. 購入せずにペイウォールを閉じると、閉鎖/キャンセルコールバックが発火すること。

ペイウォールがデフォルトフォールバックレイアウトを表示する場合は、オファリングにダッシュボードでペイウォールがアタッチされていません。ダッシュボードで修正してから再試行してください。

原文(English)を表示

revenuecat-paywall: display a RevenueCat paywall

Use this skill when the user wants to show a paywall that is built and configured in the RevenueCat dashboard, using the native RevenueCatUI components. This skill does not cover building a custom paywall from scratch. For that, use revenuecat-purchase-flow (when available) and Purchases.getOfferings(…) directly. To create, edit, evaluate, or audit the dashboard paywall, use revenuecat-paywall-design.

Prerequisite: integrate-revenuecat has already run. Purchases.configure(…) must succeed before a paywall can load.

1. Detect the platform

Inspect the working directory and pick the first match, from top to bottom:

  1. React Native: package.json has a react-native-purchases entry, or react-native as a dependency. react-native-purchases-ui is the paywall package. Read platforms/react-native.md. If expo is also a dependency, note it as an Expo project.
  2. Flutter: pubspec.yaml exists at the project root. The paywall package is purchases_ui_flutter. Read platforms/flutter.md.
  3. Kotlin Multiplatform: build.gradle.kts contains a kotlin { … } multiplatform source sets block, or depends on com.revenuecat.purchases:purchases-kmp*. The paywall module is purchases-kmp-ui. Read platforms/kmp.md.
  4. Android (native): build.gradle(.kts) applies com.android.application (and is not KMP). The paywall dependency is com.revenuecat.purchases:purchases-ui. Read platforms/android.md.
  5. iOS (native): Package.swift, *.xcodeproj, *.xcworkspace, or Podfile at the project root. The paywall product is RevenueCatUI. Read platforms/ios.md.

If several match (e.g. an ios/ folder inside a Flutter project), pick the outermost project, the one that owns the build. If still ambiguous, ask the user which platform they want to configure.

2. Shared concepts (all platforms)

  • Paywalls require an Offering with a paywall attached in the RevenueCat dashboard. The SDK pulls offerings via getOfferings(). If no offering has a paywall configured, RevenueCatUI falls back to a default paywall layout, which is not what you want in production.
  • Offering vs. entitlement. Users purchase a product through a package in an offering. Access is granted via an entitlement (typically "premium" or "pro"). Gate premium features on the entitlement, not on the offering.
  • Three presentation patterns:
    • (a) First launch modal for users without the entitlement, typically driven by a "present if needed" helper that checks the entitlement and only shows the paywall when missing.
    • (b) Gated premium screen. The user taps a premium feature and the paywall opens before the screen loads.
    • (c) Conditional present on a CTA tap, such as an "Upgrade" button in settings.
  • RevenueCatUI owns the purchase flow. Do not call Purchases.purchase(…) manually alongside a RevenueCatUI paywall. The paywall calls it internally. Listen for the dismiss or purchase completed callback to react in app code.
  • Close button is opt in on most platforms. Pass displayCloseButton = true (iOS / Flutter / RN) or setShouldDisplayDismissButton(true) (Android / KMP) when the paywall is presented modally and the user needs a way out. Skip it when presenting behind a sheet with its own grabber, or when wrapping the paywall in a navigation controller.
  • If the app needs a fully custom UI, do not use this skill. Call Purchases.getOfferings() and render your own components. RevenueCatUI is only for dashboard templated paywalls.

3. Implementation

Read the platform file that matches detection:

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

Each platform file is self contained: install command, exact snippet to present the paywall, and the callback shape you listen to.

4. Verify

Do not claim the integration is complete until:

  1. The project builds on the target platform.
  2. The app launches, the code path that presents the paywall runs, and the paywall UI renders with the template configured in the dashboard (not the default fallback layout).
  3. Tapping a package and completing a sandbox purchase dismisses the paywall and fires the purchase completed callback (or, for imperative APIs, resolves with a PURCHASED result).
  4. Closing the paywall without purchasing fires the dismiss / cancelled callback.

If the paywall shows the default fallback layout instead of your template, the offering does not have a paywall attached in the dashboard. Fix this in the dashboard, then retry.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。