# 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 :

- Affichez *informations de tarification{ % /glossaire %} et dirigez les clients vers un tunnel de paiement prédéfini. Le tunnel de paiement utilise [Stripe Checkout](https://docs.stripe.com/payments/checkout.md) pour finaliser l’achat.* (The pricing model consists of the products or services you sell, how much they cost, what currency you accept for payments, and the service period to charge (for subscriptions). To build the pricing model, you use Products—what you sell—and Prices—how much and how often to charge for your products)
  

- Prenez en charge les entreprises à modèle d’abonnement courants, tels que le tarif [forfaitaire](https://docs.stripe.com/products-prices/pricing-models.md#flat-rate),[par utilisateur](https://docs.stripe.com/products-prices/pricing-models.md#per-seat), la [tarification échelonnée](https://docs.stripe.com/products-prices/pricing-models.md#tiered-pricing), et les essais gratuits.
- Configurez, personnalisez et mettez à jour les informations sur les produits et les prix directement dans le Dashboard, sans avoir à écrire le moindre code.
- Intégrez-le à votre site Web avec une balise `<script>` et un composant Web. Stripe génère automatiquement la balise. Il vous suffit de la copier et de la coller dans le code de votre site Web.
![Une grille tarifaire intégrée présentant trois options d’abonnement qui redirigent les clients vers Stripe Checkout.](https://b.stripecdn.com/docs-statics-srv/assets/pricing-table-embed.b27a06fcd84b57a8866a8b4b62323fdc.png)

Une grille tarifaire intégrée permet aux clients de comparer les options d’abonnement et de continuer vers Checkout.

Le diagramme ci-dessous illustre la manière dont votre client passe de l’affichage de la grille tarifaire à l’éxécution du paiement.

Grille tarifaire (See full diagram at https://docs.stripe.com/payments/checkout/pricing-table)

```text
[Client] -- Affiche la grille tarifaire --> [Votre application]
[Votre application] -- Clique sur le bouton « S’abonner » --> [Stripe Checkout]
[Stripe Checkout] -- Effectue le paiement --> [Stripe Checkout]
[Stripe Checkout] -- checkout.session.completed: Retourne sur votre site Web --> [Votre application]
```

## Créer une grille tarifaire

1. Dans le Dashboard, accédez à **Catalogue de produits** > [grilles tarifaires](https://dashboard.stripe.com/pricing-tables).
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&nbsp;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](https://docs.stripe.com/no-code/customer-portal.md) 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>`.

> Le tableau tarifaire utilise la [clé API publiable](https://docs.stripe.com/keys.md) 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.

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"
  >
  </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  (Facultatif)

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.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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é  (Facultatif)

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&nbsp;:

- 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  (Facultatif)

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.

> 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&nbsp;:

| Type | Description |
| --- | --- |
| Texte | Permet de collecter du texte libre, jusqu’à 255 caractères. |
| Chiffres uniquement | Permet de collecter des valeurs numériques, jusqu’à 255&nbsp;chiffres. |
| Liste déroulante | Pré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](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) une fois le paiement effectué. Enregistrez une [destination d’événement](https://docs.stripe.com/event-destinations.md) pour recevoir l’événement à votre endpoint.

### Devises locales actuelles  (Facultatif)

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](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md). Utilisez l’attribut [customer-email](https://docs.stripe.com/payments/checkout/pricing-table.md#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](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-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](https://www.nationsonline.org/oneworld/country_code_list.htm).

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"
    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  (Facultatif)

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  (Facultatif)

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](https://dashboard.stripe.com/test/pricing-tables). 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](https://docs.stripe.com/payments/checkout/free-trials.md#collect-payment) 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  (Facultatif)

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](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-customer_email) de la session Checkout, en saisissant automatiquement l’adresse e-mail sur la page de paiement.

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"
    customer-email="{{CUSTOMER_EMAIL}}"
  >
  </stripe-pricing-table>
</body>
```

### Passer un client existant  (Facultatif)}

Vous pouvez fournir un [compte](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer) existant configuré par le client ou un [client](https://docs.stripe.com/api/customers.md) à Checkout Sessions créées à partir de la grille tarifaire. Créez une session client pour un utilisateur que vous avez déjà identifié côté serveur et renvoyez le [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) au client.

> #### Utiliser l’API Accounts v2 pour représenter les clients
> 
> L’API Accounts&nbsp;v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts&nbsp;v2, vous devez spécifier une [version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
> 
> Pour accéder à l’aperçu Accounts&nbsp;v2, rendez-vous sur [aperçus et fonctionnalités de Account](https://dashboard.stripe.com/settings/previews) dans votre Dashboard et activez **Moyens de paiement réutilisables pour les virements internationaux**.
> 
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/customer_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "components[pricing_table][enabled]=true"
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/customer_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) de la session client.

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"
    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&nbsp;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&nbsp;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](https://dashboard.stripe.com/pricing-tables), 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](https://dashboard.stripe.com/subscriptions) 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](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed). Enregistrez une [destination d’événement](https://docs.stripe.com/event-destinations.md) 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](https://docs.stripe.com/checkout/fulfillment.md).

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](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-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&nbsp;caractères. Les valeurs non valides sont ignorées et votre grille tarifaire continuera de fonctionner comme prévu.

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

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"
    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* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details) ou votre site Web pour gérer leur abonnement. En savoir plus sur la [limitation des clients à un seul abonnement](https://docs.stripe.com/payments/checkout/limit-subscriptions.md).

### Permettre aux clients de gérer leurs abonnements

Partagez un lien vers votre *portail client* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details), 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](https://docs.stripe.com/customer-management/activate-no-code-customer-portal.md).

## Politique de sécurité du contenu

Si vous avez déployé une *Politique de sécurité du contenu* (Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks), les directives de politique requises par la grille tarifaire sont les suivantes&nbsp;:

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

## Limites

- **Modèles commerciaux**&nbsp;: 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](https://docs.stripe.com/products-prices/pricing-models.md#usage-based-pricing).
- **Limites de produits et de prix**&nbsp;: 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**&nbsp;: 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**&nbsp;: le tableau des prix comporte une [limite d’appels](https://docs.stripe.com/rate-limits.md) jusqu’à 50&nbsp;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**&nbsp;: 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**&nbsp;: 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 fichier`localhost` du domaine. Pour exécuter un serveur HTTP local, utilisez le module npm de Python [SimpleHTTPServer](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server) ou [http-server](https://www.npmjs.com/package/http-server).
- **Connect**&nbsp;: la grille tarifaire n’est pas conçue pour fonctionner avec *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) et ne prend pas en charge des fonctionnalités telles qu’une plateforme percevant des frais.