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

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

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

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

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

   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 に通知するために呼び出すコールバックです。

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