Skip to main content
チュートリアル

capacitorアプリ内課金の実装

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

__CAPGO_KEEP_1__ Purchases プラグインとRevenueCatを使用した__CAPGO_KEEP_0__アプリ内課金の実装

記事のクレジット

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

ライター

バレリア

レビュアー

エディター

capacitorのインアプリ購入

このプラグインは、RevenueCatの公式リポジトリに移行されています。詳しくは公式ドキュメントを参照してください。 公式ドキュメント 詳しくはこちら。

RevenueCatを使用しない場合、API/native-purchasesを使用すると、StoreKitとGoogle Play Billingを直接使用してインアプリ購入とサブスクリプションを実装できます。 capgo Purchasesは、__CAPGO_KEEP_1__フレームワーク用のプラグインです。iOSとAndroidでインアプリ購入をサポートし、複数のプラットフォームで一貫した__CAPGO_KEEP_2__を提供します。 __CAPGO_KEEP_0__ Purchasesプラグインの主な機能は、RevenueCatと統合することです。RevenueCatは、インアプリサブスクリプションとインアプリ購入を簡素化するプラットフォームです。複数のプラットフォームで一貫した__CAPGO_KEEP_1__を提供し、レシート検証やユーザーマネージメントなどのタスクを自動化します。

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.

__CAPGO_KEEP_0__

  • Capacitor
  • ユーザー管理
  • カスタム価格モデルに対するサポート
  • 詳細な分析データ -拡張性

Capacitorを使用してRevenueCatのCapacitor Purchasesプラグインを利用することで、開発者はモバイルアプリケーションにインアプリサブスクリプションや購入を実装する際の時間と労力を大幅に削減でき、ユーザー体験の向上と収益の増加に役立つ追加機能を提供することができます。

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

インストール

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

To install the Capacitor Purchases plugin, run the following command: npm i @capgo/capacitor-purchases アプリにプラグインを追加するnative code npx cap sync

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

Xcode ステップ 1 次の段 xcode step 2

1. Capacitor の収益カットアカウントを作成する

このガイドでは、サブスクリプションと RevenueCat の SDK を使用して、数行の code で稼働するようにする方法を説明します。

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

📘

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

RevenueCat は、各アプリ / プロジェクトごとに別々の RevenueCat アカウントを作成することをお勧めします。特に、アプリを売る予定がある場合は、転送プロセスを速めることができます。RevenueCat のサポートに依頼する必要がなく、個々のプロジェクトを転送する必要がなくなります。

組織 / エンタープライズ

Capacitor を登録し、アプリをプロジェクト内に設定する際は、会社アカウントを使用することをお勧めします。プロジェクトのオーナー以外のメンバーをプロジェクトに招待できますが、請求管理はプロジェクトオーナーのみが行うことができます。 コラボレーター しかし ただ. Project collaborators can’t manage billing details.

2. Project and App Configuration

▶️ Project を作成

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

RevenueCat ステップ 1

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

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

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

RevenueCat ステップ 2

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

フィールド アプリ名 RevenueCat へのアプリの追加には必要です。残りの設定フィールドは後で追加できます。テストと実稼働の購入を行うには、Bundle ID (iOS) / Package Name (Android) 以外に、Shared Secret (iOS) / Service Credentials (Android) も設定する必要があります。

RevenueCat ステップ 3

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

📘

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

アプリを登録した後、RevenueCat はアプリの設定で プラットフォームサーバー通知を設定することをお勧めします。通知は必須ではありませんが、購入の速度を向上させることができます。 Webhook と統合の配信時間を短縮し、サブスクライバーの遅延時間を削減します。

📘

ステージングアプリとユーザーと生産アプリとユーザー

RevenueCat自体にはステージングと生産のための別々の環境はありません。むしろ、ユーザーの下位のトランザクションはサンドボックスと生産によって区別されます。

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

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

▶️サービスクレデンシャル

RevenueCatはアプリストアと連携するために、サービスクレデンシャルを設定する必要があります。RevenueCatのガイドを参照してください。 App Store Connect 共有シークレット, Play Service クレデンシャル, そして Amazon Appstore 共有シークレット 詳細はこちら。

Googleのサーバー全体に広がるまで、プレイサービス認証情報は最大36時間かかることに注意してください。

3. 製品設定

▶️ ストア設定

RevenueCatを使用して製品を取得する前に、製品をそれぞれのストアで設定する必要があります。以下のガイドを参照してください。 App Store Connect, Google Play Console, Amazon Appstore、そして Stripe このプロセスをナビゲートするための助けを求めるには

iOS製品を販売している場合、有料アプリケーション契約を署名し、銀行と税金に関する情報を入力することを確認してください。 App Store Connect > 契約、税金、銀行. __CAPGO_KEEP_0__.

📘

この設定は購入テストを行う前に完了する必要があります

テスト中に店舗設定をスキップしたいですか?

iOSでは、App Store Connectで製品を設定するのを遅らせることができます。StoreKit Configurationファイルを使用してテストするのです。これらの設定ファイルは、Xcodeで直接設定することができます。 RevenueCatでStoreKit Configurationファイルの設定方法についてもっと読む ▶️ RevenueCatで製品と特典を設定する

App Store Connect

Google Play Console Amazon Appstore, でインアプリ商品を設定した後, ▶️ RevenueCatで製品と特典を設定する、または Stripe、購入設定をRevenueCatダッシュボードにコピーする必要があります。RevenueCatは、プレミアム機能へのアクセスを制御するためのエンティテルメントシステムと、顧客に提供する製品のセットを管理するためのオファリングを使用します。

エンティテルメントは、特定の製品を購入した顧客が「エンティテルメント」されるレベルです。 オファリングは、Paywall上で製品を「オファー」する方法として、製品を簡単に管理するための方法です。RevenueCat 推奨 利用することをお勧めします。これにより、製品を変更することなくアプリの更新をリリースすることなく、codeを簡素化できます。

参照 製品を設定するには、製品をオファリングまたはエンティテルメントに組織化するには「製品の設定」を参照してください。 RevenueCatのステップ 4

4. RevenueCatの購入 __CAPGO_KEEP_0__

4. Using RevenueCat’s Purchases SDK

RevenueCat SDK seamlessly implements purchases and subscriptions across platforms while syncing tokens with the RevenueCat server.

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

📘

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

SDKの公開キーを取得するには、 APIキー セクションの プロジェクト設定 ダッシュボード内

__CAPGO_KEEP_0__のインスタンスを一度だけ設定してください。通常はアプリ起動時に設定します。アプリ内で同じインスタンスを共有するには、 __CAPGO_KEEP_0__インスタンスをアクセスしてください。 __CAPGO_KEEP_0__インスタンスをアクセスしてください。 .shared instance in the SDK.

RevenueCatのガイドを参照してください Configuring SDK 詳細情報とベストプラクティスについては、RevenueCatのガイドを参照してください

Capacitorの設定に、パブリックキーを使用してください。RevenueCatのドキュメントを参照してください。 Purchases with your public SDK key only. You can read more about the different API keys available in RevenueCat 開発環境では、RevenueCatが推奨するように、デバッグログを詳細に表示してください。詳細情報については、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のガイドを参照してください。

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on オブザーバーモード.

📘

購入設定のユーザーIDの設定

あなたのアプリにユーザー認証システムがある場合、設定時または後日、以下のメソッドを呼び出してユーザー識別子を提供できます。 .logIn(). 詳細は、RevenueCatの.

The SDK will automatically fetch the を参照してください。 Capgoは、

設定済みのオファリング を自動的に取得し、Apple、Google、またはAmazonから製品情報を取得します。したがって、顧客が購入画面を起動したときにすでに利用可能な製品がロードされます。 以下は、オファリングの取得の例です。オファリングを利用して、支払い壁画面を整理できます。詳細とベストプラクティスについては、RevenueCatの

製品の表示のガイド

📘

購入設定の構成

アプリ内課金の場合、ユーザー認証システムがあれば、購入設定の際にユーザーIDを提供することができます。設定後に呼び出すこともできます。 .logIn()。 詳細は、.

The SDK will automatically fetch the を参照してください。 Capgoは、

設定済みのオファリング を自動的に取得し、Apple、Google、またはAmazonから製品情報を取得します。したがって、顧客が購入画面を起動したときに利用可能な製品はすでにロードされます。 以下に、オファリングの取得の例を示します。Paywall画面を整理するためにオファリングを利用できます。

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

詳細は、 製品を表示する, 製品, または利用可能 パッケージ は空の場合、対応するストアの構成問題によります。

App Store Connect の最も一般的な原因は、有料アプリケーション契約が古い状態にあること、または製品が少なくとも 'Ready To Submit' の状態になっていないことです。Google Play の場合、通常、クローズド トラックにアプリが公開されていない場合、または有効なテスト ユーザーが追加されていない場合に発生します。

RevenueCat のヘルプ センターで、この問題を解決するための詳細情報を参照してください。 ▶️ 購入を行う.

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

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

code purchase:package __CAPGO_KEEP_0__ 購入処理.

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は、ユーザーが以前購入したコンテンツを再活性化できるように、ユーザーが購入した商品を復元することを可能にします。

RevenueCat enables your users to restore their in-app purchases, reactivating any content that they previously purchased from the 同じストアアカウント (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)
  })

同じストアアカウント (Apple、Google、またはAmazonアカウント) から 2 つの異なる App User IDs 同じストアアカウント (Apple、Google、またはAmazonアカウント) から 2 つの異なる復元トランザクションが発生します。 RevenueCat は、2 つの App User IDs を同一のユーザーとしてカウントするために、エイリアスを作成する可能性があります。 さらに詳しくは、RevenueCat の "購入の復元" ガイドを参照してください。 購入の復元 さまざまな復元動作の設定可能な動作についての詳細情報は、RevenueCat のガイド "購入の復元" を参照してください。

Since the SDK works seamlessly on any platform, changes to a user’s purchase info may come from a variety of sources. You can respond to any changes in a customer’s CustomerInfo 購入情報の変更に応じて、ユーザーの購入情報を変更することができます。 purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo 購入情報の変更に応じて、ユーザーの購入情報を変更することができます。 getCustomerInfo(), purchase(package:), purchase(product:)購入情報の変更に応じて、ユーザーの購入情報を変更することができます。 restorePurchases().

顧客情報の更新は は RevenueCatのバックエンドからアプリにプッシュされません。更新は、上記で説明されているように、RevenueCatへのアウトバウンドネットワークリクエストのみで発生します。

アプリの種類によっては、デリゲートを無視し、次回アプリが起動したときや、SDK メソッドの完了ブロックで顧客情報の変更をハンドルするだけで十分かもしれません。

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

👍

おめでとう!

あなたは、サーバー code を書くのに 1 か月を費やさずに、完全機能のあるサブスクリプション購入システムを実装したことになります!おめでとう!

サンプル アプリ

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

サンプルを表示

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

Capacitor の深い使用を必要とする場合は、SDK を確認してください。 ここ.

次のステップ

\

__CAPGO_KEEP_0__

Join us here 👇

アカウントを取得するにはここに登録してください

Capgo

Keep going from in app purchases for capacitor

アプリ内課金の続きからCapgoにプルリクエストを送信する in app purchases for capacitor アプリ内課金の続きからCapgoにプルリクエストを送信する Capgo Pricing for the product workflow in Capgo Pricing, Capgoにプルリクエストを送信する Capgoにプルリクエストを送信する @capgo/native-purchases Capacitorのインアプリ購入の実装詳細については@capgo/native-purchasesを参照してください。 はじめに はじめにの実装詳細については、 収益戦略ガイド 収益戦略ガイドの実装詳細については、

Capacitorアプリのリアルタイム更新

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

マーティンから人間のサポートを受ける

今すぐ始める

最新のブログ記事

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