Accéder directement au contenu
Créez un compte ou connecter-vous
Logo de la documentation Stripe
/
Créez un compteConnectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageUtiliser Managed Payments
Paiements par TPE
Moyens de paiement
Scénarios de paiement
Au-delà des paiements

Utiliser iDEAL pour configurer de futurs paiements par prélèvement SEPA

Découvrez comment enregistrer des coordonnées bancaires lors d'un paiement iDEAL et les réutiliser pour des prélèvements automatiques SEPA ultérieurs.

Mise en garde

Nous vous recommandons de suivre les instructions de notre guide Configurer des paiements futurs. Si vous avez déjà intégré Elements, reportez-vous à notre Guide de migration du Payment Element.

iDEAL est un moyen de paiement à usage unique qui nécessite l’authentification de chaque paiement par le client. Avec cette intégration, Stripe facture 0,01 EUR à votre client via iDEAL pour la collecte de ses informations bancaires. Une fois le paiement authentifié par votre client, Stripe le rembourse et enregistre l’IBAN de votre client dans un moyen de paiement par prélèvement automatique SEPA. Vous pouvez alors utiliser ce PaymentMethod de type prélèvement automatique SEPA pour accepter des paiements ou configurer un abonnement.

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 les paiements par prélèvement SEPA avec iDEAL dans votre application consiste à créer un SetupIntent pour suivre le processus, recueillir la confirmation du mandat et rediriger votre client vers iDEAL. Stripe utilise le SetupIntent pour suivre et gérer les états successifs de la configuration jusqu’à ce qu’elle soit terminée.

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
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# 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
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

Créer un SetupIntent
Côté serveur

Créez un SetupIntent avec l’ID du client et réglez le paramètre payment_method_types sur ideal. Le SetupIntent suit les étapes du processus de configuration. Dans le cas d’iDEAL, ceci comprend l’obtention d’un mandat de prélèvement automatique SEPA auprès du client et le suivi de sa validité.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/setup_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "payment_method_types[]"=ideal \
  -d customer={{CUSTOMER_ID}}

Collecter les informations du moyen de paiement
Côté client

Collectez les informations de paiement du client avec le Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par https:// et non par http://. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’activer lorsque vous souhaitez commencer à accepter des paiements réels.

Configurer Stripe.js

Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant 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 une offre groupée ni en héberger de copie.

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

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

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Ajouter le Payment Element à votre page de paiement

Le composant Element Payment doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement :

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Lors du chargement du formulaire précédent, créez une instance du composant Payment Element et intégrez-la au nœud DOM conteneur. Lorsque vous créez l’instance Elements, transmettez la clé secrète du client définie à l’étape précédente dans les options :

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

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

Plutôt que d’envoyer la totalité de l’objet SetuptIntent au client, utilisez sa clé secrète du client. 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 utilisée avec prudence, car elle peut servir à mener à bien 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.confirmSetup pour finaliser le Setup Intent à l’aide des informations du Payment Element. Fournissez une return_url à cette fonction pour indiquer à Stripe vers quelle page rediriger l’utilisateur une fois le Setup Intent terminé. Votre utilisateur sera peut-être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers return_url.

checkout.js
const form = document.getElementById('payment-form');

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

  const {error} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the setup intent. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Assurez-vous que return_url correspond à une page de votre site Web qui indique l’état du Setup Intent. Lorsque Stripe redirige le client vers return_url, nous fournissons les paramètres de requête d’URL suivants :

ParamètreDescription
setup_intentL’identifiant unique du SetupIntent.
setup_intent_client_secretLa clé secrète du client de l’objet SetupIntent.

Débiter le PaymentMethod Prélèvement automatique SEPA plus tard
Côté serveur

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 SetuptIntent précédent et développez le champ latest_attempt où vous trouverez l’ID generated_sepa_debit dans payment_method_details.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -G https://api.stripe.com/v1/setup_intents/{{SETUP_INTENT_ID}} \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "expand[]"=latest_attempt

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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

Utiliser vos clés API de test pour confirmer le SetupIntent. Après avoir confirmé, vous êtes redirigé vers une page de test avec des options pour valider ou non la configuration du moyen de paiement.

  • Cliquez sur Autorisation du paiement test pour tester le cas où la configuration réussit. Le SetupIntent passe de requires_action à succeeded.
  • Cliquez sur Échec du paiement test pour tester le cas où le client ne parvient pas à s’authentifier. Le SetupIntent 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.comL’état du PaymentIntent passe de processing à succeeded au bout d’au moins trois minutes.
generatedSepaDebitIntentsFail@example.comL’état du PaymentIntent passe de processing à requires_payment_method.
generatedSepaDebitIntentsFailDelayed@example.comL’état du PaymentIntent passe de processing à requires_payment_method au bout d’au moins trois minutes.
generatedSepaDebitIntentsSucceedDisputed@example.comL’état du PaymentIntent passe de processing à succeeded, mais un litige est créé immédiatement.

FacultatifGérer les événements post-configuration

Stripe envoie un événement setup_intent.succeeded à l’issue du SetupIntent. Utilisez le Dashboard, un webhook personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme enregistrer le PaymentMethod Prélèvement SEPA généré dans votre base de données ou facturer votre client à l’issue de sa période d’essai.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les différences entre les différents moyens de paiement pris en charge.

Recevoir des événements et exécuter des actions métier

Manuellement

Utilisez le Dashboard Stripe pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements ayant échoué.

Code personnalisé

Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe.

Applications préconfigurées

Intégrez une application partenaire pour gérer les événements métier courants, comme l’automatisation, le marketing ou les ventes.

Voir aussi