Créer une intégration pour les abonnements
Créez et gérez des abonnements pour les paiements récurrents.

Personnalisez avec l’API Appearance.
Utilisez ce guide pour apprendre à vendre des abonnements à prix fixe. Vous utiliserez lePayment Element avec l’API Checkout Sessions pour créer un formulaire de paiement personnalisé que vous intégrerez dans votre application.
Si vous ne souhaitez pas créer un formulaire de paiement personnalisé, vous pouvez intégrer Checkout. Pour une version immersive de ce guide d’intégration de bout en bout, consultez le guide de démarrage Billing.
Si vous n’êtes pas prêt à coder une intégration, vous pouvez configurer des abonnements de base manuellement dans le Dashboard. Vous pouvez également utiliser Payment Links pour configurer des abonnements sans écrire la moindre ligne de code. Apprenez-en plus sur la conception d’une intégration pour comprendre les décisions à prendre et les ressources dont vous aurez besoin.
Ce que vous allez créer
Ce guide vous explique comment :
- Modélisez votre entreprise en créant un catalogue de produits.
- Créez un processus d’inscription qui génère automatiquement un client.
- Créer des abonnements et collecter les informations de paiement de vos clients.
- Tester et surveiller l’état des paiements et de l’abonnement.
- Permettre aux clients de modifier leur offre ou de résilier l’abonnement.
Définitions des objets API
| Ressource | Définition |
|---|---|
| Customer | Représente un client qui achète un abonnement. Utilisez l’objet Customer associé à un abonnement pour effectuer et suivre ses paiements récurrents et gérer les produits auxquels il est abonné. |
| Entitlement | Représente l’accès d’un client à une fonctionnalité incluse dans un produit de service auquel il est abonné. Lorsque vous créez un abonnement représentant l’achat récurrent d’un produit par un client, un droit d’accès actif est automatiquement créé pour chaque fonctionnalité associée à ce produit. Lorsqu’un client accède à vos services, utilisez ses droits d’accès actifs pour activer les fonctionnalités incluses dans son abonnement. |
| Feature | Représente une fonctionnalité à laquelle vos clients peuvent accéder lorsqu’ils s’abonnent à un produit de service. Vous pouvez inclure des fonctionnalités dans un produit en créant des objets ProductFeatures. |
| Invoice | Relevé des montants dus par un client et qui suit les états des paiements, de l’ébauche initiale au paiement ou à la finalisation. Les abonnements génèrent automatiquement des factures. |
| PaymentIntent | Un moyen de créer des tunnels de paiement dynamiques. Un PaymentIntent suit le cycle de vie du tunnel de paiement d’un client et déclenche des étapes d’authentification supplémentaires lorsque des mandats réglementaires, des règles Radar personnalisées de lutte contre la fraude, ou des moyens de paiement avec redirection l’exigent. Les objets Invoice créent automatiquement des PaymentIntents. |
| PaymentMethod | Les moyens de paiement qu’un client utilise pour payer vos produits. Vous pouvez par exemple enregistrer une carte bancaire dans un objet Customer et l’utiliser pour les paiements récurrents de ce client. Généralement utilisés avec les API Payment Intents ou Setup Intents. |
| Price | Définit le tarif unitaire, la devise et le cycle de facturation d’un produit. |
| Product | Un bien ou un service que votre entreprise vend. Un produit de service peut comporter une ou plusieurs fonctionnalités. |
| ProductFeature | Représente l’inclusion d’une fonctionnalité unique dans un produit unique. Chaque produit est associé à un objet ProductFeature pour chaque fonctionnalité qu’il inclut, et chaque fonctionnalité est associée à un objet ProductFeature pour chaque produit qui l’inclut. |
| Subscription | Représente l’achat récurrent et programmé d’un produit par un client. L’abonnement permet d’encaisser des paiements et de fournir des livraisons répétées ou un accès continu à un produit. |
Voici un exemple de la manière dont les produits, les fonctionnalités et les droits d’accès fonctionnent ensemble. Imaginons que vous créez un service récurrent proposant deux niveaux : un produit standard avec des fonctionnalités de base et un produit Advanced qui ajoute des fonctionnalités étendues.
- Vous créez deux fonctionnalités :
basic_etfeatures extended_.features - Vous créez deux produits :
standard_etproduct advanced_.product - Pour le produit standard, vous créez un objet ProductFeature qui associe
basic_àfeatures standard_.product - Pour le produit avancé, vous créez deux objets ProductFeature : un qui associe
basic_àfeatures advanced_et un qui associeproduct extended_àfeatures advanced_.product
Un client, first_, s’abonne au produit standard. Lorsque vous créez l’abonnement, Stripe crée automatiquement un objet Entitlement qui associe first_ à basic_.
Un autre client, second_, s’abonne au produit avancé. Lorsque vous créez l’objet Subscription correspondant, Stripe crée automatiquement deux objets Entitlement : un qui associe second_ à basic_, et un qui associe second_ à extended_.
Pour savoir quelles fonctionnalités vous devez fournir à un client, récupérez ses droits d’accès actifs ou écoutez l’événement Active Entitlement Summary. Il n’est pas nécessaire de récupérer ses abonnements, produits et fonctionnalités.
Configurer Stripe
Installez le client Stripe de votre choix :
Installez ensuite la Stripe CLI. La CLI permet de tester les webhooks et d’exécuter des appels API vers Stripe. Ce guide explique comment utiliser la CLI pour configurer un modèle de tarification dans une section ultérieure.
Pour davantage d’options d’installation, consultez la page consacrée à l’interface de ligne de commande Stripe.
Créer le modèle tarifaireStripe CLI ou Dashboard
Créez vos produits et leurs tarifs dans le Dashboard ou via l’interface de ligne de commande Stripe.
Cet exemple utilise un service à tarif fixe avec deux options de niveau de service différentes : Basic et Premium. Pour chaque option de niveau de service, vous devez créer un produit et un tarif récurrent. (Si vous souhaitez ajouter un paiement ponctuel, par exemple des frais d’installation, créez un troisième produit avec un tarif unique. Par souci de simplicité, cet exemple n’inclut pas de paiement ponctuels.)
Dans cet exemple, chaque produit est facturé mensuellement. Le tarif du produit de base est de 5 USD. Celui du produit premium est de 15 USD.
Créer le ClientClient et serveur
Stripe a besoin d’un Client pour chaque abonnement. Dans la partie frontale de votre application, collectez toutes les informations nécessaires auprès de vos utilisateurs et transmettez-les au back end.
Si vous avez besoin de collecter des données d’adresse, Address Element vous permet de collecter une adresse de livraison ou de facturation pour vos clients. Pour plus d’informations sur l’Address Element, voir la page Address Element.
<form id="signup-form"> <label> Email <input id="email" type="email" placeholder="Email address" value="test@example.com" required /> </label> <button type="submit"> Register </button> </form>
const emailInput = document.querySelector('#email'); fetch('/create-customer', { method: 'post', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email: emailInput.value, }), }).then(r => r.json());
Sur le serveur, créez l’objet Stripe Customer.
Remarque
Make sure you store the Customer ID to use in the Checkout Session
Créer une session CheckoutServeur
Côté back-end, définissez un endpoint qui crée la session et que le front-end pourra appeler. Cette étape nécessite l’identifiant de prix de l’abonnement choisi par le client, transmis automatiquement par votre front-end.
Si vous avez créé un prix unique lors de l’étape 2, transmettez également l’identifiant de ce prix. Après avoir créé une session Checkout, veillez à renvoyer la clé secrète du client au client dans la réponse.
Remarque
Vous pouvez utiliser lookup_keys pour récupérer les prix plutôt que les identifiants de prix. Consultez cet exemple concret pour plus de détails.
Depuis votre Dashboard,activez les moyens de paiement que vous souhaitez accepter de vos clients. Checkout prend en charge plusieurs moyens de paiement.
Collecter les informations de paiementClient
Collectez les informations de paiement de votre client à l’aide de Payment Element. Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.
Écouter les webhooksServeur
Pour compléter l’intégration, vous devez traiter les webhooks envoyés par Stripe. Ces événements se déclenchent lorsqu’un statut change dans Stripe, par exemple quand un abonnement génère une nouvelle facture. Dans votre application, configurez un gestionnaire HTTP pour accepter les requêtes POST contenant l’événement de webhook et vérifiez la signature de l’événement :
Pendant le développement, utilisez la Stripe CLI pour observer les webhooks et les transmettre à votre formulaire d’inscription. Exécutez ensuite la commande suivante dans un nouveau terminal pendant que votre application de développement est en cours d’exécution :
stripe listen --forward-to localhost:4242/webhook
En production, configurez une URL d’endpoint webhook dans le Dashboard, ou utilisez l’API Webhook Endpoints.
Vous devez écouter quelques événements pour effectuer les étapes restantes de ce guide. Consultez lesÉvénements d’abonnement pour plus de détails sur les webhooks spécifiques aux abonnements.
Fournir l'accès à votre serviceClient et serveur
Maintenant que l’abonnement est actif, donnez à votre utilisateur l’accès à votre service. Pour ce faire, écoutez les événements customer., customer. et customer.. Ces événements transmettent un objet d’abonnement qui contient un champ status indiquant si l’abonnement est actif, en retard ou annulé. Consultez le cycle de vie des abonnements pour obtenir la liste complète des états.
Dans votre gestionnaire de webhooks :
- Vérifiez l’état de l’abonnement. S’il est
actif, cela signifie que l’utilisateur a payé pour votre produit. - Vérifiez le produit auquel le client s’est abonné et accordez-lui l’accès à votre service. Le fait de contrôler le produit plutôt que le tarif vous offre plus de flexibilité si vous devez modifier la tarification ou la période de facturation.
- Enregistrez les
product.,id subscription.etid subscription.dans votre base de données avec lestatus customer.déjà enregistré. Utilisez cet enregistrement pour déterminer quelles fonctionnalités activer pour l’utilisateur dans votre application.id
L’état d’un abonnement peut changer à tout moment pendant sa durée de vie, même si votre application n’effectue aucun appel direct à Stripe. Par exemple, un renouvellement peut échouer en raison d’une carte bancaire expirée, ce qui place l’abonnement en état de retard. Ou, si vous implémentez le portail client, un utilisateur peut annuler son abonnement sans passer directement par votre application. Une implémentation correcte de votre gestionnaire permet de synchroniser le statut de votre application avec celui de Stripe.
Annuler l'abonnementClient et serveur
Il est courant de laisser aux clients la possibilité d’annuler leur abonnement. Cet exemple montre comment ajouter une option d’annulation sur la page des paramètres du compte.

Paramètres d’un compte ayant la possibilité d’annuler son abonnement
function cancelSubscription(subscriptionId) { return fetch('/cancel-subscription', { method: 'post', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ subscriptionId: subscriptionId, }), }) .then(response => { return response.json(); }) .then(cancelSubscriptionResponse => { // Display to the user that the subscription has been canceled. }); }
Sur le back-end, définissez le endpoint que votre front-end doit appeler.
Votre application reçoit un événement customer..
Après la résiliation de l’abonnement, mettez à jour votre base de données pour supprimer l’identifiant de l’abonnement Stripe que vous aviez précédemment stocké, et limitez l’accès à votre service.
Lorsqu’un abonnement est annulé, vous ne pouvez pas le réactiver. À la place, collectez les informations de facturation mises à jour auprès de votre client, actualisez son moyen de paiement par défaut et créez un nouvel abonnement à partir de son dossier client existant.
Tester votre intégration
Tester les moyens de paiement
Utilisez le tableau suivant pour tester différents scénarios et moyens de paiement.
| Moyen de paiement | Scénario | Méthode de test |
|---|---|---|
| Prélèvement automatique BECS | Le montant dû est réglé par prélèvement automatique BECS. | Remplissez le formulaire à l’aide du numéro de compte 900123456 et du BSB 000000. La confirmation de la demande de PaymentIntent passe d’abord à l’état de traitement, puis à l’état réussi trois minutes plus tard. |
| Prélèvement automatique BECS | Le paiement de votre client échoue avec un code d’erreur account_. | Remplissez le formulaire à l’aide du numéro de compte 111111113 et du BSB 000000. |
| Carte bancaire | Le paiement par carte bancaire aboutit et ne nécessite pas d’authentification. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte 4242 4242 4242 4242 ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| Carte bancaire | Le paiement par carte bancaire requiert une authentification. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte 4000 0025 0000 3155 ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| Carte bancaire | La carte est refusée avec un code de refus de type insufficient_. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro 4000 0000 0000 9995 ainsi que la date d’expiration, le CVC et le code postal de votre choix… |
| Prélèvement automatique SEPA | Le montant dû est réglé par prélèvement automatique SEPA. | Remplissez le formulaire à l’aide du numéro de compte AT321904300235473204. Le PaymentIntent confirmé passe d’abord à l’état processing, puis à l’état succeeded trois minutes plus tard. |
| Prélèvement automatique SEPA | L’état du PaymentIntent de votre client passe de processing à requires_. | Remplissez le formulaire à l’aide du numéro de compte AT861904300235473202. |
Écouter des événements
Configurez des webhooks pour écouter les événements de changement d’abonnement, tels que les mises à niveau et les annulations. Apprenez-en plus sur les webhooks d’abonnement. Vous pouvez visualiser les événements dans le Dashboard ou via laStripe CLI.
Pour plus d’informations, voir la sectiontester votre intégration Billing.
FacultatifPermettre à vos clients de modifier leurs offresClient et serveur
Pour permettre à vos clients de modifier leur abonnement, collectez l’identifiant de prix de l’option choisie, puis envoyez-le depuis votre front-end vers un endpoint du back-end. L’identifiant de l’abonnement est également transmis, mais vous pouvez aussi le récupérer depuis votre base de données pour l’utilisateur connecté.
function updateSubscription(priceId, subscriptionId) { return fetch('/update-subscription', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ subscriptionId: subscriptionId, newPriceId: priceId, }), }) .then(response => { return response.json(); }) .then(response => { return response; }); }
Sur votre back-end, définissez l’endpoint que votre front-end appellera et transmettez les identifiants de l’abonnement et du nouveau prix. L’abonnement est maintenant Premium, à 15 USD par mois, au lieu de Basic à 5 USD par mois.
Votre application reçoit un événement customer..
FacultatifPrévisualiser un changement de tarifClient et serveur
Lorsqu’un client modifie son abonnement, le montant facturé est souvent réajusté, c’est ce qu’on appelle la proration. Utilisez l’endpoint create preview invoice pour générer et afficher la facture mise à jour à vos clients.
Sur le front-end, transmettez les informations de l’aperçu de création de la facture à un endpoint du back-end.
function createPreviewInvoice( customerId, subscriptionId, newPriceId, trialEndDate ) { return fetch('/create-preview-invoice', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ customerId: customerId, subscriptionId: subscriptionId, newPriceId: newPriceId, }), }) .then(response => { return response.json(); }) .then((invoice) => { return invoice; }); }
Sur le back-end, définissez le endpoint que votre front-end doit appeler.
FacultatifAfficher le moyen de paiement du clientClient et serveur
L’affichage de la marque et des quatre derniers chiffres de la carte bancaire de votre client peut aider ce dernier à savoir quelle carte bancaire est débitée, ou encore s’il doit mettre à jour son moyen de paiement.
Sur votre front-end, envoyez l’ID du moyen de paiement à un endpoint du back-end qui récupère les informations du moyen de paiement.
function retrieveCustomerPaymentMethod(paymentMethodId) { return fetch('/retrieve-customer-payment-method', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ paymentMethodId: paymentMethodId, }), }) .then((response) => { return response.json(); }) .then((response) => { return response; }); }
Sur le back-end, définissez le endpoint que votre front-end doit appeler.
Exemple de réponse :
{ "id": "pm_1GcbHY2eZvKYlo2CoqlVxo42", "object": "payment_method", "billing_details": { "address": { "city": null, "country": null, "line1": null, "line2": null, "postal_code": null,
Remarque
Nous vous recommandons d’enregistrer le paymentMethod. et les last4 dans votre base de données, par exemple paymentMethod. dans l’objet stripeCustomerPaymentMethod de votre collection ou table users. Vous pouvez également stocker, si nécessaire : exp_, exp_, fingerprint, billing_. Cela permet de limiter le nombre d’appels effectués vers Stripe, d’optimiser les performances et d’éviter les risques de limite d’appels.
Divulguer Stripe à vos clients
Stripe recueille des informations sur les interactions des clients avec Elements afin de vous fournir des services, de prévenir la fraude et d’améliorer ses services. Cela inclut l’utilisation de cookies et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une même session Checkout. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour que Stripe puisse utiliser les données à cette fin. Pour en savoir plus, visitez notre Centre de confidentialité.