React Native - 新しいペイウォールビルダーのペイウォールを表示する

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

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

1. ペイウォールを作成していること。
2. ペイウォールをプレースメントに追加していること。
3. ペイウォールを取得し、ビューを準備していること。

Adapty React Native SDK では、ペイウォールを表示する方法が 2 つあります：

• React コンポーネント: アプリのアーキテクチャやナビゲーションシステムに組み込める埋め込みコンポーネントです。

• モーダル表示

React コンポーネント

既存のコンポーネントツリーにペイウォールを埋め込むには、React Native コンポーネントの階層内で AdaptyPaywallView コンポーネントを直接使用します。埋め込みコンポーネントにより、アプリのアーキテクチャやナビゲーションシステムに統合できます。

function MyPaywall({ paywall }) {
  const paywallParams = useMemo(() => ({
    loadTimeoutMs: 3000,
  }), []);

  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onProductSelected = useCallback<EventHandlers['onProductSelected']>((productId) => {}, []);
  const onPurchaseStarted = useCallback<EventHandlers['onPurchaseStarted']>((product) => {}, []);
  const onPurchaseCompleted = useCallback<EventHandlers['onPurchaseCompleted']>((purchaseResult, product) => {}, []);
  const onPurchaseFailed = useCallback<EventHandlers['onPurchaseFailed']>((error, product) => {}, []);
  const onRestoreStarted = useCallback<EventHandlers['onRestoreStarted']>(() => {}, []);
  const onRestoreCompleted = useCallback<EventHandlers['onRestoreCompleted']>((profile) => {}, []);
  const onRestoreFailed = useCallback<EventHandlers['onRestoreFailed']>((error) => {}, []);
  const onPaywallShown = useCallback<EventHandlers['onPaywallShown']>(() => {}, []);
  const onRenderingFailed = useCallback<EventHandlers['onRenderingFailed']>((error) => {}, []);
  const onLoadingProductsFailed = useCallback<EventHandlers['onLoadingProductsFailed']>((error) => {}, []);
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {}, []);
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {}, []);
  const onWebPaymentNavigationFinished = useCallback<EventHandlers['onWebPaymentNavigationFinished']>(() => {}, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      params={paywallParams}
      style={styles.paywall}
      onCloseButtonPress={onCloseButtonPress}
      onProductSelected={onProductSelected}
      onPurchaseStarted={onPurchaseStarted}
      onPurchaseCompleted={onPurchaseCompleted}
      onPurchaseFailed={onPurchaseFailed}
      onRestoreStarted={onRestoreStarted}
      onRestoreCompleted={onRestoreCompleted}
      onRestoreFailed={onRestoreFailed}
      onPaywallShown={onPaywallShown}
      onRenderingFailed={onRenderingFailed}
      onLoadingProductsFailed={onLoadingProductsFailed}
      onCustomAction={onCustomAction}
      onUrlPress={onUrlPress}
      onWebPaymentNavigationFinished={onWebPaymentNavigationFinished}
    />
  );
}

モーダル表示

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

const view = await createPaywallView(paywall);

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

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

const view = await createPaywallView(paywall);

view.registerEventHandlers(); // handle close press, etc

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

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

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

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

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

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

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

<AdaptyPaywallView
  paywall={paywall}
  params={paywallParams}
  // ... your event handlers
/>

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

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

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

ダイアログを表示する

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

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
}

あるサブスクリプションを別のものに置き換える

Android で別のサブスクリプションがアクティブな状態でユーザーが新しいサブスクリプションを購入しようとした場合、ペイウォールビューを作成する際にサブスクリプション更新パラメーターを渡すことで、新しい購入の処理方法を制御できます。現在のサブスクリプションを新しいものに置き換えるには、createPaywallView の productPurchaseParams に oldSubVendorProductId と prorationMode パラメーターを指定します。

const productPurchaseParams = paywall.productIdentifiers.map((productId) => {
  let params = {};
  if (Platform.OS === 'android') {
    params.android = {
      subscriptionUpdateParams: {
        oldSubVendorProductId: 'PRODUCT_ID_OF_THE_CURRENT_ACTIVE_SUBSCRIPTION',
        prorationMode: 'with_time_proration',
      },
    };
  }
  return { productId, params };
});

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

トラブルシューティング

ペイウォール上部のビジュアルオーバーレイ（Android）

AdaptyPaywallView がステータスバーの後ろまで拡張されない場合でも、上部にビジュアルオーバーレイが表示されることがあります。これを削除するには、アプリに以下のブールリソースを追加します：

1. android/app/src/main/res/values に移動します。bools.xml ファイルがない場合は作成してください。

2. 以下のリソースを追加します：

<resources>
    <bool name="adapty_paywall_enable_safe_area_paddings">false</bool>
</resources>

この変更はアプリ内のすべてのペイウォールにグローバルに適用されることに注意してください。