Créer une intégration pour les abonnements

Créez et gérez des abonnements pour les paiements récurrents.

Web

iOS

Android

React Native

togethere.work

Effort d'intégration

Low-code

Personnalisation de l'interface utilisateur

Personnalisez l’apparence.

Type d'intégration

Utilisez les formulaires intégrés préconfigurés pour encaisser les paiements et gérer les abonnements de vos clients.

Configurer le serveur

Configurer Stripe

Installez le client Stripe de votre choix :

Créer un produit et un tarif

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.

Accédez à la page Ajouter un produit et créez deux produits. Ajoutez un tarif pour chaque produit, avec une période de facturation mensuelle récurrente :

Produit Premium : service Premium avec fonctionnalités supplémentaires
- Prix : Appuyez sur Payer 15 USD.
Produit de base : service de base avec fonctionnalités minimales
- Prix : Forfaitaire | 5 USD

Après avoir créé vos tarifs, enregistrez les ID de tarif de manière à pouvoir les utiliser dans d’autres étapes. Les ID de tarif se présentent sous la forme suivante : price_G0FvDp6vZvdwRZ.

Lorsque vous le souhaitez, cliquez sur le bouton Copier en mode production en haut à droite de la page pour dupliquer votre produit de l’environnement de test en mode production.

Si vous proposez plusieurs périodes de facturation, utilisez Checkout pour inciter les clients à opter pour des périodes de facturation plus longues et percevoir plus de revenus à l’avance.

Pour les autres modèles tarifaires, consultez ces exemples de facturation.

Créer une session Checkout

Ajoutez un endpoint sur votre serveur qui crée une session Checkout.

Lorsque vous créez la session Checkout, transmettez les paramètres suivants :

Pour utiliser le formulaire de paiement intégré, définissez ui_mode sur intégré.
Pour créer des abonnements au moment du règlement de votre client, définissez le mode sur subscription.
Pour définir la page vers laquelle votre client revient après avoir finalisé ou tenté un paiement, spécifiez une return_url. Incluez la variable de modèle {CHECKOUT_SESSION_ID} dans l’URL. Checkout remplace la variable par l’ID de session Checkout avant de rediriger votre client. Vous créez et hébergez la page de retour sur votre site Web.
Pour inclure vos conditions d’abonnement et d’annulation, ainsi qu’un lien vers l’endroit où vos clients peuvent mettre à jour ou annuler leur abonnement, vous pouvez utiliser un texte personnalisé. Nous vous recommandons de configurer des rappels et notifications par e-mail pour vos abonnés.

Pour monter Checkout, utilisez la client_secret de la session Checkout renvoyé dans la réponse.

Créez votre page d'abonnement
Client

Monter Checkout

Charger Stripe.js

Utilisez Stripe.js pour rester en conformité avec la norme PCI en veillant à ce que les informations de paiement soient envoyées directement à Stripe sans passer par votre serveur. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.

Définir le formulaire de paiement

Pour collecter les informations du client en toute sécurité, créez un espace réservé vide div, dans lequel Stripe va insérer un iframe.

Checkout est disponible dans Stripe.js. Intégrez le script Stripe.js à votre page en l’ajoutant à l’en-tête de votre fichier HTML. Ensuite, créez un nœud DOM vide (conteneur) à utiliser pour le montage.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Accept a payment</title>
    <meta name="description" content="A demo of a payment on Stripe" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <!-- Add the Stripe.js script here -->
    <script src="https://js.stripe.com/basil/stripe.js"></script>
    <script src="checkout.js" defer></script>
  </head>
  <body>
    <!-- Display a payment form -->
      <div id="checkout">
        <!-- Checkout inserts the payment form here -->
      </div>
  </body>
</html>

Initialiser Stripe.js

Initialisez Stripe.js avec votre clé API publique.

Récupérer la clé secrète du client de la session Checkout

Créez une fonction fetchClientSecret asynchrone qui demande à votre serveur de créer une session Checkout et de récupérer la clé secrète du client.

Initialiser Checkout

Initialisez Checkout avec votre fonction fetchClientSecret et montez-le dans l’espace réservé <div> de votre formulaire de paiement. Checkout s’affiche dans un iframe qui envoie de manière sécurisée les informations de paiement à Stripe via une connexion HTTPS.

Évitez de placer Checkout dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Afficher une page de retour

Après la tentative de paiement de votre client, Stripe le redirige vers une page de retour que vous hébergez sur votre site. Lorsque vous avez créé la session Checkout, vous avez spécifié l’URL de la page de retour dans le paramètre return_url.

Remarque

Lors du paiement, certains moyens de paiement redirigent le client vers une page intermédiaire, comme la page d’autorisation de sa banque. Une fois qu’il a renseigné cette page, Stripe le redirige vers votre page de retour.

Créer un endpoint pour récupérer une session Checkout

Ajoutez un endpoint pour récupérer l’état d’une session Checkout avec l’ID de session Checkout dans l’URL.

Récupérer une session Checkout

Pour utiliser les informations de la session Checkout, demandez immédiatement au endpoint de votre serveur de récupérer l’état de la session Checkout à l’aide de l’ID figurant dans l’URL dès le chargement de votre page de retour.

Gérer la session

Gérez le résultat en fonction de l’état de la session :

complete : le paiement a abouti. Utilisez les informations de la session Checkout pour afficher une page de confirmation.
open : le paiement a échoué ou a été annulé. Montez à nouveau Checkout pour que votre client puisse effectuer une nouvelle tentative.

return.js
// Retrieve a Checkout Session
// Use the session ID
initialize();

async function initialize() {
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const sessionId = urlParams.get('session_id');
  const response = await fetch(`/session-status?session_id=${sessionId}`);
  const session = await response.json();
// Handle the session according to its status
  if (session.status == 'open') {
    // Remount embedded Checkout
    window.location.replace('http://localhost:4242/checkout.html')
  } else if (session.status == 'complete') {
    document.getElementById('success').classList.remove('hidden');
    document.getElementById('customer-email').textContent = session.customer_email;
    // Show success page
    // Optionally use session.payment_status or session.customer_email
    // to customize the success page
  }
}

server.js
// Add an endpoint to fetch the Checkout Session status
app.get('/session_status', async (req, res) => {
  const session = await stripe.checkout.sessions.retrieve(req.query.session_id);
  const customer = await stripe.customers.retrieve(session.customer);

  res.send({
    status: session.status,
    payment_status: session.payment_status,
    customer_email: customer.email
  });
});

FacultatifConfigurer le portail client

Vous pouvez configurer le portail client pour permettre à vos clients de gérer directement leurs abonnements et factures existants.

Vous pouvez configurer le portail dans le Dashboard. Pour réduire le taux d’attrition, vous pouvez configurer le portail pour permettre aux clients de mettre à jour leurs moyens de paiement en cas d’échec de paiement.

Pour faciliter la recherche des clients, ajoutez sur votre site Web un bouton de redirection vers le portail client pour permettre aux clients de gérer leur abonnement. Lorsque les clients cliquent sur ce bouton, ils sont redirigés vers la page du portail client hébergée par Stripe.

En savoir plus sur le portail client et les autres options de gestion des clients.

Créer une session de portail

Pour ajouter le portail à votre expérience client, définissez un endpoint qui crée la session du portail client que votre front-end appellera. Ici, CUSTOMER_ID fait référence à l’ID client créé par une session Checkout que vous avez enregistrée lors du traitement du webhook checkout.session.completed. Vous pouvez également définir un lien de redirection par défaut vers le portail dans le Dashboard.

Transmettez une valeur return_url facultative pour la page de votre site vers laquelle rediriger votre client après qu’il a terminé la gestion de son abonnement :

Rediriger les clients vers le portail client

Sur votre front-end, ajoutez à la page success_url un bouton redirigeant vers le portail client :

success.html
Afficher l'exemple dans son intégralité
<html>
  <head>
    <title>Manage Billing</title>
  </head>
  <body>
    <form action="/customer-portal" method="POST">
      <!-- Note: If using PHP set the action to /customer-portal.php -->
      <button type="submit">Manage Billing</button>
    </form>
  </body>
</html>

Après avoir quitté le portail client, votre client revient sur votre site Web à la page return_url. Continuez à surveiller les événements pour filière l’état de client abonnement.

Si vous configurez le portail client de manière à autoriser des actions telles que l’annulation d’un abonnement, vous devriez surveiller les événements supplémentaires.

Fourniture de l'accès

Maintenant que l’abonnement est actif, fournissez à votre client l’accès à votre service. Pour ce faire, écoutez les événements customer.subscription.created, customer.subscription.updated et customer.subscription.deleted. Ces événements transmettent un objet Subscription dans lequel un champ status indique si l’abonnement est actif, en retard de paiement ou annulé. Consultez la documentation consacrée au cycle de vie des abonnements pour prendre connaissance de la liste complète des états. Pour en savoir plus sur la gestion de l’accès aux fonctionnalités de votre produit, consultez la documentation sur l’intégration des droits d’accès.

Dans votre gestionnaire de webhooks :

Vérifiez l’état de l’abonnement. S’il affiche active, cela signifie que votre client a payé son abonnement.
Vérifiez le produit auquel le client s’est abonné et accordez-lui l’accès à votre service. La vérification du produit plutôt que du tarif vous donne plus de flexibilité si vous devez modifier la tarification ou la période de facturation.
Sauvegardez les product.id, subscription.id et subscription.status dans votre base de données avec le customer.id déjà stocké. Vérifiez cet enregistrement au moment de décider des fonctionnalités à activer pour l’utilisateur dans votre application.

L’état d’un abonnement peut changer à tout moment de son cycle de vie, même si votre formulaire d’inscription n’appelle pas directement Stripe. Par exemple, un renouvellement peut échouer en raison d’une carte bancaire expirée, ce qui fait passer l’abonnement à l’état en retard. Ou, si vous implémentez le portail client, un utilisateur peut choisir d’annuler son abonnement sans accéder directement à votre formulaire d’inscription. L’implémentation correcte de votre gestionnaire permet de synchroniser l’état de votre formulaire d’inscription avec celui de Stripe.

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_closed`.	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_funds`.	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_payment_method`.	Remplissez le formulaire à l’aide du numéro de compte `AT861904300235473202`.

Surveillance des événements

Configurez des webhooks pour écouter les événements de modification d’abonnement, tels que les mises à niveau et les annulations. En savoir plus sur les webhooks d’abonnement . Vous pouvez afficher les événements dans le Dashboard ou via l’interface de ligne de commandeStripe.

En savoir plus sur le test de votre intégration Billing.