Colas Mérand
02/05/2025
React Native
Stripe
Paiements mobiles
5 minutes
Dans un monde où le commerce mobile ne cesse de croître, l'intégration d'une solution de paiement robuste et sécurisée est devenue indispensable pour toute application commerciale. Parmi les nombreuses options disponibles, Stripe s'est imposé comme l'une des solutions les plus populaires et fiables pour les développeurs. Dans cet article, nous allons explorer comment intégrer efficacement Stripe dans une application React Native, en mettant l'accent sur la création de flux de paiement fluides et sécurisés.
Avant de plonger dans les aspects techniques, il est important de comprendre pourquoi Stripe est souvent le choix privilégié pour les applications mobiles :
Pour suivre ce guide, vous aurez besoin de :
Commençons par installer les packages requis :
npm install @stripe/stripe-react-native
# Si vous utilisez Expo
expo install @stripe/stripe-react-native
Dans votre fichier principal (généralement App.js), initialisez le SDK Stripe :
import { StripeProvider } from '@stripe/stripe-react-native';
export default function App() {
return (
<StripeProvider
publishableKey="votre_clé_publique_stripe"
merchantIdentifier="merchant.com.votredomaine" // Nécessaire uniquement pour Apple Pay
>
{/* Le reste de votre application */}
</StripeProvider>
);
}
L'une des approches les plus efficaces pour gérer les paiements dans une application React Native est d'utiliser un système de flux contrôlé. Le concept de "Flow Controller" permet de guider l'utilisateur à travers les différentes étapes du processus de paiement de manière fluide et intuitive.
Un Flow Controller est un pattern de conception qui permet de gérer des séquences d'écrans ou d'étapes dans une application. Dans le contexte des paiements, il s'agit de créer un parcours utilisateur cohérent qui comprend :
Voici comment implémenter un Flow Controller basique pour les paiements Stripe :
import React, { useState } from 'react';
import { useStripe } from '@stripe/stripe-react-native';
const PaymentFlow = () => {
const { initPaymentSheet, presentPaymentSheet } = useStripe();
const [paymentStatus, setPaymentStatus] = useState('idle');
// Étape 1 : Initialisation du paiement
const initializePayment = async () => {
setPaymentStatus('loading');
try {
// Appel à votre backend pour créer une intention de paiement
const response = await fetch('https://votre-api.com/create-payment-intent', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
amount: 1000, // Montant en centimes
currency: 'eur',
}),
});
const { paymentIntent, ephemeralKey, customer } = await response.json();
// Initialisation de la feuille de paiement
const { error } = await initPaymentSheet({
paymentIntentClientSecret: paymentIntent,
customerEphemeralKeySecret: ephemeralKey,
customerId: customer,
merchantDisplayName: 'Votre Entreprise',
});
if (error) {
setPaymentStatus('failed');
console.error(error);
} else {
setPaymentStatus('ready');
}
} catch (error) {
setPaymentStatus('failed');
console.error(error);
}
};
// Étape 2 : Présentation de la feuille de paiement
const handlePayment = async () => {
if (paymentStatus !== 'ready') return;
const { error } = await presentPaymentSheet();
if (error) {
setPaymentStatus('failed');
console.error(`Erreur de paiement: ${error.message}`);
} else {
setPaymentStatus('success');
// Traitement post-paiement (confirmation, redirection, etc.)
}
};
// Rendu conditionnel basé sur l'état du paiement
return (
<View>
{/* Interface utilisateur adaptée à chaque étape du flux */}
{paymentStatus === 'idle' && (
<Button title="Commencer le paiement" onPress={initializePayment} />
)}
{paymentStatus === 'loading' && <ActivityIndicator />}
{paymentStatus === 'ready' && (
<Button title="Payer maintenant" onPress={handlePayment} />
)}
{paymentStatus === 'success' && (
<Text>Paiement réussi ! Merci pour votre achat.</Text>
)}
{paymentStatus === 'failed' && (
<Text>Le paiement a échoué. Veuillez réessayer.</Text>
)}
</View>
);
};
Pour créer une expérience de paiement vraiment fluide, voici quelques bonnes pratiques que nous avons mises en œuvre chez Platane lors de nos projets :
Initialisez le Payment Sheet dès que possible, idéalement pendant que l'utilisateur navigue dans l'application, pour éviter les temps d'attente au moment du paiement.
Plutôt que d'afficher des messages d'erreur génériques, personnalisez-les en fonction du contexte :
const handlePaymentError = (error) => {
switch (error.code) {
case 'card_declined':
return 'Votre carte a été refusée. Veuillez essayer avec une autre carte.';
case 'expired_card':
return 'Votre carte est expirée. Veuillez utiliser une carte valide.';
default:
return 'Une erreur est survenue lors du paiement. Veuillez réessayer.';
}
};
Permettez aux utilisateurs de sauvegarder leurs méthodes de paiement pour les achats futurs :
const { error } = await initPaymentSheet({
// ... autres options
allowsDelayedPaymentMethods: true,
setupIntentClientSecret: setupIntent, // Pour sauvegarder la carte
});
Chez Platane, nous avons eu l'opportunité de mettre en œuvre ces pratiques dans plusieurs projets d'envergure. Par exemple, pour Dealt, une marketplace de jobbing, nous avons développé un système de paiement complet intégrant Stripe dans leur application React Native. Cette solution a permis de :
De même, pour Astory, une plateforme de location d'œuvres d'art générant plus de 800 000€ de revenus annuels, nous avons implémenté un système de paiement récurrent avec Stripe qui a considérablement simplifié la gestion des abonnements.
Notre travail sur Easop, une plateforme de gestion de stock options (revendue plusieurs millions à Remote), a également démontré notre expertise dans l'intégration de solutions de paiement complexes, notamment pour les transactions B2B.
La sécurité est primordiale lorsqu'il s'agit de paiements. Voici quelques points essentiels à considérer :
Stripe est conçu pour que vous n'ayez jamais à manipuler directement les données sensibles des cartes. Utilisez toujours les composants fournis par Stripe.
Toutes les opérations impliquant des secrets (comme la création d'une intention de paiement) doivent être effectuées côté serveur :
// Côté client
const fetchPaymentIntentClientSecret = async () => {
const response = await fetch('/create-payment-intent', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
items: [{ id: 'product-id' }],
}),
});
const { clientSecret } = await response.json();
return clientSecret;
};
// Côté serveur (Node.js)
app.post('/create-payment-intent', async (req, res) => {
const { items } = req.body;
const paymentIntent = await stripe.paymentIntents.create({
amount: calculateOrderAmount(items),
currency: 'eur',
});
res.send({ clientSecret: paymentIntent.client_secret });
});
Stripe fournit un environnement de test complet. Utilisez-le systématiquement avant de passer en production :
// Clés de test
const stripePublishableKey = __DEV__
? 'pk_test_votreclé'
: 'pk_live_votreclé';
Si vous utilisez Expo, quelques ajustements supplémentaires sont nécessaires :
Dans votre fichier app.json :
{
"expo": {
"plugins": [
[
"@stripe/stripe-react-native",
{
"merchantIdentifier": "merchant.com.votredomaine",
"enableGooglePay": true
}
]
]
}
}
Pour tester les paiements en développement, il est recommandé d'utiliser Expo Dev Client plutôt que l'application Expo Go standard :
expo install expo-dev-client
eas build --profile development --platform ios
L'intégration de Stripe dans une application React Native représente un défi technique qui, lorsqu'il est relevé correctement, peut considérablement améliorer l'expérience utilisateur et augmenter les taux de conversion. En suivant les bonnes pratiques décrites dans cet article et en mettant en place un Flow Controller bien conçu, vous pouvez créer un parcours de paiement fluide et sécurisé.
Chez Platane, nous avons développé une expertise approfondie dans l'intégration de solutions de paiement pour des applications mobiles de tous types. Notre approche combine une maîtrise technique des outils comme React Native et Stripe avec une compréhension fine des enjeux business liés aux paiements en ligne.
Vous avez un projet d'application mobile nécessitant l'intégration de paiements sécurisés ? Nous serions ravis d'échanger sur vos besoins spécifiques et de vous accompagner dans la réalisation de votre projet. N'hésitez pas à prendre rendez-vous via notre formulaire de contact pour discuter de votre projet en détail.
Notre équipe d'experts saura vous conseiller sur les meilleures pratiques à adopter et vous proposer une solution sur mesure qui répond parfaitement à vos objectifs. Avec Platane, bénéficiez d'un partenaire technologique qui allie expertise technique et vision stratégique pour faire de votre projet un succès.