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
Démarrer une intégration
Payment scenarios
Paiements par TPE
Other Stripe products

Enregistrer les coordonnées bancaires lors d'un paiement iDEAL

Découvrez comment enregistrer les coordonnées bancaires IBAN de votre client lors d'un paiement iDEAL.

Mise en garde

Nous vous recommandons de suivre les instructions de notre guide Enregistrer les coordonnées bancaires lors du paiement. Si vous avez déjà intégré Elements, reportez-vous à notre Guide de migration du Payment Element.

iDEAL est un moyen de paiement néerlandais à usage unique qui nécessite l’authentification du paiement par le client. Pour effectuer un paiement avec iDEAL, les clients sont redirigés vers une vue Web afin d’autoriser le paiement, puis reviennent vers votre application, où vous recevez une notification immédiate de la réussite ou de l’échec du paiement.

Vous pouvez également utiliser iDEAL pour enregistrer les coordonnées bancaires IBAN de votre client dans un objet PaymentMethod de type prélèvement automatique SEPA. Vous pouvez ensuite utiliser ce PaymentMethod prélèvement automatique SEPA pour accepter des paiements ou configurer un abonnement. Cela permet de simplifier le processus de paiement pour votre client, qui n’aura plus à ressaisir son IBAN. Vous recevez également son nom vérifié et son IBAN validé.

Mise en garde

Pour utiliser iDEAL afin de configurer des paiements par prélèvement SEPA, vous devez activer les prélèvements automatiques SEPA dans le Dashboard. Vous devez également respecter les Conditions d’utilisation d’iDEAL et les Conditions d’utilisation du prélèvement SEPA.

Accepter un paiement iDEAL consiste à créer un objet PaymentIntent pour suivre un paiement, recueillir les informations de moyen de paiement et la confirmation du mandat, puis envoyer le paiement à Stripe pour traitement. Stripe utilise le PaymentIntent pour suivre et gérer les états successifs du paiement jusqu’à sa réussite. Pour créer un PaymentIntent en vue de paiements futurs, utilisez l’ID du PaymentMethod prélèvement automatique SEPA recueilli lors de votre PaymentIntent iDEAL initial.

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 un objet Customer
Côté serveur

Créez un objet Customer lorsqu’un client crée un compte auprès de votre entreprise et associez-le à votre représentation interne de son compte. Vous pourrez ainsi récupérer et utiliser ultérieurement les informations enregistrées sur son moyen de paiement.

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

Créer un PaymentIntent
Côté serveur

Créez un PaymentIntent sur votre serveur et précisez le montant à encaisser et la devise dans les paramètres amount et eur, l’identifiant du client, et le paramètre off_session (hors session) comme argument pour la configuration de l’utilisation future. Il n’y a pas de montant minimal de paiement et iDEAL ne prend pas en charge d’autres devises. Si vous avez déjà une intégration API Payment Intents, ajoutez ideal à la liste des types de moyens de paiement.

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=ideal \
  -d customer={{CUSTOMER_ID}} \
  -d setup_future_usage=off_session

Récupérer la clé secrète du client

Le PaymentIntent contient une clé secrète à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.

Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction fetch du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client :

main.rb
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client :

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Collecter les informations du moyen de paiement et obtenir un accusé de réception du mandat
Côté client

Collectez les informations de paiement du client avec Stripe Elements. Elements est un ensemble de composants d’interface utilisateur préconfigurés pour la collecte des informations de paiement. Element Stripe contient un iframe qui envoie à Stripe les informations de paiement de manière sécurisée sur une connexion HTTPS.

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit également commencer par https:// et non http://. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez-le lorsque le moment est venu d’accepter les 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.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

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

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

Add and configure an idealBank Element

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, puis transmettez ces ID à Elements.

​​Pour traiter des paiements par prélèvement SEPA, vous devez faire accepter le mandat par votre client. 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)
Remplacez ce nom par celui de votre entreprise
 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.

checkout.html
<form id="payment-form">
  <div class="form-row">
    <label for="accountholder-name">
      Name
    </label>
    <input id="accountholder-name"  name="accountholder-name">
  </div>

  <div class="form-row">
    <label for="accountholder-email">
      Email
    </label>
    <input id="accountholder-email"  name="accountholder-email">
  </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="ideal-bank-element">
      iDEAL Bank
    </label>
    <div id="ideal-bank-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <button id="submit-button" data-secret="{CLIENT_SECRET}">Submit</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, 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>

Lorsque le formulaire ci-dessus est chargé, créez une instance d’un Element idealBank et intégrez-la au conteneur Element créé plus haut :

const options = {
  // Custom styling can be passed to options when creating an Element
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
};

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

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

Les composants Element sont entièrement personnalisables. Vous pouvez personnaliser les composants Element pour qu’ils s’intègrent visuellement à votre site afin de fournir un paiement uniforme à vos clients. Il est également possible de personnaliser différents états de saisie, par exemple lorsque le composant Element est sélectionné.

Soumettre 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 à mener à bien le paiement. 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.confirmIdealPayment pour gérer la redirection hors de votre page et pour terminer le paiement. Ajoutez un return_url à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur après qu’il eut effectué le paiement sur le site Web ou l’application mobile de sa banque.

Ajoutez le nom et l’adresse e-mail de votre client dans les payment_method[billing_details]. Ils seront utilisés pour générer le PaymentMethod de type prélèvement automatique SEPA.

Mise en garde

Pour transmettre le paramètre setup_future_usage comme indiqué ci-dessous, vous devez modifier la version de l’API transmise lors de la création de votre instance d’Elements. Consultez les instructions ci dessus pour la configuration de Stripe Elements si vous ne parvenez pas à transmettre setup_future_usage à cette étape.

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

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Redirects away from the client
  const {error} = await stripe.confirmIdealPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        ideal: idealBank,
        billing_details: {
          name: accountholderName.value,
        },
      },
      return_url: 'https://example.com/checkout/complete',
    }
  );
});

Lorsque votre client effectue un paiement, Stripe le redirige vers l’URL return_url et inclut les paramètres de requête d’URL suivants. La page de redirection peut utiliser ces paramètres pour récupérer l’état du PaymentIntent et ainsi afficher l’état du paiement pour le client.

Lorsque vous spécifiez une URL return_url, vous pouvez également ajouter vos propres paramètres de requête à utiliser sur la page de redirection.

ParamètreDescription
payment_intentIdentifiant unique du PaymentIntent.
payment_intent_client_secretLa clé secrète du client de l’objet PaymentIntent.

Lorsque le client est redirigé vers votre site, vous pouvez utiliser le payment_intent_client_secret pour interroger le PaymentIntent et communiquer l’état de la transaction à votre client.

Débiter le PaymentMethod Prélèvement automatique SEPA plus tard

Lorsque vous devez à nouveau débiter votre client, créez un nouveau PaymentIntent. Pour obtenir l’ID du moyen de paiement Prélèvement automatique SEPA, récupérez le PaymentIntent précédent et développez le champ latest_charge où vous trouverez l’ID generated_sepa_debit dans payment_method_details.

Command Line
curl -G https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}} \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d "expand[]"=latest_charge

L’ID du moyen de paiement de type prélèvement SEPA est l’identifiant generated_sepa_debit figurant sous payment_method_details dans la réponse.

{
  "latest_charge": {
    "payment_method_details": {
      "ideal": {
        "bank": "ing",
        "bic": "INGBNL2A",
        "iban_last4": "****",
        "generated_sepa_debit": "pm_1GrddXGf98efjktuBIi3ag7aJQ",
        "verified_name": "JENNY ROSEN"
      },
      "type": "ideal"
    },
  },
  "payment_method_options": {
    "ideal": {}

Créez un PaymentIntent en utilisant les identifiants du prélèvement SEPA et du client.

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d "payment_method_types[]"=sepa_debit \
  -d amount=1099 \
  -d currency=eur \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d payment_method={{SEPA_DEBIT_PAYMENT_METHOD_ID}} \
  -d confirm=true

Tester votre intégration

En utilisant vos clés API de test, sélectionnez une banque dans la liste. Après avoir confirmé le PaymentIntent, vous êtes redirigé(e) vers une page de test avec des options pour valider ou non le paiement.

  • Cliquez sur Autorisation du paiement test pour tester le cas où la configuration réussit. Le PaymentIntent passe de requires_action à succeeded.
  • Cliquez sur Échec du paiement test pour tester le cas où le client ne parvient pas à s’authentifier. Le PaymentIntent passe de requires_action à requires_payment_method.

Tester votre intégration pour le prélèvement SEPA

Configurez le paramètre payment_method.billing_details.email sur l’une des valeurs suivantes afin de tester les changements d’état du PaymentIntent. Au début de l’adresse e-mail, vous pouvez inclure votre propre texte suivi d’un tiret bas. Par exemple, test_1_generatedSepaDebitIntentsFail@example.com donne lieu à un PaymentMethod de prélèvement automatique SEPA qui échoue systématiquement en cas d’utilisation avec un PaymentIntent.

Adresse e-mailDescription
generatedSepaDebitIntentsSucceed@example.comL’état du PaymentIntent passe de processing à succeeded.
generatedSepaDebitIntentsSucceedDelayed@example.comThe PaymentIntent status transitions from processing to succeeded after at least three minutes.
generatedSepaDebitIntentsFail@example.comL’état du PaymentIntent passe de processing à requires_payment_method.
generatedSepaDebitIntentsFailDelayed@example.comThe PaymentIntent status transitions from processing to requires_payment_method after at least three minutes.
generatedSepaDebitIntentsSucceedDisputed@example.comL’état du PaymentIntent passe de processing à succeeded, mais un litige est créé immédiatement.

Voir aussi

Cette page vous a-t-elle été utile ?
OuiNon
Besoin d'aide ? Contactez le service d'assistance.
Rejoignez notre programme d'accès anticipé.
Consultez notre journal des modifications des produits.
Des questions ? Contactez l'équipe commerciale.
Propulsé par Markdoc
Sur cette page
Configurer Stripe
Créer un objet Customer
Créer un PaymentIntent
Récupérer la clé secrète du client
Collecter les informations du moyen de paiement et obtenir un accusé de réception du mandat
Configurer Stripe Elements
Soumettre le paiement à Stripe
Débiter le PaymentMethod Prélèvement automatique SEPA plus tard
Tester votre intégration
Tester votre intégration pour le prélèvement SEPA
Voir aussi
Produits utilisés
Payments
Elements