Phản hồi các hành động flow - React Native

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:

Thêm nút trong flow/paywall builder và gán cho nó một action có sẵn hoặc tạo một custom action ID.
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.

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.

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

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

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

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.

For React component, handle the close action through individual event handler props:


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}
    />
  );
}

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


const view = await createFlowView(flow);

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

Mở URL từ flow và paywall

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):

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ở.
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.

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.

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


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

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

For modal presentation, implement the URL handler:


const view = await createFlowView(flow);

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

Xử lý hành động tùy chỉnh

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

Trong builder, thêm một nút, gán cho nó hành động Custom và đặt cho nó một ID.
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:

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


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}
    />
  );
}

Để xử lý modal presentation, hãy triển khai các action handler tùy chỉnh:

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

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:

Thêm nút trong paywall builder 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.
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.

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

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

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

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.

For React component, handle the close action through individual event handler props:


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}
    />
  );
}

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


const view = await createPaywallView(paywall);

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

Mở URL từ paywall

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):

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ở.
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.

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.

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


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

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

Để hiển thị modal, hãy triển khai URL handler:


const view = await createPaywallView(paywall);

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

Đăng nhập vào ứng dụng

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

Trong paywall builder, thêm một nút và gán cho nó hành động Login.
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.

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


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}
    />
  );
}

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


const view = await createPaywallView(paywall);

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

Xử lý các hành động tùy chỉnh

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

Trong paywall builder, thêm một nút, gán cho nó hành động Custom và đặt cho nó một ID.
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:

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


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

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

Để xử lý modal, hãy triển khai các action handler tùy chỉnh:

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