要在界面上设置购买，请添加购买按钮并配置其 Purchase 操作。该操作可以针对特定产品，也可以针对用户在界面上的产品元素中所选择的产品。

添加产品

产品元素是在画布上展示产品的可视化卡片。

添加产品元素的步骤：

1. 在画布上，点击目标屏幕上的 +。

2. 选择 Products。

3. 选择一种布局预设：垂直列表、水平列表、功能轮播、功能卡片、横幅列表或底部弹窗。

   

4. 选中每张产品卡片，在 Design 面板的下拉菜单中为其分配对应的产品。

添加购买按钮

购买按钮会在用户点击时触发购买操作。

添加购买按钮的步骤：

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 面板将现有产品映射到流程中的每个屏幕。

每个屏幕包含两个部分：

• Default — 单个产品，在屏幕加载时默认选中。
• Other — 同一屏幕上可选的其他产品。