Set up purchases

Your flow can display your available products and trigger in-app purchases:

  1. Add the store products to the Adapty Dashboard. Connect existing store products, or create new ones in Adapty and push them to the stores.
  2. Select products from your Dashboard and add them to a flow screen. Cards, variables, and actions on that screen can then use them.
  3. (Optional) Set up a group of product cards to present several purchase options.
  4. Add a Purchase action to a button, and set it up. The action target can be a specific product or the user-selected product.
  5. Later, use the Products panel to add, swap, or remove products across the flow. Users see the change when you publish the flow, without an app update.
Reframe your pricing in one sentence.

Ask the AI Editor to break the annual plan down to a daily cost, cross out the old price, or mark the best value. It restyles the product cards on this screen — never your catalog or prices.

Explore the AI Editor

Add products to a screen

Each screen has its own list of products. A card, a variable, or an action can only use a product from that list. The Products panel shows the list for every screen in the flow.

You can add products in the Products panel, or pick them as you configure an element. Both routes add the product to the screen’s list.

Add products in the Products panel

The panel adds a product to the screen’s list. Any element on the screen can then use it: a product card, a text variable, or an action. A text variable, for example, can show the price of a product that has no card.

To add a product to a screen:

  1. In the left sidebar, open the Products panel and click +.
  2. Screen shows the current screen. To add the product to a different screen, select the target here.
  3. Under Product, select a product from your Dashboard.
  4. (Optional) Under Offer, select the offer to sell the product with. See Add offer to flow.
  5. Click Add product.
Add product to screen dialog with the Product dropdown open, listing Monthly and Yearly with their access level and price

The Products panel lists the products you added, grouped by screen. An offer you pick here comes pre-selected on every card that later uses the product. Nothing in the flow changes until you assign the product to an element, or use it in an action.

Add products while configuring an element

When you pick a product in an element, the builder adds it to the screen’s list. This happens when you:

  • Assign a product to a product card.
  • Insert a product variable into a text element.
  • Set the Product of a Purchase action.

Each dropdown lists the products already added to this screen, followed by the rest of your catalog. A product picked with a different offer gets its own entry: the panel and the dropdowns show one entry per product/offer pair.

To set up the elements themselves, continue with Add product cards and Trigger a purchase.

Add product cards

To offer users a choice of products, add a Products element. It comes as a set of three product cards in a pre-set layout. The cards form a product group: the user selects one, and a Purchase action can then buy the selected product.

The set is the only way to get product cards or a product group. To end up with more or fewer cards, duplicate or delete some after adding the set.

Add a product group

  1. Open the Add element panel.

  2. Select the Products category.

  3. Choose a layout preset: Vertical List, Horizontal List, Feature Carousel, Feature Cards, or Banner List.

    Adding a Products element to the canvas

Configure a product card

For each card in the group:

  1. Select the card. In the Design tab, under Product, assign it a product. The products already added to this screen are in the Added section, followed by the rest of your catalog.

  2. Confirm the active offer. If you previously paired the product with an offer, that offer appears automatically. You can pick a different offer manually, but a product copy will appear in the Products panel as a result.

  3. To pre-select this card when the screen opens, select Set as default.

    Product dropdown of a product card open, with the screen's products under Added and the rest of the catalog under Other products
  4. (Optional) To show users which plan is picked, style the cards’ Selected states.

Important

A card with no product blocks publishing. So does an action or variable that still points at a product group you deleted: after you replace a group, point every action and variable at the new one.

Finish setting up the card with four optional features:

  • Dynamic price: Replace the placeholder price with the product’s price variable. The card then shows the store price in the user’s currency.
  • Offer terms: To spell out the offer details, use offer variables in the card’s text: offer_price, offer_billing_period, and offer_full_duration.
  • Badge: Place a badge that highlights a particular plan.
  • Anchor price: An Old Price element inside the card shows the real price multiplied by a factor you set, crossed out, so the real price reads as a discount. The currency and format always match the real price, and the number follows price changes.

Trigger a purchase

The Purchase action starts the store purchase of a product. You can attach it to any element in the flow, but buttons and product cards are the most common options.

Add a purchase button

To add a purchase button:

  1. Open the Add element panel.
  2. Choose a preset from the Button category.
  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.
Purchase action in the Interactions tab with the Product dropdown open, listing the selected-product variable, the screen's products under Added, and the rest under Other products

Trigger purchase from a product card

A product card can start the purchase itself, avoiding the need for a separate button. Add the Purchase action to each individual card instead.

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

Existing subscribers need a way to restore their previous purchases. Add a button with the Restore purchases action:

  • Use the Links preset in the Button category. It includes a row of three text buttons — Restore (pre-configured), Terms of use, and Privacy policy.

    Adding a restore button to the canvas
  • Add the Restore purchases action to another button.

    1. Select the button and open the Interactions tab.
    2. Click Add trigger > On tap, then click Add action.
    3. From the Action dropdown, select Restore purchases.
    Restore purchases action in the Interactions tab

The lack of a restore button does not prevent publishing, but can lead to store rejection. Use the flow-audit skill to identify any paywalls without restore functionality.

Change screen content based on the selected product

If a screen has product cards, you can show or hide other elements depending on which card 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
  3. Select On tap and click Add action.

  4. From the Action dropdown, select Show or Hide.

  5. Select the element to show or hide when that product is selected.

    Show/Hide action in the Interactions tab

Change the selected product from other elements

Users normally change the selected product by tapping a card. But another elements, such as the trial toggle, can use the Select product action to change the selection instead.

To set up the action:

  1. Select the element that should change the selection — a button, a toggle, or any other element. The card you target has to be on the same screen.
  2. Open the Interactions tab in the right panel and click Add trigger.
  3. Select the trigger and click Add action.
  4. From the Action dropdown, select Select product.
  5. Set Product to the product card the action should select.
Select product action in the Edit action window with the Product picker listing product cards

Manage flow products

The Products panel shows every product in the flow, grouped by screen.

  • The number next to the product name counts the product references on the screen: each card, each product variable in a text element, and each action.
  • The price on the right is the product’s base price. If an offer is attached, it includes the price both with and without the discount.
  • The default product(s) are listed in a separate section.
Products panel listing the products of two screens with usage counts, prices, offers, and the Default and Other sections

To add an entry, click + and follow the instructions in Add products in the Products panel.

Product actions

Open the product entry’s context menu to manage it:

Context menu of a product entry in the Products panel with the Replace in 2 places submenu open, listing the catalog products with access levels and prices
  • Set as default: Pre-selects this product’s card when the screen opens, same as the Set as default checkbox on the card. Only available for products with exactly one product card on the screen.
  • Replace in N places: Swaps the product in every card, text element, and action that uses it on this screen. The Offer field resets. If other screens use the same product and offer, the confirmation toast offers to repeat the change there.
  • Offer: Changes the offer for every use of the product on this screen. If the product exists on other screens, you can apply the change there, too. To preview what the screen looks like for users with different offer types, select Preview as in the same submenu.
  • Remove: Removes the product from the screen’s list. Cards and Purchase actions that used it instantly lose their product settings — replace the product before publishing. Text variables and conditions keep the reference and get a warning icon. Its tooltip reads This product is off this screen until you add the product back, replace the reference, or delete the text.
  • Missing: A product or offer deleted in your Dashboard keeps its entry, marked Missing, with its usage count. Only Replace in N places and Remove stay available, and every remaining use blocks publishing.

Product troubleshooting

The following issues with products and offers block publishing:

  • A product card or Purchase action without a linked product. Link a product, or delete the card/action.
  • A product or offer missing from your Dashboard. Occurs if you add a product to a flow, but then delete it from your Adapty account. Find the Missing product entry in the Products panel, and replace all occurrences with an existing product.
  • An offer variable used with a product that has no offer. Set an offer for the product in the Products panel, or delete the variable.
  • A text variable or condition still uses a product you removed in the Products panel. Add the product back with +, or change the reference.

You can still save the flow with the issue present: iterate until publishing succeeds.