__CAPGO_KEEP_0__ロゴ
チュートリアル

capacitorアプリ内課金

How to implement in-app purchases for capacitor apps using the Capacitor Purchases plugin and RevenueCat

__CAPGO_KEEP_0__アプリ内課金

マーティン・ドナディュー

マーティン・ドナディュー

in app purchases for capacitor

__CAPGO_KEEP_0__アプリ内課金 __CAPGO_KEEP_0__アプリ内課金の実装方法 このプラグインは、RevenueCat公式リポジトリに移行されました。詳細は公式ドキュメントを参照してください。

If you prefer a simpler native API without RevenueCat, @capgo/native-purchases StoreKitとGoogle Play Billingを直接使用してインアプリ購入とサブスクリプションを実装します。

Capacitor Purchases is a plugin for the Capacitor framework that allows in-app purchases on iOS and Android. It provides a simple and consistent API across multiple platforms, making it easy for developers to implement in-app subscriptions and purchases in their mobile apps.

One of the key features of the Capacitor Purchases plugin is that it integrates with RevenueCat, a platform that provides tools for in-app subscriptions and in-app purchases. RevenueCat simplifies the process of implementing in-app subscriptions and purchases by providing a simple and consistent API across multiple platforms, and automating tasks such as receipt validation and user management.

RevenueCatは、インアプリ購入とサブスクリプションを実装するプロセスを簡素化し、複数のプラットフォームで簡単かつ一貫した__CAPGO_KEEP_1__を提供し、レシートの検証やユーザー管理などのタスクを自動化します。

  • RevenueCatを使用すると、開発者はサブスクリプションを簡単に管理し、収益を追跡し、関連するタスクを実行できます。RevenueCatが提供する機能の例としては次のとおりです。
  • レシートの検証を自動化
  • ユーザー管理
  • カスタム価格モデルへの対応

By using the Capacitor Purchases plugin with RevenueCat, developers can save time and effort when implementing in-app subscriptions and purchases in their mobile apps, and provide additional features that can help to improve the user experience and increase revenue.

Using Capacitor PurchasesプラグインとRevenueCatを使用すると、開発者は簡単にインアプリ購入とサブスクリプションを管理し、トラッキング、レシートの検証、複数のプラットフォーム間のユーザー管理が可能になります。また、カスタム価格モデルを作成し、詳細な分析を取得してパフォーマンスと収益を向上させることもできます。

インストール

最新のCapacitorとCapacitor Purchasesプラグインを使用してください。CapacitorとCapacitor Purchasesプラグインの最新バージョンは、Capacitor ウェブサイトで確認できます。

Capacitor Purchasesプラグインをインストールするには、以下のコマンドを実行してください。 npm i @capgo/capacitor-purchases codeにプラグインを追加する npx cap sync

Xcodeでインアプリ購入機能を追加する

Xcodeステップ1 次に Xcodeステップ2

1. RevenueCatアカウントを作成する

このガイドでは、サブスクリプションとRevenueCatのSDKを使用して、数行のcodeでアップとローンに成功する方法を説明します。

RevenueCatの新しいアカウントに登録する Japanese.

📘

💡 Here’s a tip!

アプリを販売する場合、各アプリ/プロジェクトごとに別々のRevenueCatアカウントを作成することをお勧めします。アカウントをすべて転送することで、RevenueCatサポートが個々のプロジェクトを転送するのを待つ必要がなくなるため、転送プロセスが速くなります。

組織/エンタープライズ

RevenueCatに登録し、アプリをプロジェクト内に設定する際は、会社アカウントを使用することをお勧めします。 コラボレーター プロジェクトにコラボレーターを招待できますが、 プロジェクトのオーナーだけが請求情報を管理できます。プロジェクトとアプリの設定

▶️ プロジェクトを作成

RevenueCatダッシュボードに移動してください。

2. プロジェクトとアプリの設定 新しいプロジェクトを追加する 上部ナビゲーションメニューのドロップダウンリストから Projects.

RevenueCat ステップ 1

新しいプロジェクトを作成するためのポップアップモーダル

▶️ アプリ/プラットフォームを追加する

From プロジェクト設定 > アプリ プロジェクトダッシュボードの左メニューで、アプリを追加するプラットフォームを選択します。

RevenueCat ステップ 2

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

フィールド App nameは、RevenueCatにアプリを追加するために必要です。残りの構成フィールドは後で追加できます。テストと本番の購入を行うには、Bundle ID (iOS) / Package Name (Android) 以外に、Shared Secret (iOS) / Service Credentials (Android) の設定が必要です。 RevenueCat ステップ 3

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

💡 ここにヒントがあります!

📘

アプリを登録した後、RevenueCatは

プラットフォーム サーバー通知 を設定することをお勧めしています。これらの通知は必須ではありませんが、ウェブホック と統合の配信時間を速めるだけでなく、サブスクライバーの更新時間を短縮します。 ステージングと本番のアプリとユーザー

📘

RevenueCat自体には、ステージングと本番の環境が分かれていません。むしろ、ユーザーの下位のトランザクションはサンドボックスと本番で区別されています。

RevenueCat itself does not have separate environments for staging and production. Rather, the underlying transactions for users are differentiated by sandbox and production.

どのRevenueCatアプリでも、両方のサンドボックスと生産の購入をストアから行うことができます。 また、ステージングと生産用の別々のアプリがある場合、RevenueCatに複数のプロジェクトを作成して、設定をミラーリングすることができます。

さらに、環境によってユーザーは区別されません。 同じユーザーは同時にサンドボックス購入と生産購入を有効に保有することができます。

▶️ サービス認証情報

RevenueCatは、ストアと通信するためにあなたの behalfで設定する必要があるサービス認証情報が必要です。 RevenueCatのガイドを参照してください App Store Connect 共有シークレット, Play Service 認証情報、および Amazon Appstore 共有シークレット 詳細については、

注意: Play Service 認証情報は、Googleのサーバー全体にまで 36 時間かかることがあります。

3. 製品設定

▶️ ストア設定

RevenueCatを使用して製品を取得する前に、製品をそれぞれのストアで設定する必要があります。以下のガイドを参照してください。 App Store Connect, Google Play Console, Amazon Appstore、および Stripe iOS製品を販売している場合、App Store Connect > 契約、税金、銀行口座 > '有料アプリケーション契約'に署名し、銀行口座と税金情報を入力することをお確かめください。

App Store Connect > 契約、税金、銀行口座 > '有料アプリケーション契約'に署名し、銀行口座と税金情報を入力することをお確かめください。 購入テストを行う前にこれを完了する必要があります。. ストアのセットアップをテスト中にスキップしたいですか?.

📘

iOSでは、StoreKit Configurationファイルを使用してApp Store Connectの製品設定を延期できます。これらの設定ファイルは、Xcodeを介して最小限の設定で設定できます。

API

Read more about setting up StoreKit Configuration files in RevenueCat サンドボックステスト guide.

▶️ RevenueCatで製品と特典を設定

App Store Connect、Google Play Console、Amazon Appstore、またはStripeでインアプリ製品を設定した後、RevenueCatダッシュボードにその設定をコピーする必要があります。 RevenueCatは、プレミアム機能へのアクセスを制御するための特典システムと、顧客に提供する製品のセットを管理するためのオファーを使用します。, 特典は、特定の製品を購入した後、顧客が「特典」されるレベルです。, オファーは、Paywallで製品を「提示」するための製品を簡単に組織化し、リモートで設定するための方法です。RevenueCat __CAPGO_KEEP_0____CAPGO_KEEP_0__

__CAPGO_KEEP_0__ 推奨 codeを簡素化し、Appの更新を伴わない製品の変更を可能にするために、これらの機能を利用することをお勧めします。

See 製品の設定 製品を設定し、OfferingsまたはEntitlementsに組織する方法を説明しています。

RevenueCat 4

4. RevenueCatのPurchases SDK

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

If you run into issues with the SDK, see SDKのトラブルシューティング のガイダンスを参照してください。

📘

Purchasesにのみ、パブリックSDKキーを使用してください。

あなたの公開SDKキーは、ダッシュボードの「プロジェクト設定」タブの下で入手できます。 API キー プロジェクト設定 ダッシュボード Purchases インスタンスは、通常アプリ起動時に一度だけ設定する必要があります。以降、アプリ内でインスタンスをアクセスすることで、同じインスタンスが共有されます。

インスタンス Purchases RevenueCat のガイド "__CAPGO_KEEP_0__ の設定" を参照してください。 .shared SDK

__CAPGO_KEEP_0__ SDK __CAPGO_KEEP_0__

__CAPGO_KEEP_0__をパブリックキーのみで設定してください。__CAPGO_KEEP_1__の詳細については、RevenueCatの __CAPGO_KEEP_0__ with your public SDK key only. You can read more about the different API keys available in RevenueCat Observer Mode.

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_******'})
}

のガイドを参照してください。 Purchases をユーザーIDと組み合わせて設定する方法

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on ..

📘

のガイドを参照してください。

開発時、RevenueCatはデバッグログをより詳細に表示することを推奨しています。詳細は、RevenueCatの .logIn()Debugging ユーザーを識別する.

SDKは自動的にApple、Google、またはAmazonから提供されたオファリングを取得し、製品情報を取得します。 したがって、顧客が購入画面を起動するときにすでに利用可能な製品がロードされます。 設定されたオファリング オファリングを取得し、製品情報をApple、Google、またはAmazonから取得します。

以下はオファリングを取得する例です。オファリングを利用して、支払い壁画面を整理できます。RevenueCatのガイド「製品を表示する」で詳細とベストプラクティスを参照してください。 ▶️利用可能な製品を取得して表示する ユーザーIDと購入を設定する

ユーザー認証システムがあれば、設定時または後日、ユーザー識別子を提供できます。詳細はRevenueCatのガイド「ユーザーを識別する」で確認してください。

📘

__CAPGO_KEEP_0__は自動的にApple、Google、またはAmazonから提供されたオファリングを取得し、製品情報を取得します。 したがって、顧客が購入画面を起動するときにすでに利用可能な製品がロードされます。

設定されたオファリング .logIn()▶️利用可能な製品を取得して表示する ユーザーIDと購入を設定する.

The SDK は自動的に Apple、Google、または Amazon から設定されたオファリングを取得し、製品情報を取得します。 したがって、顧客が購入画面を起動したときにすでに利用可能な製品が読み込まれていることになります。 設定されたオファリング Apple、Google、または Amazon から製品情報を取得します。

顧客が購入画面を起動したときにすでに利用可能な製品が読み込まれていることになります。 オファリングを取得する例を以下に示します。オファリングを使用して、支払い壁画面を整理できます。詳細とベストプラクティスについては、RevenueCat の「製品の表示」ガイドを参照してください。 __CAPGO_KEEP_0__ が取得するオファリングの製品、または利用可能なパッケージが空の場合、各ストアの設定問題によります。

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

__CAPGO_KEEP_0__ が取得するオファリングの製品、または利用可能なパッケージが空の場合、各ストアの設定問題によります。 __CAPGO_KEEP_0__ が取得するオファリングの製品、または利用可能なパッケージが空の場合、各ストアの設定問題によります。, __CAPGO_KEEP_0__ が取得するオファリングの製品、または利用可能なパッケージが空の場合、各ストアの設定問題によります。__CAPGO_KEEP_0__ が取得するオファリングの製品、または利用可能なパッケージが空の場合、各ストアの設定問題によります。 __CAPGO_KEEP_0__ が取得するオファリングの製品、または利用可能なパッケージが空の場合、各ストアの設定問題によります。 __CAPGO_KEEP_0__ が取得するオファリングの製品、または利用可能なパッケージが空の場合、各ストアの設定問題によります。

App Store Connect の場合、最も一般的な理由は、更新されていない ‘有料アプリケーション契約書’ または、少なくとも ‘提出可能な状態’ になるまでの製品の準備不足です。GooglePlay の場合、このエラーは、クローズド トラックにアプリが公開されていない場合や、有効なテストユーザーが追加されていない場合に発生します。

RevenueCat のヘルプセンターでこの問題のトラブルシューティングについて詳しく調べることができます。 ▶️ 購入実行.

__CAPGO_KEEP_0__ は、購入を簡素化するためのシンプルなメソッドを含みます。

SDK は、取得したオファリングからパッケージを取得し、対応するアプリストアでトランザクションを処理します。 purchase:package __CAPGO_KEEP_0__ のサンプルは、パッケージの購入と「your_entitlement_id」コンテンツのロック解除を確認するプロセスを示しています。__CAPGO_KEEP_0__ の詳細については、RevenueCat のガイド「購入実行」で確認してください。

The code sample below shows the process of purchasing a package and confirming it unlocks the “your_entitlement_id” content. More details about the purchase:package このメソッドを使用して、最新のステータスを取得し、安全にアプリのライフサイクル全体で繰り返し呼び出すことができます。 購入実行.

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は、ユーザーが購入アクセスを失った場合 (例: アプリをアンインストール/再インストールしたり、アカウント情報を失ったりするなど)、復元メカニズムを実装することを要求しています。 2 つの異なる

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

App User IDs __CAPGO_KEEP_0__ Apple、Google、またはAmazonアカウントの同じ下位層ストアアカウントからトランザクションを復元する。 RevenueCatは、2つのApp User ID間でエイリアスを作成し、以降は両方を同じユーザーとしてカウントする可能性があります。RevenueCatのガイドを参照してください。 購入を復元する for more information on the different configurable restore behaviors.

SDKは、どのプラットフォームでも平滑に動作するため、ユーザーの購入情報の変更は、さまざまなソースから来る可能性があります。SDKが更新されたオブジェクトを受け取った場合、変更を検知するには、オプションの委任メソッドに従う必要があります。 CustomerInfo __CAPGO_KEEP_0__が purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo から更新されたオブジェクトを受け取った場合、__CAPGO_KEEP_0__が発火します。 getCustomerInfo(), purchase(package:), purchase(product:)CustomerInfoの更新は restorePurchases().

pushされません。 __CAPGO_KEEP_0__のメソッドの完了ブロックで変更を検知することもできます。 __CAPGO_KEEP_0__のメソッドの完了ブロックで変更を検知することもできます。

SDKのメソッドの完了ブロックで変更を検知することもできます。

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

👍

あなたは成功しました!

codeを書くのに1か月を費やさずに、完全機能のサブスクリプション購入システムを実装しました。よくできました!

サンプルアプリ

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

サンプルを表示

CapacitorとVue.jsを使用したサンプルアプリをすぐに公開します。

If you need to move deep usage of the Capacitor SDK check the documentation ここ.

次のステップ

\

ここに参加してください 👇

アカウントを作成してください

__CAPGO_KEEP_0__

アプリ内購入からCapgoに進みます

capacitor

あなたが使用している場合 capacitorのインアプリ購入 __CAPGO_KEEP_0__の支払いと購入の計画 Capgoの価格設定 Capgoの価格設定の製品ワークフロー 支払いシステム 支払いシステムの実装詳細 @capgo/native-purchases @capgo/native-purchasesの実装詳細 Getting Started Getting Startedの実装詳細 Revenue Playbook 実装詳細については、Revenue Playbookに記載されています。

リアルタイムの更新をCapacitorアプリに提供

ウェブ層のバグが生じた場合、Capgoを通じて修正を配信し、数日間待つ必要のないアプリストアの承認を待つ必要がなくなる。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビューのパスを通る。

Get Started Now

ブログの最新記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。