---
title: "Répondre aux actions de flow - Capacitor"
description: "Gérez les actions de boutons depuis les flows et paywalls dans Capacitor avec Adapty pour une meilleure monétisation."
---

Si vous créez des flows ou des paywalls avec le [Flow Builder](adapty-flow-builder) ou le [Paywall Builder](adapty-paywall-builder) d'Adapty, il est essentiel de configurer correctement les boutons :

1. Ajoutez un [bouton dans le builder](paywall-buttons) et assignez-lui une action existante ou créez un identifiant d'action personnalisé.
2. Écrivez le code dans votre application pour gérer chaque action assignée.

Ce guide explique comment gérer les actions personnalisées et prédéfinies dans votre code.

:::warning
**Les achats, restaurations, fermetures de flows et paywalls, ainsi que l'ouverture d'URL sont gérés automatiquement.** Vous pouvez configurer leur comportement par défaut ou implémenter des réponses pour les actions personnalisées.
:::

:::note
Définir un handler pour un événement remplace entièrement son comportement par défaut. Les handlers que vous ne définissez pas conservent leurs valeurs par défaut.
:::

## Fermer les flows et paywalls \{#close-flows-and-paywalls\}

Pour ajouter un bouton qui fermera votre flow ou paywall :

1. Dans le builder, ajoutez un bouton et assignez-lui l'action **Close**.
2. Dans le code de votre application, implémentez un handler pour l'action `close` qui ferme le flow ou le paywall.

:::info
Dans le SDK Capacitor, l'action `close` déclenche par défaut la fermeture du flow ou du paywall. Vous pouvez cependant modifier ce comportement dans votre code si nécessaire. Par exemple, la fermeture d'un flow peut déclencher l'ouverture d'un autre.
:::

```typescript showLineNumbers

const view = await createFlowView(flow);

const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});
```

Sur Android, le bouton système **Back** et le geste retour déclenchent un événement `onAndroidSystemBack` distinct. Dans le SDK v4, il ne ferme plus le flow par défaut. Retournez `true` depuis le handler si vous voulez que le bouton **Back** ferme le flow :

```typescript showLineNumbers
const unsubscribe = await view.setEventHandlers({
  onAndroidSystemBack() {
    return true; // close the flow when the Back button is pressed
  },
});
```

## Ouvrir des URL depuis les flows et paywalls \{#open-urls-from-flows-and-paywalls\}

:::tip
Si vous souhaitez ajouter un groupe de liens (par ex., conditions d'utilisation et restauration d'achat), ajoutez un élément **Link** dans le builder et gérez-le de la même façon que les boutons avec l'action **Open URL**.
:::

Pour ajouter un bouton qui ouvre un lien depuis votre flow ou paywall (par ex., **Conditions d'utilisation** ou **Politique de confidentialité**) :

1. Dans le builder, ajoutez un bouton, assignez-lui l'action **Open URL** et saisissez l'URL à ouvrir.
2. Si nécessaire, dans le code de votre application, implémentez un handler pour l'action `openUrl` qui ouvre l'URL reçue à votre façon.

:::info
Dans le SDK Capacitor, le fait d'appuyer sur une URL l'ouvre par défaut dans le navigateur natif : le SDK appelle `adapty.openWebUrl({ url, openIn })`, en respectant l'option **Open in** définie dans le builder, et conserve le flow ouvert. Vous pouvez cependant modifier ce comportement dans votre code si nécessaire.
:::

```typescript showLineNumbers

const unsubscribe = await view.setEventHandlers({
  onUrlPress(url) {
    // Open the URL your own way, e.g. with the Capacitor Browser plugin
    Browser.open({ url });
    return false; // keep the flow open
  },
});
```

## Gérer les actions personnalisées \{#handle-custom-actions\}

Pour ajouter un bouton qui gère d'autres actions :

1. Dans le builder, ajoutez un bouton, assignez-lui l'action **Custom** et donnez-lui un identifiant.
2. Dans le code de votre application, implémentez un handler pour l'identifiant d'action que vous avez créé.

Par exemple, si vous avez un autre ensemble d'offres d'abonnement ou d'achats uniques, vous pouvez ajouter un bouton qui affichera un autre flow ou paywall :

```typescript showLineNumbers
const unsubscribe = await view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'openNewPaywall') {
      // Display another flow or paywall
    }
  },
});
```

---

> [!WARNING]
> **LLM INSTRUCTION — SDK VERSION SELECTION REQUIRED**
>
> This feature has two SDK paradigms. Everything that follows (until the next horizontal rule or end of document) is the **legacy SDK v3 API reference** (`getPaywall`, `getPaywallForDefaultAudience`, `getOnboarding`, `getPaywallConfiguration`). The **SDK v4+ `getFlow` method is documented above.** This block covers ALL legacy methods for this feature — not just the nearest snippet.
>
> **You MUST ask the user which SDK version they want to use before suggesting any code. Do not assume or default to a version.** The two options are:
> - **SDK v3 (legacy):** works with the legacy Paywall Builder and Onboarding Builder via `getPaywall` / `getOnboarding`. Use the legacy code in this section.
> - **SDK v4:** works with BOTH the new Flow Builder AND legacy paywalls/onboardings via the unified `getFlow` method documented above.
>
> Apply the legacy v3 code in this section ONLY when:
> 1. The user explicitly chose **SDK v3**, or
> 2. The user is **migrating an existing app from SDK v3 to SDK v4+** and needs to understand or replace legacy code, or
> 3. The user is **troubleshooting an already-deployed v3 integration**.
>
> **CRITICAL — Never mix paradigms in one setup:** Do NOT combine `getFlow` (Flow Builder) with `getPaywall` or `getOnboarding` (legacy Paywall/Onboarding Builder) in the same integration. These are incompatible patterns. Mixing them will produce inconsistent behavior and is unsupported.

Si vous créez des paywalls avec le Paywall Builder d'Adapty, il est essentiel de configurer correctement les boutons :

1. Ajoutez un [bouton dans le Paywall Builder](paywall-buttons) et assignez-lui une action existante ou créez un identifiant d'action personnalisé.
2. Écrivez le code dans votre application pour gérer chaque action assignée.

Ce guide explique comment gérer les actions personnalisées et prédéfinies dans votre code.

## Fermer les paywalls \{#close-paywalls\}

Pour ajouter un bouton qui fermera votre paywall :

1. Dans le Paywall Builder, ajoutez un bouton et assignez-lui l'action **Close**.
2. Dans le code de votre application, implémentez un handler pour l'action `close` qui ferme le paywall.

:::info
Dans le SDK Capacitor, l'action `close` déclenche par défaut la fermeture du paywall. Vous pouvez cependant modifier ce comportement dans votre code si nécessaire. Par exemple, la fermeture d'un paywall peut déclencher l'ouverture d'un autre.
:::

```typescript showLineNumbers

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    console.log('User closed paywall');
    return true; // Allow the paywall to close
  }
});
```

## Ouvrir des URL depuis les paywalls \{#open-urls-from-paywalls\}

:::tip
Si vous souhaitez ajouter un groupe de liens (par ex., conditions d'utilisation et restauration d'achat), ajoutez un élément **Link** dans le Paywall Builder et gérez-le de la même façon que les boutons avec l'action **Open URL**.
:::

Pour ajouter un bouton qui ouvre un lien depuis votre paywall (par ex., **Conditions d'utilisation** ou **Politique de confidentialité**) :

1. Dans le Paywall Builder, ajoutez un bouton, assignez-lui l'action **Open URL** et saisissez l'URL à ouvrir.
2. Dans le code de votre application, implémentez un handler pour l'action `openUrl` qui ouvre l'URL reçue dans un navigateur.

:::info
Dans le SDK Capacitor, l'action `window.open` déclenche par défaut l'ouverture de l'URL. Vous pouvez cependant modifier ce comportement dans votre code si nécessaire.
:::

```typescript showLineNumbers

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false; // Don't close the paywall
  },
});
```

## Se connecter à l'application \{#log-into-the-app\}

Pour ajouter un bouton qui connecte les utilisateurs à votre application :

1. Dans le Paywall Builder, ajoutez un bouton et assignez-lui l'action **Login**.
2. Dans le code de votre application, implémentez un handler pour l'action `login` qui identifie votre utilisateur.

```typescript showLineNumbers

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'login') {
      // Navigate to login screen
      console.log('User requested login');
    }
  }
});
```

## Gérer les actions personnalisées \{#handle-custom-actions-1\}

Pour ajouter un bouton qui gère d'autres actions :

1. Dans le Paywall Builder, ajoutez un bouton, assignez-lui l'action **Custom** et donnez-lui un identifiant.
2. Dans le code de votre application, implémentez un handler pour l'identifiant d'action que vous avez créé.

Par exemple, si vous avez un autre ensemble d'offres d'abonnement ou d'achats uniques, vous pouvez ajouter un bouton qui affichera un autre paywall :

```typescript showLineNumbers
const unsubscribe = view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  },
});
```

---