Merge branch 'flow-builder' into develop

Author: eandreeva-twr

src/content/docs/version-3.0/paywall-product-block.mdx

@@ -6,14 +6,9 @@ metadataTitle: "Set up purchases | Flow Builder | Adapty Docs"
 
 import ZoomImage from '@site/src/components/ZoomImage';
 
-Setting up purchases requires two steps. Both must be in place before users can make a purchase.
+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.
 
-1. [Add product elements](#2-add-product-elements)
-2. [Add a purchase button](#3-add-a-purchase-button)
-
-## Set up purchases
-
-### 1. Add product elements
+## Add products
 
 A product element is a visual card that displays a product on the canvas.
 
@@ -25,32 +20,43 @@ To add a product element:
 
 <ZoomImage id="product-element.webp" width="500px" alt="Adding a product element to the canvas" />
 
-4. When the element is placed:
-
-- If products are already assigned to the screen, the first available product is selected by default, following the order in the Products panel. You can change this.
-- If no products are assigned yet, select each product card and assign it a product in the dropdown in the **Design** panel.
+4. Select each product card and assign it a product in the dropdown in the **Design** panel.
 
 <ZoomImage id="product-card.webp" width="500px" alt="Adding a product element to the canvas" />
 
-#### Product card rules
+:::note
+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.
+:::
 
-- Product cards cannot be nested inside a selectable element.
-- If a Products group contains only one card, the card is no longer selectable and the Selected state is removed.
+## Add a purchase button
 
-### 2. Add a purchase button
-
-Products work only when the screen also has a purchase button with a configured Purchase action.
+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** and **Product** to `products.selectedProduct`. The `products.selectedProduct` variable always resolves to the currently selected product on the screen.
+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.
 
 <ZoomImage id="flow-purchase-button.webp" width="500px" alt="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.
+
+<ZoomImage id="plans-bottom-sheet-main-button-var.webp" width="500px" alt="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.