Créer une intégration pour les abonnements

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

Copier la page

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
- Tarif : Tarif standard | 15 USD
Produit de base : service de base avec fonctionnalités minimales
- Tarif : Tarif standard | 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.

When you’re ready, use the Copy to live mode button at the top right of the page to clone your product from a sandbox to live mode.

Si vous proposez différentes périodes d’abonnement, utilisez Checkout pour faire de l’upselling et inciter vos clients à s’abonner sur une plus longue période afin de vendre plus.

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 Checkout intégré, définissez ui_mode sur embedded.
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 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/v3/"></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

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 fournissez l’accès à votre service. Le fait de vérifier le produit plutôt que le tarif vous assure une plus grande souplesse si vous devez modifier la tarification ou la fréquence 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 application n’appelle pas directement Stripe. Par exemple, un renouvellement peut échouer en raison d’une carte expirée, ce qui fait passer l’abonnement à l’état « past due ». Ou, si vous implémentez le portail client, un utilisateur peut choisir d’annuler son abonnement sans accéder directement à votre application. L’implémentation correcte de votre gestionnaire permet de synchroniser l’état de votre application 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 `000-000`. Le PaymentIntent confirmé passe d’abord à l’état `processing`, puis à l’état `succeeded` 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 `000-000`.
Carte bancaire	The card payment succeeds and doesn’t require authentication.	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	Your customer’s PaymentIntent status transitions from `processing` to `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.