跳过主要内容
教程

在capacitor中实现内购

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

文章来源

马丁·多纳迪厄

作者

瓦莱里娅

审稿人

乔丹

编辑

capacitor 内购

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

如果您更喜欢一个不依赖RevenueCat的本地API @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的购买插件的最新版本。

要安装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 控制台并 添加一个新项目 从顶部导航菜单下拉菜单中 项目.

context:Capgo 营销网站。角色:短 UI 标签或导航项。见于:contributing.astro 页面。关键字 `projects` (项目)。

RevenueCat 步骤 1

创建新项目弹出窗口

▶️ 添加应用/平台 项目设置 > 应用 在项目仪表板的左侧菜单中,选择将要添加的应用的平台。

RevenueCat 步骤 2

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

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

RevenueCat 步骤 3

Apple App Store 应用配置页面

📘

💡 这里有一个小提示!

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

📘

开发环境与生产环境的应用和用户

RevenueCat 本身并不具备开发环境和生产环境的分离。相反,针对用户的底层交易是通过沙盒和生产环境来区分的。

任何 RevenueCat 应用都可以从商店中进行沙盒和生产环境的购买。如果您有开发环境和生产环境的分离应用,您可以在 RevenueCat 中创建多个项目来模拟您的设置。

此外,用户也不会根据环境进行分离。同一用户可以同时拥有活跃的沙盒购买和活跃的生产环境购买。

▶️ 服务凭证

服务凭证需要在 RevenueCat 中设置,以便 RevenueCat 可以代表您与应用商店进行通信。请参阅 RevenueCat 指南 App Store Connect 共享密钥, Play 服务凭证, 和 Amazon Appstore 共享密钥 欲了解更多信息,请参阅以下文档。

注意,play服务凭证可能需要花费多达36小时才能在Google服务器上广泛传播。

3. 产品配置

▶️ 商店设置

在使用RevenueCat获取产品之前,您必须在各个商店中配置您的产品。有关此过程的详细指南,请参阅以下文档: App Store Connect, Google Play Console, 亚马逊应用商店,以及 Stripe 欲了解更多信息,请参阅以下文档。

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

📘

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

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

有关设置StoreKit配置文件的更多信息,请参阅RevenueCat 沙盒测试 指南。

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

您的内购产品在App Store Connect和Google Play Console中配置后 ▶️ 在RevenueCat中配置产品和权限, ▶️ 在RevenueCat中配置产品和权限, 亚马逊应用商店, 或 Stripe, 您需要将该配置复制到 RevenueCat 控制台中。 RevenueCat 使用 Entitlements 系统来控制对高级功能的访问,并使用 Offerings 来管理您向客户提供的产品集。

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

查看 配置产品 来设置您的产品,然后将它们组织到 Offerings 或 Entitlements 中。

RevenueCat 步骤 4

4. 使用 RevenueCat 的购买 SDK

RevenueCat SDK 在各个平台上无缝实现购买和订阅功能,同时与RevenueCat服务器同步令牌。

如果您遇到与SDK相关的问题,请参阅 SDK故障排除 获取指导。

📘

仅使用您的公共SDK密钥配置Purchases

您可以从中获取您的公共SDK密钥 API密钥 tab下方 在 项目设置

中找到。 Purchases 在应用启动时,通常一次。随后,通过访问__CAPGO_KEEP_0__,同一实例在您的应用中被共享。 .shared 在SDK中访问实例。

查看RevenueCat关于 配置SDK 的指南。

确保您在 Purchases 使用您的公共SDK密钥。您可以阅读更多关于RevenueCat可用的不同API密钥的信息。 Capacitor内购指南.

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

中阅读有关不同__CAPGO_KEEP_1__密钥的更多信息。 Debugging Debugging

如果您打算与现有的购买code一起使用RevenueCat,请参阅他们的指南 观察模式.

📘

配置使用者ID的购买

如果您在应用中有用户身份验证系统,则可以在配置时或稍后通过调用 .logIn()来提供用户标识符。要了解更多信息,请参阅RevenueCat指南 识别用户.

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

以下是获取产品的示例。您可以使用产品来组织付款屏幕。有关更多信息和最佳实践,请参阅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
}

产品 产品, 产品或可用 包 如果包是空的,可能是因为相应商店的配置问题。

在 App Store Connect 中,常见的原因是 'Paid Applications Agreement' 未更新或产品未达到 'Ready To Submit' 状态。在 GooglePlay 中,这通常发生在应用未在关闭的测试轨道上发布且未添加有效测试用户时。

您可以在 RevenueCat 的帮助中心找到更多关于解决此问题的信息。 帮助中心.

▶️ 进行购买

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

在下面的code示例中,展示了如何购买一个包并确认它解锁了“your_entitlement_id”内容。有关更多详细信息,请参见Capacitor文档。 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 需要在用户丢失购买访问权限(例如卸载/重新安装应用,丢失账户信息等)时提供恢复机制。 同一商店账户(Apple、Google或Amazon账户)下的两个不同 App User IDs

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

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

此方法将在 SDK 接收来自 calls to 的更新 CustomerInfo 对象时触发。 purchases:receivedUpdated:.

本方法将在SDK接收到更新时触发 CustomerInfo 对象时触发。 getCustomerInfo(), purchase(package:), purchase(product:)或 restorePurchases().

客户信息更新 不 从RevenueCat后端推送到您的应用程序,更新只能从RevenueCat的出站网络请求中发生,如上所述。

根据您的应用程序,忽略委托人并简单地处理客户信息更改的下一次应用程序启动或SDK方法的完成块可能足够。

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

👍

你做到了!

你现在已经实现了一个功能齐全的订阅购买系统,没有花一个月的时间写服务器code。恭喜!

示例应用

下载更多有关如何集成SDK的完整示例,请访问RevenueCat示例应用程序资源。

查看示例

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

如果您需要深入使用Capacitor,SDK请查看文档 这里.

下一步

\

如果您需要在应用程序中添加 Live update

加入我们这里 👇

注册这里获取您的帐户

Capgo

继续从应用内购买中获取 capacitor

如果您正在使用 应用内购买中获取 capacitor 来规划支付和购买,连接它与 Capgo 价格策略 产品工作流程中的 Capgo Pricing 支付系统 支付系统的实现细节 @capgo/原生购买 for the implementation detail in @capgo/原生购买, 开始使用 为《Getting Started》中的实现细节 收入策略手册 为《收入蓝图》中的实现细节。

实时更新 Capacitor 应用

当 web 层 bug 活跃时,通过 Capgo 将修复推送给用户,而不是等待几天的 app store 审核。用户在后台接收更新,而原生变化保持在正常的审查路径中。

来自马丁的人性化支持

立即开始

最新博客文章

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