Implémenter les paywalls web

Avant de commencer, assurez-vous d’avoir configuré votre paywall web dans le tableau de bord et d’avoir installé la version 3.6.1 ou ultérieure du SDK Adapty.

Ouvrir les paywalls web

Si vous travaillez avec un paywall que vous avez développé vous-même, vous devez gérer les paywalls web via la méthode du SDK. La méthode .openWebPaywall :

Génère une URL unique permettant à Adapty d’associer un paywall spécifique affiché à un utilisateur particulier à la page web vers laquelle il est redirigé.
Détecte quand vos utilisateurs reviennent dans l’application, puis appelle .getProfile à intervalles courts pour déterminer si les droits d’accès du profil ont été mis à jour.

Ainsi, si le paiement a réussi et que les droits d’accès ont été mis à jour, l’abonnement s’active dans l’application presque immédiatement.


try {
  await adapty.openWebPaywall({ paywallOrProduct: product });
} catch (error) {
  console.error('Failed to open web paywall:', error);
}

Il existe deux versions de la méthode openWebPaywall :

openWebPaywall({ paywallOrProduct: product }) qui génère des URLs par paywall et ajoute également les données du produit aux URLs.
openWebPaywall({ paywallOrProduct: paywall }) qui génère des URLs par paywall sans ajouter les données du produit aux URLs. Utilisez-la quand vos produits dans le paywall Adapty diffèrent de ceux du paywall web.

Dans le SDK v4, le côté paywall de paywallOrProduct prend un AdaptyFlowPaywall — une variante paywall du flow récupéré. Vérifiez que flow.paywalls n’est pas vide avant d’y accéder par index, par exemple flow.paywalls[0].

Gérer les erreurs

Erreur	Description	Action recommandée
AdaptyError.paywallWithoutPurchaseUrl	Le paywall n’a pas d’URL d’achat web configurée	Vérifiez que le paywall a été correctement configuré dans l’Adapty Dashboard
AdaptyError.productWithoutPurchaseUrl	Le produit n’a pas d’URL d’achat web	Vérifiez la configuration du produit dans l’Adapty Dashboard
AdaptyError.failedOpeningWebPaywallUrl	Impossible d’ouvrir l’URL dans le navigateur	Vérifiez les paramètres de l’appareil ou proposez une autre méthode d’achat
AdaptyError.failedDecodingWebPaywallUrl	Impossible d’encoder correctement les paramètres dans l’URL	Vérifiez que les paramètres d’URL sont valides et correctement formatés

Obtenir l’URL du paywall web sans l’ouvrir

Si vous souhaitez afficher vous-même la page d’achat web plutôt que de laisser le SDK l’ouvrir, utilisez createWebPaywallUrl. Elle retourne la même URL unique que celle qu’openWebPaywall ouvrirait, vous permettant ainsi de l’afficher dans votre propre vue web ou de gérer la redirection à votre façon. Elle accepte le même argument paywallOrProduct — une variante paywall du flow récupéré (AdaptyFlowPaywall) ou un AdaptyPaywallProduct.


try {
  const url = await adapty.createWebPaywallUrl({ paywallOrProduct: product });
  // open `url` in your own web view, or handle the redirect yourself
} catch (error) {
  console.error('Failed to create web paywall URL:', error);
}

Pour ouvrir une URL arbitraire (pas un paywall web) dans le navigateur natif — par exemple, depuis le bouton d’un flow — utilisez plutôt adapty.openWebUrl.

Ouvrir les paywalls web dans un navigateur intégré

L’ouverture des paywalls web dans un navigateur intégré est prise en charge à partir du SDK Adapty v3.15.

Par défaut, les paywalls web s’ouvrent dans le navigateur externe.

Pour offrir une expérience utilisateur fluide, vous pouvez ouvrir les paywalls web dans un navigateur intégré. Cela affiche la page d’achat web directement dans votre application, permettant aux utilisateurs de finaliser leurs transactions sans changer d’application.

Pour activer cette option, définissez openIn sur WebPresentation.BrowserInApp dans openWebPaywall :


try {
    await adapty.openWebPaywall({
        paywallOrProduct: product,
        openIn: WebPresentation.BrowserInApp, // default – WebPresentation.BrowserOutApp
    });
} catch (error) {
    console.error('Failed to open web paywall:', error);
}