Set up purchases

To set up purchases on a screen, add a purchase button and configure its Purchase action. The action can target a specific product or whichever product the user selects from a Products element on the screen.

Add products

A product element is a visual card that displays a product on the canvas.

To add a product element:

  1. On the canvas, click + on the target screen.

  2. Select Products.

  3. Choose a layout preset: vertical list, horizontal list, feature carousel, feature cards, banner list, or bottom sheet.

    Adding a product element to the canvas

  4. Select each product card and assign it a product in the dropdown in the Design panel.

    A product element without an attached product blocks previewing and publishing. Assign a product or delete the element.

    Adding a product element to the canvas

You can also attach a Purchase action directly to a product card’s On tap interaction. Tapping the card then triggers the purchase, with no need for a separate purchase button.

Add a purchase button

A purchase button triggers a Purchase action when the user taps it.

To add a purchase button:

  1. On the canvas, click + on the screen.
  2. Select Button and choose a button preset.
  3. With the button selected, open the Interactions tab in the right panel.
  4. Click Add trigger > On tap, then click Add action.
  5. Set Action to Purchase, then set Product to one of:
    • products.selectedProduct: Buys whichever product the user has selected from a Products element on the screen.
    • A specific product: Always buys that product, regardless of any selection on the screen.
Adding a purchase button to the canvas

Show the price on the button

To insert the selected product’s price into the button label, use a variable:

  1. With the button selected, open the Design tab in the right panel.
  2. In the Content field, place the cursor where the price should appear.
  3. Click the variable icon, pick products.selectedProduct, then pick the prod_price attribute. The full variable resolves to products.selectedProduct.prod_price.
  4. Add static text around the variable — for example, Subscribe for {prod_price}.

The label updates as the user selects different products.

Purchase button with the selected product's price variable in the label

Restore purchases

To let users restore previous purchases, add a restore button or link to the screen.

To add a restore purchases element:

  1. On the canvas, click + on the screen.
  2. Select Button, then choose Links for a text link or any other button type for a styled button.
Adding a restore button to the canvas
  1. With the element selected, open the Interactions tab in the right panel and click Add trigger.
  2. Select On tap and click Add action.
  3. From the Action dropdown, select Restore purchases.
Restore purchases action in the Interactions tab

Display additional elements based on the selected product

If a screen has products on it, you can show or hide other elements depending on which product the user selects.

To set up conditional visibility:

  1. In the Products element, select a product card.
  2. Open the Interactions tab in the right panel and click Add trigger.
Adding a trigger to a product card
  1. Select On tap and click Add action.
  2. From the Action dropdown, select Show or Hide.
  3. Select the element to show or hide when that product is selected.
Show/Hide action in the Interactions tab

Review products in flow

The Products panel in the left sidebar maps existing products to each screen in the flow.

Each screen has two sections:

  • Default — one product, pre-selected when the screen loads.
  • Other — additional products available on the same screen.
Products panel in the Flow Builder