---
title: "React Native SDKでFlow Builderを使ってアプリ内課金を有効にする"
description: "Adapty Flow Builderでアプリ内課金を有効にするクイックスタートガイド。"
---

アプリ内課金を有効にするには、3つの主要な概念を理解する必要があります：
- [**プロダクト**](product) – ユーザーが購入できるもの（サブスクリプション、消耗型アイテム、永続アクセス）
- [**フロー**](adapty-flow-builder) – ノーコードのフロービルダーで作成した、プロダクトをユーザーに提示するための画面シーケンス。SDK は `getFlow` で取得します。自分のコードで UI を構築したい場合は、ペイウォールを使ってください — 詳細は[ペイウォールを手動で実装する](react-native-quickstart-manual)を参照してください。
- [**プレースメント**](placements) – アプリ内でフローを表示する場所とタイミング（`main`、`onboarding`、`settings` など）。ダッシュボードでフローをプレースメントに紐付けておき、コード内でプレースメント ID を指定してリクエストします。これにより、A/B テストの実施や、ユーザーごとに異なるフローの表示が簡単に行えます。
Adapty では、アプリ内で購入を有効にする方法を3つ提供しています。アプリの要件に応じていずれかを選択してください。
| 実装方法 | 複雑さ | 使用する場合 |
|---|---|---|
| Adapty フロービルダー | ✅ 簡単 | [ノーコードビルダーで購入対応済みの完全なフローを作成](quickstart-paywalls)します。Adapty が自動的にレンダリングし、複雑な購入フロー、レシート検証、サブスクリプション管理をすべて裏側で処理します。 |
| 手動で作成したペイウォール | 🟡 中程度 | アプリのコードでペイウォール UI を実装しますが、プロダクトの柔軟性を保つために Adapty からフローオブジェクトを取得します。[ガイド](react-native-quickstart-manual)をご覧ください。 |
| オブザーバーモード | 🔴 難しい | すでに独自の購入処理インフラを持っており、それを引き続き使用したい場合に選択します。オブザーバーモードには Adapty における制限があることに注意してください。[こちらの記事](observer-vs-full-mode)をご覧ください。 |
:::important
**以下の手順では、Adapty フロービルダーで作成したフローの実装方法を説明します。**

ペイウォール UI を自分で実装したい場合は、[ペイウォールを手動で実装する](react-native-quickstart-manual)をご覧ください。
:::

Adapty フロービルダーで作成したフローを表示するには、アプリのコードで以下を行うだけです。

1. **フローを取得する**: Adapty からフローを取得します。
2. **フローを表示する（購入処理は Adapty が担います）**: アプリにビューを表示します。
3. **ボタンのアクションを処理する**: ユーザーの操作に対するアプリの反応を関連付けます。たとえば、リンクを開いたり、ユーザーがボタンをタップしたときにフローを閉じたりします。
## 始める前に \{#before-you-start\}

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

1. Adapty ダッシュボードで[App Store](initial_ios)および/または[Google Play](initial-android)にアプリを接続します。
2. Adaptyで[プロダクトを作成](create-product)します。
3. [ペイウォールを作成してプロダクトを追加](create-paywall)します。
4. [プレースメントを作成してペイウォールを追加](create-placement)します。
5. アプリコードに[Adapty SDKをインストールして有効化](sdk-installation-reactnative)します。

:::tip
これらの手順を最速で完了するには、[クイックスタートガイド](quickstart)に従うか、[Developer CLI](developer-cli-quickstart)を使ってペイウォールとプレースメントを作成してください。
:::

## 1. フローを取得する \{#1-get-the-flow\}

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

Adapty フロービルダーで作成したフローを取得するには、`getFlow` メソッドを使って[プレースメント](placements) ID から `flow` オブジェクトを取得します。フローには表示に必要な UI 要素とスタイリング情報が含まれています。
```typescript showLineNumbers title="React Native"

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

## 2. フローを表示する \{#display-the-flow\}

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

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React コンポーネント" default>

既存のコンポーネントツリー内にフローを埋め込むには、React Native コンポーネント階層に `AdaptyFlowView` コンポーネントを直接使用します。
```typescript showLineNumbers title="React Native (TSX)"

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

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

</TabItem>
<TabItem value="standalone" label="Modal presentation">

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

try {
  const view = await createFlowView(flow);

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

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

</TabItem>
</Tabs>

:::tip
フローの表示方法の詳細については、[ガイド](react-native-present-paywalls)をご覧ください。
:::
## 3. ボタンアクションの処理 \{#handle-button-actions\}

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

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

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

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>
React コンポーネントでは、`AdaptyFlowView` コンポーネント内で直接アクションを処理します:
```typescript showLineNumbers title="React Native (TSX)"

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}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="モーダル表示">

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

```typescript showLineNumbers title="React Native"
const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});
```

</TabItem>
</Tabs>

:::tip
ボタンの[アクション](react-native-handle-paywall-actions)と[イベント](react-native-handling-events-1)の処理方法については、ガイドをご覧ください。
:::
## 次のステップ \{#next-steps\}

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

これでアプリにペイウォールを表示する準備が整いました。[App Store サンドボックス](test-purchases-in-sandbox)または[Google Play Store](testing-on-android)でテスト購入を行い、ペイウォールからテスト購入を完了できることを確認してください。

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

## 完全な例 \{#full-example\}

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

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>
```javascript showLineNumbers title="React Native (TSX)"

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>
  );
}
```

</TabItem>
<TabItem value="standalone" label="モーダル表示">
```javascript showLineNumbers title="React Native"

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>
  );
}
```

</TabItem>
</Tabs>