Capacitor SDKのObserverモードでフローを表示する

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

このセクションはオブザーバーモード専用です。オブザーバーモードで作業していない場合は、フローとペイウォールの表示のトピックを参照してください。

この機能を使用するには Adapty Capacitor SDK 4.0 以降が必要です。以前はネイティブの iOS および Android SDK でのみ利用可能でした。アップグレードするには移行ガイドを参照してください。

フローの表示を始める前に（クリックして展開）

AdaptyをApp Storeと連携、およびGoogle Playと連携するための初期設定を行います。 2. Adapty SDKをインストールして設定します。observerModeパラメータをtrueに設定してください。Capacitor SDKインストールガイドを参照してください。 3. Adapty ダッシュボードでプロダクトを作成します。 4. ビルダーでフローまたはペイウォールを設定し、プロダクトを割り当てます。 5. プレースメントを作成し、フローまたはペイウォールを割り当てます。 6. モバイルアプリのコード内でフローとその設定を取得します。

オブザーバーモードでは、SDKが代わりに購入処理を行うことはありません。ユーザーがAdaptyでレンダリングされたフローまたはペイウォールの購入ボタンや復元ボタンをタップすると、SDKは購入や復元を実行する代わりに onObserverPurchaseInitiated または onObserverRestoreInitiated イベントハンドラーを呼び出します。そこで独自のコードを使って購入・復元処理を行ってください。

ビューにオブザーバーモードのイベントハンドラーを設定します。他のプラットフォームとは異なり、リゾルバーオブジェクトは別途存在せず、ハンドラーは通常のイベントハンドラーの一部です。そのため、作成するすべてのビューに設定してください。

import { adapty, createFlowView } from '@adapty/capacitor';

const view = await createFlowView(flow);

const unsubscribe = await view.setEventHandlers({
  onObserverPurchaseInitiated(product, onStartPurchase, onFinishPurchase) {
    onStartPurchase(); // the view shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) =>
        adapty.reportTransaction({ transactionId, variationId: flow.variationId }),
      )
      .finally(() => onFinishPurchase()); // the view hides the loading indicator
    return false; // keep the flow open; dismiss it yourself after success
  },
  onObserverRestoreInitiated(onStartRestore, onFinishRestore) {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
    return false;
  },
});

onObserverPurchaseInitiated ハンドラーはユーザーが購入を開始したことを、onObserverRestoreInitiated はユーザーがリストアを開始したことをそれぞれ通知します。これらを受け取ったら、カスタムの購入またはリストアフローを実行してください。

また、購入やリストアの処理状況を AdaptyUI に通知するために、以下のコールバックも必ず呼び出してください。ローダーの表示など、フローが正しく動作するために必要です。

コールバック	説明
onStartPurchase()	購入が開始されたことを AdaptyUI に通知するために呼び出すコールバックです。
onFinishPurchase()	購入が完了したことを AdaptyUI に通知するために呼び出すコールバックです。
onStartRestore()	復元が開始されたことを AdaptyUI に通知するために呼び出すコールバックです。
onFinishRestore()	復元が完了したことを AdaptyUI に通知するために呼び出すコールバックです。

通常通りフロービューを表示します：フローを取得してビューを作成し、表示します。追加のパラメータは不要です — ハンドラーは SDK が observerMode: true で起動された場合にのみ実行されます。

トランザクションを報告してペイウォールと関連付けることを忘れないでください。これを行わないと、Adapty はトランザクションを認識できず、購入元のペイウォールを特定できません。