移动应用内购
教程

为 capacitor 开发应用程序实现内购

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

Martin Donadieu

Martin Donadieu

内容营销专家

在capacitor中购买

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

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

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

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

With RevenueCat, developers can easily manage subscriptions, track revenue, and perform other related tasks. Some features offered by RevenueCat include:

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

通过使用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 步骤 1

创建新项目弹出窗口

▶️ 添加应用/平台

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

RevenueCat 步骤 2

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

字段 应用名称 是必填项,才能将应用添加到 RevenueCat。其他配置字段可以稍后添加。为了进行测试和生产购买,需要配置 Bundle ID(iOS)/ Package Name(Android)以及 Shared Secret(iOS)/ Service Credentials(Android)。

RevenueCat 步骤 3

Apple App Store 应用配置页面

📘

💡 这是一个提示!

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

📘

Staging vs. Production apps and users

RevenueCat 本身并不具备独立的环境来区分 staging 和 production。 相反,针对用户的底层交易是通过 sandbox 和 production 来区分的.

任何 RevenueCat 应用都可以从商店中进行 sandbox 和 production 的购买。如果您有独立的 staging 和 production 应用,您可以在 RevenueCat 中创建多个项目来模拟您的设置.

此外,用户也不会根据环境进行区分。同一用户可以同时拥有 sandbox 和 production 的活跃购买.

▶️ Service Credentials

Service credentials 需要在 RevenueCat 中设置,以便 RevenueCat 能够代表您与应用商店进行通信。 请参阅 RevenueCat 指南 App Store Connect Shared Secret, Play Service Credentials,和 Amazon Appstore 共享密钥 欲了解更多信息,请参阅。

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

3. 产品配置

▶️ 商店设置

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

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

📘

想在测试中跳过商店设置吗?

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

有关在RevenueCat中设置StoreKit配置文件的更多信息,请阅读RevenueCat 沙盒测试 指南.

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

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

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

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

RevenueCat 步骤 4

4. 使用 RevenueCat 的 Purchases SDK

RevenueCat SDK 对各个平台的购买和订阅进行了无缝的实现,同时与 RevenueCat 服务器同步令牌。

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

📘

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

You can get your public SDK key from the API 密钥 选项卡下 项目设置 中获取您的公共 __CAPGO_KEEP_0__ 密钥。

您应仅配置共享实例 购买 一次,通常在应用启动时。随后,同一实例在通过访问__CAPGO_KEEP_0__中的实例而在您的应用中共享。 .shared instance in the SDK.

配置__CAPGO_KEEP_0__ Configuring SDK 确保您仅使用公共__CAPGO_KEEP_0__密钥配置

购买 。您可以在RevenueCat的 with your public SDK key only. You can read more about the different API keys available in RevenueCat 中阅读有关不同__CAPGO_KEEP_1__密钥的更多信息。.

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的购买

如果您的应用程序有用户身份验证系统,则可以在配置时或稍后通过调用 .logIn()以获取更多信息,请参阅RevenueCat指南。 识别用户.

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

以下是获取产品的示例。您可以使用产品来组织您的付费墙屏幕。请参阅RevenueCat指南。 显示产品 For更多信息和最佳实践。

▶️ 从服务器获取和显示可用产品

📘

使用用户ID配置购买

如果您在应用中有一个用户身份验证系统,则可以在配置时或稍后通过调用 .logIn()获取更多信息,请参阅RevenueCat指南中的 识别用户.

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

以下是获取Offerings的示例。您可以使用Offerings来组织您的付费墙屏幕。请参阅RevenueCat指南中的 显示产品 获取更多信息和最佳实践。

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

如果获取您的 Offerings, 产品, 或可用的 是空的,这是由于相应商店的配置问题引起的。

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

您可以在 RevenueCat 帮助中心.

▶️ 完成购买

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

The code 示例如下,展示了购买包裹和确认它解锁“your_entitlement_id”内容的过程。关于该方法的更多详细信息,请参阅 purchase:package RevenueCat 指南中的 Making Purchases.

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
}

▶️ 检查订阅状态

您可以在需要获取最新状态时使用此方法,并且安全地在应用程序整个生命周期中反复调用此方法。 Purchases 自动缓存最新的 CustomerInfo 状态,直到它更新 — 因此,在大多数情况下,这个方法从缓存中获取并运行非常快。

通常在决定显示给用户的 UI 时调用此方法,并在用户执行需要特定特权级别的操作时调用此方法。

📘

💡 这是一个小技巧!

您可以访问关于订阅的更多信息,除了是否激活以外。请参阅 RevenueCat 指南中的 了解是否订阅设置为续费,如果用户的信用卡出现问题,以及更多。

RevenueCat使您的用户能够恢复他们的应用内购买,重新激活他们之前从同一商店账户(Apple、Google或Amazon账户)购买的任何内容。我们建议所有应用都有一个让用户触发恢复方法的方式。请注意,Apple要求在用户无法访问他们的购买(例如卸载/重新安装应用,丢失账户信息等)时必须有恢复机制。 如果两个不同 App用户ID

  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账户)恢复交易的。 RevenueCat可能会尝试在两个App用户ID之间创建一个别名,并将它们视为同一用户。有关可配置恢复行为的不同选项,请参阅RevenueCat的指南《恢复购买》。 由于__CAPGO_KEEP_0__在任何平台上都能完美工作,用户购买信息的变化可能来自多个来源。您可以通过遵循可选委托方法来响应客户的任何变化。 此方法将在__CAPGO_KEEP_0__接收到更新时触发 targetLanguage

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 texts purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo object from calls to getCustomerInfo(), purchase(package:), purchase(product:)restorePurchases().

CustomerInfo 更新将 从 RevenueCat 后端推送到您的应用程序的更新只能从一个向 RevenueCat 的出站网络请求中发生,正如上面所述。

根据您的应用程序,忽略委托并简单地在下一次启动应用程序或 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 please refer to the documentation 这里.

下一步

\

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

加入我们这里 👇

注册这里获取您的帐户

Capgo

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

如果您正在使用 应用内购买中获取 capacitor 来规划支付和购买,连接它与 Capgo 价格 为产品工作流程在 Capgo 价格 支付系统 关于支付系统的实现细节 @capgo/native-purchases 关于@capgo/native-purchases的实现细节 入门指南 关于入门指南的实现细节, 营收手册 关于营收手册的实现细节。

Capacitor应用的实时更新

当 web 层 bug 活跃时,通过Capgo将修复推送到应用,而不是等待几天的应用商店批准。用户在后台接收更新,而本机更改保持在正常的审查路径中。

立即开始

最新博客文章

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