Afficher les flows et les paywalls - Capacitor

Si vous avez créé un flow ou un paywall dans le Flow Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre app mobile pour l’afficher à l’utilisateur. Un tel flow contient à la fois ce qui doit être affiché et la façon dont cela doit l’être.

Avant de commencer, assurez-vous que :

1. Vous avez créé un flow ou un paywall.
2. Vous l’avez ajouté à un placement.
3. Vous avez récupéré le flow et préparé la vue.

Pour afficher un flow ou un paywall en tant qu’écran autonome, utilisez la méthode view.present() sur la view créée par la méthode createFlowView. Chaque view ne peut être utilisée qu’une seule fois. Si vous devez afficher le flow à nouveau, appelez createFlowView une nouvelle fois pour créer une nouvelle instance de view.

const view = await createFlowView(flow);

// Optional: handle flow events (close, purchase, restore, etc)
// await view.setEventHandlers({ ... });

try {
  await view.present();
} catch (error) {
  // handle the error
}

Configurer le style de présentation iOS

Configurez la façon dont le flow est présenté sur iOS en passant le paramètre iosPresentationStyle à la méthode present(). Le paramètre accepte les valeurs 'full_screen' (par défaut) ou 'page_sheet'. Sur Android, les flows sont toujours affichés en plein écran.

try {
  await view.present({ iosPresentationStyle: 'page_sheet' });
} catch (error) {
  // handle the error
}

Utiliser un timer défini par le développeur

Pour utiliser des timers définis par le développeur dans votre app mobile, utilisez le timerId, dans cet exemple CUSTOM_TIMER_NY, le Timer ID du timer défini par le développeur que vous avez configuré dans le tableau de bord Adapty. Cela garantit que votre app met à jour dynamiquement le timer avec la valeur correcte — par exemple 13j 09h 03m 34s (calculée comme l’heure de fin du timer, telle que le Jour de l’An, moins l’heure actuelle).

const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createFlowView(flow, { customTimers });

Dans cet exemple, CUSTOM_TIMER_NY est le Timer ID du timer défini par le développeur que vous avez configuré dans le tableau de bord Adapty. Le timer garantit que votre app met à jour dynamiquement le timer avec la valeur correcte — par exemple 13j 09h 03m 34s (calculée comme l’heure de fin du timer, telle que le Jour de l’An, moins l’heure actuelle).

Afficher une boîte de dialogue

Utilisez cette méthode à la place des boîtes de dialogue d’alerte natives lorsqu’une vue de flow est présentée sur Android. Sur Android, les alertes classiques apparaissent derrière la vue du flow, ce qui les rend invisibles pour les utilisateurs. Cette méthode garantit un affichage correct de la boîte de dialogue au-dessus du flow sur toutes les plateformes.

try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });

  if (action === 'secondary') {
    // User confirmed - close the flow
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

Remplacer un abonnement par un autre

Lorsqu’un utilisateur tente d’acheter un nouvel abonnement alors qu’un autre abonnement est actif sur Android, vous pouvez contrôler la façon dont le nouvel achat doit être traité en passant des paramètres de mise à jour d’abonnement lors de la création de la vue du flow. Pour remplacer l’abonnement actuel par le nouveau, utilisez productPurchaseParams dans createFlowView avec les paramètres oldSubVendorProductId et prorationMode.

const productPurchaseParams = flow.paywalls
  .flatMap((paywall) => paywall.productIdentifiers)
  .map((productId) => {
    const params: MakePurchaseParamsInput = {};
    if (Capacitor.getPlatform() === 'android') {
      params.android = {
        subscriptionUpdateParams: {
          oldSubVendorProductId: 'PRODUCT_ID_OF_THE_CURRENT_ACTIVE_SUBSCRIPTION',
          prorationMode: 'with_time_proration',
        },
      };
    }
    return { productId, params };
  });

const view = await createFlowView(flow, { productPurchaseParams });

Si vous avez personnalisé un paywall à l’aide du Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre app mobile pour l’afficher à l’utilisateur. Un tel paywall contient à la fois ce qui doit être affiché et la façon dont cela doit l’être.

Pour afficher un paywall, utilisez la méthode view.present() sur la view créée par la méthode createPaywallView. Chaque view ne peut être utilisée qu’une seule fois. Si vous devez afficher le paywall à nouveau, appelez createPaywallView une nouvelle fois pour créer une nouvelle instance de view.

const view = await createPaywallView(paywall);

view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false;
  },
});

try {
  await view.present();
} catch (error) {
  // handle the error
}

Utiliser un timer défini par le développeur

Pour utiliser des timers définis par le développeur dans votre app mobile, utilisez le timerId, dans cet exemple CUSTOM_TIMER_NY, le Timer ID du timer défini par le développeur que vous avez configuré dans le tableau de bord Adapty. Cela garantit que votre app met à jour dynamiquement le timer avec la valeur correcte — par exemple 13j 09h 03m 34s (calculée comme l’heure de fin du timer, telle que le Jour de l’An, moins l’heure actuelle).

const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createPaywallView(paywall, { customTimers });

Dans cet exemple, CUSTOM_TIMER_NY est le Timer ID du timer défini par le développeur que vous avez configuré dans le tableau de bord Adapty. Le timer garantit que votre app met à jour dynamiquement le timer avec la valeur correcte — par exemple 13j 09h 03m 34s (calculée comme l’heure de fin du timer, telle que le Jour de l’An, moins l’heure actuelle).

Afficher une boîte de dialogue

Utilisez cette méthode à la place des boîtes de dialogue d’alerte natives lorsqu’une vue de paywall est présentée sur Android. Sur Android, les alertes classiques apparaissent derrière la vue du paywall, ce qui les rend invisibles pour les utilisateurs. Cette méthode garantit un affichage correct de la boîte de dialogue au-dessus du paywall sur toutes les plateformes.

try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });

  if (action === 'secondary') {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

Configurer le style de présentation iOS

Configurez la façon dont le paywall est présenté sur iOS en passant le paramètre iosPresentationStyle à la méthode present(). Le paramètre accepte les valeurs 'full_screen' (par défaut) ou 'page_sheet'.

await view.present({ iosPresentationStyle: 'page_sheet' });