Accepter un paiement par prélèvement SEPA

Découvrez comment accepter les paiements par prélèvement SEPA.

Web

Mobile

Remarque

Lorsque vous traitez des paiements par prélèvement automatique SEPA à l’aide de l’ID de créancier de Stripe, nous vous recommandons d’utiliser la page de paiement prédéfinie afin de collecter les mandats de prélèvement automatique SEPA.

Accepter un paiement par prélèvement SEPA sur votre site Web consiste à créer un objet afin de suivre un paiement, à recueillir les informations de moyen de paiement et la confirmation du mandat, puis à envoyer le paiement à Stripe pour traitement. Stripe utilise cet objet de paiement, le PaymentIntent, pour suivre et gérer les états successifs du paiement jusqu’à son exécution.

Vous pouvez également configurer le PaymentMethod d’un prélèvement automatique SEPA en demandant à votre client d’authentifier ses coordonnées bancaires à l’aide de Bancontact, d’iDEAL ou de Sofort.

Configurer Stripe
Côté serveur

Pour commencer, il vous faut un compte Stripe. Inscrivez-vous.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

Créer ou récupérer un client
Côté serveur

Pour réutiliser un compte de prélèvement automatique SEPA à l’occasion de paiements ultérieurs, le compte en question doit être associé à un objet Customer.

Vous devez créer un objet Customer lorsque votre client crée un compte auprès de votre entreprise. L’association de l’ID de l’objet Customer à votre propre représentation interne d’un client vous permettra de récupérer et d’utiliser ultérieurement les informations du moyen de paiement stockées.

Créez ou récupérez un client afin de l’associer à ce paiement. Ajoutez le code suivant à votre serveur pour créer le nouveau client.

Créer un PaymentIntent
Côté serveur

Un PaymentIntent est un objet qui représente votre intention collecter le paiement d’un client et qui filière le cycle de vie du processus de paiement à chaque étape. Tout d’abord, créez un PaymentIntent sur votre serveur et spécifiez le montant à collecter ainsi que la devise en euros (le prélèvement automatique SEPA ne prendre en charge les autres devises). Si vous disposez déjà d’une intégration utilisant l’API Payment Intents, ajoutez sepa_debit à la liste des types de moyens de paiement pour votre PaymentIntent. Spécifiez l’ID du client.

Pour enregistrer le compte de prélèvement automatique SEPA en vue de le réutiliser, définissez le paramètre setup_future_usage sur off_session. Le prélèvement automatique SEPA accepte uniquement la valeur off_session pour ce paramètre.

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

Vous pouvez à présent collecter les informations de paiement de votre client avec Stripe Elements. Elements est un ensemble de composants d’interface utilisateur préconfigurés 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.

submit_payment.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();

Ajouter et configurer un Element 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 également lire et accepter le mandat de prélèvement automatique 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 ou la confirmation d’un PaymentIntent vaut acceptation du mandat. Le client ayant tacitement signé le mandat, vous devez communiquer ces conditions dans votre formulaire ou par e-mail.

submit_payment.html
Sélectionner une langueHTML
CSS
 No results
<form action="/charge" method="post" id="payment-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 PaymentIntent as a data attribute   -->
  <button id="submit-button" data-secret="{{CLIENT_SECRET}}">Submit Payment</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 Element IBAN 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');

Envoyer le paiement à Stripe
Côté client

Au lieu de transmettre au client l’objet PaymentIntent dans son intégralité, utilisez la clé secrète du client de l’étape 3. Cette clé est différente de vos clés API qui servent à authentifier les requêtes à l’API Stripe.

La clé secrète du client doit être utilisée avec prudence, car elle peut servir à finaliser le paiement. Elle ne doit être ni enregistrée, ni intégrée dans des URL, ni dévoilée à d’autres personnes que votre client.

Utilisez stripe.confirmSepaDebitPayment pour déclencher le paiement lorsque l’utilisateur soumet le formulaire. Pour créer un PaymentMethod de type prélèvement automatique SEPA, vous devez inclure le nom et l’adresse e-mail du client dans la propriété billing_details du paramètre payment_method. De plus, les champs country et line1 doivent être renseignés dans la propriété billing_details.address pour les IBANs avec les codes pays suivants : AD, PF, TF, GI, GB, GG, VA, IM, JE, MC, NC, BL, PM, SM, CH et WF. Écoutez l’événement change de l’Element IBAN pour récupérer le code pays de l’IBAN.

const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');
const email = document.getElementById('email');
const submitButton = document.getElementById('submit-button');
const clientSecret = submitButton.dataset.secret;

form.addEventListener('submit', (event) => {
  event.preventDefault();
  stripe.confirmSepaDebitPayment(
    clientSecret,
    {
      payment_method: {
        sepa_debit: iban,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      },
    }
  );
});

Confirmer la réussite du PaymentIntent

Le prélèvement automatique SEPA étant un moyen de paiement à notification différée, les fonds ne sont pas disponibles immédiatement. Une fois le paiement envoyé, l’état du PaymentIntent passe de requires_confirmation à processing. À la réussite du paiement, l’état du PaymentIntent passe de processing à succeeded.

Les événements suivants sont envoyés lorsque le PaymentIntent change d’état :

Événement	Description	Étapes suivantes
`payment_intent.processing`	Le paiement du client a bien été envoyé à Stripe.	Attendez que le paiement effectué réussisse ou échoue.
`payment_intent.succeeded`	Le paiement du client a abouti.	Traitez la commande de biens ou de services de votre client.
`payment_intent.payment_failed`	Le paiement du client a été refusé.	Envoyez un e-mail ou une notification push au client pour lui demander d’utiliser un autre moyen de paiement.

Nous vous recommandons d’utiliser des webhooks afin de confirmer que le paiement a abouti et pour signaler au client que le paiement a été effectué.

Veuillez noter que, les paramètres setup_future_usage et customer ayant été définis, le PaymentMethod sera associé à l’objet Customer dès lors que le paiement passera à l’état processing. Cette association survient quelle que soit l’issue du paiement (succès ou échec).

Tester l'intégration

Stripe vous fournit plusieurs numéros de test que vous pouvez utiliser pour vous assurer que votre intégration est prête à passer en mode production. Utilisez les numéros de test de prélèvement SEPA lorsque vous testez votre intégration Checkout avec un prélèvement SEPA.

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

FacultatifValider le composant Element IBAN

L’Element IBAN valide les informations dès leur saisie par l’utilisateur. Pour aider vos clients à repérer d’éventuelles erreurs, nous vous conseillons d’écouter les événements change du composant Element IBAN et d’afficher les erreurs :

iban.on('change', (event) => {
  const displayError = document.getElementById('error-message');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

L’événement indiquant un changement contient d’autres paramètres qui peuvent vous aider à enrichir votre expérience utilisateur. Pour en savoir plus, consultez la documentation de Stripe.js.

FacultatifConfigurer la date de prélèvement du client

Vous pouvez contrôler la date à laquelle Stripe débite le compte bancaire d’un client à l’aide de la date butoir. La date cible doit être fixée au moins trois jours dans le futur et pas plus de 15 jours après la date actuelle.

La date butoir indique la date à laquelle les fonds doivent avoir quitté le compte du client. Vous pouvez annuler un PaymentIntent créé avec une date butoir jusqu’à trois jours ouvrables avant la date configurée.

Si la date butoir indiquée répond à l’un des critères suivants, le débit a lieu le jour ouvrable suivant :

La date butoir est un week-end, un jour férié ou un autre jour non ouvrable.
La date butoir est fixée moins de trois jours ouvrables dans le futur.

Ce paramètre fonctionne dans la mesure du possible. En effet, la banque de chaque client peut traiter les prélèvements à des dates différentes, en fonction des jours fériés locaux ou d’autres raisons.

FacultatifPersonnaliser les références de mandat à l’aide d’un préfixe

Vous pouvez personnaliser les références des mandats de prélèvement automatique SEPA afin de simplifier l’identification des mandats. Pour ce faire, saisissez la valeur facultative payment_method_options.sepa_debit.mandate_options.reference_prefix. Nous ajoutons le reference_prefix au début d’une séquence unique pour nous assurer que l’ensemble de la référence reste unique.

Le reference_prefix doit répondre aux exigences suivantes :

Longueur maximale : 12 caractères
Doit commencer par un chiffre ou une lettre majuscule
Caractères autorisés :
- Lettres majuscules
- Chiffres
- Espaces
- Caractères spéciaux : ., /, &, -, _
Ne peut pas commencer par STRIPE

Ajoutez tout délimiteur souhaité dans le préfixe, car nous n’en ajoutons pas par défaut. Nous réduisons les espaces de fin à un espace maximum. Avec un préfixe valide, la référence résultante comporte toujours 24 caractères.

La référence générée ressemble à EX4MPL3-19CNCI920C2M02O3.

Code d’erreur	Message
`invalid_sepa_mandate_reference_prefix_format`	La valeur de `reference_prefix` ne doit pas comporter plus de 12 caractères et ne peut contenir que des lettres majuscules, des chiffres, des espaces ou les caractères spéciaux `/`, `_`, `-`, `&` et `.`. Elle ne peut pas commencer par `STRIPE`.