フローとペイウォールの表示 - Capacitor

フローまたはペイウォールをフローエビルダーで作成した場合、それをモバイルアプリのコードでレンダリングしてユーザーに表示する方法を気にする必要はありません。フローには、表示する内容とその表示方法の両方が含まれています。

始める前に、以下を確認してください。

1. フローまたはペイウォールを作成している。
2. プレースメントに追加している。
3. フローをフェッチしてビューを準備している。

フローまたはペイウォールをスタンドアロン画面として表示するには、createFlowView メソッドで作成した view に対して view.present() メソッドを使用します。各 view は一度しか使用できません。フローを再度表示する必要がある場合は、createFlowView を再度呼び出して新しい view インスタンスを作成してください。

const view = await createFlowView(flow);

// Optional: handle flow events (close, purchase, restore, etc)
// await view.setEventHandlers({ ... });

try {
  await view.present();
} catch (error) {
  // handle the error
}

iOSのプレゼンテーションスタイルを設定する

present() メソッドに iosPresentationStyle パラメータを渡すことで、iOS でのフローの表示スタイルを設定できます。このパラメータは 'full_screen'（デフォルト）または 'page_sheet' を受け付けます。Android では、フローは常にフルスクリーンのアクティビティとして表示されます。

try {
  await view.present({ iosPresentationStyle: 'page_sheet' });
} catch (error) {
  // handle the error
}

開発者定義タイマーを使用する

モバイルアプリで開発者定義タイマーを使用するには、timerId（この例では CUSTOM_TIMER_NY）を使用します。これは Adapty ダッシュボードで設定した開発者定義タイマーの Timer ID です。これにより、アプリはタイマーを正しい値（例：タイマーの終了時刻（元日など）から現在時刻を引いた 13d 09h 03m 34s）で動的に更新できます。

const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createFlowView(flow, { customTimers });

この例では、CUSTOM_TIMER_NY は Adapty ダッシュボードで設定した開発者定義タイマーの Timer ID です。タイマーを使うことで、アプリが正しい値（例: 13d 09h 03m 34s、元日などのタイマー終了時刻から現在時刻を引いた値）を動的に表示できます。

ダイアログを表示する

Android でフロービューが表示されている場合、ネイティブのアラートダイアログの代わりにこのメソッドを使用してください。Android では、通常のアラートがフロービューの後ろに表示されるため、ユーザーには見えません。このメソッドを使用することで、すべてのプラットフォームでフローの上に正しくダイアログが表示されます。

try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });

  if (action === 'secondary') {
    // User confirmed - close the flow
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

別のサブスクリプションへの切り替え

Android でユーザーが別のサブスクリプションを有効にした状態で新しいサブスクリプションを購入しようとする場合、フロービューを作成する際にサブスクリプション更新パラメータを渡すことで、新しい購入の処理方法を制御できます。現在のサブスクリプションを新しいものに切り替えるには、createFlowView の productPurchaseParams に oldSubVendorProductId と prorationMode パラメータを指定してください。

const productPurchaseParams = flow.paywalls
  .flatMap((paywall) => paywall.productIdentifiers)
  .map((productId) => {
    const params: MakePurchaseParamsInput = {};
    if (Capacitor.getPlatform() === 'android') {
      params.android = {
        subscriptionUpdateParams: {
          oldSubVendorProductId: 'PRODUCT_ID_OF_THE_CURRENT_ACTIVE_SUBSCRIPTION',
          prorationMode: 'with_time_proration',
        },
      };
    }
    return { productId, params };
  });

const view = await createFlowView(flow, { productPurchaseParams });

ペイウォールビルダーを使ってペイウォールをカスタマイズした場合、モバイルアプリのコードでそれをレンダリングしてユーザーに表示する手間はありません。このようなペイウォールには、表示する内容と表示方法の両方が含まれています。

ペイウォールを表示するには、createPaywallView メソッドで作成した view に対して view.present() メソッドを呼び出します。各 view は一度しか使用できません。ペイウォールを再度表示する必要がある場合は、createPaywallView をもう一度呼び出して新しい view インスタンスを作成してください。

const view = await createPaywallView(paywall);

view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false;
  },
});

try {
  await view.present();
} catch (error) {
  // handle the error
}

開発者定義タイマーを使用する

モバイルアプリで開発者定義タイマーを使用するには、timerId（この例では CUSTOM_TIMER_NY）を使用します。これは、Adapty ダッシュボードで設定した開発者定義タイマーの Timer ID です。これにより、アプリはタイマーを正しい値（例：元旦までの残り時間を現在時刻から引いた 13d 09h 03m 34s など）で動的に更新できます。

const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createPaywallView(paywall, { customTimers });

この例では、CUSTOM_TIMER_NY は Adapty ダッシュボードで設定した開発者定義タイマーの Timer ID です。タイマーを使用することで、アプリは正しい値（例: 13d 09h 03m 34s、タイマーの終了時刻（元日など）から現在時刻を引いて算出）でタイマーを動的に更新できます。

ダイアログの表示

Android でペイウォールビューが表示されている場合は、ネイティブのアラートダイアログの代わりにこのメソッドを使用してください。Android では、通常のアラートがペイウォールビューの背後に表示されてしまい、ユーザーには見えなくなります。このメソッドを使用することで、すべてのプラットフォームでペイウォールの上に正しくダイアログを表示できます。

try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });

  if (action === 'secondary') {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

iOSの表示スタイルを設定する

present() メソッドに iosPresentationStyle パラメーターを渡すことで、iOSでのペイウォールの表示スタイルを設定できます。このパラメーターには 'full_screen'（デフォルト）または 'page_sheet' を指定できます。

await view.present({ iosPresentationStyle: 'page_sheet' });