capacitor 向けのアプリ内課金

このプラグインはRevenueCatの公式リポジトリに移行されました。詳細は公式ドキュメント詳細はこちら。

RevenueCatを使わずに、よりシンプルなネイティブ API をお探しの場合は、 @capgo/native-purchases StoreKitとGoogle Play Billingを使って、アプリ内課金とサブスクリプションを直接実装します。

Capacitor Purchasesは、iOSとAndroidでアプリ内課金を可能にするCapacitorフレームワーク向けのプラグインです。複数のプラットフォームにわたりシンプルで一貫したAPIを提供し、開発者がモバイルアプリにアプリ内サブスクリプションと課金を簡単に実装できるようにします。

Capacitor Purchasesプラグインの主な特徴の1つは、アプリ内サブスクリプションとアプリ内課金のためのツールを提供するプラットフォーム、RevenueCatと連携していることです。RevenueCatは複数のプラットフォームにわたりシンプルで一貫したAPIを提供し、レシート検証やユーザー管理などのタスクを自動化することで、アプリ内サブスクリプションと課金の実装プロセスを簡素化します。

RevenueCatを使えば、開発者はサブスクリプションの管理、収益の追跡、その他の関連タスクを簡単に行えます。RevenueCatが提供する主な機能は次のとおりです：

レシート検証の自動化
ユーザー管理
カスタム価格モデルのサポート
詳細な分析 - スケーラビリティ

Capacitor PurchasesプラグインをRevenueCatと併用することで、開発者はモバイルアプリにアプリ内サブスクリプションと課金を実装する際の時間と労力を節約でき、ユーザー体験の向上と収益増加に役立つ追加機能を提供できます。

Capacitor Purchases pluginとRevenueCatを使用することで、開発者はアプリ内サブスクリプションや購入の管理・追跡、レシート検証、複数プラットフォームにわたるユーザー管理を簡単に行えます。また、カスタム料金モデルの作成や、パフォーマンスと収益を向上させるための詳細な分析データの取得も可能です。

インストール

必ず最新バージョンのCapacitorとCapacitor Purchases pluginを使用してください。CapacitorおよびCapacitor Purchases pluginの最新バージョンは、Capacitorのウェブサイトで確認できます。

Capacitor Purchases pluginをインストールするには、次のコマンドを実行します： npm i @capgo/capacitor-purchases アプリのネイティブcodeにプラグインを追加します npx cap sync

Xcodeでアプリ内課金機能を有効にします：

Xcode ステップ 1 その後 Xcode ステップ 2

1. RevenueCatアカウントの作成

このガイドでは、わずか数行のcodeで、サブスクリプションとRevenueCatのSDKを導入・運用する方法を解説します。

RevenueCatの新規アカウント登録こちら.

📘

💡 ヒント！

RevenueCatでは、アプリの売却を検討している場合、アプリやプロジェクトごとに個別のRevenueCatアカウントを作成することを推奨しています。これにより、個別のプロジェクト転送をRevenueCatサポートに依頼して待つ必要がなく、アカウントごと一括で譲渡できるため、プロセスが迅速化されます。

組織 / エンタープライズ

RevenueCatへの登録およびプロジェクト内でのアプリ設定には、会社用アカウントの使用を推奨します。チームの他のメンバーをコラボレーターとしてプロジェクトに招待できますが、 請求管理ができるのはプロジェクトオーナーのみです。プロジェクトのコラボレーターは請求詳細を管理できません。

2. プロジェクトとアプリの設定

▶️ プロジェクトの作成

RevenueCatのダッシュボードに移動し、新しいプロジェクトを追加トップナビゲーションメニューのドロップダウンから「 プロジェクト.

RevenueCat ステップ 1

新規プロジェクト作成のポップアップモーダル

▶️ App / Platform を追加

から Project Settings > Apps プロジェクトダッシュボードの左メニューから、追加するアプリのプラットフォームを選択します。

RevenueCat ステップ 2

アプリのプラットフォームを選択するプロジェクトダッシュボード

フィールド アプリ名 アプリをRevenueCatに追加するには、これが必要です。その他の設定項目は後から追加できます。テストおよび本番環境での購入を行うには、Bundle ID (iOS) / Package Name (Android) および Shared Secret (iOS) / Service Credentials (Android) の設定が必須となります。

RevenueCat ステップ 3

Apple App Store アプリの設定ページ

📘

💡 ヒント

アプリの登録後、RevenueCat は以下の設定を推奨しています：プラットフォームのサーバー通知。これらの通知は必須ではありませんが、 webhooks の連携スピードを向上させ、サブスクライバー情報の更新遅延を軽減できます。

📘

Staging と Production のアプリおよびユーザーの違い

RevenueCat 自体には、staging と production の別々の環境はありません。代わりに、ユーザーの underlying なトランザクションが sandbox と production によって区別されます。

RevenueCatを利用するアプリは、ストアからサンドボックス購入と本番購入の両方を行えます。ステージング用と本番用でアプリを分けている場合は、RevenueCatで複数のプロジェクトを作成して構成を再現できます。

さらに、ユーザーも環境ごとに分離されません。同じユーザーが、有効なサンドボックス購入と本番購入を同時に持つことができます。

▶️ サービス認証情報

RevenueCatがユーザーに代わってアプリストアと通信するには、サービス認証情報を設定する必要があります。RevenueCatのガイドを参照してください。 App Store Connect 共有シークレット, Play サービス認証情報や Amazon Appstore 共有シークレット詳細はこちら。

注意：Play のサービス認証情報がGoogleのサーバー全体に反映されるまで、最大36時間かかる場合があります。

3. プロダクト設定

▶️ ストアのセットアップ

RevenueCatを使用して製品を取得する前に、各ストアで製品の設定を完了させる必要があります。設定手順については、以下のガイドを参考にしてください： App Store Connect, Google Play Console, Amazon Appstoreや Stripe このプロセスを進める際の手順はこちらをご確認ください。

iOS製品を販売する場合は、必ず「Paid Applications Agreement」に署名し、銀行および税務情報を入力してください。設定場所は以下です： App Store Connect > Agreements, Tax, and Banking. 購入テストを開始する前に、この設定を完了させる必要があります。.

📘

テスト中にストアの設定をスキップしたいですか？

iOSでは、StoreKit Configurationファイルを使用することで、App Store Connectでの製品設定を後回しにできます。これらの設定ファイルはセットアップが非常に簡単で、Xcodeから直接構成可能です。

RevenueCatでのStoreKit Configurationファイルのセットアップ詳細はこちら Sandboxテストガイドを参照してください。

▶️ RevenueCatでの製品とEntitlementsの設定方法

アプリ内製品の設定が完了したら、 App Store Connect, Google Play Console, Amazon Appstore、または Stripe、その設定をRevenueCatのダッシュボードにコピーする必要があります。RevenueCatでは、プレミアム機能へのアクセスを制御する「Entitlements」システムと、顧客に提供する製品セットを管理する「Offerings」を使用します。

Entitlementsとは、特定の製品を購入した顧客が「権利」として持つアクセスレベルのことです。 Offeringsは、ペイウォールで「提供」したいアプリ内製品を整理し、リモートで設定するためのシンプルな仕組みです。RevenueCat を推奨します これらの機能を活用して code を簡素化し、アプリのアップデートなしで製品を変更できるようにします。

詳細は製品の設定製品をセットアップし、それらを Offerings または Entitlements に整理します。

RevenueCat ステップ 4

4. RevenueCat Purchases SDK の使用

RevenueCat SDK は、トークンを RevenueCat サーバーと同期しながら、プラットフォーム間で購入とサブスクリプションをシームレスに実装します。

SDK で問題が発生した場合は、 SDK のトラブルシューティングを参考にしてください。

📘

Purchases の設定には、公開 SDK キーのみを使用してください

公開 SDK キーは、以下の API のキー タブから取得できます。 プロジェクト設定 ダッシュボード内の

の共有インスタンスの設定は、通常アプリの起動時に アプリ内課金 通常、アプリの起動時に一度だけ実行されます。その後は、以下の方法で同じインスタンスにアクセスすることで、アプリ全体で共有されます。 .shared SDK 内のインスタンス

詳細とベストプラクティスについては、RevenueCatの SDK の設定に関するガイドを参照してください。

必ず設定してください： アプリ内課金 公開 SDK キーのみを使用してください。利用可能な各種 API キーの詳細は、RevenueCatの認証ガイドを参照してください。.

import { CapacitorPurchases } from '@capgo/capacitor-purchases'
import { isPlatform } from '@ionic/vue' // use the right one for your framework

CapacitorPurchases.setDebugLogsEnabled({ enabled: import.meta.env.DEV }) // Enable to get debug logs in dev mode
if (isPlatform('ios')) {
    CapacitorPurchases.setup({ apiKey:'appl_******'})
} else if (isPlatform('android')) {
    CapacitorPurchases.setup({ apiKey:'goog_******'})
}

開発時には、RevenueCatはより詳細なデバッグログを有効にすることを推奨しています。これらのログの詳細は、RevenueCatのデバッグガイドを参照してください。

既存の購入用 code と併用してRevenueCatを使用する場合は、RevenueCatのガイドを参照してください： Observer Mode.

📘

ユーザーIDを使用した購入設定

アプリにユーザー認証システムがある場合は、設定時または後から呼び出しを行うことでユーザー識別子を提供できます .logIn()。詳細は、RevenueCatのガイドを参照してください。ユーザーの特定.

SDK は、設定済みの Offerings を自動的に取得し、 Apple、Google、または Amazon から製品情報を取得します。そのため、ユーザーが購入画面を開いたときには、すでに利用可能な製品がロードされた状態になります。

以下は Offerings を取得する例です。Offerings を活用してペイウォール画面を構成できます。詳細は RevenueCat ガイドの製品の表示における詳細とベストプラクティスを参照してください。

▶️ 利用可能な製品の取得と表示

📘

ユーザーIDを使用した購入設定

アプリにユーザー認証システムがある場合は、設定時または後から呼び出しを行うことでユーザー識別子を提供できます .logIn()。詳細は、RevenueCatのガイドを参照してください。ユーザーの特定.

SDK は自動的に設定済みの Offerings を取得し、 Apple、Google、または Amazon から製品情報を取得します。そのため、ユーザーが購入画面を開いたときには、すでに利用可能な製品がロードされた状態になります。

以下は Offerings を取得する例です。Offerings を活用してペイウォール画面を構成できます。詳細は RevenueCat の商品の表示のガイドで、詳細やベストプラクティスを確認してください。

const { offerings } = await CapacitorPurchases.getOfferings()
if (offerings.current !== null) {  
    // Display current offering with offerings.current
}

もし Offerings, や製品、または利用可能な packages が空の場合は、各ストアの設定に問題がある可能性があります。

App Store Connectでこれが起こる主な原因は、「Paid Applications Agreement」の期限切れ、または製品が「Ready To Submit」状態になっていないことです。Google Playでは、アプリがクローズドトラックで公開されておらず、有効なテストユーザーが追加されていない場合に発生することが一般的です。

この問題のトラブルシューティングに関する詳細は、RevenueCatのヘルプセンター.

▶️ 購入する

SDK には、購入を簡単にするためのシンプルなメソッドが含まれています。このメソッドは purchase:package 取得した Offering からパッケージを受け取り、該当するアプリストアでトランザクションを処理します。

以下の code サンプルでは、パッケージを購入し、それによって “your_entitlement_id” のコンテンツがアンロックされることを確認する流れを示しています。詳細については、 purchase:package メソッドに関するRevenueCatのガイドで確認できます。購入方法.

const purchase = async (p: Package): Promise<PurchaserInfo | null> => {
  try {
    // console.log('purchase', p)
    const data = await CapacitorPurchases.purchasePackage({
      identifier: p.identifier,
      offeringIdentifier: p.offeringIdentifier,
    })
    const purchaserInfo = data.purchaserInfo
    // console.log('listenBuy', purchaserInfo)
    if (purchaserInfo.activeSubscriptions.includes(p.identifier)) {
      // set the user as paid
    }
    return purchaserInfo
  }
  catch (e) {
    console.error('listenBuy error', e)
  }
  return null
}

▶️ サブスクリプションの状態を確認する

最新のステータスを取得する必要があるときはいつでもこのメソッドを使用できます。アプリのライフサイクルを通じて繰り返し呼び出しても安全です。 アプリ内課金 最新のデータを自動的にキャッシュします。 CustomerInfo 更新のたびにキャッシュされるため、ほとんどの場合、このメソッドはキャッシュからデータを取得して非常に高速に動作します。

表示するUIの決定時や、特定の権限レベルが必要なユーザーアクションが発生した際に、このメソッドを呼び出すのが一般的です。

📘

💡 ヒント！

サブスクリプションが有効かどうかだけでなく、より詳細な情報にアクセスできます。詳細はRevenueCatのガイドをサブスクリプションのステータス参照してください。サブスクリプションの更新設定や、ユーザーのクレジットカードに関する問題の有無などを確認できます。

RevenueCatを使用すると、ユーザーはアプリ内課金を復元でき、以前に 同じストアアカウント (Apple、Google、またはAmazonのアカウント) で購入したコンテンツを再度利用できるようになります。すべてのアプリにおいて、ユーザーが復元メソッドを実行できる手段を用意することを推奨します。なお、Appleは、ユーザーが購入内容にアクセスできなくなった場合（アプリの再インストールやアカウント情報の紛失など）に備え、復元メカニズムの実装を必須としています。

  const res = await CapacitorPurchases.restoreTransactions()
  const purchaserInfo = res.purchaserInfo
  const ids: string[] = [] // extract active subscriptions ids
  purchaserInfo.activeSubscriptions.forEach((id) => {
    ids.push(id)
  })

もし2つの異なる App User ID 同一のストアアカウント（Apple、Google、またはAmazonアカウント）からトランザクションを復元します。 RevenueCatは、2つのApp User ID間にエイリアスを作成し、以降を同一ユーザーとしてカウントする場合があります。詳細はRevenueCatの購入の復元に関するガイドを参照してください。

SDK はあらゆるプラットフォームでシームレスに動作するため、ユーザーの購入情報の変更はさまざまなソースから発生する可能性があります。顧客情報の変更に対しては、 CustomerInfo オプションのデリゲートメソッドを実装することで対応できます。 purchases:receivedUpdated:.

このメソッドは、SDK が更新された CustomerInfo オブジェクトを getCustomerInfo(), purchase(package:), purchase(product:)、または restorePurchases().

CustomerInfo の更新は、 決して RevenueCatのバックエンドからアプリにプッシュされます。前述の通り、更新はRevenueCatへのアウトバウンドネットワークリクエストを通じてのみ発生します。

アプリの要件によっては、デリゲートを無視し、アプリの次回起動時や SDK メソッドの完了ブロック内で顧客情報の変更を処理するだけで十分な場合もあります。

CapacitorPurchases.addListener('purchasesUpdate', (data) => {
  console.log('purchasesUpdate', data)
})

👍

おめでとうございます！

サーバー側の code を書くのに1ヶ月も費やすことなく、フル機能のサブスクリプション購入システムを実装できました。お見事です！

サンプルアプリ

SDK を統合したより完全な例をダウンロードするには、RevenueCatのサンプルアプリのリソースを確認してください。

サンプルを見る

Capacitor と Vue.js を使用したサンプルアプリも近日公開予定です。

Capacitor をより深く活用する必要がある場合は、SDK ドキュメントを確認してください。こちら.

次のステップ

まだ設定していない場合は、RevenueCat の entitlements に関するガイドを確認して、製品が正しく構成されているか確認してください。.
独自のユーザー識別子を使用したい場合は、こちらをお読みください。アプリのユーザーIDの設定 .
他のシステムからRevenueCatへ移行する場合は、こちらのRevenueCatガイドを参考にしてください：既存のサブスクリプションの移行について.
統合テストの準備ができたら、以下のRevenueCatガイドに従って進めることができます：テストとデバッグについて.
App Store Small Business Programの対象となる場合は、こちらのRevenueCatガイドを確認してください：申請方法とRevenueCatへの通知について

アプリに Live update が必要な場合

こちらから参加 👇

アカウント登録はこちら

Capgo

capacitor 用のアプリ内課金についてさらに詳しく

使用している場合 capacitor 向けのアプリ内課金 支払いや購入を計画するには、これを以下と連携させます Capgo の料金 Capgo の料金ページのプロダクトワークフローについては、決済システム決済システムの詳細な実装については、 @capgo/native-purchases @capgo/native-purchases の実装の詳細については、スタートガイド実装の詳細については Getting Started を、収益化プレイブック実装の詳細については Revenue Playbook を参照してください。