Afficher les flows et paywalls - Capacitor

Si vous avez créé un flow, ou un paywall dans l’ancien Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel flow contient à la fois ce qui doit y être affiché et comment il 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(). Ce 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 minuteur défini par le développeur

Pour utiliser des minuteurs définis par le développeur dans votre application mobile, utilisez le timerId, dans cet exemple CUSTOM_TIMER_NY, le Timer ID du minuteur défini par le développeur que vous avez configuré dans l’Adapty dashboard. Cela permet à votre application de mettre à jour dynamiquement le minuteur avec la valeur correcte — par exemple 13d 09h 03m 34s (calculée comme l’heure de fin du minuteur, 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 minuteur défini par le développeur dans Adapty Dashboard. Le minuteur garantit que votre application met à jour dynamiquement le compte à rebours avec la valeur correcte — par exemple 13d 09h 03m 34s (calculée comme la différence entre l’heure de fin du minuteur, comme le Nouvel An, et 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 affichée sur Android. Sur Android, les alertes classiques apparaissent derrière la vue de 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 est déjà actif sur Android, vous pouvez contrôler la manière dont ce 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 en cours 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 avec le Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel paywall contient à la fois ce qui doit être affiché et comment l’afficher.

Pour afficher un paywall, utilisez la méthode view.present() sur le view créé par la méthode createPaywallView. Chaque view ne peut être utilisé 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 application 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 permet à votre application de mettre à jour dynamiquement le timer avec la valeur correcte, par exemple 13d 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 dans l’Adapty Dashboard. Le timer permet à votre application de mettre à jour dynamiquement le compteur avec la valeur correcte — par exemple 13d 09h 03m 34s (calculée comme l’heure de fin du timer, par exemple 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 affichée sur Android. Sur Android, les alertes classiques apparaissent derrière la vue de 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(). Ce paramètre accepte les valeurs 'full_screen' (par défaut) ou 'page_sheet'.

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