跳过主要内容
简体中文

capacitor 内购

如何使用 Capacitor 购买插件和 RevenueCat 实现 capacitor 应用内购买

马丁·多纳迪厄

马丁·多纳迪厄

内容营销

capacitor 内购

此插件已转移到 RevenueCat 官方仓库。 请参阅 官方文档 获取更多信息。

如果您更喜欢一个更简单的本地 API 而不使用 RevenueCat, @capgo/native-purchases 实现内购和订阅直接与StoreKit和Google Play Billing。

Capacitor 购买是Capacitor 框架的插件,允许在iOS和Android上进行内购。它提供了一个简单和一致的API,使开发者能够轻松地在移动应用中实现内购订阅和购买。

Capacitor 购买插件的关键功能之一是它与RevenueCat集成,RevenueCat是一个提供内购订阅和内购工具的平台。RevenueCat简化了实现内购订阅和购买的过程,提供了一个简单和一致的API,并自动化了收据验证和用户管理等任务。

使用RevenueCat,开发者可以轻松地管理订阅,跟踪收入,并执行其他相关任务。RevenueCat提供的功能包括:

  • 自动收据验证
  • 用户管理
  • 自定义定价模型支持
  • 详细分析 -可扩展性

通过使用Capacitor 购买插件与RevenueCat集成,开发者可以在实现移动应用内购订阅和购买时节省时间和努力,并提供额外的功能以改善用户体验和增加收入。

使用 Capacitor 购买插件和RevenueCat,开发者可以轻松管理和跟踪应用内订阅和购买,验证收据,并在多个平台上管理用户。它还允许创建自定义定价模型并获取详细的分析以改进性能和收入。

安装

请确保使用最新版本的 Capacitor 和 Capacitor 购买插件。您可以在 Capacitor 网站上查看最新版本的 Capacitor 和 Capacitor 购买插件。

安装 Capacitor 购买插件,请运行以下命令: npm i @capgo/capacitor-purchases 将插件添加到您的应用本机 code npx cap sync

在 Xcode 中添加应用内购买能力:

Xcode 步骤 1 然后 Xcode 步骤 2

1. 创建 RevenueCat 帐户

本指南将指导您如何使用订阅和 RevenueCat 的 SDK 只需几行 code 即可上线。

注册新 RevenueCat 帐户 这里.

📘

💡 这里有一个小提示!

RevenueCat 建议为每个应用程序/项目创建一个单独的 RevenueCat 帐户,尤其是如果您打算出售应用程序。这将加快转账过程,因为您可以一次性转账整个帐户,而不是等待 RevenueCat 支持人员为每个项目转账。

组织/企业

我们建议在注册 RevenueCat 和设置应用程序时使用公司帐户。您将能够邀请您的团队成员加入您的项目,但 只有项目负责人才能管理账单 。项目协作者无法管理账单细节。 2. 项目和应用程序配置▶️ 创建一个项目

导航到 RevenueCat 控制台并

创建一个项目

导航到 RevenueCat 控制台 添加一个新项目 从顶部导航菜单下拉列表中选择 项目.

RevenueCat 步骤 1

创建新项目弹出窗口

▶️ 添加应用/平台

来自 项目设置 > 应用 在项目仪表盘的左侧菜单中,选择将要添加的应用的平台。

RevenueCat 步骤 2

选择应用平台的项目仪表盘

应用平台字段 应用名称 需要将应用名称添加到RevenueCat中。其他配置字段可以稍后添加。为了进行测试和生产购买,需要配置包ID(iOS)/包名(Android)以及共享密钥(iOS)/服务凭证(Android)。

RevenueCat步骤 3

Apple App Store应用配置页面

📘

💡 这是一个提示!

注册应用后,RevenueCat建议设置 平台服务器通知这些通知不是必需的,但会 webhooks 和集成交付时间加快,减少更新订阅者时的延迟。

📘

测试和生产应用和用户

RevenueCat本身并不为测试和生产环境提供单独的环境。相反,用户的底层交易是通过沙盒和生产环境进行区分的。

任何RevenueCat应用都可以从商店中进行沙盒和生产购买。如果您有单独的应用程序用于测试和生产环境,则可以在RevenueCat中创建多个项目以反映您的设置。

此外,用户不受环境的影响。同一用户可以同时拥有激活的沙盒购买和激活的生产购买。

▶️ 服务凭证

需要为RevenueCat设置服务凭证,以便它可以代表您与应用商店进行通信。请参阅RevenueCat指南 App Store Connect 共享密钥, Play Service 凭证Amazon Appstore 共享密钥 有关更多信息。

请注意,Play Service 凭证可能需要36小时才能在Google服务器上传播。

3. 产品配置

▶️ 商店设置

在使用RevenueCat获取产品之前,您必须在各个商店中配置您的产品。请参阅以下指南以了解如何 App Store Connect, Google Play Console, Amazon Appstore, and Stripe 帮助您在此过程中导航。

如果您正在销售iOS产品,请务必签署您的“付费应用程序协议”并在 App Store Connect > 协议、税务和银行. 中填写您的银行和税务信息。这需要在测试任何购买之前完成。.

📘

您想在测试期间跳过商店设置吗?

在iOS上,您可以通过使用StoreKit配置文件而不是配置产品在App Store Connect中来延迟配置产品。这些配置文件需要最少的设置,并且可以通过Xcode直接配置。

了解如何在RevenueCat中设置StoreKit配置文件的更多信息 沙盒测试 指南。

▶️ 在RevenueCat中配置产品和权利

您在App Store Connect、Google Play Console、Amazon Appstore或Stripe中配置的内购产品一旦准备好后,您需要将该配置复制到RevenueCat控制台中。RevenueCat使用权利系统来控制对高级功能的访问,以及Offerings来管理您向客户提供的产品集。 权利是客户在购买特定产品后获得的访问级别。 Offerings是您可以用来组织您想要在付费墙上提供的内购产品并远程配置它们的简单方法。RevenueCat, __CAPGO_KEEP_0__, __CAPGO_KEEP_0____CAPGO_KEEP_0__ __CAPGO_KEEP_0____CAPGO_KEEP_0__

__CAPGO_KEEP_0__ 建议使用这些功能来简化您的__CAPGO_KEEP_0__并使您能够在不发布应用程序更新的情况下更改产品。 utilizing these features to simplify your code and enable you to change products without releasing an app update.

配置产品 以设置您的产品,然后将其组织到Offerings或Entitlements中。 RevenueCat步骤4

4. 使用RevenueCat的Purchases__CAPGO_KEEP_0__

RevenueCatSDK可以无缝地在各个平台上实现购买和订阅,同时与RevenueCat服务器同步令牌。

如果您遇到与SDK相关的问题,请参阅

If you run into issues with the SDK, see 以获取指导。 仅使用您的公共__CAPGO_KEEP_0__密钥来配置Purchases

📘

Only use your public SDK key to configure Purchases

You can get your public SDK key from the API 下面的 __CAPGO_KEEP_0__ 选项卡中找到您的公共

__CAPGO_KEEP_0__ 密钥。 您应该只在应用启动时配置 .shared instance in the SDK.

的共享实例。随后,通过访问 SDK 中的实例,您可以在整个应用中共享相同的实例。

确保您只使用您的公共__CAPGO_KEEP_0__密钥配置。您可以阅读有关RevenueCat可用的不同__CAPGO_KEEP_1__密钥的更多信息 购买 仅使用您的公共SDK密钥配置。您可以阅读有关RevenueCat可用的不同API密钥的更多信息 身份验证指南.

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建议启用更详细的调试日志。有关这些日志的更多信息,请参阅 调试 指南。

如果您打算在您的现有购买code中使用RevenueCat,请参阅他们关于 观察模式.

📘

配置购买与用户ID

如果您在应用中有用户身份验证系统,则可以在配置时或稍后使用用户标识符进行调用。要了解更多信息,请参阅RevenueCat关于 .logIn()用户标识符 识别用户.

The SDK will automatically fetch the 已配置的产品 以下是获取产品信息的示例。您可以使用产品信息来组织您的付费墙屏幕。有关更多信息和最佳实践,请参阅RevenueCat指南。

▶️ 获取和显示可用产品 使用用户ID配置购买 如果您在应用中有用户身份验证系统,则可以在配置时或稍后使用调用提供用户标识符。

要了解更多信息,请参阅RevenueCat指南。

📘

识别用户

The __CAPGO_KEEP_0__ will automatically fetch the .logIn()configured Offerings and retrieve the product information from Apple, Google, or Amazon..

The SDK 将自动从 Apple、Google 或 Amazon 等商店中获取配置的产品,并从这些商店中获取产品信息。因此,当客户打开您的购买屏幕时,已可用的产品已经加载好了。 以下是获取 Offerings 的示例,您可以使用 Offerings 来组织您的付费墙屏幕。有关更多信息和最佳实践,请参见 RevenueCat 的指南《显示产品》。 如果获取您的 Offerings 产品、或可用的包裹是空的,那么这可能是由于您在各个商店的配置问题所致。

configured Offerings available packages

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

are empty it’s due to some configuration issue in the respective store., and retrieve the product information from Apple, Google, or Amazon.Thus, available products will already be loaded when customers launch your purchase screen. Below is an example of fetching Offerings. You can utilize Offerings to organize your paywall screen.

App Store Connect 中最常见的原因是 '付费应用程序协议' 不是最新的,或者产品至少处于 '准备提交' 状态。 在 GooglePlay 中,这通常发生在应用程序未在关闭的测试轨道上发布,并且添加了有效的测试用户。

有关解决此问题的更多信息,请参见 RevenueCat 帮助中心 帮助中心.

▶️ 完成购买

SDK 包括一个简单的方法来促进购买。 purchase:package __CAPGO_KEEP_0__ 从 Offerings 中获取一个包并使用相应的应用商店处理交易。

code 示例如下,展示了购买一个包并确认它解锁 'your_entitlement_id' 内容的过程。有关此方法的更多详细信息,请参见 RevenueCat 的指南 'Making Purchases'。 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
}

购买

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ 自动缓存最新的 CustomerInfo 在更新时 — 所以在大多数情况下,这个方法从缓存中拉取并运行非常快。

通常在决定显示哪个UI给用户时,以及用户执行需要特定权限级别的操作时,会调用这个方法。

📘

💡 这是一个小提示!

您可以获取关于订阅的更多信息,除了是否有效之外。 请参阅 订阅状态 了解订阅是否设置为续费,如果用户的信用卡有问题等等。

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)
  })

如果两个不同的 应用用户ID 从同一底层存储账户(Apple、Google或Amazon账户)中恢复交易。 RevenueCat可能尝试在两个App用户ID之间创建一个别名,并将它们视为同一用户。有关不同可配置恢复行为的更多信息,请参见 恢复购买 文档。 由于__CAPGO_KEEP_0__在任何平台上都能完美工作,用户购买信息的变化可能来自各种来源。您可以通过遵循可选委托方法来响应客户的任何变化,

此方法将在SDK接收到来自 CustomerInfopurchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo 的更新 getCustomerInfo(), purchase(package:), purchase(product:)对象时触发。 客户信息更新 restorePurchases().

不会 从RevenueCat后端推送到您的应用程序,更新只能通过向RevenueCat发起出站网络请求来实现,正如上文所述。 根据您的应用程序,忽略委托并简单地在下一次启动应用程序或__CAPGO_KEEP_0__方法的完成块中处理客户信息的变化可能足够了。 恢复交易

Depending on your app, it may be sufficient to ignore the delegate and simply handle changes to customer information the next time your app is launched or in the completion blocks of the SDK methods.

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

👍

您成功了!

您已经成功地实现了一个功能齐全的订阅购买系统,而不需要花一个月的时间写 code。恭喜您!

示例应用

要下载更多关于如何整合 SDK 的完整示例,请访问RevenueCat示例应用资源。

查看示例

我将很快发布一个使用 Capacitor 和 Vue.js 的示例应用。

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

下一步

\

了解如何申请并通知 RevenueCat

如果您需要在应用中实时更新

加入我们 👇

Capgo

capacitor

如果您正在使用 capacitor 内购 来规划付款和购买,连接它与 Capgo 价格 为Capgo 价格中的产品工作流程 付款系统 付款系统的实现细节 @capgo/native-purchases @capgo/native-purchases的实现细节 Getting Started Getting Started的实现细节 收入战略手册 for the implementation detail in Revenue Playbook.

实时更新Capacitor应用

当web层bug处于活跃状态时,通过Capgo将修复推送给用户,而不是等待几天的应用商店审批。用户在后台接收更新,而原生变化仍在正常审批路径中。

立即开始

最新博客

Capgo为您提供创建真正专业的移动应用所需的最佳见解。