在 React Native SDK 中使用流程和付费墙编辑工具启用购买功能

要启用应用内购买，你需要了解三个核心概念：

产品 – 用户可以购买的所有内容（订阅、消耗型商品、永久授权）
流程与付费墙 – 向用户展示产品的页面，使用无代码流程与付费墙编辑工具构建，SDK 通过 getFlow 获取。如果你更倾向于用自己的代码构建 UI，请参阅实现自定义付费墙。
版位 – 在应用中展示流程与付费墙的位置和时机（如 main、onboarding、settings）。你可以在看板中将它们绑定到版位，然后在代码中通过版位 ID 调用。这样可以轻松进行 A/B 测试，并向不同用户展示不同内容。

Adapty 为您提供三种在应用中开启内购的方式。请根据您的应用需求选择其中一种：

实现方式	复杂度	适用场景
Adapty Flow 与付费墙编辑工具	✅ 简单	你在无代码编辑工具中创建完整的、可立即购买的流程或付费墙。Adapty 自动渲染并在后台处理所有复杂的购买逻辑、凭证验证和订阅管理。
自定义付费墙	🟡 中等	你在应用代码中自行实现付费墙 UI，但仍从 Adapty 获取流程对象，以保持产品方案的灵活性。参见指南。
观察者模式	🔴 复杂	你已有自己的购买处理基础设施并希望继续使用。请注意，观察者模式在 Adapty 中存在一定限制。参见文章。

Important

以下步骤演示如何在应用中展示通过 Adapty Flow & Paywall Builder 创建的流程或付费墙。

如果你想自行构建付费墙 UI，请参阅实现自定义付费墙。

要在应用中展示通过 Adapty Flow & Paywall Builder 创建的流程或付费墙，你只需在代码中完成以下操作：

获取流程或付费墙：从 Adapty 获取。
展示付费墙，Adapty 将为你处理购买流程：在应用中显示视图。
处理按钮操作：将用户交互与应用的响应关联起来。例如，在用户点击按钮时打开链接或关闭付费墙。

开始之前

在开始之前，请完成以下步骤：

在 Adapty 看板中将您的应用连接到 App Store 和/或 Google Play。
在 Adapty 中创建产品。
创建流程或付费墙并向其添加产品。
创建版位并将您的流程或付费墙添加到其中。
在您的应用代码中安装并激活 Adapty SDK。本指南使用 Adapty React Native SDK v4 API。

1. 获取流程或付费墙

你的流程和付费墙与看板中配置的版位相关联。通过版位，你可以针对不同目标受众展示不同的流程或付费墙，也可以运行 A/B 测试。

要获取在 Adapty Flow & Paywall Builder 中创建的流程或付费墙，请通过 getFlow 方法，使用版位 ID 获取 flow 对象。该流程包含展示所需的 UI 元素和样式。


try {
  const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');
  // the requested flow
} catch (error) {
  // handle the error
}

2. 显示流程或付费墙

现在，有了流程之后，只需添加几行代码即可将其展示出来。

要将流程嵌入到现有的组件树中，可以直接在 React Native 组件层级中使用 AdaptyFlowView 组件：


function MyFlow({ flow }) {
  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onPurchaseCompleted={onPurchaseCompleted}
    />
  );
}

要将流程显示为独立屏幕，请使用 createFlowView 方法创建一个 view，设置其事件处理程序，然后调用 view.present()。每个 view 只能使用一次。如果需要再次显示流程，请再次调用 createFlowView 以创建新的 view 实例。


try {
  const view = await createFlowView(flow);

  view.setEventHandlers({
    onPurchaseCompleted(result, product) {
      return result.type !== 'user_cancelled';
    },
  });

  await view.present();
} catch (error) {
  // handle the error
}

Tip

有关如何展示流程或付费墙的更多详情，请参阅我们的指南。

3. 处理按钮事件

当用户点击流程或付费墙中的按钮时，React Native SDK 会自动处理购买、恢复、关闭屏幕和打开 URL 等操作。

但是，其他按钮有自定义或预定义的 ID，需要在代码中处理相应事件。或者，你可能希望覆盖这些按钮的默认行为。

例如，以下是关闭按钮的默认行为。你无需在代码中添加这段逻辑，但可以在此了解如何实现。

对于 React 组件，直接在 AdaptyFlowView 组件中处理操作：


function MyFlow({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true, // allow the flow to close
    [],
  );
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>(
    (actionId) => false,
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}

对于模态呈现，使用 setEventHandlers 实现事件处理程序：

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Tip

阅读我们关于如何处理按钮操作和事件的指南。

下一步

Tip

有疑问或遇到问题？欢迎访问我们的支持论坛，在那里你可以找到常见问题的解答，也可以提出自己的问题。我们的团队和社区随时为你提供帮助！

您的流程或付费墙已准备好在应用中展示。测试您的购买，确保您能够从流程中完成测试购买。

现在，您需要检查用户的访问等级，以确保向正确的用户展示付费墙或开放付费功能的访问权限。

完整示例

以下是将本指南中所有步骤整合到应用中的完整示例。


export default function FlowScreen() {
  const [flow, setFlow] = useState(null);

  const loadFlow = async () => {
    try {
      const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID');
      setFlow(flowData);
    } catch (error) {
      console.warn('Error loading flow:', error);
    }
  };

  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true,
    [],
  );

  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  useEffect(() => {
    loadFlow();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {flow ? (
        <AdaptyFlowView
          flow={flow}
          style={{ flex: 1 }}
          onCloseButtonPress={onCloseButtonPress}
          onPurchaseCompleted={onPurchaseCompleted}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Flow" onPress={loadFlow} />
        </View>
      )}
    </View>
  );
}


export default function FlowScreen() {
  const showFlow = async () => {
    try {
      const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');

      const view = await createFlowView(flow);

      view.setEventHandlers({
        onCloseButtonPress() {
          return true;
        },
        onPurchaseCompleted(result, product) {
          return result.type !== 'user_cancelled';
        },
      });

      await view.present();
    } catch (error) {
      // handle any error that may occur during the process
      console.warn('Error showing flow:', error);
    }
  };

  // you can add a button to manually trigger the flow for testing purposes
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Flow" onPress={showFlow} />
    </View>
  );
}