フローアクションへの対応 - React Native

Adapty のフロービルダーやペイウォールビルダーを使ってフローやペイウォールを構築する場合、ボタンを適切に設定することが重要です。

フロー/ペイウォールビルダーでボタンを追加し、既存のアクションを割り当てるか、カスタムアクション ID を作成します。
割り当てたアクションごとに処理するコードをアプリに記述します。

このガイドでは、カスタムアクションおよび既存アクションをコードで処理する方法を説明します。

購入、復元、フロー/ペイウォールのクローズ、URL オープンは自動的に処理されます。 デフォルトの動作を設定したり、カスタムアクションへの応答を実装したりすることができます。

SDKは、プッシュ通知やカメラアクセスなどのシステム権限リクエスト用に onRequestPermission フローハンドラーを公開しています。現時点ではフローがこれらのリクエストをトリガーしないため、今すぐ実装する必要はありません。

フローとペイウォールを閉じる

フローまたはペイウォールを閉じるボタンを追加するには：

ビルダーでボタンを追加し、Close アクションを割り当てます。
アプリのコードで、フローまたはペイウォールを閉じる close アクションのハンドラーを実装します。

React Native SDK では、close アクションはデフォルトでフローまたはペイウォールを閉じる動作をトリガーします。ただし、必要に応じてコード内でこの動作をオーバーライドできます。たとえば、あるフローを閉じると別のフローが開くようにすることも可能です。

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

モーダル表示の場合は、クローズハンドラーを実装します：


const view = await createFlowView(flow);

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

フローやペイウォールからURLを開く

リンクのグループ（利用規約や購入の復元など）を追加したい場合は、ビルダーで Link 要素を追加し、Open URL アクションが設定されたボタンと同じ方法で処理してください。

フローやペイウォールにリンクを開くボタン（Terms of use や Privacy policy など）を追加するには：

ビルダーでボタンを追加し、Open URL アクションを割り当て、開きたいURLを入力します。
アプリのコードで、受け取ったURLをブラウザで開く openUrl アクションのハンドラーを実装します。

React Native SDKでは、openUrlアクションはデフォルトでURLを開く動作をトリガーします。ただし、必要に応じてコード内でこの動作を上書きできます。

Reactコンポーネントの場合は、イベントハンドラープロップを通じてURLの開き方を制御します：


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

カスタムアクションの処理

ほかのアクションを処理するボタンを追加するには、次の手順に従います。

ビルダーでボタンを追加し、Custom アクションを割り当てて、IDを設定します。
アプリのコードで、作成したアクションIDのハンドラーを実装します。

たとえば、別のサブスクリプションオファーや買い切り購入がある場合、別のフローやペイウォールを表示するボタンを追加できます。

Reactコンポーネントの場合は、イベントハンドラープロップを通じてカスタムアクションを処理します。


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

モーダル表示の場合は、カスタムアクションハンドラーを実装します：

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

Adapty ペイウォールビルダーを使用してペイウォールを構築する場合は、ボタンを適切に設定することが重要です：

ペイウォールビルダーにボタンを追加し、既存のアクションを割り当てるか、カスタムアクションIDを作成します。
割り当てた各アクションを処理するコードをアプリに記述します。

このガイドでは、カスタムおよび既存のアクションをコードで処理する方法を説明します。

購入・復元・ペイウォールの閉鎖・URL開封は自動で処理されます。 それ以外のボタンアクションはすべて、アプリのコードで適切に対応を実装する必要があります。

ペイウォールを閉じる

ペイウォールを閉じるボタンを追加するには：

ペイウォールビルダーでボタンを追加し、Close アクションを割り当てます。
アプリのコードで、ペイウォールを閉じる close アクションのハンドラーを実装します。

React Native SDK では、close アクションはデフォルトでペイウォールを閉じる動作をトリガーします。ただし、必要に応じてコードでこの動作をオーバーライドできます。たとえば、あるペイウォールを閉じると別のペイウォールが開くようにすることも可能です。

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

モーダル表示の場合は、クローズハンドラーを実装してください：


const view = await createPaywallView(paywall);

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

ペイウォールからURLを開く

リンクのグループ（利用規約や購入の復元など）を追加したい場合は、ペイウォールビルダーで Link 要素を追加し、Open URL アクションを持つボタンと同じ方法で処理してください。

ペイウォールからリンクを開くボタン（Terms of use や Privacy policy など）を追加するには：

ペイウォールビルダーでボタンを追加し、Open URL アクションを割り当て、開きたいURLを入力します。
アプリのコードで、受け取ったURLをブラウザで開く openUrl アクションのハンドラーを実装します。

React Native SDK では、openUrl アクションはデフォルトでURLを開く動作をします。ただし、必要に応じてコード内でこの動作をオーバーライドできます。

Reactコンポーネントの場合、イベントハンドラーのプロパティを通じてURLを開く処理を行います：


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

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

For modal presentation, implement the URL handler:


const view = await createPaywallView(paywall);

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

アプリにログインする

ユーザーをアプリにログインさせるボタンを追加するには：

ペイウォールビルダーでボタンを追加し、Login アクションを割り当てます。
アプリのコードで、ユーザーを識別する login アクションのハンドラーを実装します。

React component の場合、イベントハンドラーのプロパティを通じてログインを処理します：


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

モーダル表示の場合は、ログインハンドラーを実装してください：


const view = await createPaywallView(paywall);

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

カスタムアクションの処理

ほかのアクションを処理するボタンを追加するには：

ペイウォールビルダーでボタンを追加し、Custom アクションを割り当てて、IDを付与します。
アプリのコードで、作成したアクションIDに対応するハンドラーを実装します。

たとえば、別のサブスクリプションオファーや買い切り購入がある場合、別のペイウォールを表示するボタンを追加できます：

React componentの場合は、イベントハンドラーのプロップでカスタムアクションを処理します：


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

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

モーダル表示の場合は、カスタムアクションハンドラーを実装します:

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