🐱

[iOS]RevenueCatのPaywallsが超便利

2023/10/16に公開

iOS

Paywallsとは

RevenueCatがPaywalls(以下、ペイウォール)という機能を提供しています。

ペイウォールとはコードの変更をローカルで行うことなく、リモートで設定することができる課金画面のためのUI提供サービスです。
UIをコードで構築することなく1行で設定できますし、画像やテキストの変更も容易で、レイアウトもテンプレートを選択することでコードの変更なしに可能です。

この記事では、その利便性と現段階でできることについて解説していきます。
なお、本機能はベータ版として提供されているため、各自の責任を持って利用の検討を行なってください。

現在はiOS SDKでのみ利用可能で、バージョン4.26以上が必要です。

import RevenueCatUI

テンプレート

新しいペイウォールを作成する際に最初に行うことがテンプレートを選択することです。

現状では4種類のテンプレートが準備されており、用途に応じて使い分けることができます。
例えば、

複数の異なるパッケージを提供するならテンプレート2
Blinkistアプリのように無料お試し版を試してみたい場合はテンプレート3

RevenueCat Paywalls Templates

日本語を含むローカライズ機能も拡充しており、文言や画像を変更することができます。
なお、"購入履歴の復元"、"利用規約"、"プライバシーポリシー "のような文字列は自動的にローカライズされます。

ペイウォールの細かいセットアップはCreating Paywallsをご覧ください。

PaywallView

テンプレートを作成したら、すぐに利用可能です。

RevenueCat, Products and pricing, Entitlements

Entitlementsで設定したIdentifierをセットして.presentPaywallIfNeededを呼び出せば、作成した画面がすぐに表示されます。
Callback関数が用意されており、購入完了時やリストア完了時の対応も容易です。

struct App: View {
    var body: some View {
        ContentView()
            .presentPaywallIfNeeded(
                requiredEntitlementIdentifier: "premium",
                purchaseCompleted: { customerInfo in
                    print("Purchase completed: \(customerInfo.entitlements)")
                },
                restoreCompleted: { customerInfo in
                    print("Purchases restored: \(customerInfo.entitlements)")
                }
            )
    }
}

ただ、この方法だと課金ユーザではない場合、起動のたびに表示されてしまいます。
もしも特定の条件で表示したい場合には別途フラグを用意し、PaywallViewを手動で表示する必要があります。


struct App: View {
    @State var displayPaywall = false

    var body: some View {
        ContentView()
            .sheet(isPresented: self.$displayPaywall) {
                PaywallView()
            }
    }
}

ここまで見てきたのは、あらかじめ用意されたテンプレートを利用し、最速でリリースするための手法でした。
しかし、テンプレートの恩恵を受ける反面、あくまでもテンプレートなのでデザイン性やカスタマイズの観点から痒いところに手が届かない箇所がいくつかあります。
さらに便利なのがpaywallFooterモディファイアーです。

独自のデザインを適用し、課金部分だけのFooterだけを利用することもできます。
Footerにも2種類あり、全プランを表示するか、デフォルトのプランのみを表示するかどうかを選択できます。
現状プランが2つだと見た目上問題なさそうですが、複数プラン追加していく場合にはFooterが画面を覆うようになってしまうので、condensedフラグを有効にしておくのが良いと思われます。