Configurer un abonnement par prélèvement automatique SEPA

Découvrez comment créer et facturer un abonnement avec le prélèvement automatique SEPA.

Apprenez à créer et débiter un abonnement grâce à un prélèvement SEPA.

Remarque

Contrairement à ce qui est indiqué dans ce guide, nous recommandons aux nouveaux utilisateurs d’utiliser le composant Payment Element plutôt que Stripe Elements. Le composant Payment Element propose un chemin d’intégration avec peu de code et des optimisations de conversion intégrées. Pour connaître la procédure à suivre, consultez la documentation consacrée à la création d’un abonnement.

Créer un produit et un tarif
Dashboard

Les produits correspondent aux articles ou services que vous vendez. Les tarifs définissent le montant et la fréquence des paiements facturés pour un produit. Le tarif prend en compte la valeur du produit, la devise que vous acceptez et s’il s’agit d’un paiement ponctuel ou récurrent. Si vous n’avez que quelques produits et tarifs, créez-les et gérez-les dans le Dashboard.

Ce guide prend comme exemple un service de banque d’images qui débite ses clients d’un montant de 15 EUR pour un abonnement mensuel. Pour modéliser ceci :

Go to the Products page and click Create product.
Saisissez un Nom pour le produit. Vous pouvez éventuellement ajouter une Description et télécharger une image du produit.
Select a Product tax code. Learn more about product tax codes.
Sélectionnez Récurrent. Saisissez ensuite pour le prix et sélectionnez comme devise.
Choose whether to Include tax in price. You can either use the default value from your tax settings or set the value manually. In this example, select Auto.
Pour Période de facturation, sélectionnez Mensuel.
Click More pricing options. Then select Flat rate as the pricing model for this example. Learn more about flat rate and other pricing models.
Add an internal Price description and Lookup key to organize, query, and update specific prices in the future.
Cliquez sur Suivant. Cliquez ensuite sur Ajouter un produit.

Après avoir créé le produit et le tarif, enregistrez l’ID de tarif de manière à pouvoir l’utiliser dans les étapes ultérieures. La page des tarifs affiche l’ID dont le format est similaire à ce qui suit : price_G0FvDp6vZvdwRZ.

Créer un client
Côté serveur

Un abonnement doit être associé à un objet Customer afin de pouvoir réutiliser les moyens de paiement et suivre les paiements récurrents. Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise.

Créer un abonnement
Côté serveur

Créez l’abonnement à l’aide des ID de client et de tarif. Renvoyez côté client le client_secret du confirmation_secret.client_secret de la dernière facture ou, pour les abonnements ne collectant pas immédiatement le premier paiement, du pending_setup_intent. De plus, définissez :

l’attribut payment_behavior sur default_incomplete pour simplifier la collecte du mandat de prélèvement automatique SEPA.
la méthode save_default_payment_method sur on_subscription pour enregistrer un moyen de paiement comme moyen de paiement par défaut pour l’abonnement lorsque le paiement aboutit. L’enregistrement d’un moyen de paiement par défaut augmente le taux de réussite des paiements futurs.

Collecter les informations du moyen de paiement et la confirmation du mandat
Côté client

Vous êtes prêt à collecter les informations de paiement sur le client avec Stripe Elements. Elements est un ensemble de composants d’interface utilisateur prédéfinis pour la collecte des informations de paiement.

Un composant Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de règlement doit aussi commencer par https:// au lieu de http://.

Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez-le au moment d’accepter des paiements en mode production.

Configurer Stripe Elements

Stripe Elements est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement, entre les balises head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.

payment_setup.html
<head>
  <title>Submit Payment</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Créez une instance d’Elements avec le JavaScript suivant sur votre page de paiement :

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Ajoutez et configurez un élément IBAN

Elements doit avoir un emplacement dédié dans votre formulaire de paiement. Créez des nœuds de DOM (conteneurs) ayant des ID uniques dans votre formulaire de paiement. Votre client doit lire et accepter le mandat de prélèvement SEPA.

Affichez le texte d’autorisation standard suivant afin que votre client puisse signer le mandat de manière tacite.

Remplacez Rocket Rides par le nom de votre entreprise.

Authorization text template

By providing your payment information and confirming this payment, you authorise (A) and Stripe, our payment service provider, to send instructions to your bank to debit your account and (B) your bank to debit your account in accordance with those instructions. As part of your rights, you are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. Your rights are explained in a statement that you can obtain from your bank. You agree to receive notifications for future debits up to 2 days before they occur.

Copier

La configuration d’un moyen de paiement vaut acceptation du mandat. Le client ayant tacitement signé le mandat lorsqu’il a accepté ces conditions, vous devez communiquer ces dernières dans votre formulaire ou par e-mail.

payment_setup.html
<form action="/form" method="post" id="setup-form">
  <div class="form-row inline">
    <div class="col">
      <label for="accountholder-name">
        Name
      </label>
      <input
        id="accountholder-name"
        name="accountholder-name"
        placeholder="Jenny Rosen"
        required
      />
    </div>

    <div class="col">
      <label for="email">
        Email Address
      </label>
      <input
        id="email"
        name="email"
        type="email"
        placeholder="jenny.rosen@example.com"
        required
      />
    </div>
  </div>

  <div class="form-row">
    <!--
      Using a label with a for attribute that matches the ID of the
      Element container enables the Element to automatically gain focus
      when the customer clicks on the label.
    -->
    <label for="iban-element">
      IBAN
    </label>
    <div id="iban-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <!-- Add the client_secret from the SetupIntent as a data attribute   -->
  <button id="submit-button" data-secret="{CLIENT_SECRET}">
    Set up SEPA Direct Debit
  </button>

  <!-- Display mandate acceptance text. -->
  <div id="mandate-acceptance">
    By providing your payment information and confirming this payment, you
    authorise (A) Rocket Rides and Stripe, our payment service provider
    and/or PPRO, its local service provider, to send instructions to your
    bank to debit your account and (B) your bank to debit your account in
    accordance with those instructions. As part of your rights, you are
    entitled to a refund from your bank under the terms and conditions of
    your agreement with your bank. A refund must be claimed within 8 weeks
    starting from the date on which your account was debited. Your rights
    are explained in a statement that you can obtain from your bank. You
    agree to receive notifications for future debits up to 2 days before
    they occur.
  </div>
  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>
</form>

Lors du chargement du formulaire, vous pouvez créer une instance du composant IBAN Element et l’intégrer au conteneur Element :

// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    color: '#32325d',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    },
    ':-webkit-autofill': {
      color: '#32325d',
    },
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a',
    ':-webkit-autofill': {
      color: '#fa755a',
    },
  },
};

const options = {
  style,
  supportedCountries: ['SEPA'],
  // Elements can use a placeholder as an example IBAN that reflects
  // the IBAN format of your customer's country. If you know your
  // customer's country, we recommend passing it to the Element as the
  // placeholderCountry.
  placeholderCountry: 'DE',
};

// Create an instance of the IBAN Element
const iban = elements.create('iban', options);

// Add an instance of the IBAN Element into the `iban-element` <div>
iban.mount('#iban-element');

Soumettre les informations du moyen de paiement à Stripe
Côté client

Utilisez l’attribut confirmSepaDebitPayment ou, pour les abonnements n’encaissant pas immédiatement le premier paiement, l’attribut confirmSepaDebitSetup pour confirmer l’abonnement et créer un objet PaymentMethod pour prélèvement automatique SEPA. Ajoutez le nom et l’adresse e-mail du client dans les propriétés payment_method.billing_details.

PaymentSetup.js
// Define stripe with your publishable key
var stripe = Stripe('pk_test_1234');

// Get the IBAN information from your element
var iban = document.getElementById('iban-element');

const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');
const email = document.getElementById('email');

form.addEventListener('submit', async(event) => {
  event.preventDefault();
  // Create the subscription
  const res = await fetch('/create-subscription', {
    method: 'POST',
  });
  const {type, clientSecret} = await res.json();
  const confirmIntent = type === 'setup' ? stripe.confirmSepaDebitSetup : stripe.confirmSepaDebitPayment;

  const {error} = await confirmIntent({
    clientSecret,
    {
      payment_method: {
        sepa_debit: iban,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      },
    }
  });
});

Configurer le moyen de paiement par défaut
Côté serveur

Vous devez ajouter un moyen de paiement enregistré au client afin que les paiements à venir puissent aboutir. Pour ce faire, vous devez configurer le moyen de paiement que vous avez recueilli au niveau racine de l’objet Customer et définir ce moyen de paiement comme moyen de paiement par défaut pour les factures :

Gérer l'état de l'abonnement
Côté client

Si le paiement initial aboutit, l’état de l’abonnement est actif et aucune action supplémentaire n’est nécessaire. Si le paiement échoue, l’état passe à l’état de l’abonnement que vous avez configuré dans vos paramètres de recouvrement automatique. Avisez votre client que le paiement a échoué et débiter-le avec un autre moyen de paiement.

Remarque

Les paiements par prélèvement automatique SEPA ne sont jamais automatiquement relancés, même si vous avez configuré une planification de relance pour les autres moyens de paiement.

Tester l'intégration

Vous pouvez tester votre intégration en utilisant les IBAN ci-dessous. Les détails du moyen de paiement sont collectés pour chaque IBAN, mais présentent un comportement différent lorsqu’ils sont débités.

Testez les numéros IBAN

Numéro de compte	Description
`DE89370400440532013000`	L'état du PaymentIntent passe de `processing` à `succeeded`.
`DE08370400440532013003`	L'état du PaymentIntent passe de `processing` à `succeeded`au bout d'au moins trois minutes.
`DE62370400440532013001`	L'état du PaymentIntent passe de `processing` à `requires_payment_method`.
`DE78370400440532013004`	L'état du PaymentIntent passe de `processing` à `requires_payment_method`au bout d'au moins trois minutes.
`DE35370400440532013002`	L'état du PaymentIntent passe de `processing` à `succeeded`, mais un litige est immédiatement créé.
`DE65370400440000343434`	Le paiement échoue avec un code d'erreur `charge_exceeds_source_limit` , car le montant du paiement entraîne un dépassement de la limite hebdomadaire de volume de paiement du compte.
`DE27370400440000121212`	Le paiement échoue avec un code d'erreur `charge_exceeds_weekly_limit` , car le montant du paiement dépasse la limite du volume de transactions du compte.
`DE65370400440002222227`	Échec du paiement avec un code d’échec `insufficient_funds`.

FacultatifDéfinir la période de facturation

Lorsque vous créez un abonnement, le système définit automatiquement le cycle de facturation par défaut. Par exemple, si un client s’abonne à un plan mensuel le 7 septembre, il est ensuite facturé le 7 de chaque mois. Certaines entreprises préfèrent définir le cycle de facturation manuellement afin de pouvoir facturer leurs clients conjointement à chaque cycle. L’argument billing cycle anchor vous permet d’effectuer cette opération.

La définition manuelle du cycle de facturation facture automatiquement au client un montant au prorata pour la période écoulée entre la création de l’abonnement et la date de début du cycle de facturation. Si vous ne souhaitez pas que les clients soient facturés pour cette période, vous pouvez définir l’argument proration_behavior sur none. Vous pouvez également combiner la date de début du cycle de facturation avec des périodes d’essai pour permettre aux clients d’accéder gratuitement à votre produit et ensuite leur facturer un montant au prorata.

FacultatifPériodes d'essai avant abonnement

Les essais gratuits permettent aux clients d’accéder à votre produit gratuitement pendant une certaine période. L’utilisation d’essais gratuits est différente de la définition de proration_behavior sur none, car vous pouvez personnaliser la durée des périodes gratuites. Transmettez un horodatage dans fin de l’essai pour définir la période d’essai.

Vous pouvez également combiner une date de début du cycle de facturation avec un essai gratuit. Supposons par exemple que nous sommes le 15 septembre et que vous voulez offrir à votre client un essai gratuit de sept jours, puis lancer le cycle de facturation normal le 1er octobre. Vous pouvez définir la fin de l’essai gratuit le 22 septembre et l’ancre du cycle de facturation le 1er octobre. Ainsi, le client bénéficie d’un essai gratuit pendant sept jours et paye un montant au prorata pour la durée comprise entre la fin de l’essai et le 1er octobre. Le 1er octobre, vous facturez à ce client le montant normal de l’abonnement pour son premier cycle de facturation complet.

FacultatifCréer des paiements par prélèvement SEPA avec d'autres moyens de paiement

Vous pouvez créer des paiements par prélèvement automatique SEPA avec d’autres moyens de paiement comme Bancontact, iDEAL ou Sofort. L’utilisation de ces moyens de paiement nécessite quelques étapes supplémentaires. Pour iDEAL :

Utilisez un composant Element idealBank pour collecter les informations de paiement.
Confirmez l’abonnement à l’aide du paramètre confirmIdealPayment ou, pour les abonnements n’encaissant pas immédiatement le premier paiement, du paramètre confirmIdealSetup.
Affichez la liste des moyens de paiement du client, recherchez le moyen de paiement par prélèvement automatique SEPA, puis définissez-le comme moyen de paiement par défaut du client.

Pour Bancontact et Sofort, remplacez :

confirmIdealPayment par confirmBancontactPayment ou confirmSofortPayment
confirmIdealSetup par confirmBancontactSetup ou confirmSofortSetup

Configurer un abonnement par prélèvement automatique SEPA

Découvrez comment créer et facturer un abonnement avec le prélèvement automatique SEPA.

Remarque

Créer un produit et un tarifDashboard

Créer un clientCôté serveur

Créer un abonnementCôté serveur

Collecter les informations du moyen de paiement et la confirmation du mandatCôté client

Configurer Stripe Elements

Ajoutez et configurez un élément IBAN

Soumettre les informations du moyen de paiement à StripeCôté client

Configurer le moyen de paiement par défautCôté serveur

Gérer l'état de l'abonnementCôté client

Remarque

Tester l'intégration

Testez les numéros IBAN

FacultatifDéfinir la période de facturation

FacultatifPériodes d'essai avant abonnement

FacultatifCréer des paiements par prélèvement SEPA avec d'autres moyens de paiement

Créer un produit et un tarif
Dashboard

Créer un client
Côté serveur

Créer un abonnement
Côté serveur

Collecter les informations du moyen de paiement et la confirmation du mandat
Côté client

Soumettre les informations du moyen de paiement à Stripe
Côté client

Configurer le moyen de paiement par défaut
Côté serveur

Gérer l'état de l'abonnement
Côté client