Grille tarifaire intégrable pour les abonnements
Affichez une grille tarifaire pour les abonnements sur votre site Web et redirigez les clients directement vers Stripe Checkout.
Vous pouvez utiliser le Dashboard Stripe pour créer une grille tarifaire présentant les différents niveaux de tarification des abonnements à vos clients. Vous n’avez pas besoin d’écrire de code personnalisé pour créer ou intégrer une grille tarifaire. Ce guide explique comment :
- Utiliser le Dashboard Stripe pour configurer le composant d’interface utilisateur
- Copier le code généré à partir du Dashboard
- Intégrer le code sur votre site Web pour montrer à vos clients les informations tarifaires et les rediriger vers une page de paiement
Aperçu
Intégrez une grille tarifaire à votre site Web pour présenter vos tarifs et inciter vos clients à l’achat.
Une grille tarifaire est une interface utilisateur intégrable qui :
- Affiche les informations tarifaires et dirige les clients vers un tunnel de paiement préconfiguré. Le tunnel de paiement utilise Stripe Checkout pour finaliser l’achat.
- Prend en charge les modèles d’abonnement courants tels que le tarif forfaitaire, par utilisateur, la tarification échelonnée et les essais gratuits.
- Vous permet de configurer, de personnaliser et de mettre à jour les informations sur les produits et les tarifs directement dans le Dashboard, sans avoir à écrire de code.
- S’intègre à votre site Web à l’aide d’une balise
<script>et d’un composant Web. Stripe génère automatiquement la balise. Vous la copiez et la collez dans le code de votre site Web.
Le diagramme ci-dessous illustre la manière dont votre client passe de l’affichage de la grille tarifaire à l’éxécution du paiement.
Créer une grille tarifaire
- Dans le Dashboard, accédez à Catalogue de produits > grilles tarifaires.
- Cliquez sur +Créer une grille tarifaire.
- Ajoutez des produits pertinents pour vos clients (jusqu’à quatre par période de tartification). Vous pouvez également inclure un essai gratuit.
- Ajustez l’apparence dans les Paramètres d’affichage. Mettez en surbrillance un produit spécifique et personnalisez la langue, les couleurs, la police et l’apparence des boutons, puis cliquez sur Continuer.
- Configurez les Paramètres de paiement pour sélectionner les informations client à recueillir et les options à présenter au client, et indiquez si les clients doivent être redirigés vers une page de confirmation ou vers votre site après avoir effectué un achat.
Confirmer la quantité maximale
Si vous avez une tarification échelonnée qui prend en charge des quantités supérieures au maximum par défaut de 99, cochez la propriété Permettre aux clients d’ajuster la quantité et augmentez la valeur Max en conséquence. Les options de tarification échelonnée pour les quantités supérieures au maximum n’apparaissent pas dans le sélecteur.
- Configurez le portail client en cliquant sur Continuer.
- Cliquez sur Copier le code pour copier le code généré et l’intégrer à votre site Web.
Personnaliser votre grille tarifaire
Configurer les paramètres de paiement
Intégrer un tableau tarifaire
Après avoir créé une grille tarifaire, Stripe renvoie automatiquement un code d’intégration composé d’une balise <script> et d’un composant Web <stripe-pricing-table>. Cliquez sur le bouton Copier le code pour copier le code et le coller sur votre site Web.
Copiez le code de la grille tarifaire et intégrez-le à votre site Web.
Si vous utilisez HTML, collez le code d’intégration dans le code HTML. Si vous utilisez React, ajoutez la balise script dans votre page index. pour monter le composant <stripe-pricing-table>.
Mise en garde
Le tableau tarifaire utilise la clé API publiable de votre compte. Si vous révoquez la clé API, vous devez mettre à jour le code d’intégration avec votre nouvelle clé API publiable.
Suivre les abonnements
Lorsqu’un client souscrit un abonnement, celui-ci s’affiche sur la page des abonnements du Dashboard.
Gérer le traitement des commandes avec l’API Stripe
Le composant de la grille tarifaire utilise Stripe Checkout pour afficher une page de paiement hébergée et préconfigurée. Lorsqu’un paiement est effectué à l’aide de Checkout, Stripe envoie l’événement checkout.session.completed. Enregistrez une destination d’événement pour recevoir l’événement à votre endpoint afin de traiter la commande et effectuer le rapprochement. Pour en savoir plus, consultez le guide de traitement des commandes avec Checkout.
Le composant Web <stripe-pricing-table> prend en charge la définition de la propriété client-reference-id. Lorsque la propriété est définie, la grille tarifaire la transmet à l’attribut client_reference_id de la session Checkout pour vous aider à rapprocher la session Checkout avec votre système interne. Il peut s’agir d’un ID d’utilisateur authentifié ou d’une chaîne similaire. client-reference-id peut être composé de caractères alphanumériques, de tirets ou de traits de soulignement, et les valeurs peuvent comporter jusqu’à 200 caractères. Les valeurs non valides sont ignorées et votre grille tarifaire continuera de fonctionner comme prévu.
Mise en garde
Étant donné que la grille tarifaire est intégrée à votre site Web et qu’elle est accessible à tous, vérifiez que client-reference-id n’inclut pas d’informations sensibles ou de clés secrètes, telles que des mots de passe ou des clés API.
Limites
- **Business models **: la grille tarifaire prend en charge les modèles d’abonnement courants, tels que le tarif forfaitaire, par utilisateur, la tarification échelonnée et les périodes d’essai. Les autres modèles de tarification avancés ne sont pas pris en charge.
- Limites de produits et de prix : vous pouvez configurer la grille tarifaire pour afficher un maximum de quatre produits, avec un maximum de trois prix par produit. Vous pouvez configurer au maximun trois périodes de tarification uniques pour l’ensemble des produits.
- Création de compte : l’appel à l’action de la grille tarifaire permet de diriger les clients directement vers la page de paiement. À l’heure actuelle, il n’est pas possible d’ajouter une étape intermédiaire (par exemple, pour inviter le client à créer un compte sur le site Web avant de procéder au paiement).
- **Limite de débit **: la grille tarifaire présente une limite de débit allant jusqu’à 50 opérations de lecture par seconde. Si vous disposez de plusieurs grilles tarifaires, la limite de débit est partagée.
- **Redirection vers Checkout **: la grille tarifaire ne peut pas rediriger les clients vers la page de paiement si le fournisseur de votre site Web isole le code d’intégration dans un iframe sans que l’attribut
allow-top-navigationne soit activé. Contactez votre fournisseur de site Web pour activer ce paramètre. - **Test local de la grille tarifaire **: l’affichage de la grille tarifaire nécessite un domaine de site Web. Pour tester la grille tarifaire localement, exécutez un serveur HTTP local pour héberger le fichier
index.de votre site Web sur le domainehtml localhost. Pour exécuter un serveur HTTP local, utilisez SimpleHTTPServer de Python ou le module npm http-server. - **Connect **: la grille tarifaire n’est pas conçue pour fonctionner avec Connect et ne prend pas en charge des fonctionnalités telles qu’une plateforme percevant des frais.
Limiter les clients à un seul abonnement
Vous pouvez rediriger les clients qui disposent déjà d’un abonnement vers le portail client ou votre site Web pour gérer leur abonnement. En savoir plus sur la limitation des clients à un seul abonnement.