---
title: "Configurer les achats"
description: "Assignez des produits aux écrans, ajoutez des éléments de produit et connectez un bouton d'achat dans le Flow Builder."
---

Pour configurer les achats sur un écran, ajoutez un bouton d'achat et configurez son action **Purchase**. Cette action peut cibler un produit spécifique ou celui que l'utilisateur sélectionne depuis un élément Products sur l'écran.

<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/LLIZCd94PlE?si=t_8BitA1FBpbd8ue"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>

## Ajouter des produits \{#add-products\}

Un élément de produit est une carte visuelle qui affiche un produit sur le canevas.

Pour ajouter un élément de produit :

1. Sur le canevas, cliquez sur **+** sur l'écran cible.
2. Sélectionnez **Products**.
3. Choisissez une disposition prédéfinie : liste verticale, liste horizontale, carrousel de fonctionnalités, cartes de fonctionnalités, liste en bannière ou feuille du bas.

   

4. Sélectionnez chaque carte de produit et assignez-lui un produit dans le menu déroulant du panneau **Design**.

   :::important
   Un élément de produit sans produit associé [bloque l'aperçu et la publication](builder-save-publish#troubleshooting). Assignez un produit ou supprimez l'élément.
   :::

   

Pour afficher un prix d'ancrage barré sur une carte, ajoutez un [élément Old Price](onboarding-text#add-an-old-price) à l'intérieur.

:::note
Vous pouvez également associer une action **Purchase** directement à l'interaction **On tap** d'une carte de produit. En appuyant sur la carte, l'achat se déclenche sans avoir besoin d'un bouton d'achat séparé.
:::

:::important
Si vous supprimez un groupe de produits et le remplacez par un nouveau, vérifiez que chaque action et variable cible le nouveau groupe. Les références pointant toujours vers le groupe supprimé [bloquent l'aperçu et la publication](builder-save-publish#troubleshooting).
:::

## Ajouter un bouton d'achat \{#add-a-purchase-button\}

Un bouton d'achat déclenche une action **Purchase** lorsque l'utilisateur appuie dessus.

Pour ajouter un bouton d'achat :

1. Sur le canevas, cliquez sur **+** sur l'écran.
2. Sélectionnez **Button** et choisissez un style de bouton prédéfini.
3. Avec le bouton sélectionné, ouvrez l'onglet **Interactions** dans le panneau de droite.
4. Cliquez sur **Add trigger** > **On tap**, puis cliquez sur **Add action**.
5. Définissez **Action** sur **Purchase**, puis définissez **Product** sur l'une des options suivantes :
   - `products.selectedProduct` : achète le produit que l'utilisateur a sélectionné depuis un élément Products sur l'écran.
   - Un produit spécifique : achète toujours ce produit, quelle que soit la sélection sur l'écran.

### Afficher le prix sur le bouton \{#show-the-price-on-the-button\}

Pour insérer le prix du produit sélectionné dans le libellé du bouton, utilisez une variable :

1. Avec le bouton sélectionné, ouvrez l'onglet **Design** dans le panneau de droite.
2. Dans le champ **Content**, placez le curseur à l'endroit où le prix doit apparaître.
3. Cliquez sur l'icône de variable, sélectionnez `products.selectedProduct`, puis l'attribut `prod_price`. La variable complète devient `products.selectedProduct.prod_price`.
4. Ajoutez du texte statique autour de la variable — par exemple, `Subscribe for {prod_price}`.

Le libellé se met à jour lorsque l'utilisateur sélectionne différents produits.

## Restaurer les achats \{#restore-purchases\}

Pour permettre aux utilisateurs de restaurer leurs achats précédents, ajoutez un bouton ou un lien de restauration à l'écran.

Pour ajouter un élément de restauration des achats :

1. Sur le canevas, cliquez sur **+** sur l'écran.
2. Sélectionnez **Button**, puis choisissez **Links** pour un lien textuel ou tout autre type de bouton pour un bouton stylisé.

3. Avec l'élément sélectionné, ouvrez l'onglet **Interactions** dans le panneau de droite et cliquez sur **Add trigger**.
4. Sélectionnez **On tap** et cliquez sur **Add action**.
5. Dans le menu déroulant **Action**, sélectionnez **Restore purchases**.

## Afficher des éléments supplémentaires selon le produit sélectionné \{#display-additional-elements-based-on-the-selected-product\}

Si un écran contient des produits, vous pouvez afficher ou masquer d'autres éléments selon le produit que l'utilisateur sélectionne.

Pour configurer la visibilité conditionnelle :

1. Dans l'élément **Products**, sélectionnez une carte de produit.
2. Ouvrez l'onglet **Interactions** dans le panneau de droite et cliquez sur **Add trigger**.

3. Sélectionnez **On tap** et cliquez sur **Add action**.
4. Dans le menu déroulant **Action**, sélectionnez **Show** ou **Hide**.
5. Sélectionnez l'élément à afficher ou masquer lorsque ce produit est sélectionné.

## Consulter les produits dans le flow \{#review-products-in-flow\}

Le panneau **Products** dans la barre latérale gauche répertorie les produits existants pour chaque écran du flow.

Chaque écran comporte deux sections :

- **Default** — un produit, présélectionné au chargement de l'écran.
- **Other** — produits supplémentaires disponibles sur le même écran.