フローのアクションに応答する - Capacitor

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

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

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

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

イベントのハンドラーを設定すると、そのデフォルトの動作が完全に置き換えられます。設定しないハンドラーはデフォルトの動作を維持します。

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

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

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

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


const view = await createFlowView(flow);

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

Androidでは、システムの Back ボタンとバックジェスチャーが別の onAndroidSystemBack イベントをトリガーします。SDK v4では、デフォルトでフローを閉じなくなりました。Back ボタンでフローを閉じたい場合は、ハンドラーから true を返してください：

const unsubscribe = await view.setEventHandlers({
  onAndroidSystemBack() {
    return true; // close the flow when the Back button is pressed
  },
});

フローおよびペイウォールからURLを開く

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

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

ビルダーでボタンを追加し、Open URL アクションを割り当てて、開きたいURLを入力します。
必要に応じて、アプリのコードに openUrl アクションのハンドラーを実装し、受け取ったURLを独自の方法で開きます。

Capacitor SDKでは、URLをタップするとデフォルトでネイティブブラウザで開きます。SDKはadapty.openWebUrl({ url, openIn })を呼び出し、ビルダーで設定したOpen inオプションに従いつつ、フローを開いたままにします。ただし、必要に応じてコードでこの動作を上書きすることも可能です。


const unsubscribe = await view.setEventHandlers({
  onUrlPress(url) {
    // Open the URL your own way, e.g. with the Capacitor Browser plugin
    Browser.open({ url });
    return false; // keep the flow open
  },
});

カスタムアクションを処理する

他のアクションを処理するボタンを追加するには:

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

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

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

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

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

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

ペイウォールを閉じる

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

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

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


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    console.log('User closed paywall');
    return true; // Allow the paywall to close
  }
});

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

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

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

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

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


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false; // Don't close the paywall
  },
});

アプリにログインする

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

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


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'login') {
      // Navigate to login screen
      console.log('User requested login');
    }
  }
});

カスタムアクションを処理する

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

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

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

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