Paywalls V2 は、ノーコードでリモート設定でき、完全にネイティブなペイウォールビルダーです。 RevenueCat ダッシュボードでビジュアルに設計すると、SDK がネイティブにレンダリングします（iOS では SwiftUI、Android では Jetpack Compose）。 リモートなので、アプリのアップデートを出さずにペイウォール全体を変更できます。

これが重要な理由は次のとおりです。

• リリースなしで反復できる。文言、レイアウト、価格の強調、画像をダッシュボードから編集できます。
• ネイティブである。Web ビューではなく、ネイティブコンポーネントでレンダリングし、ライト/ダークモードに合わせて表示します。
• 実験に活かせる。ペイウォールは Offering に紐付くため、A/B テストできます（ステップ 10）。

ペイウォールは Offering 内のパッケージをレンダリングするので、まずそこから設定します （RevenueCat ダッシュボードのプロジェクト内）。

1. ストア商品（月額と年額のサブスクリプション）が存在し、RevenueCat にインポートされているか確認します。
2. 両方の商品を pro エンタイトルメントに紐付けます。
3. デフォルトの Offering に、$rc_monthly と $rc_annual の 2 つのパッケージを追加し、それぞれに対応する商品をラップします。

Offering とパッケージがはじめての場合は 商品と価格を取得するを参照してください。

ダッシュボードで Paywalls を開き、Create paywall をクリックします。テンプレートから始め（推奨）、エディターのペイウォールプロパティ（「Select an Offering for your Paywall」）で Offering に紐付けます。ここからデータに基づいたレイアウトを作ります。

1. Package コンポーネント 2 つ：月額用と年額用。2 プランのペイウォールがもっとも一般的なレイアウトです。
2. 年額プランを強調し、discount 変数を使って割引バッジを追加します。
3. pro で何がアンロックされるかを示す Feature list と、短い見出しを追加します。
4. 無料トライアルの案内と 「Cancel anytime」の一文を追加します。
5. Purchase button(CTA)のラベルを 「Continue」に設定します。

テンプレート変数（二重中かっこ）を使うと、価格やオファーが常にストアから取得されます。

{{ product.price }}              -> "$9.99"          (the package price)
{{ product.price_per_period }}   -> "$59.99/year"    (price with the billing period)
{{ product.relative_discount }}  -> "37%"            (annual savings vs the priciest plan)
{{ product.offer_price }}        -> "free"           (the intro/trial price, when there is one)

満足できたら Publish をクリックします。アプリのアップデートなしに、すぐ公開されます。

ペイウォールは RevenueCatUI ライブラリを通じてレンダリングされます。Xcode で Swift パッケージ https://github.com/RevenueCat/purchases-ios-spm.git を追加し、 RevenueCat と RevenueCatUI の両方のプロダクトを選択します。

import SwiftUI
import RevenueCat     // the core SDK
import RevenueCatUI   // the paywall views

ペイウォールを表示するもっとも簡単な方法は、presentPaywallIfNeeded view modifier です。 ユーザーがエンタイトルメントを持たないときにだけ Offering のペイウォールを表示し、 エンタイトルメントを得た時点で自動的に閉じます。

import SwiftUI
import RevenueCat
import RevenueCatUI

struct RootView: View {
    var body: some View {
        ContentView()
            .presentPaywallIfNeeded(
                requiredEntitlementIdentifier: "pro",
                // For a hard paywall, add: presentationMode: .fullScreen
                purchaseCompleted: { customerInfo in
                    print("Purchased: \(customerInfo.entitlements.active.keys)")
                },
                restoreCompleted: { customerInfo in
                    // Dismisses automatically if "pro" is now active.
                    print("Restored: \(customerInfo.entitlements.active.keys)")
                }
            )
    }
}

ハードペイウォール（購入するまで先へ進めないもの）にするには、 presentationMode: .fullScreen で全画面表示します。データではハードペイウォールのほうがフリーミアムよりはるかにコンバージョンが高いため、 サブスクリプションが必要なコンテンツでよく選ばれます。

任意のタイミングでペイウォールを表示したいとき（たとえば「Upgrade」ボタンから）は、シートで PaywallView を表示します。現在の Offering のペイウォールをレンダリングします。

struct SettingsView: View {
    @State private var showPaywall = false

    var body: some View {
        Button("Upgrade to Pro") { showPaywall = true }
            .sheet(isPresented: $showPaywall) {
                // No need to wrap this in a ScrollView, the paywall handles scrolling.
                PaywallView()
            }
    }
}

PaywallView() は現在の Offering を使います。特定の Offering を表示するには （この場合 A/B 実験のルーティングは無効になります）、明示的に渡します：PaywallView(offering: yourOffering)。

購入、復元、そしてユーザーがペイウォールを閉じようとする操作に反応するハンドラを付けます。

.sheet(isPresented: $showPaywall) {
    PaywallView()
        .onPurchaseCompleted { customerInfo in
            // Verify access before unlocking; receiving CustomerInfo is not proof of entitlement.
            if customerInfo.entitlements.active["pro"]?.isActive == true {
                showPaywall = false
            }
        }
        .onRestoreCompleted { customerInfo in
            if customerInfo.entitlements.active["pro"]?.isActive == true {
                showPaywall = false
            }
        }
        .onRequestedDismissal {
            // Fires on close-button tap (or purchase completion).
            showPaywall = false
        }
}

同じダッシュボードのペイウォールが、あらゆるプラットフォームでレンダリングされます。表示 API は次のとおりです。

React Native

import RevenueCatUI, { PAYWALL_RESULT } from 'react-native-purchases-ui';

const result = await RevenueCatUI.presentPaywallIfNeeded({
  requiredEntitlementIdentifier: 'pro',
});
// result is PURCHASED, RESTORED, CANCELLED, ERROR, or NOT_PRESENTED

Android (Jetpack Compose)

// paywallActivityLauncher is a PaywallActivityLauncher created in onCreate.
// Launch the paywall only if the entitlement is missing:
paywallActivityLauncher.launchIfNeeded(requiredEntitlementIdentifier = "pro")

Flutter

import 'package:purchases_ui_flutter/purchases_ui_flutter.dart';

final result = await RevenueCatUI.presentPaywallIfNeeded("pro");
// result is a PaywallResult: notPresented, error, cancelled, purchased, restored

テスト

1. pro を持たないユーザーとしてアプリを実行し、2 つのプラン、強調された年額オプション、トライアルの一文、「Continue」の CTA を備えたペイウォールが表示されるか確認します。
2. サンドボックス購入を完了し、ペイウォールが閉じてコンテンツがアンロックされるか確認します。
3. ダッシュボードでペイウォールを編集して公開し、再起動します。新しいビルドなしで変更が反映されます。

次は A/B テスト

本当の成果はテストから生まれます。ペイウォールは Offering に紐付くため、別のペイウォールを持つ 2 つ目の Offering を作り、 RevenueCat の Experiment を実行してどちらのコンバージョンが高いかを確かめられます。 さらに Targeting と Placements を使えば、オーディエンスごとに異なるペイウォールを配信できます。

作ったもの

データに基づいた 2 プランのレイアウトを持つ、リモートかつノーコードのネイティブペイウォールです。 presentPaywallIfNeeded と PaywallView で SwiftUI に表示し、 あらゆるプラットフォームでのレンダリングと実験への活用に対応しています。

次のステップ

• iOS のアプリ内課金とペイウォール：SDK 連携の全体を扱うコードラボ。
• 商品と価格を取得すると 導入価格の対象か確認する：Offering を組み立てる要素。
• RevenueCat: Paywalls と Displaying Paywalls。