Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous
Aperçu
Billing

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.

Copier la page

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 :

  1. Rendez-vous à la page Ajouter un produit.
  2. Saisissez un Nom pour le produit.
  3. Saisissez 15 pour le tarif.
  4. Sélectionnez la devise EUR.
  5. 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.

Command Line
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

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.
server.rb
# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


post '/create-subscription' do
  content_type 'application/json'
  data = JSON.parse(request.body.read)
  customer_id = cookies[:customer]
  price_id = data['priceId']

  subscription = Stripe::Subscription.create(
    customer: customer_id,
    items: [{
      price: price_id,
    }],
    payment_behavior: 'default_incomplete',
    payment_settings: {save_default_payment_method: 'on_subscription'},
    expand: ['latest_invoice.confirmation_secret', 'pending_setup_intent']
  )

  if subscription.pending_setup_intent != nil
    { type: 'setup', clientSecret: subscription.pending_setup_intent.client_secret }.to_json
  else
    { type: 'payment', clientSecret: subscription.latest_invoice.confirmation_secret.client_secret }.to_json
  end
end

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 :

Command Line
curl https://api.stripe.com/v1/customers/cus_Gk0uVzT2M4xOKD \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "invoice_settings[default_payment_method]"=pm_1F0c9v2eZvKYlo2CJDeTrB4n

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 compteDescription
DE89370400440532013000L'état du PaymentIntent passe de processing à succeeded.
DE08370400440532013003L'état du PaymentIntent passe de processing à succeededau bout d'au moins trois minutes.
DE62370400440532013001L'état du PaymentIntent passe de processing à requires_payment_method.
DE78370400440532013004L'état du PaymentIntent passe de processing à requires_payment_methodau bout d'au moins trois minutes.
DE35370400440532013002L'état du PaymentIntent passe de processing à succeeded, mais un litige est immédiatement créé.
DE65370400440000343434Le 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.
DE27370400440000121212Le 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.
Cette page vous a-t-elle été utile ?
OuiNon
Besoin d'aide ? Contactez le service Support.
Rejoignez notre programme d'accès anticipé.
Consultez notre log des modifications.
Des questions ? Contactez l'équipe commerciale.
LLM ? Lire llms.txt.
Propulsé par Markdoc