[go: up one dir, main page]
Accéder directement au contenu
Créez un compte ou connecter-vous
Logo de la documentation Stripe
/
Créez un compteConnectez-vous
Aperçu
Billing
PrésentationÀ propos des API Billing
Abonnements
Tax
Présentation
Rapports
PrésentationRapports sur plusieurs comptes
Données
Présentation

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 intégrable afin de :

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.

Intégrer une grille 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.

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_oKhSR5nslBRnBZpjO6KuzZeX"

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

Personnaliser un tableau des prix

Si vous le souhaitez, vous pouvez personnaliser votre tableau des prix

Ajouter des fonctionnalités de marketing produit Optional

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.

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_VePHdqKTYQjKNInc7u56JBrQ
:" \
  -d name=Professional \
  -d "marketing_features[0][name]"="Unlimited boards" \
  -d "marketing_features[1][name]"="Up to 20 seats"

Ajouter un appel à l’action personnalisé Optional

Le tableau des prix vous permet de configurer un produit avec un appel à l’action personnalisé qui redirige vers n’importe quelle URL. Vous pouvez utiliser cette fonctionnalité si vous proposez des prix personnalisés ou si vous avez mis en place un processus de vente hautement personnalisé pour l’un de vos produits. Vous ne pouvez définir qu’un seul produit avec un bouton d’appel à l’action personnalisé.

Cliquez sur Ajouter un produit avec un bouton d’appel à l’action personnalisé pour choisir un produit et un appel à l’action personnalisé, et pour définir l’URL correcte.

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.
  • Les liens qui incluent deux variables,{PRODUCT_ID} et{CUSTOMER_EMAIL}. Stripe renseigne l’ID de produit pertinent et l’adresse e-mail du client lorsqu’un client clique sur l’appel à l’action. Vous devez transmettre l’adresse e-mail du client pour le paramètre {CUSTOMER_EMAIL} fonctionne.

Ajouter des champs personnalisés Optional

Vous pouvez ajouter des champs personnalisés à chacun de vos produits et prix dans votre tableau des prix afin de recueillir des informations supplémentaires auprès de vos clients. Ces informations sont disponibles une fois le paiement effectué et sont utiles pour traiter l’achat.

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

Devises locales actuelles Optional

Affichez automatiquement les prix dans votre tableau des prix ou dans le tunnel de paiement dans la devise locale de vos clients en configurant multi-currency prices. Utilisez l’attribut customer-email pour tester l’affichage de votre tableau des prix et de votre page de paiement pour les clients de différents pays.

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_oKhSR5nslBRnBZpjO6KuzZeX"

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

Personnalisez l’expérience post-achat Optional

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.

Configurer les essais gratuits Optional

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

Passez l’adresse e-mail du client Optional

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_oKhSR5nslBRnBZpjO6KuzZeX"

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

Passer un client existant Optional}

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_VePHdqKTYQjKNInc7u56JBrQ
:" \
  -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_oKhSR5nslBRnBZpjO6KuzZeX"

    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 le tableau des prix. Après avoir généré le tableau des prix, vous disposez de 30 minutes supplémentaires pour effectuer le paiement avant l’expiration de la session client. Si vous créez une session de paiement avec une session client expirée, nous supprimons la clé secrète du client et créons la session de paiement 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.

Mettre à jour un tableau de prix

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.

Gérer 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_oKhSR5nslBRnBZpjO6KuzZeX"

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

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.

Permettre aux clients de gérer leurs abonnements

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.

Politique 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

Limites

  • Modèles commerciaux : le tableau des prix prend en charge les entreprises à modèle d’abonnement, tels que les tarifs forfaitaires, par utilisateur, la tarification échelonnée et les essais. Il ne prend pas en charge les modèles de tarification en fonction de l’utilisation.
  • Limites de produits et de prix : vous pouvez configurer le tableau des prix pour afficher un maximum de quatre produits, avec jusqu’à trois prix par produit. Vous ne pouvez configurer que trois intervalles de prix uniques pour tous les produits.
  • Création de compte : l’appel à l’action du tableau des prix redirige directement les utilisateurs vers la page de paiement. À l’heure actuelle, il n’est pas possible d’ajouter une étape intermédiaire (par exemple, inviter le client à créer un compte sur le site Web avant de procéder au paiement).
  • Limite de taux : le tableau des prix comporte une limite d’appels jusqu’à 50 opérations de lecture par seconde. Si vous disposez de plusieurs tableaux de prix, la limite de débit est partagée.
  • Redirection dans Checkout : le tableau des prix ne peut pas rediriger les clients vers la page de paiement si le fournisseur de votre site Web isole le code intégré dans un iframe sans que l’attribut allow-top-navigation ne soit activé. Contactez le fournisseur de votre site Web pour activer ce paramètre.
  • Test du tableau des prix localement : le tableau des prix nécessite un domaine de site web pour s’afficher. Pour tester le tableau des prix localement, exécutez un serveur HTTP local pour héberger le paramètre index.html sur le fichierlocalhost du domaine. Pour exécuter un serveur HTTP local, utilisez le module npm de Python SimpleHTTPServer ou 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.