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 StripeCôté serveurCô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 :
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) :
Ensuite, installez les autres dépendances nécessaires :
- Pour iOS, accédez au répertoire ** ios** et exécutez
pod install
pour vous assurer d’installer é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 PaymentIntentCôté serveurCô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
.
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 paiementCô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 à StripeCô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
Référence bancaire
Nom de la banque | Valeur |
---|---|
ABN AMRO | abn_ |
ASN Bank | asn_ |
Bunq | bunq |
ING | ing |
Knab | knab |
N26 | n26 |
Nationale-Nederlanden | nn |
Rabobank | rabobank |
Revolut | revolut |
RegioBank | regiobank |
SNS Bank (De Volksbank) | sns_ |
Triodos Bank | triodos_ |
Van Lanschot | van_ |
Yoursafe | yoursafe |