---
title: "購入を設定する"
description: "フロービルダーで画面にプロダクトを割り当て、プロダクト要素を追加し、購入ボタンを設定します。"
---

画面上で購入を設定するには、購入ボタンを追加して **Purchase** アクションを設定します。このアクションは、特定のプロダクトを対象にすることも、画面上の Products 要素からユーザーが選択したプロダクトを対象にすることもできます。

## プロダクトを追加する \{#add-products\}

プロダクト要素は、キャンバス上にプロダクトを表示するビジュアルカードです。

プロダクト要素を追加するには:

1. キャンバス上で、対象の画面の **+** をクリックします。
2. **Products** を選択します。
3. レイアウトプリセットを選択します: 縦リスト、横リスト、フィーチャーカルーセル、フィーチャーカード、バナーリスト、ボトムシート。

   

4. 各プロダクトカードを選択し、**Design** パネルのドロップダウンからプロダクトを割り当てます。

   :::important
   プロダクトが割り当てられていないプロダクト要素は、[プレビューと公開をブロックします](builder-save-publish#troubleshooting)。プロダクトを割り当てるか、要素を削除してください。
   :::

   

:::note
プロダクトカードの **On tap** インタラクションに直接 **Purchase** アクションを設定することもできます。その場合、カードをタップすると購入がトリガーされ、別途購入ボタンを用意する必要はありません。
:::

## 購入ボタンを追加する \{#add-a-purchase-button\}

購入ボタンは、ユーザーがタップすると **Purchase** アクションをトリガーします。

購入ボタンを追加するには:

1. キャンバス上で、画面の **+** をクリックします。
2. **Button** を選択し、ボタンのプリセットを選択します。
3. ボタンを選択した状態で、右パネルの **Interactions** タブを開きます。
4. **Add trigger** > **On tap** をクリックし、**Add action** をクリックします。
5. **Action** を **Purchase** に設定し、**Product** を次のいずれかに設定します:
   - `products.selectedProduct`: 画面上の Products 要素からユーザーが選択したプロダクトを購入します。
   - 特定のプロダクト: 画面上での選択に関わらず、常にそのプロダクトを購入します。

### ボタンに価格を表示する \{#show-the-price-on-the-button\}

選択したプロダクトの価格をボタンのラベルに挿入するには、変数を使います:

1. ボタンを選択した状態で、右パネルの **Design** タブを開きます。
2. **Content** フィールドで、価格を表示したい位置にカーソルを置きます。
3. 変数アイコンをクリックし、`products.selectedProduct` を選択してから `prod_price` 属性を選択します。変数全体は `products.selectedProduct.prod_price` になります。
4. 変数の前後に固定テキストを追加します（例: `Subscribe for {prod_price}`）。

ユーザーが異なるプロダクトを選択するたびに、ラベルが更新されます。

## 購入を復元する \{#restore-purchases\}

ユーザーが過去の購入を復元できるようにするには、画面に復元ボタンまたはリンクを追加します。

購入復元要素を追加するには:

1. キャンバス上で、画面の **+** をクリックします。
2. **Button** を選択し、テキストリンクの場合は **Links** を、スタイル付きボタンの場合はその他のボタンタイプを選択します。

3. 要素を選択した状態で、右パネルの **Interactions** タブを開き、**Add trigger** をクリックします。
4. **On tap** を選択し、**Add action** をクリックします。
5. **Action** ドロップダウンから **Restore purchases** を選択します。

## 選択したプロダクトに応じて追加要素を表示する \{#display-additional-elements-based-on-the-selected-product\}

画面にプロダクトがある場合、ユーザーが選択したプロダクトに応じて他の要素の表示・非表示を切り替えることができます。

条件付き表示を設定するには:

1. **Products** 要素でプロダクトカードを選択します。
2. 右パネルの **Interactions** タブを開き、**Add trigger** をクリックします。

3. **On tap** を選択し、**Add action** をクリックします。
4. **Action** ドロップダウンから **Show** または **Hide** を選択します。
5. そのプロダクトが選択されたときに表示・非表示にする要素を選択します。

## フロー内のプロダクトを確認する \{#review-products-in-flow\}

左サイドバーの **Products** パネルには、フロー内の各画面に紐付いた既存プロダクトが表示されます。

各画面には2つのセクションがあります:

- **Default** — 画面が読み込まれたときにあらかじめ選択されている1つのプロダクト。
- **Other** — 同じ画面で利用可能な追加プロダクト。