Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageManaged Payments
Moyens de paiement
Interfaces de paiement
Scénarios de paiement
Paiements par TPE
Autres produits Stripe

Enregistrer les coordonnées de prélèvement SEPA pour les paiements futurs

Découvrez comment enregistrer les informations de moyens de paiement pour les paiements futurs par prélèvement SEPA.

Copier la page

Remarque

Lorsque vous traitez des paiements par prélèvement automatique SEPA à l’aide de l’identifiant de créancier de Stripe, nous vous recommandons d’utiliser la page Checkout prédéfinie afin d’enregistrer les informations du prélèvement automatique SEPA en vue d’une utilisation ultérieure.

Vous pouvez utiliser l’API Setup Intents pour collecter à l’avance les données d’un moyen de paiement, en vue d’un paiement dont la date et le montant seront déterminés ultérieurement. Utilisez-la pour :

Configurer Stripe
Côté serveur

Pour commencer, vous devez créer un compte Stripe. Inscrivez-vous maintenant.

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

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Créer ou récupérer un Customer
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. En associant l’ID de l’objet Customer à votre propre représentation interne de ce client, vous pourrez par la suite récupérer et utiliser les informations stockées concernant son moyen de paiement. Si votre client n’a pas créé de compte, il vous est toujours possible de lui créer un objet Customer sans attendre, que vous associerez ultérieurement à votre représentation interne de ce compte client.

Créez ou récupérez un objet Customer afin de l’associer à ces informations de paiement. Ajoutez le code suivant à votre serveur pour créer un objet Customer.

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

Créer un SetupIntent
Côté serveur

Un SetupIntent est un objet qui représente votre intention de configurer le moyen de paiement de votre client en vue de paiements ultérieurs, et suit les étapes de cette configuration. Dans le cas d’un prélèvement SEPA, cet objet prévoit l’obtention d’un mandat auprès du client et la vérification de la validité de l’IBAN.

Créez un SetupIntent sur votre serveur avec payment_method_types défini sur sepa_debit et spécifiez l’id … :

Command Line
curl https://api.stripe.com/v1/setup_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"="sepa_debit" \
  -d "customer"="{{CUSTOMER_ID}}"

Recueillir 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');

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

Au lieu de transmettre intégralement au client l’objet SetupIntent, 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 envoyées aux API Stripe.

La clé secrète du client doit être manipulée avec prudence, car elle permet de mettre en œuvre la configuration. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.

Utilisez stripe.confirmSepaDebitSetup pour finaliser la configuration 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 numéros IBAN 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 du composant Element IBAN pour récupérer le code pays de l’IBAN.

Si la configuration réussit, la propriété status du SetupIntent passera à succeeded. Si la configuration échoue, inspectez la valeur error renvoyée pour déterminer la cause de l’échec.

Étant donné que customer a été défini, le PaymentMethod sera associé à l’objet Customer renseigné une fois la configuration réalisée. Vous pourrez ainsi utiliser le PaymentMethod enregistré afin d’encaisser les paiements ultérieurs, sans avoir à demander au client les informations de son moyen de paiement.

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.confirmSepaDebitSetup(
    clientSecret,
    {
      payment_method: {
        sepa_debit: iban,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      },
    }
  );
});

Tester l'intégration

Vous pouvez tester votre formulaire en utilisant les codes IBAN ci-dessous avec votre requête confirmSepaDebitSetup. Les informations de paiement sont collectées pour chaque IBAN, mais présentent un comportement différent lorsque le moyen de paiement est débité.

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.

Voir aussi

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