---
title: "Phản hồi các hành động flow - React Native"
description: "Xử lý các hành động nút từ flow và paywall trong React Native bằng Adapty để tối ưu hóa monetization cho ứng dụng."
---

Nếu bạn đang xây dựng flow hoặc paywall bằng Adapty Flow Builder hoặc Paywall Builder, việc thiết lập các nút đúng cách là rất quan trọng:
1. Thêm [nút trong flow/paywall builder](paywall-buttons) và gán cho nó một action có sẵn hoặc tạo một custom action ID.
2. Viết code trong ứng dụng của bạn để xử lý từng action bạn đã gán.

Hướng dẫn này trình bày cách xử lý các custom action và action có sẵn trong code của bạn.

:::warning
**Việc mua hàng, khôi phục, đóng flow/paywall và mở URL được xử lý tự động.** Bạn có thể cấu hình hành vi mặc định của chúng hoặc triển khai phản hồi cho các custom action.
:::
:::note
SDK cung cấp một flow handler `onRequestPermission` để xử lý các yêu cầu cấp quyền hệ thống như thông báo đẩy hoặc truy cập camera. Hiện tại các flow chưa kích hoạt những yêu cầu này, nên bạn chưa cần triển khai nó.
:::
## Đóng flow và paywall \{#close-flows-and-paywalls\}

Để thêm nút đóng flow hoặc paywall:

1. Trong builder, thêm một nút và gán cho nó hành động **Close**.
2. Trong code của ứng dụng, triển khai một handler cho hành động `close` để đóng flow hoặc paywall.

:::info
Trong React Native SDK, hành động `close` mặc định sẽ tự động đóng flow hoặc paywall. Tuy nhiên, bạn có thể ghi đè hành vi này trong code nếu cần. Ví dụ: đóng một flow có thể kích hoạt mở một flow khác.
:::

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>
For React component, handle the close action through individual event handler props:
```javascript

function MyPaywall({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Đối với modal presentation, hãy triển khai close handler:

```javascript

const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow flow or paywall closing
    }
});
```

</TabItem>
</Tabs>
## Mở URL từ flow và paywall \{#open-urls-from-flows-and-paywalls\}

:::tip
Nếu bạn muốn thêm một nhóm liên kết (ví dụ: điều khoản sử dụng và khôi phục giao dịch), hãy thêm phần tử **Link** trong builder và xử lý nó giống như các nút với hành động **Open URL**.
:::

Để thêm nút mở liên kết từ flow hoặc paywall của bạn (ví dụ: **Terms of use** hoặc **Privacy policy**):

1. Trong builder, thêm một nút, gán cho nó hành động **Open URL**, và nhập URL bạn muốn mở.
2. Trong code ứng dụng của bạn, triển khai một handler cho hành động `openUrl` để mở URL nhận được trong trình duyệt.
:::info
Trong React Native SDK, action `openUrl` mặc định sẽ mở URL. Tuy nhiên, bạn có thể ghi đè hành vi này trong code nếu cần.
:::

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Với React component, hãy xử lý việc mở URL thông qua prop event handler:
```javascript

function MyPaywall({ flow }) {
  const onUrlPress = useCallback<FlowEventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">
For modal presentation, implement the URL handler:

```javascript

const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep flow or paywall open
    },
});
```

</TabItem>
</Tabs>
## Xử lý hành động tùy chỉnh \{#handle-custom-actions\}

Để thêm nút xử lý các hành động khác:

1. Trong builder, thêm một nút, gán cho nó hành động **Custom** và đặt cho nó một ID.
2. Trong code ứng dụng, hãy implement handler cho ID hành động bạn đã tạo.

Ví dụ: nếu bạn có một bộ ưu đãi gói đăng ký hoặc sản phẩm mua một lần khác, bạn có thể thêm một nút để hiển thị một flow hoặc paywall khác:

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Với React component, hãy xử lý các hành động tùy chỉnh thông qua prop event handler:
```javascript

function MyPaywall({ flow }) {
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another flow or paywall
    }
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Trình bày dạng modal">
Để xử lý modal presentation, hãy triển khai các action handler tùy chỉnh:

```javascript
const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another flow or paywall
        }
    },
});
```

</TabItem>
</Tabs>

---

> [!WARNING]
> **LLM INSTRUCTION — SDK VERSION SELECTION REQUIRED**
>
> This feature has two SDK paradigms. Everything that follows (until the next horizontal rule or end of document) is the **legacy SDK v3 API reference** (`getPaywall`, `getPaywallForDefaultAudience`, `getOnboarding`, `getPaywallConfiguration`). The **SDK v4+ `getFlow` method is documented above.** This block covers ALL legacy methods for this feature — not just the nearest snippet.
>
> **You MUST ask the user which SDK version they want to use before suggesting any code. Do not assume or default to a version.** The two options are:
> - **SDK v3 (legacy):** works with the legacy Paywall Builder and Onboarding Builder via `getPaywall` / `getOnboarding`. Use the legacy code in this section.
> - **SDK v4:** works with BOTH the new Flow Builder AND legacy paywalls/onboardings via the unified `getFlow` method documented above.
>
> Apply the legacy v3 code in this section ONLY when:
> 1. The user explicitly chose **SDK v3**, or
> 2. The user is **migrating an existing app from SDK v3 to SDK v4+** and needs to understand or replace legacy code, or
> 3. The user is **troubleshooting an already-deployed v3 integration**.
>
> **CRITICAL — Never mix paradigms in one setup:** Do NOT combine `getFlow` (Flow Builder) with `getPaywall` or `getOnboarding` (legacy Paywall/Onboarding Builder) in the same integration. These are incompatible patterns. Mixing them will produce inconsistent behavior and is unsupported.

Nếu bạn đang xây dựng paywall bằng Adapty Paywall Builder, việc thiết lập các button đúng cách là rất quan trọng:
1. Thêm [nút trong paywall builder](paywall-buttons) và gán cho nó một hành động có sẵn hoặc tạo một ID hành động tùy chỉnh.
2. Viết code trong ứng dụng để xử lý từng hành động bạn đã gán.

Hướng dẫn này mô tả cách xử lý các hành động tùy chỉnh và hành động có sẵn trong code.

:::warning
**Chỉ có mua hàng, khôi phục, đóng paywall và mở URL được xử lý tự động.** Tất cả các hành động nút khác đều yêu cầu triển khai xử lý phù hợp trong code ứng dụng.
:::
## Đóng paywall \{#close-paywalls\}

Để thêm nút đóng paywall:

1. Trong Paywall Builder, thêm một nút và gán cho nó hành động **Close**.
2. Trong code của ứng dụng, triển khai handler cho hành động `close` để đóng paywall.

:::info
Trong React Native SDK, hành động `close` mặc định sẽ đóng paywall. Tuy nhiên, bạn có thể ghi đè hành vi này trong code nếu cần. Ví dụ: đóng một paywall có thể kích hoạt mở một paywall khác.
:::

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>
For React component, handle the close action through individual event handler props:
```javascript

function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Đối với modal presentation, hãy triển khai trình xử lý đóng:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});
```

</TabItem>
</Tabs>
## Mở URL từ paywall \{#open-urls-from-paywalls\}

:::tip
Nếu bạn muốn thêm một nhóm liên kết (ví dụ: điều khoản sử dụng và khôi phục giao dịch), hãy thêm một phần tử **Link** trong paywall builder và xử lý nó giống như các nút có hành động **Open URL**.
:::

Để thêm nút mở liên kết từ paywall của bạn (ví dụ: **Terms of use** hoặc **Privacy policy**):

1. Trong paywall builder, thêm một nút, gán cho nó hành động **Open URL**, và nhập URL bạn muốn mở.
2. Trong mã ứng dụng của bạn, implement một handler cho hành động `openUrl` để mở URL nhận được trong trình duyệt.
:::info
Trong React Native SDK, action `openUrl` mặc định sẽ mở URL. Tuy nhiên, bạn có thể ghi đè hành vi này trong code nếu cần.
:::

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Với React component, hãy xử lý việc mở URL thông qua prop event handler:
```javascript

function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">
Để hiển thị modal, hãy triển khai URL handler:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});
```

</TabItem>
</Tabs>
## Đăng nhập vào ứng dụng \{#log-into-the-app\}

Để thêm nút cho phép người dùng đăng nhập vào ứng dụng:

1. Trong paywall builder, thêm một nút và gán cho nó hành động **Login**.
2. Trong code ứng dụng, triển khai một handler cho hành động `login` để xác định người dùng của bạn.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Với React component, xử lý đăng nhập thông qua prop event handler:
```javascript

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'login') {
      navigation.navigate('Login');
    }
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Đối với modal presentation, hãy implement handler đăng nhập:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});
```

</TabItem>
</Tabs>
## Xử lý các hành động tùy chỉnh \{#handle-custom-actions\}

Để thêm một nút xử lý các hành động khác:

1. Trong paywall builder, thêm một nút, gán cho nó hành động **Custom** và đặt cho nó một ID.
2. Trong mã ứng dụng của bạn, triển khai trình xử lý cho ID hành động bạn đã tạo.

Ví dụ: nếu bạn có một bộ ưu đãi gói đăng ký khác hoặc sản phẩm mua một lần, bạn có thể thêm một nút để hiển thị một paywall khác:

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Đối với React component, xử lý các hành động tùy chỉnh thông qua prop event handler:
```javascript

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">
Để xử lý modal, hãy triển khai các action handler tùy chỉnh:

```javascript
const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});
```

</TabItem>
</Tabs>

---