Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous
Aperçu
Billing
PrésentationÀ propos des API Billing
Abonnements
Tax
Présentation
Rapports
PrésentationRapports sur plusieurs comptes
Données
PrésentationSchémaActualisation des données

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égrez le code à votre site Web pour afficher les informations tarification de vos clients et les diriger vers une page de paiement

Aperçu

La grille tarifaire est une interface utilisateur intégrée qui affiche les informations tarifaires et redirige les clients vers la page de paiement.

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

  1. Dans le Dashboard, accédez à Catalogue de produits > grilles tarifaires.
  2. Cliquez sur +Créer une grille tarifaire.
  3. Ajoutez des produits pertinents pour vos clients (jusqu’à quatre par période de tartification). Vous pouvez également inclure un essai gratuit.
  4. 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.
  5. 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.

  6. Configurez le portail client en cliquant sur Continuer.
  7. Cliquez sur Copier le code pour copier le code généré et l’intégrer à votre site Web.
Personnalisation d'une grille tarifaire

Personnaliser votre grille tarifaire

Configurer les paramètres de paiement

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.

Page d’informations sur la grille tarifaire

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.html 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.

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

  >
  </stripe-pricing-table>
</body>

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 tarification est intégrée à votre site Web et accessible à tous, veillez à ce que la propriété client-reference-id n’inclue pas d’informations sensibles ou de clés secrètes telles que des mots de passe ou des clés API.

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    client-reference-id="{{CLIENT_REFERENCE_ID}}"
  >
  </stripe-pricing-table>
</body>

FacultatifAjouter des caractéristiques marketing aux produits

La grille tarifaire peut afficher les caractéristiques marketing de vos produits pour aider vos clients dans leurs décisions d’achat. Pour ajouter des caractéristiques marketing à un produit dans votre grille tarifaire, accédez à Options supplémentaires > Liste des caractéristiques.

Ajouter des caractéristiques marketing aux produits

Ajouter des caractéristiques marketing aux produits

Vous pouvez également ajouter des caractéristiques marketing lors de la création ou de la mise à jour de produits avec l’API.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/products \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name=Professional \
  -d "marketing_features[0][name]"="Unlimited boards" \
  -d "marketing_features[1][name]"="Up to 20 seats"

FacultatifAjouter un appel à l’action personnalisé

La grille tarifaire vous permet de configurer un produit avec un appel à l’action personnalisé qui redirige le client vers une URL de votre choix. Vous pouvez l’utiliser si vous avez une tarification personnalisée ou un processus de vente impliquant une approche « high-touch » pour l’un de vos produits.

Cliquez sur Add product with custom call-to-action button pour choisir un produit et un appel à l’action personnalisé, et pour définir l’URL.

Ajouter un appel à l’action personnalisé

Ajouter un appel à l’action personnalisé

Les appels à l’action personnalisés prennent en charge les formats suivants :

  • Liens absolus, comme https://wwww.stripe.com.
  • Liens connexes tels que /contact. Si vous intégrez votre grille tarifaire sur wwww.stripe.com/pricing-table, une URL de /contact vous permet d’accéder à wwww.stripe.com/pricing-table/contact.
  • Liens spécifiques aux contacts qui utilisent mailto et tel. Par exemple, vous pouvez configurer l’URL pour qu’elle soit mailto:email@yourcompany.com ou tel:xxx-xxx-xxx.
  • Liens comprenant deux variables,{PRODUCT_ID} et {CUSTOMER_EMAIL}. Stripe renseigne l’ID de produit pertinent et l’adresse e-mail du client lorsque celui-ci clique sur l’appel à l’action.

Mise en garde

Pour l’instant, vous ne pouvez configurer qu’un seul produit pour qu’il dispose d’un bouton d’appel à l’action personnalisé. Assurez-vous que le lien que vous fournissez est correct. Vous devez transmettre l’adresse e-mail du client pour que le paramètre {CUSTOMER_EMAIL} fonctionne.

FacultatifTransmettre l’adresse e-mail du client

Le composant Web <stripe-pricing-table> prend en charge la définition de la propriété customer-email. Une fois la propriété définie, la grille tarifaire la transmet à l’attribut customer_email de la session Checkout, en saisissant automatiquement l’adresse e-mail sur la page de paiement.

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    customer-email="{{CUSTOMER_EMAIL}}"
  >
  </stripe-pricing-table>
</body>

FacultatifTransmettre un objet Customer existant

Vous pouvez fournir un objet Customer existant aux sessions Checkout créées à partir de la grille tarifaire. Créez une session client pour un utilisateur que vous avez déjà authentifié côté serveur et renvoyez la client_secret au client.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/customer_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d "components[pricing_table][enabled]"=true

Définissez l’attribut customer-session-client-secret au niveau du composant Web <stripe-pricing-table> sur la client_secret de la session client.

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    customer-session-client-secret="{{CLIENT_SECRET}}"
  >
  </stripe-pricing-table>
</body>

Expiration de la clé secrète du client côté client

Vous disposez de 30 minutes pour inclure la clé secrète du client dans la grille tarifaire. Après avoir affiché la grille tarifaire, vous disposez de 30 minutes supplémentaires pour effectuer un paiement avant l’expiration de la session client.

Si vous créez une session Checkout avec une session client expirée, nous supprimons la clé secrète du client et créons la session Checkout sans client associé.

Si la session client expire après la création de la session Checkout, mais avant la confirmation, la confirmation du paiement échoue.

FacultatifPersonnaliser l'expérience d'après-vente

Une fois le paiement réussi, votre client reçoit un message de confirmation localisé le remerciant pour son achat. Vous pouvez personnaliser le message de confirmation ou rediriger le client vers l’URL de votre choix. Pour modifier le comportement de confirmation d’une grille tarifaire, cliquez sur la section Page de confirmation lors de la création ou de la mise à jour de la grille tarifaire.

Si vous redirigez vos clients vers votre propre page de confirmation, vous pouvez inclure {CHECKOUT_SESSION_ID} dans l’URL de redirection pour transmettre dynamiquement l’ID de session Checkout actuel du client. Cette action peut être utile si vous souhaitez personnaliser le message de confirmation sur votre site Web en fonction des informations dans la session Checkout.

FacultatifMettre à jour une grille tarifaire

Vous pouvez mettre à jour une grille tarifaire à partir de sa page d’information dans le Dashboard. Sur la page Catalogue de produits, sélectionnez l’onglet Grilles tarifaires, puis recherchez et sélectionnez la grille tarifaire que vous souhaitez modifier.

Sur la page des détails de la grille tarifaire, cliquez sur Modifier la grille tarifaire. Vous pouvez modifier les produits et les prix affichés et configurer les paramètres de la page de paiement. Lorsque vous enregistrez vos modifications, Stripe met automatiquement à jour l’interface utilisateur de la grille tarifaire.

FacultatifConfigurer des essais gratuits

Pour proposer un essai gratuit associé à un tarif, sélectionnez Inclure un essai gratuit et définissez la durée de l’essai lorsque vous créez ou modifiez une grille tarifaire. Une fois que les clients ont confirmé leurs informations de paiement, ils sont redirigés vers une page où ils peuvent commencer leur essai. La nouvelle page fait partie d’une session Checkout.

Configurer une période d’essai gratuite pour vos produits

Configurer des périodes d’essai sans moyen de paiement

Pour permettre aux clients de souscrire un abonnement sans fournir les détails de leur moyen de paiement, sélectionnez Inclure un essai gratuit, puis cliquez sur Continuer. Ensuite, sélectionnez Recueillir uniquement les informations de paiement si nécessaire.

Veillez à configurer des rappels par e-mail pour recueillir les informations sur les moyens de paiement des clients avant la fin de leur période d’essai. Dans le cas contraire, Stripe suspend la période d’essai.

FacultatifPolitique de sécurité du contenu

Si vous avez déployé une Politique de sécurité du contenu, les directives de politique requises par la grille tarifaire sont les suivantes :

  • frame-src,https://js.stripe.com
  • script-src, https://js.stripe.com

FacultatifOffrez à vos clients la possibilité de gérer leurs abonnements
No-code

Partagez un lien vers votre portail client, où les clients peuvent se connecter avec leur adresse e-mail pour gérer leurs abonnements, modifier leurs moyens de paiement, etc. Comment créer et partager le lien de votre portail client.

FacultatifAffichage en devises locales

Automatically display prices in your pricing table or checkout flow in your customers’ local currency by configuring multi-currency prices. Use the customer-email attribute to test how your pricing table and payment page appear to customers in different countries.

Dans la stripe-pricing-table, définissez la propriété customer_email en ajoutant un suffixe du formulaire +location_XX dans la partie locale de l’e-mail. XX doit être un code de pays ISO valide à deux lettres.

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    customer-email="test+location_FR@email.com"
  >
  </stripe-pricing-table>
</body>

Lorsque vous consultez la grille tarifaire, la devise affichée correspond à la devise par défaut du pays indiqué dans l’attribut customer_email (ici, la France).

FacultatifAjouter des champs personnalisés

Mise en garde

N’utilisez pas de champs personnalisés pour collecter des données personnelles, protégées ou sensibles, ni des informations que la loi interdit de recueillir.

Vous pouvez ajouter des champs personnalisés sur chacun de vos produits et tarids dans votre grille tarifaire afin de recueillir des informations supplémentaires auprès de vos clients. Les informations sont disponibles une fois le paiement effectué et sont utiles pour traiter la commande. Vous pouvez ajouter les types de champs suivants.

TypeDescription
TextePermet de collecter du texte libre, jusqu’à 255 caractères.
Chiffres uniquementPermet de collecter des valeurs numériques, jusqu’à 255 chiffres.
Liste déroulantePrésente à vos clients une liste d’options dans laquelle opérer une sélection. Vous pouvez ajouter jusqu’à 10 options.
  1. Cliquez sur Ajouter des champs personnalisés dans la section Paramètres de paiement.
  2. Sélectionnez un type de champ à ajouter.
  3. Saisissez un libellé pour le champ.
  4. (Facultatif) Marquez votre champ comme obligatoire.

Une fois que votre client a effectué le paiement, vous pouvez consulter les champs de la page des informations de paiement dans le Dashboard.

Les champs personnalisés sont également envoyés dans l’événement checkout.session.completed une fois le paiement effectué. Enregistrez une destination d’événement pour recevoir l’événement à votre endpoint.

Limites

  • Business models : la grille tarifaire prend en charge les modèles d’abonnement, tels que le tarif forfaitaire, par utilisateur, la tarification échelonnée et les périodes d’essai. Elle ne prend pas en charge les modèles de tarification à l’usage.
  • 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-navigation ne 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.html de votre site Web sur le domaine 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.

Cette page vous a-t-elle été utile ?
OuiNon