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

プロダクトを追加する

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

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

1. キャンバス上で、対象の画面の + をクリックします。

2. Products を選択します。

3. レイアウトプリセットを選択します: 縦リスト、横リスト、フィーチャーカルーセル、フィーチャーカード、バナーリスト、ボトムシート。

   

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

   プロダクトが割り当てられていないプロダクト要素は、プレビューと公開をブロックします。プロダクトを割り当てるか、要素を削除してください。

   

購入ボタンを追加する

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

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

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

ボタンに価格を表示する

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

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

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

購入を復元する

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

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

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

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

選択したプロダクトに応じて追加要素を表示する

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

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

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

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

フロー内のプロダクトを確認する

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

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

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