Stripe est une plateforme de paiement en ligne populaire qui facilite l’acceptation des paiements par carte de crédit, ainsi que d’autres méthodes de paiement. Que vous construisiez une boutique en ligne, un service d’abonnement, ou toute autre application nécessitant des paiements, Stripe offre une intégration flexible et robuste. Cet article vous guidera à travers les étapes nécessaires pour intégrer des paiements en ligne avec Stripe.
1. Préparation
Avant de commencer, vous devez avoir :
- Un compte Stripe : Inscrivez-vous sur Stripe et accédez à votre tableau de bord.
- Node.js et npm : Assurez-vous que Node.js et npm sont installés sur votre machine. Vous pouvez les télécharger depuis nodejs.org.
2. Initialiser un Nouveau Projet
Créez un répertoire pour votre projet et initialisez-le avec npm :
mkdir stripe-integration
cd stripe-integration
npm init -y
3. Installer les Dépendances
Installez le SDK Stripe pour Node.js et Express, ainsi que d’autres dépendances nécessaires :
npm install express stripe body-parser
- express : Framework pour construire le serveur web.
- stripe : SDK pour interagir avec l’API Stripe.
- body-parser : Middleware pour analyser les données de requête.
4. Configurer le Serveur Express
Créez un fichier index.js et configurez Express pour gérer les requêtes de paiement :
const express = require('express');
const bodyParser = require('body-parser');
const Stripe = require('stripe');
const stripe = Stripe('votre_clé_secrète_stripe');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const PORT = process.env.PORT || 3000;
// Route pour créer un paiement
app.post('/create-payment-intent', async (req, res) => {
try {
const { amount } = req.body;
// Créer un PaymentIntent
const paymentIntent = await stripe.paymentIntents.create({
amount: amount, // Montant en cents
currency: 'usd', // Devise
});
res.json({ clientSecret: paymentIntent.client_secret });
} catch (error) {
res.status(500).json({ error: error.message });
}
});
// Démarrer le serveur
app.listen(PORT, () => {
console.log(`Serveur démarré sur http://localhost:${PORT}`);
});
Assurez-vous de remplacer 'votre_clé_secrète_stripe' par votre clé API secrète Stripe. Vous pouvez trouver cette clé dans le tableau de bord Stripe sous Développeurs > Clés API.
5. Configurer le Frontend
Créez un fichier HTML simple pour capturer les détails de paiement. Incluez Stripe.js pour interagir avec l’API Stripe côté client :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stripe Payment Integration</title>
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<h1>Paiement avec Stripe</h1>
<form id="payment-form">
<div id="card-element"></div>
<button type="submit">Payer</button>
</form>
<script>
const stripe = Stripe('votre_clé_publique_stripe');
const elements = stripe.elements();
const card = elements.create('card');
card.mount('#card-element');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const { clientSecret } = await fetch('/create-payment-intent', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ amount: 5000 }) // Montant en cents
}).then(res => res.json());
const { paymentIntent, error } = await stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: card
}
});
if (error) {
console.error(error);
} else if (paymentIntent.status === 'succeeded') {
console.log('Paiement réussi');
}
});
</script>
</body>
</html>
Assurez-vous de remplacer 'votre_clé_publique_stripe' par votre clé API publique Stripe, que vous pouvez trouver dans le tableau de bord Stripe sous Développeurs > Clés API.
6. Tester l’Intégration
- Mode Test : Utilisez les cartes de test fournies par Stripe pour simuler des paiements. Vous pouvez trouver ces cartes dans la documentation de Stripe.
- Mode Production : Lorsque vous êtes prêt à déployer en production, remplacez les clés API de test par les clés API en direct.
7. Gérer les Webhooks (Optionnel)
Les webhooks permettent à Stripe d’envoyer des notifications à votre serveur lorsqu’un événement se produit (par exemple, un paiement réussi). Vous pouvez configurer des webhooks pour recevoir ces notifications :
app.post('/webhook', express.raw({ type: 'application/json' }), (req, res) => {
const sig = req.headers['stripe-signature'];
const endpointSecret = 'votre_secret_webhook';
let event;
try {
event = stripe.webhooks.constructEvent(req.body, sig, endpointSecret);
} catch (err) {
return res.status(400).send(`Webhook Error: ${err.message}`);
}
if (event.type === 'payment_intent.succeeded') {
const paymentIntent = event.data.object;
console.log('Paiement réussi:', paymentIntent);
}
res.json({ received: true });
});
N’oubliez pas de remplacer 'votre_secret_webhook' par le secret que vous obtenez lors de la configuration du webhook dans le tableau de bord Stripe.
Conclusion
En suivant ces étapes, vous pouvez intégrer facilement Stripe dans votre application pour accepter des paiements en ligne. Stripe offre une API puissante et flexible, adaptée à divers scénarios de paiement. Assurez-vous de consulter la documentation de Stripe pour explorer davantage les fonctionnalités disponibles et adapter l’intégration à vos besoins spécifiques.
Abonnez-vous à notre Newsletter !
Restez à jour avec les dernières tendances, articles et actualités directement dans votre boîte de réception. En vous abonnant à la newsletter de Wordly Fusion, vous recevrez des contenus exclusifs, des recommandations personnalisées, et les nouveautés les plus passionnantes de notre site. Ne manquez aucune mise à jour et soyez toujours informé des sujets qui vous intéressent. Inscrivez-vous dès maintenant pour rejoindre notre communauté !