Intégrer Stripe sur votre Site Web : Tutoriel Complet

Accepter les paiements en ligne est devenu indispensable pour tout site e-commerce. Stripe est l’une des solutions les plus populaires et sécurisées pour gérer les transactions. Dans ce tutoriel, nous allons créer un système de paiement complet avec HTML, CSS et PHP, tout en suivant les bonnes pratiques pour le SEO et l’expérience utilisateur.

Configuration de votre compte Stripe

Avant de coder, il faut créer un compte Stripe et obtenir vos clés API (publique et secrète). Ces clés vous permettront de sécuriser vos transactions et de connecter votre site au service Stripe. N’utilisez jamais votre clé secrète côté client.

Structure HTML du formulaire de paiement

Créez un formulaire simple où vos clients pourront entrer leurs informations de paiement :

<form id="payment-form">
    <label for="name">Nom complet :</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>

    <div id="card-element"></div> <!-- Stripe Elements -->

    <button type="submit">Payer</button>
</form>

Exemple visuel :

Styliser le formulaire avec CSS

Pour que le formulaire soit agréable et responsive :

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
}

input {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

button {
    background-color: #3498db;
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #2980b9;
}

Intégrer Stripe Elements et JS

Stripe Elements permet de créer des champs de carte de crédit sécurisés :

<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe('VOTRE_CLE_PUBLIQUE');
const elements = stripe.elements();
const card = elements.create('card');
card.mount('#card-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const {token, error} = await stripe.createToken(card);
    if(error){
        console.error(error.message);
    } else {
        // Envoyer le token au serveur pour traitement
        form.submit();
    }
});
</script>

Traitement côté serveur avec PHP

Le serveur reçoit le token Stripe et crée la transaction :

<?php
require 'vendor/autoload.php';

\Stripe\Stripe::setApiKey('VOTRE_CLE_SECRETE');

if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $token = $_POST['stripeToken'];
    $email = htmlspecialchars($_POST['email']);
    $name = htmlspecialchars($_POST['name']);

    try {
        $charge = \Stripe\Charge::create([
            'amount' => 5000, // montant en centimes (50€)
            'currency' => 'eur',
            'description' => 'Paiement Test',
            'source' => $token,
            'receipt_email' => $email
        ]);
        echo "<p>Paiement effectué avec succès !</p>";
    } catch(Exception $e){
        echo "<p>Erreur : " . $e->getMessage() . "</p>";
    }
}
?>

Bonnes pratiques et sécurité

Ne jamais exposer votre clé secrète côté client.
Toujours valider et nettoyer les entrées utilisateurs.
Activer HTTPS pour sécuriser les transactions.
Utiliser Stripe Webhooks pour confirmer les paiements.
Tester en mode “sandbox” avant le passage en production.

Conclusion

Intégrer Stripe est simple mais nécessite de suivre les bonnes pratiques pour la sécurité et l’expérience utilisateur. Avec ce tutoriel, vous pouvez maintenant accepter des paiements sécurisés sur votre site, améliorer votre crédibilité et optimiser votre processus de conversion. N’oubliez pas d’ajouter des messages clairs pour vos clients et de tester toutes les étapes avant de lancer en production.

#TutorielsWeb #PaiementEnLigne #Stripe #PHP #HTML #CSS #Ecommerce #SécuritéWeb #SEO