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

Observerモードを使用する場合、購入ロジックはご自身で管理する必要があります。ただし、ペイウォールのUIはフロー＆ペイウォールビルダーに委任できます。

フローはビルダーでデザインし、Adapty SDK がネイティブにレンダリングします。コピー、レイアウト、価格はいつでも更新でき、アプリのリリースは不要です。

このガイドでは、フローを表示して购入コールバックを処理する方法を説明します。Adapty が購入を代わりに処理する場合は、フローとペイウォールの表示を参照してください。

始める前に

準備するもの：

• Adapty Capacitor SDK 4.1以降: それより古いバージョンではフローをレンダリングできません。既存のアプリを移行する場合は、移行ガイドをご覧ください。
• observerModeをtrueに設定: Capacitor SDKインストールガイドをご覧ください。
• ストアの初期連携: App StoreおよびGoogle PlayでAdaptyをセットアップしてください。
• プロダクトを含む公開済みフロー: フロー＆ペイウォールビルダーで作成し、プロダクトを割り当ててください。
• フローのプレースメント: プレースメントを作成し、フローを割り当ててください。
• アプリでのフローの取得: フローを表示する前に、フローとその設定を取得してください。

実装

Observer モードでは、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 に通知するために、以下のコールバックを必ず呼び出してください。これは、ローダーの表示など、適切なフロー動作に必要です。

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