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.

Configurez le serveur

Configurer Stripe

Installez le client Stripe de votre choix :

Créez 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 inciterles clients à opter pour des périodes de facturation plus longues et percevoir davantage de revenus à l’avance.

Pour d’autres modèles de tarification, voir la sectionExemples 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 embedded .
Pour créer des abonnements lorsque votre client paie, réglez le mode sur subscription.
Pour définir la page sur laquelle votre client retourne après avoir effectué ou tenté d’effectuer un paiement, spécifiez une return_url Incluez la variable de modèle {CHECKOUT_SESSION_ID} dans l’URL. Checkout remplace cette variable par l’identifiant de la session Checkout avant de rediriger votre client. Vous créez et hébergez la page de retour sur votre site internet.
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 custom text. Nous vous recommandons de configurer des rappels et notifications par e-mail pour vos abonnés.

Pour monter Checkout, utilisez le 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 ce 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. Stripe insère un iframe dans le div.

Checkout est disponible dans : Stripe.js. Ajoutez le script Stripe.js à votre page en l’insérant dans 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/clover/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érez une clé secrète client de session Checkout

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

Initialiser Checkout

Initialisez Checkout avec votre fonction fetchClientSecret et montez-la sur le placeholder .<div> dans votre formulaire de paiement. Checkout est affiché dans un iframe qui envoie de façon 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 que votre client a tenté d’effectuer un paiement, 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 cette 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 par exemple une page d’autorisation bancaire. Une fois cette étape validée, Stripe redirige le client 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’identifiant de session Checkout dans l’URL.

Récupérez une session Checkout

Pour exploiter les informations de la session Checkout, envoyez immédiatement une requête à l’endpoint de votre serveur pour récupérer la session Checkout, en utilisant l’identifiant de la session Checkout présent dans l’URL, dès le chargement de votre page de retour.

Gérer la session

Traitez le résultat établi 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, configurez le portail afin de 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 internet un bouton de redirection vers le portail client, afin de leur permettre de gérer leur abonnement. Lorsqu’ils cliquent sur ce bouton, vos clients sont redirigés vers la page du portail client hébergée par Stripe.

Apprenez-en davantage sur le portail clientet les autres options de gestion des clients.

Créez une session de portail

Pour ajouter un portail client, définissez un endpoint qui crée la session du portail client pour que votre front-end l’appelle. L’identifiant CUSTOMER_ID correspond à l’identifiant client créé par une session Checkout et que vous avez enregistré lors du traitement du webhook checkout.session.completed. Vous pouvez également définir un lien de redirection par défaut pour le portail dans le Dashboard.

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

Redirigez les clients vers le portail client

Sur votre interface, ajoutez un bouton sur la page à l’adresse success_url, afin de fournir un lien 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 à l’URL : return_url. Continuez à surveiller les événements pour suivre l’état de l’abonnement du client.

Si vous configurez le portail client pour permettre des actions telles que l’annulation d’un abonnement, veillez à surveiller les événements supplémentaires .

Fourniture de l'accès

Lorsque l’abonnement est actif, donnez à votre utilisateur l’accès à votre service. Pour ce faire, écoutez les événementscustomer.subscription.created, customer.subscription.updated, et customer.subscription.deleted. Ces événements transmettent un objet Subscription qui contient un champ status indiquant si l’abonnement est actif, en retard ou annulé. Consultez le cycle de vie de l’abonnement pour obtenir la liste complète des états. Pour gérer l’accès aux fonctionnalités de votre produit, découvrez l’intégration des droits.

Dans votre gestionnaire de webhooks :

Vérifiez l’état de l’abonnement. S’il s’agit de active, votre utilisateur a payé pour votre produit.
Vérifiez le produit auquel votre client s’est abonné et donnez-lui accès à votre service. La vérification du produit plutôt que du tarif vous permet de modifier la tarification ou la période de facturation si nécessaire.
Sauvegardez les product.id, subscription.id et subscription.status dans votre base de données, ainsi que customer.id que vous avez déjà enregistré. 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 évoluer à 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 paiement en retard. Ou encore, 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 garantit la synchronisation de l’état de votre application avec 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`.

Écouter des événements

Configurez des webhooks pour écouter les événements de changement d’abonnement, tels que les mises à niveau et les annulations. Vous pouvez visualiser lesévénements webhook d’abonnementdans leDashboard ou avec laStripe CLI.

Apprenez-en davantage sur le test de votre intégration de facturation