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

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

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

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

Warning

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

Note

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

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

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

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

Info

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を開く

Tip

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

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

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

Info

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

ペイウォールビルダーを使ってペイウォールを作成する場合、ボタンを適切に設定することが重要です：

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

このガイドでは、カスタムアクションおよびあらかじめ定義されたアクションをコードで処理する方法について説明します。

Warning

購入、復元、ペイウォールのクローズ、URLの開封のみが自動的に処理されます。 その他のボタンアクションはすべて、アプリのコードで適切なレスポンス実装が必要です。

ペイウォールを閉じる

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

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

Info

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を開く

Tip

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

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

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

Info

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