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
      Wero
    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
In-app Payments
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
Comprendre la fraude
Radar pour la protection contre la fraude
Gestion des litiges
Vérifier l'identité
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.

Mise en garde

Nous vous recommandons de suivre le guide Accepter un paiement, sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le Guide de migration du Payment Element.

Le processus d’acceptation d’un paiement iDEAL dans votre application consiste à afficher une vue Web qui renvoie votre client vers le portail en ligne de sa banque pour autoriser le paiement. Votre client retourne ensuite dans votre application et vous recevez immédiatement une notification indiquant si le paiement a abouti ou échoué.

Remarque

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

Configurer Stripe
Côté serveur
Côté client

Côté serveur

Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur :

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'

Côté client

Le SDK React Native est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK Android et iOS natifs. Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez) :

Command Line
yarn add @stripe/stripe-react-native

Ensuite, installez les autres dépendances nécessaires :

  • Pour iOS, accédez au directeur ios et exécutez pod install pour vous assurer que vous installez également les dépendances natives requises.
  • Pour Android, il n’y a plus de dépendances à installer.

Remarque

Nous vous recommandons de suivre le guide officiel de TypeScript pour ajouter la prise en charge de TypeScript.

Initialisation de Stripe

Pour initialiser Stripe dans votre application React Native, wrappez votre écran de paiement avec le composant StripeProvider ou utilisez la méthode d’initialisation initStripe. Seule la clé publiable de l’API dans publishableKey est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant StripeProvider.

import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( <StripeProvider publishableKey={publishableKey} merchantIdentifier="merchant.identifier" // required for Apple Pay urlScheme="your-url-scheme" // required for 3D Secure and bank redirects > {/* Your app code here */} </StripeProvider> ); }

Remarque

Utilisez vos clés de test d’API lors de vos activités de test et de développement, et vos clés du mode production pour la publication de votre application.

Créer un PaymentIntent
Côté serveur
Côté client

Un PaymentIntent est un objet qui représente votre intention d’encaisser le paiement d’un client et qui suit le cycle de vie du processus de paiement étape par étape.

Côté serveur

Créez tout d’abord un PaymentIntent sur votre serveur, puis indiquez le montant à percevoir et la devise eur (iDEAL ne prend pas en charge les autres devises). iDEAL n’a pas de montant minimal de paiement ; la valeur amount du paiement peut descendre jusqu’à 1. Si votre intégration inclut déjà l’API Payment Intents, ajoutez ideal à la liste des types de moyens de paiement pour votre PaymentIntent.

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 amount=1099 \ -d currency=eur \ -d "payment_method_types[]"=ideal

Au lieu de transmettre à l’application la totalité de l’objet PaymentIntent, renvoyez sa clé secrète du client. Il s’agit d’une clé unique qui vous permet de confirmer le paiement et d’actualiser les informations de paiement côté client, le tout sans autoriser la manipulation d’informations sensibles comme le montant du paiement.

Côté client

Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la clé secrète du client.

const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email, currency: 'eur', payment_method_types: ['ideal'], }), }); const {clientSecret, error} = await response.json(); return {clientSecret, error}; };

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

Dans votre application, recueillez le nom complet de votre client.

export default function IdealPaymentScreen() { const [name, setName] = useState(); const handlePayPress = async () => { // ... }; return ( <Screen> <TextInput placeholder="Name" onChange={(value) => setName(value.nativeEvent.text)} /> </Screen> ); }

Soumettre le paiement à Stripe
Côté client

Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé, puis appelez le confirmPayment. Une page Web s’affiche dans laquelle le client peut finaliser le paiement sur le site Web ou l’application de sa banque. L’intention de paiement est alors finalisée avec le résultat du paiement.

export default function IdealPaymentScreen() { const [name, setName] = useState(); const handlePayPress = async () => { const {clientSecret} = await fetchPaymentIntentClientSecret(); const {error, paymentIntent} = await confirmPayment(clientSecret, { paymentMethodType: 'Ideal', paymentMethodData: { billingDetails: { name, }, }, }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (paymentIntent) { Alert.alert( 'Success', `The payment was confirmed successfully! currency: ${paymentIntent.currency}`, ); } }; return <Screen>{/* ... */}</Screen>; }

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

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez le Dashboard, un webhook personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

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.

  • Gérer les événements manuellement dans le Dashboard

    Utilisez le Dashboard pour afficher vos paiements de test dans le Dashboard, envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.

  • Créer un webhook personnalisé

    Créez un gestionnaire de webhook personnalisé pour écouter les événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhook localement avec la CLI Stripe.

  • Intégrer une application prédéfinie

    Gérez les événements commerciaux courants, tels que l’automatisation ou le marketing et les ventes, en intégrant une application partenaire.

FacultatifGérez les liens profonds

Lorsqu’un client quitte votre application (par exemple, pour s’authentifier dans Safari ou dans son application bancaire), donnez-lui un moyen de revenir automatiquement dans votre application. De nombreux types de moyens de paiement nécessitent une URL de redirection. Si vous n’en fournissez pas, nous ne pourrons pas présenter à vos utilisateurs les moyens de paiement nécessitant une URL de redirection, même si vous les avez activés.

Pour fournir une URL de redirection :

  1. Enregistrez une URL personnalisée. Les liens universels ne sont pas pris en charge.
  2. Configurez votre URL personnalisée.
  3. Configurez votre composant racine pour qu’il transfère l’URL au SDK de Stripe, comme illustré ci-dessous.

Remarque

Si vous utilisez Expo, définissez votre schéma dans le fichier app.json.

App.tsx
import { useEffect, useCallback } from 'react'; import { Linking } from 'react-native'; import { useStripe } from '@stripe/stripe-react-native'; export default function MyApp() { const { handleURLCallback } = useStripe(); const handleDeepLink = useCallback( async (url: string | null) => { if (url) { const stripeHandled = await handleURLCallback(url); if (stripeHandled) { // This was a Stripe URL - you can return or add extra handling here as you see fit } else { // This was NOT a Stripe URL – handle as you normally would } } }, [handleURLCallback] ); useEffect(() => { const getUrlAsync = async () => { const initialUrl = await Linking.getInitialURL(); handleDeepLink(initialUrl); }; getUrlAsync(); const deepLinkListener = Linking.addEventListener( 'url', (event: { url: string }) => { handleDeepLink(event.url); } ); return () => deepLinkListener.remove(); }, [handleDeepLink]); return ( <View> <AwesomeAppComponent /> </View> ); }

Pour plus d’informations sur les schémas d’URL natifs, consultez la documentation Android et iOS.

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