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 :

Rendez-vous à la page Ajouter un produit.
Saisissez un Nom pour le produit.
Saisissez 15 pour le tarif.
Sélectionnez la devise EUR.
Cliquez sur Enregistrer le 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

Create the subscription using the customer and price IDs. Return to the client side the client_secret from either the latest invoice’s confirmation_secret.client_secret or, for subscriptions that don’t collect a payment up front, the pending_setup_intent. Additionally, set:

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/v3/"></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 passe à active 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 d’encaissement automatique. Vous devez alors avertir votre client que le paiement a échoué et le débiter 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`	The payment fails with an `insufficient_funds` failure code.

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 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

Configurer Stripe Elements

Ajoutez et configurez un élément IBAN

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

Remarque

Tester l'intégration

Testez les numéros IBAN

FacultatifConfigurer le cycle de facturation

FacultatifPériodes d'essai avant abonnement

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

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

FacultatifConfigurer le cycle 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