revenuecat-customer-center

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

revenuecat-customer-center: add the RevenueCat Customer Center

revenuecat-customer-center：添加RevenueCat客户中心

Use this skill when the user wants an out of the box UI that lets their customers manage active subscriptions, request refunds, cancel, restore, or contact support, without shipping custom UI. The UI is configured in the RevenueCat dashboard and rendered by the

RevenueCatUI

SDKs.

Prerequisite:

integrate-revenuecat

has already run.

Purchases.configure(…)

must succeed before the Customer Center can load customer data.

当用户需要一个现成的UI，让客户能够管理活跃订阅、申请退款、取消订阅、恢复订阅或联系支持，而无需开发自定义UI时，可使用此技能。该UI在RevenueCat控制台中配置，由

RevenueCatUI

SDK渲染。

前置条件：已运行

integrate-revenuecat

。在客户中心加载客户数据之前，

Purchases.configure(…)

必须执行成功。

1. Detect the platform

1. 检测平台

Inspect the working directory and pick the first match, from top to bottom:

React Native:
```
package.json
```
has a
```
react-native-purchases
```
entry, or
```
react-native
```
as a dependency. The Customer Center ships in
```
react-native-purchases-ui
```
. Read
```
platforms/react-native.md
```
. If
```
expo
```
is also a dependency, note it as an Expo project.
Flutter:
```
pubspec.yaml
```
exists at the project root. The Customer Center ships in
```
purchases_ui_flutter
```
. Read
```
platforms/flutter.md
```
.
Kotlin Multiplatform:
```
build.gradle.kts
```
has a
```
kotlin { … }
```
multiplatform block, or depends on
```
com.revenuecat.purchases:purchases-kmp*
```
. The Customer Center composable is in
```
purchases-kmp-ui
```
. Read
```
platforms/kmp.md
```
.

Android (native):

build.gradle(.kts)

applies

com.android.application

(and is not KMP). The Customer Center composable is in

com.revenuecat.purchases:purchases-ui

. Read

platforms/android.md

iOS (native):

Package.swift

*.xcodeproj

*.xcworkspace

, or

Podfile

at the project root.

CustomerCenterView

is in

RevenueCatUI

. Read

platforms/ios.md

If several match (e.g. an

ios/

folder inside a Flutter project), pick the outermost project, the one that owns the build. If still ambiguous, ask the user which platform they want to configure.

检查工作目录，从上到下选择第一个匹配项：

React Native：
```
package.json
```
包含
```
react-native-purchases
```
条目，或依赖
```
react-native
```
。客户中心包含在
```
react-native-purchases-ui
```
中。阅读
```
platforms/react-native.md
```
。如果同时依赖
```
expo
```
，则标记为Expo项目。
Flutter：项目根目录存在
```
pubspec.yaml
```
。客户中心包含在
```
purchases_ui_flutter
```
中。阅读
```
platforms/flutter.md
```
。

Kotlin Multiplatform：

build.gradle.kts

包含

kotlin { … }

多平台块，或依赖

com.revenuecat.purchases:purchases-kmp*

。客户中心组件在

purchases-kmp-ui

中。阅读

platforms/kmp.md

。

Android（原生）：

build.gradle(.kts)

应用

com.android.application

（且非KMP项目）。客户中心组件在

com.revenuecat.purchases:purchases-ui

中。阅读

platforms/android.md

。

iOS（原生）：项目根目录存在

Package.swift

、

*.xcodeproj

、

*.xcworkspace

或

Podfile

。

CustomerCenterView

在

RevenueCatUI

中。阅读

platforms/ios.md

。

如果多个平台匹配（例如Flutter项目中包含

ios/

文件夹），请选择最外层的项目，即负责构建的项目。如果仍有歧义，请询问用户想要配置哪个平台。

2. Shared concepts (all platforms)

2. 通用概念（所有平台）

Customer Center is a dashboard configured UI. Actions, copy, promotional offers, refund flows, cancel survey options, and support contact details are defined in the RevenueCat dashboard under Customer Center. Without configuration, the view renders a minimal default layout; users will see almost nothing useful.
It needs an identified user with purchases to surface anything meaningful. If the user is anonymous and has never bought anything, the Customer Center renders an empty / restore only state. If the app supports login, call
```
Purchases.logIn(userId)
```
before opening the Customer Center.
Customer Center is separate from paywalls. The standard pattern: expose a "Manage subscription" row in the settings screen that opens the Customer Center. Paywalls are for new purchases; the Customer Center is for existing subscribers.
The UI owns the flow. Restore, cancel, refund, and promotional offer flows run inside the component. Listen for the lifecycle callbacks (
```
onRestoreCompleted
```
,
```
onRefundRequestStarted
```
,
```
onManagementOptionSelected
```
,
```
onPromotionalOfferSucceeded
```
, etc.) to react in app code, not to drive the flow.
Platform availability varies. iOS has had Customer Center longest; Android, KMP, Flutter, and React Native follow. Platform files flag any gaps. Refund requests are an iOS only action because only Apple exposes in app refund requests; on Android, the "Manage subscription" option links out to the Google Play subscriptions screen.
If the installed SDK version is older than Customer Center support, the fallback is a manual subscription management screen: show the user's active entitlements from
```
Purchases.customerInfo()
```
, expose a
```
Purchases.restorePurchases()
```
button, and link to the store's subscription management URL. Point the user to upgrade the SDK if they want the full Customer Center.

客户中心是控制台配置的UI。操作、文案、促销优惠、退款流程、取消调查选项和支持联系信息都在RevenueCat控制台的客户中心部分定义。如果未配置，视图将渲染最小化的默认布局；用户几乎看不到有用内容。
需要已识别且有购买记录的用户才能显示有意义的内容。如果用户是匿名的且从未进行过购买，客户中心将渲染空状态/仅恢复状态。如果应用支持登录，请在打开客户中心前调用
```
Purchases.logIn(userId)
```
。
客户中心与付费墙相互独立。标准模式：在设置界面中添加“管理订阅”选项，点击后打开客户中心。付费墙用于新购买；客户中心用于现有订阅用户。
UI掌控流程。恢复、取消、退款和促销优惠流程都在组件内部运行。监听生命周期回调（
```
onRestoreCompleted
```
、
```
onRefundRequestStarted
```
、
```
onManagementOptionSelected
```
、
```
onPromotionalOfferSucceeded
```
等）以在应用代码中做出响应，而非驱动流程。
平台可用性存在差异。iOS的客户中心推出时间最早；Android、KMP、Flutter和React Native紧随其后。平台文件会标记任何功能缺口。退款请求是iOS独有的操作，因为只有Apple提供应用内退款请求；在Android上，“管理订阅”选项会跳转到Google Play订阅界面。
如果已安装的SDK版本早于客户中心支持版本，则 fallback 方案是手动实现订阅管理界面：显示
```
Purchases.customerInfo()
```
中的用户活跃权益，添加
```
Purchases.restorePurchases()
```
按钮，并链接到应用商店的订阅管理URL。如果用户想要完整的客户中心功能，请引导他们升级SDK。

3. Implementation

3. 实现

Read the platform file that matches detection:

```
platforms/ios.md
```
```
platforms/android.md
```
```
platforms/kmp.md
```
```
platforms/flutter.md
```
```
platforms/react-native.md
```

Each platform file is self contained: install command, exact snippet to present the Customer Center, and the callback shape.

阅读与检测结果匹配的平台文件：

```
platforms/ios.md
```
```
platforms/android.md
```
```
platforms/kmp.md
```
```
platforms/flutter.md
```
```
platforms/react-native.md
```

每个平台文件都是独立的：包含安装命令、展示客户中心的精确代码片段以及回调格式。

4. Verify

4. 验证

Do not claim the integration is complete until:

The project builds on the target platform.
Sign into the app with a test user that has at least one active sandbox subscription. Trigger the code path that opens the Customer Center. The UI loads and the subscription appears in the list.
At least one configured action runs end to end. The simplest check: tap Restore purchases and confirm the restore completed callback fires with a non-empty
```
customerInfo.entitlements.active
```
map. If the dashboard has Cancel / Refund / Support actions configured, verify the corresponding callback (
```
onManagementOptionSelected
```
,
```
onRefundRequestStarted
```
, etc.) fires when the user taps through.
Dismissing the Customer Center fires the
```
onDismiss
```
callback.

If the Customer Center opens but is empty, the signed in user has no purchases, or the dashboard Customer Center section is not configured. Fix in the dashboard, reload, and retry.

在满足以下条件之前，请勿声称集成完成：

项目在目标平台上能够构建成功。
使用拥有至少一个活跃沙箱订阅的测试用户登录应用。触发打开客户中心的代码路径。UI加载完成，且订阅显示在列表中。
至少一个已配置的操作能够端到端运行。最简单的检查：点击恢复购买，确认恢复完成回调触发，且
```
customerInfo.entitlements.active
```
映射不为空。如果控制台配置了取消/退款/支持操作，请验证用户点击时对应的回调（
```
onManagementOptionSelected
```
、
```
onRefundRequestStarted
```
等）是否触发。
关闭客户中心时触发
```
onDismiss
```
回调。

如果客户中心能够打开但内容为空，说明登录用户没有购买记录，或者控制台的客户中心部分未配置。请在控制台中修复后重新加载并重试。