Accéder directement au contenu
Créez un compte
ou
connecter-vous
Logo de la documentation Stripe
/
Demander à l'assistant IA
Créez un compte
Connectez-vous
Démarrer
Paiements
Revenus
Plateformes et places de marché
Gestion de fonds
Ressources pour les développeurs
Aperçu
À propos des paiements Stripe
Mettre votre intégration à niveau
Analyses des paiements
Paiements en ligne
PrésentationTrouver votre cas d'usageManaged Payments
Utiliser Payment Links
Créer une page de paiement
Développer une intégration avancée
Développer une intégration dans l'application
Moyens de paiement
Ajouter des moyens de paiement
    Présentation
    Options d'intégration des moyens de paiement
    Gérer les moyens de paiement par défaut dans le Dashboard
    Types de moyens de paiement
    Cartes bancaires
    Payer avec le solde Stripe
    Cryptomonnaies
    Prélèvements bancaires
    Virements avec redirection bancaire
      Bancontact
      BLIK
      EPS
      FPX
      iDEAL
        Accepter un paiement
        Enregistrer les coordonnées bancaires lors du paiement
        Configurer des paiements futurs
      Przelewy24
      Sofort
      TWINT
    Virements bancaires
    Virements (Sources)
    Achetez maintenant, payez plus tard
    Paiements en temps réel
    Coupons
    Portefeuilles
    Activer des moyens de paiement locaux par pays
    Moyens de paiement personnalisés
Gérer les moyens de paiement
Paiement accéléré avec Link
Interfaces de paiement
Payment Links
Checkout
Elements pour le web
Elements intégrés à l'application
Scénarios de paiement
Gérer plusieurs devises
Tunnels de paiement personnalisés
Acquisition flexible
Orchestration
Paiements par TPE
Terminal
Au-delà des paiements
Constituez votre entreprise
Cryptomonnaies
Financial Connections
Climate
AccueilPaiementsAdd payment methodsBank redirectsiDEAL

Accepter un paiement iDEAL

Découvrez comment accepter les paiements effectués à l'aide de iDEAL, un moyen de paiement très répandu aux Pays-Bas.

iDEAL avec Sources

Nous vous recommandons d’utiliser Payment Intents ou Checkout pour accepter des paiements iDEAL. Si vous utilisez l’API Sources, veuillez consulter la section dédiée aux paiements iDEAL avec Sources.

iDEAL est un moyen de paiement à usage unique qui nécessite l’authentification du paiement par le client. Pour effectuer un paiement avec iDEAL, les clients quittent votre site Web, autorisent le paiement, puis reviennent vers votre site Web. Vous recevez alors une notification immédiate indiquant si le paiement a abouti ou échoué.

Utilisez un Payment Element pour intégrer un formulaire de paiement Stripe personnalisé sur votre site Web ou application. Payment Elements vous permet de prendre automatiquement en charge iDEAL et divers autres moyens de paiement. Pour les configurations et personnalisations avancées, consultez le guide d’intégration Accepter un paiement.

Remarque

Pour accepter les paiements iDEAL, vous devez respecter nos Conditions d’utilisation du service iDEAL.

Configurer Stripe
Côté serveur

Tout d’abord, vous avez besoin d’un compte Stripe. Inscrivez-vous dès maintenant.

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

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

Créer un PaymentIntent
Côté serveur

Un PaymentIntent est un objet qui représente votre intention de collecter un paiement auprès d’un client et qui suit le cycle de vie du processus de paiement à chaque étape. Créez tout d’abord un PaymentIntent sur votre serveur, puis indiquez le montant à encaisser ainsi que la devise eur (iDEAL ne prend pas en charge les autres devises). iDEAL n’impose pas de montant minimal de paiement, de sorte que l’amount peut être aussi bas que 1. Si votre intégration inclut déjà l’API Payment Intents, ajoutez ideal à la liste des types de moyens de paiement valides pour votre PaymentIntent.

Créez un PaymentIntent sur votre serveur avec un montant et une devise. Dans la dernière version de l’API, la spécification du paramètre automatic_payment_methods est facultative, car Stripe active déjà cette fonctionnalité par défaut. Vous pouvez gérer les moyens de paiement à partir du Dashboard. Stripe détermine les moyens de paiement éligibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Veillez à ce que iDEAL soit activé sur la page des paramètres des moyens de paiement.

Définissez toujours le montant à débiter côté serveur car il s’agit d’un environnement sécurisé, contrairement à l’environnement client. De cette façon, un client malveillant ne pourra pas fixer son propre tarif.

Command Line
cURL
curl https://api.stripe.com/v1/payment_intents \ -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"
\ -d amount=1099 \ -d currency=eur \ -d "automatic_payment_methods[enabled]"=true

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
Ruby
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
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/basil/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 :

Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser 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.

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 le paiement à Stripe
Côté client

Utilisez stripe.confirmPayment pour effectuer le paiement à l’aide des informations du composant Payment Element. Ajoutez un paramètre return_url à cette fonction pour indiquer la page vers laquelle Stripe doit rediriger l’utilisateur à l’issue du paiement. Votre utilisateur peut être redirigé en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre return_url. L’utilisateur sera immédiatement redirigé vers la page return_url après un paiement réussi par carte.

checkout.js
const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`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 payment. 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`. } });

Veillez à ce que le paramètre return_url corresponde à une page de votre site web qui indique l’état du paiement. Lorsque Stripe redirige le client vers la page return_url, nous fournissons les paramètres de requête d’URL suivants :

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

Mise en garde

Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine stripe.com à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble.

Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’état du PaymentIntent pour déterminer les informations à présenter à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous ajoutez l’URL return_url ; ils seront conservés tout au long du processus de redirection.

status.js
// Initialize Stripe.js using your publishable key const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } });

Tester votre intégration

Utilisez vos clés API de test pour confirmer le PaymentIntent. Après avoir confirmé, vous êtes redirigé 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.

FacultatifGérer les événements post-paiement

FacultatifGérer la redirection d'iDEAL manuellement

Référence bancaire

Nom de la banqueValeur
ABN AMROabn_amro
ASN Bankasn_bank
Bunqbunq
INGing
Knabknab
N26n26
Nationale-Nederlandennn
Rabobankrabobank
Revolutrevolut
RegioBankregiobank
SNS Bank (De Volksbank)sns_bank
Triodos Banktriodos_bank
Van Lanschotvan_lanschot
Yoursafeyoursafe
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