React Native SDKでFlowとペイウォールビルダーを使ってアプリ内課金を有効にする

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

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

Adapty では、アプリ内で購入を有効にする方法を3つ提供しています。アプリの要件に応じていずれかを選択してください。

実装方法	複雑さ	使用タイミング
Adapty フロー & ペイウォールビルダー	✅ 簡単	ノーコードビルダーで購入対応済みのフローまたはペイウォールを作成します。Adapty が自動的にレンダリングし、複雑な購入ロジック、レシート検証、サブスクリプション管理をすべてバックグラウンドで処理します。
カスタムペイウォール	🟡 中程度	アプリのコードでペイウォール UI を実装しつつ、プロダクトラインナップの柔軟性を維持するために Adapty からフローオブジェクトを取得します。ガイドを参照してください。
オブザーバーモード	🔴 難しい	独自の購入処理インフラをすでに持っており、そのまま使い続けたい場合に使用します。オブザーバーモードには Adapty における制限があることにご注意ください。記事を参照してください。

Important

以下の手順は、Adapty Flow & Paywall Builderで作成したフローまたはペイウォールを実装する方法を示しています。

ペイウォールのUIを自分でビルドしたい場合は、カスタムペイウォールの実装を参照してください。

Adapty Flow & Paywall Builderで作成したフローまたはペイウォールをアプリ内に表示するには、アプリのコードで次の操作を行うだけです：

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

始める前に

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

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

1. フローまたはペイウォールを取得する

フローとペイウォールは、ダッシュボードで設定されたプレースメントに関連付けられています。プレースメントを使用すると、異なるオーディエンスに対して異なるフローやペイウォールを表示したり、A/B テストを実施したりすることができます。

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


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

2. フローまたはペイウォールを表示する

フローが用意できたら、あとは数行追加するだけで表示できます。

既存のコンポーネントツリーにフローを組み込むには、React Native のコンポーネント階層に AdaptyFlowView コンポーネントを直接配置します。


function MyFlow({ flow }) {
  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onPurchaseCompleted={onPurchaseCompleted}
    />
  );
}

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


try {
  const view = await createFlowView(flow);

  view.setEventHandlers({
    onPurchaseCompleted(result, product) {
      return result.type !== 'user_cancelled';
    },
  });

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

Tip

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

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

フローやペイウォールでユーザーがボタンをクリックすると、React Native SDK は購入、復元、画面を閉じる操作、URL を開く操作を自動的に処理します。

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

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

React コンポーネントでは、AdaptyFlowView コンポーネント内で直接アクションを処理します:


function MyFlow({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true, // allow the flow to close
    [],
  );
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>(
    (actionId) => false,
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}

モーダル表示の場合、setEventHandlers を使用してイベントハンドラーを実装します：

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

Tip

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

次のステップ

Tip

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

フローまたはペイウォールをアプリで表示する準備ができました。購入のテストを行い、フローからテスト購入を完了できることを確認しましょう。

次に、ユーザーのアクセスレベルを確認して、適切なユーザーにペイウォールを表示したり、有料機能へのアクセスを付与したりできるようにしましょう。

完全な例

このガイドのすべてのステップをアプリにまとめて統合する方法を紹介します。


export default function FlowScreen() {
  const [flow, setFlow] = useState(null);

  const loadFlow = async () => {
    try {
      const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID');
      setFlow(flowData);
    } catch (error) {
      console.warn('Error loading flow:', error);
    }
  };

  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true,
    [],
  );

  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  useEffect(() => {
    loadFlow();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {flow ? (
        <AdaptyFlowView
          flow={flow}
          style={{ flex: 1 }}
          onCloseButtonPress={onCloseButtonPress}
          onPurchaseCompleted={onPurchaseCompleted}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Flow" onPress={loadFlow} />
        </View>
      )}
    </View>
  );
}


export default function FlowScreen() {
  const showFlow = async () => {
    try {
      const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');

      const view = await createFlowView(flow);

      view.setEventHandlers({
        onCloseButtonPress() {
          return true;
        },
        onPurchaseCompleted(result, product) {
          return result.type !== 'user_cancelled';
        },
      });

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

  // you can add a button to manually trigger the flow for testing purposes
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Flow" onPress={showFlow} />
    </View>
  );
}