跳过主要内容
教程

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

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

Martin Donadieu

Martin Donadieu

内容营销人员

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

本插件已转移到RevenueCat官方仓库。 请参阅 官方文档 for more information.

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

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

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

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

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

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

安装

Be sure to use the latest version of Capacitor and the Capacitor Purchases plugin. You can check the latest version of Capacitor and the Capacitor Purchases plugin on the Capacitor website.

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

在Xcode中添加内购能力:

Xcode步骤1 然后 Xcode步骤2

1. 创建RevenueCat账户

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

注册新RevenueCat账户 here.

📘

💡 Here’s a tip!

建议为每个应用/项目创建一个单独的RevenueCat账户,尤其是如果你打算出售应用。这将加速转账流程,因为你可以一次性转账整个账户,而不是等待RevenueCat支持团队为每个项目转账。

组织/企业

我们建议在注册RevenueCat和设置应用时使用公司账户。这样你就可以邀请其他团队成员加入 协作者 你的项目,但 只有项目负责人才能管理账单。项目协作者无法管理账单细节。

2. 项目和应用配置

▶️ 创建项目

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

RevenueCat 步骤 1

创建新项目弹出窗口

▶️ 添加应用/平台

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

RevenueCat 步骤 2

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

选择应用平台的字段 App 名称 需要将您的应用程序添加到 RevenueCat 中。其他配置字段可以稍后添加。要进行测试和生产购买,需要配置 Bundle ID(iOS)/ Package 名称(Android)以及 Shared Secret(iOS)/ 服务凭据(Android)。

RevenueCat 步骤 3

Apple App Store 应用程序的应用程序配置页面

📘

💡 这是一个提示!

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

📘

测试和生产应用程序和用户

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

任何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 > 协议、税务和银行. 中填写您的银行和税务信息。.

📘

此项必须在测试任何购买之前完成。

想在测试时跳过商店设置?“],

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

▶️ 在 RevenueCat 中配置产品和许可

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

RevenueCat 建议使用这些功能来简化您的__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的购买__CAPGO_KEEP_0__

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

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

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

📘

Only use your public SDK key to configure Purchases

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

您只应在应用程序启动时配置 Purchases 的共享实例。随后,通过访问 .shared instance in the SDK.

在__CAPGO_KEEP_0__中,同一实例在您的应用程序中共享。 Configuring SDK Configuring __CAPGO_KEEP_0__

确保您配置了 购买 仅使用您的公共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

如果您在应用中有用户身份验证系统,则可以在配置时或稍后通过调用 .logIn()以学习更多信息,请参阅RevenueCat关于 识别用户.

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

▶️ 使用用户 ID 配置购买 如果您在应用中有用户身份验证系统,则可以在配置时或稍后通过调用

提供用户标识符。要了解更多信息,请参阅 RevenueCat 指南

📘

识别用户

Fetch and Display Available Products .logIn()▶️ Fetch and Display Available Products.

将会自动从SDK中获取配置的产品 配置的产品 当客户打开您的购买屏幕时,产品信息将已经加载好

以下是获取产品的示例,您可以使用产品来组织您的付费墙屏幕。请参阅RevenueCat的指南 显示产品 获取您的

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

产品 或可用, 为空时,可能是由于各个商店的配置问题 protectedTokens texts

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

有关解决此问题的更多信息,请参阅 RevenueCat 帮助中心 ▶️ 进行购买.

__CAPGO_KEEP_0__ 包括一个简单的方法来促进购买。

SDK 示例如下: purchase:package 该方法从已获取的 Offering 中取出一个包,并使用相应的应用商店处理交易。

code 示例如下: purchase:package 该示例显示了购买一个包并确认它解锁 'your_entitlement_id' 内容的过程。有关此方法的更多详细信息,请参阅 RevenueCat 的指南 有关如何进行购买的更多详细信息,请参阅 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
}

▶️ 检查订阅状态

您可以在任何时候使用此方法获取最新状态,并且在应用程序的整个生命周期中安全地多次调用此方法。 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ CustomerInfo 自动缓存最新的

每次更新时都会自动缓存,通常情况下,这个方法会从缓存中读取并运行非常快。

📘

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

💡 小提示! 您可以通过 RevenueCat 的指南了解更多关于订阅状态的信息,包括是否设置为续费、用户信用卡是否有问题等。 订阅状态

查看 RevenueCat 指南了解更多关于订阅状态的信息 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)
  })

如果两个不同的 App 用户 ID 从同一底层存储账户(Apple、Google或Amazon账户)中恢复交易。 RevenueCat可能会尝试在两个App用户ID之间创建一个别名,并将它们视为同一用户。有关不同可配置恢复行为的更多信息,请参见 Restoring Purchases 指南。

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

This method will fire whenever the SDK receives an updated CustomerInfogetCustomerInfo(), purchase(package:), purchase(product:)CustomerInfo restorePurchases().

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

SDK

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

👍

You did it!

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

Sample Apps

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

View Samples

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

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

Next Steps

\

了解如何申请并通知 RevenueCat

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

加入我们 👇

Capgo

capacitor

如果您正在使用 在应用内购买capacitor 来计划付款和购买,连接它与 Capgo Pricing 为Capgo Pricing中的产品工作流 支付系统 支付系统的实现细节 @capgo/native-purchases @capgo/native-purchases的实现细节 Getting Started Getting Started的实现细节 Revenue Playbook for the implementation detail in Revenue Playbook.

实时更新Capacitor应用

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

立即开始

博客最新文章

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