CapacitorのSDKでFlowとPaywall Builderによる購入を有効にする

アプリ内課金を有効にするには、3つの重要な概念を理解する必要があります。

プロダクト – ユーザーが購入できるもの（サブスクリプション、消耗型アイテム、永続アクセス）
フロー – ノーコードのフロー＆ペイウォールビルダーで作成した、プロダクトをユーザーに提示する画面シーケンス。SDK は getFlow を通じて取得します。UI を自分のコードで構築したい場合は、フローの代わりにペイウォールを使用してください — ペイウォールを手動で実装するを参照。
プレースメント – アプリ内でフローを表示する場所とタイミング（main、onboarding、settings など）。ダッシュボードでフローをプレースメントに紐付け、コード内ではプレースメント ID で呼び出します。これにより、A/B テストの実施や、ユーザーごとに異なるフローの表示が簡単になります。

Adapty では、アプリに課金機能を実装する方法を3つ提供しています。アプリの要件に合わせて選択してください。

実装方法	複雑さ	使用する場面
Adapty フロー & ペイウォールビルダー	✅ 簡単	ノーコードビルダーで購入対応済みのフローを作成します。Adapty が自動的にレンダリングし、複雑な購入フロー、レシート検証、サブスクリプション管理をすべてバックグラウンドで処理します。
手動作成のペイウォール	🟡 普通	アプリのコードでペイウォール UI を実装しますが、プロダクト提供の柔軟性を維持するために Adapty からフローオブジェクトを取得します。ガイドをご覧ください。
オブザーバーモード	🔴 難しい	既存の購入処理インフラをそのまま使用したい場合に選択します。ただし、オブザーバーモードには Adapty での制限事項があります。記事をご覧ください。

Important

以下の手順は、Adapty フロー＆ペイウォールビルダーで作成したフローの実装方法を説明しています。

ペイウォールのUIを自分でビルドしたい場合は、ペイウォールを手動で実装するを参照してください。

Adapty フロー＆ペイウォールビルダーで作成したフローを表示するには、アプリのコードで以下の操作のみが必要です。

フローを取得する: Adapty からフローを取得します。
表示するだけで購入処理は Adapty が担当: アプリにビューを表示します。
ボタンのアクションを処理する: ユーザー操作に対するアプリの応答を関連付けます。たとえば、ユーザーがボタンをクリックしたときにリンクを開いたり、フローを閉じたりします。

始める前に

始める前に、以下の手順を完了してください：

Adapty ダッシュボードでアプリを App Store および/または Google Play に接続する。
Adapty でプロダクトを作成する。
フローを作成し、プロダクトを追加する。
プレースメントを作成し、フローを追加する。
アプリのコードに Adapty SDK をインストールして有効化する。このガイドでは Adapty Capacitor SDK v4 の API を使用します。

1. フローを取得する

フローは、ダッシュボードで設定されたプレースメントに紐づいています。プレースメントを使うと、異なるオーディエンスに対して異なるフローを表示したり、A/B テストを実施したりできます。

Adapty Flow & Paywall Builder で作成したフローを取得するには、getFlow メソッドを使ってプレースメント ID から flow オブジェクトを取得します。このフローには、表示に必要な UI 要素とスタイル情報が含まれています。


try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow
} catch (error) {
  // handle the error
}

2. フローを表示する

フローを取得したら、あとは数行追加するだけで表示できます。

createFlowView メソッドで view を作成し、イベントハンドラーを設定して、view.present() を呼び出します。各 view は一度しか使用できません。フローを再度表示する場合は、createFlowView をもう一度呼び出して新しい view インスタンスを作成してください。


try {
  const view = await createFlowView(flow);

  await view.setEventHandlers({
    onPurchaseCompleted(purchaseResult, product) {
      return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
    },
  });

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

Tip

フローの表示方法の詳細については、ガイドをご覧ください。

3. ボタンアクションの処理

ユーザーがフロー内のボタンをクリックすると、Capacitor SDK は購入、復元、フローのクローズ、URLのオープンを自動的に処理します。

ただし、カスタムまたは事前定義済みの ID を持つボタンについては、コード内でアクションを処理する必要があります。また、デフォルトの動作をオーバーライドしたい場合もあります。

たとえば、以下は閉じるボタンのデフォルトの動作です。コードに追加する必要はありませんが、必要な場合にどのように実装するかを確認できます。

const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Tip

ボタンのアクションとイベントの処理方法については、ガイドをご覧ください。

次のステップ

Tip

ご質問やお困りのことがあれば、サポートフォーラムをご覧ください。よくある質問への回答を見つけたり、ご自身の質問を投稿することができます。チームとコミュニティがサポートいたします！

ペイウォールをアプリに表示する準備ができました。App StoreのサンドボックスまたはGoogle Play Storeでテスト購入を行い、ペイウォールからのテスト購入が正常に完了することを確認してください。

次に、適切なユーザーにペイウォールを表示したり有料機能へのアクセスを付与したりするため、ユーザーのアクセスレベルを確認する必要があります。

完全な使用例

このガイドの全手順をアプリに統合する方法を以下に示します。


export async function showFlow() {
  try {
    const flow = await adapty.getFlow({
      placementId: 'YOUR_PLACEMENT_ID',
    });

    const view = await createFlowView(flow);

    await view.setEventHandlers({
      onCloseButtonPress() {
        return true;
      },
      onPurchaseCompleted(purchaseResult, product) {
        return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
      },
    });

    await view.present();
  } catch (error) {
    // handle any error that may occur during the process
    console.warn('Error showing flow:', error);
  }
}