跳过主要内容
Capgo logo
教程

capacitor内购

如何使用Capacitor的Purchases插件和RevenueCat在capacitor应用中实现内购

马丁·多纳迪尤

马丁·多纳迪尤

内容营销
capacitor内购

该插件已转移到RevenueCat官方仓库。请参阅 官方文档 如果您更喜欢使用RevenueCat的__CAPGO_KEEP_0__

If you prefer a simpler native API without RevenueCat, @capgo/原生购买 实现了直接与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 控制台

▶️ Navigate to the RevenueCat dashboard and 添加一个新项目 从顶部导航菜单下拉列表中 项目.

项目

收入猫步骤 1

创建新项目弹出窗口

添加应用/平台 从 项目设置 > 应用

在项目仪表板的左侧菜单中，选择将要添加的应用的平台。

收入猫步骤 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和 Stripe 以帮助您在此过程中导航。

如果您正在销售iOS产品,请务必签署您的‘付费应用程序协议’并在 App Store Connect > 协议、税务和银行. 中填写您的银行和税务信息。.

📘

这需要在测试任何购买之前完成。

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

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

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

在App Store Connect Google Play Console, Amazon Appstore, 或Stripe 中配置了您的内购产品后，您需要将该配置复制到RevenueCat控制台中。RevenueCat使用权限系统来控制对高级功能的访问，以及Offerings来管理您向客户提供的产品集。

权限是客户在购买特定产品后获得的访问级别。 Offerings是您组织并远程配置付墙上的内购产品的简单方式。RevenueCat 建议使用 利用这些功能简化您的code并使您能够在不发布应用程序更新的情况下更改产品。

查看 配置产品 设置产品并将其组织到Offerings或Entitlements中。

RevenueCat步骤4

4. 使用RevenueCat的PurchasesSDK

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

如果您遇到SDK问题，请参阅 SDK故障排除 仅使用您的公共__CAPGO_KEEP_0__密钥来配置Purchases

📘

Only use your public SDK key to configure Purchases

您可以从SDK中获取您的公共密钥。 API密钥 在__CAPGO_KEEP_0__中 项目设置 仪表盘。

您应该只在应用启动时配置__CAPGO_KEEP_0__的共享实例。随后，通过访问__CAPGO_KEEP_0__中的实例，同一实例将在您的应用中共享。 查看RevenueCat关于__CAPGO_KEEP_0__配置的指南 了解更多信息和最佳实践。 .shared SDK

项目设置 Configuring SDK __CAPGO_KEEP_0__

确保您只使用您的公共__CAPGO_KEEP_0__密钥配置__CAPGO_KEEP_1__。 购买 使用您的公共SDK密钥配置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建议启用更详细的调试日志。有关这些日志的更多信息，请参阅他们的 调试指南。 如果您打算与现有的购买__CAPGO_KEEP_0__一起使用RevenueCat，请参阅他们关于

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on 使用用户ID配置购买.

📘

如果您的应用程序有用户身份验证系统，则可以在配置时或稍后使用

提供用户标识符。要了解更多信息，请参阅RevenueCat关于 .logIn()的指南。 识别用户.

The SDK will automatically fetch the 并从 Apple、Google 或 Amazon 中检索产品信息。因此，当客户打开购买屏幕时，已可用的产品将已加载 以下是一个获取产品的示例。您可以使用产品来组织您的付费墙屏幕。有关更多信息和最佳实践，请参阅 RevenueCat 指南中的

▶️ 获取和显示可用产品 使用用户 ID 配置购买 如果您在应用中有用户身份验证系统，则可以在配置时或稍后通过调用

向 Capgo 提供用户标识符。要了解更多信息，请参阅 RevenueCat 指南中的

📘

识别用户

__CAPGO_KEEP_0__ .logIn()已配置的产品 产品信息.

SDK将自动获取已配置的 已配置的产品 并从Apple、Google或Amazon获取产品信息。因此，客户启动购买屏幕时，已可用的产品已加载。

以下是一个获取已配置的产品的示例。您可以使用已配置的产品来组织付费墙屏幕。有关更多信息和最佳实践，请参见RevenueCat的指南。 如果获取您的 已配置的产品

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

产品 或可用的, 包为空，则是由于各个商店的配置问题。 pagePath /zh/blog/in-app-purchases-capacitor/

在 App Store Connect 中，这些原因最常见的原因是 'Paid Applications Agreement' 不是最新的，或产品至少不在 'Ready To Submit' 状态。在 GooglePlay 中，这通常发生在应用程序未在关闭的测试轨道上发布，并且已添加有效的测试用户时。

有关解决此问题的更多信息，请参阅 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给用户时，以及用户执行需要特定权利级别的操作时，都会调用这个方法。

📘

💡 这里有一个小提示！

您可以获取关于订阅的更多信息，除了是否激活以外。请参阅 订阅状态 to learn if subscription is set to renew, if there’s an issue detected with the user’s credit card, and more.

了解订阅是否设置为续费、用户信用卡是否有问题等更多信息。 RevenueCat 允许您的用户恢复他们的内购，重新激活他们之前从 同一商店账户

  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 账户) 中购买的任何内容。我们建议所有应用程序都提供一些方式让用户触发恢复方法。请注意，Apple 需要在用户无法访问他们的购买时（例如卸载并重新安装应用程序、丢失账户信息等）提供恢复机制。 如果两个不同的 从 Apple、Google 或 Amazon 帐户（同一底层存储帐户）中恢复交易。 RevenueCat 可能会尝试在两个 App 用户 ID 之间创建一个别名，并将它们视为同一用户。有关不同可配置恢复行为的更多信息，请参见 RevenueCat 指南中的 恢复购买 有关恢复行为的更多信息，请参见

由于 SDK 在任何平台上都能顺畅工作，用户购买信息的更改可能来自多个来源。您可以通过遵循可选委托方法来响应客户的任何更改 CustomerInfo 此方法将在 __CAPGO_KEEP_0__ 接收到来自 purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo 客户信息更新 getCustomerInfo(), purchase(package:), purchase(product:)不会 restorePurchases().

从 RevenueCat 后端推送到您的应用程序的更新，更新只能从 RevenueCat 的出站网络请求中发生，如上所述。 根据您的应用程序，忽略委托并简单地在下次启动应用程序或 __CAPGO_KEEP_0__ 方法的完成块中处理客户信息更改可能足够了。 __CAPGO_KEEP_0__

SDK

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 这里.

下一步

\

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

加入我们 👇

注册账户

Capgo

继续从应用内购买中 capacitor

如果您正在使用 in app purchases for capacitor 来规划付款和购买，连接它与 Capgo Pricing 在Capgo Pricing中 支付系统 在支付系统中 @capgo/native-purchases 在@capgo/native-purchases中 开始 在开始中 收入战略手册 为《收入手册》中的实现细节。

实时更新 Capacitor 应用

当 web 层 bug 活跃时，通过 Capgo 发布修复，而不是等待几天的应用商店审批。用户在后台接收更新，而原生更改仍在正常审查路径中。

来自 Martin 的人性化支持

立即开始

最新博客文章

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

Capacitor 应用中的双向通信
开发 移动 +1
2025 年 4 月 26 日

Capacitor 应用中的双向通信

5 个 OTA 更新错误的常见问题需要避免
开发 安全 +1
April 13, 2025

2025 年 4 月 13 日

5 移动应用程序实时更新的安全最佳实践
开发 移动 +1
2025 年 1 月 14 日

5 移动应用程序实时更新的安全最佳实践

查看所有博客文章