Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aliastim/5e9fde13661f47020a0de6220cc0297b to your computer and use it in GitHub Desktop.
Save aliastim/5e9fde13661f47020a0de6220cc0297b to your computer and use it in GitHub Desktop.

💳 Mettre en place un formulaire de paiement php sur son site avec Stripe

Stripe est une API très utile pour intégrer un formulaire de paiement à son site web. Celle-ci va vous permettre de mettre en place des paiements directs ou des abonnements sans avoir besoin d'enregistrer les données sensibles sur votre site puisque toutes les informations seront directement traitées par le serveur de Stripe.

⚠️ En revanche, le service de Stripe vous coûtera 2,9 % + 0,30 $US pour chaque transaction.

Avant de commencer

  • Créer un compte sur le site de stripe
  • Ajouter ses coordonnées bancaires pour accéder aux fonctionnalités

Vous trouverez sur l'interface, vos clés publiques (publishable key) et secrètes (secret key), assurez-vous d'avoir activé l'environnement de tests (sandbox) pour la mise en place du formulaire

Introduction

Nous allons mettre en place un formulaire très basique qui va demander à l'utilisateur deux types d'informations :

  • Des informations personnelles (email et description (ici le nom)), celles-ci vont permettre d'avoir un libellé de l'acheteur pour chaque transaction sur votre compte Stripe mais peut-être tout à fait facultatif.
  • Des informations bancaires (Numéro de carte, mois d'expiration, année d'expiration et cryptogramme), celles-ci sont nécessaires au fonctionnement de l'API pour la transaction.

Pour cela, nous allons mettre en place 3 fichiers :

  • Une page index.php où on placera le formulaire de paiement.
  • Une classe stripe.php où on fera appel à l'API pour envoyer les informations.
  • Une page payment.php qui traitera les informations du formulaire et qui comprendra le montant de la transaction.

index.php - Mise en place du formulaire

Cette page va comprendre 3 parties :

Appel de la librairie Stripe

Dans le footer, placer le script suivant pour appeler Stripe :

<script src="https://js.stripe.com/v2/"></script>

‼️ Ici, nous utiliserons également jquery pour les traitements javascript

Création du formulaire html

Ici, nous allons créer un formulaire avec les champs d'informations (facultatifs) qui vont servir à décrire l'utilisateur qui effectue la transaction (mail et nom) et les champs de paiement nécessaires à la transaction (Numéro de carte, mois et année d'expiration et cryptogramme).

On remarquera également que pour les champs de paiement, on a rajouté l'attribut data-stripe qui indique à Stripe de quelle information, il s'agit :

          <form action="payment.php" method="post" id="payment_form">
                <!-- Champs hors paiement -->
                <input type="text" name="name" placeholder="Votre nom" required>
                <input type="email" name="email" placeholder="Votre email" required>

                <!-- Champs pour le paiement -->
                <!-- l'attribut data-strip permet d'informer stripe du rôle de chaque input -->
                <input type="text" placeholder="Code de carte bleue" data-stripe="number" required>
                <input type="text" placeholder="MM" data-stripe="exp_month" required>
                <input type="text" placeholder="YY" data-stripe="exp_year" required>
                <input type="text" placeholder="CVC" data-stripe="cvc" required>

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

Traitement du formulaire

Ici, nous allons mettre en place plusieurs sécurité. Tout d'abord, nous allons initialiser Stripe avec notre clé publique et appeler notre formulaire via une variable.
Nous allons ensuite bloquer la soumission du formulaire avec e.preventDefault() pour traiter et transmettre les informations à Stripe.
Nous allons bloquer le bouton d'envoi pour éviter que l'utilisateur ne rappuie dessus une deuxième fois avec $form.find('.button').attr('disbled', true). Nous allons ensuite vérifier qu'il n'y a pas d'erreurs et les afficher dans une div auquel cas.
Enfin si aucune erreur n'est détectée, Stripe va nous retourner un token que nous allons stocker dans un input de type hidden que nous allons transmettre à payment.php.
Enfin, on soumet le formulaire.

<script>
    Stripe.setPublishableKey('MA_CLE_PUBLIQUE') /*Clé publique*/
    var $form = $('#payment_form')

    $form.submit(function (e) {

        e.preventDefault()

        $form.find('.button').attr('disbled', true) 

        Stripe.card.createToken($form, function (status, response) {

            if (response.error)
            {
                $form.find('.message').remove(); /*Supprime les messages d'erreurs précédent s'il y en a*/
                $form.prepend('<div class="message"><p>'+ response.error.message +'</p></div>') 
            } else
            {
                var token = response.id /*Récupère le token renvoyé par stripe*/
                $form.append($('<input type="hidden" name="stripeToken">').val(token)) 
                $form.get(0).submit() 
            }

        })
  })

</script>
        

stripe.php - Mise en place de la classe

Nous allons maintenant créer une classe stripe.php qui va appeler l'api de Stripe pour traiter et vérifier les informations que nous allons lui retourner :

<?php

class Stripe {

    private $api_key;

    public function __construct($api_key)
    {
        $this->api_key = $api_key;
    }

    public function api(string $endpoint, array $data) : stdClass
    {
        /*CREE LE CLIENT SUR STRIPE*/
        $ch = curl_init();
        curl_setopt_array($ch, [
            CURLOPT_URL => "https://api.stripe.com/v1/$endpoint", /**/
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_USERPWD => $this->api_key, /*Renvoie la clé secrète Stripe*/
            CURLOPT_HTTPAUTH => CURLAUTH_BASIC,
            CURLOPT_POSTFIELDS => http_build_query($data)
        ]);

        $response = json_decode(curl_exec($ch));
        curl_close($ch);

        /*Génère une erreur lorsque l'utilisateur recharge la page alors qu'il a déjà payé*/
        if (property_exists($response, 'error'))
        {
            throw new Exception($response->error->message);
        }

        return $response;
    }
}

payment.php - Analyse du formulaire et traitement de la demande

Enfin, payment.php va transmettre les informations à la classe stripe.php :

  • Tout d'abord, elle va récupérer les informations de l'utilisateur et le token de vérification retournée par Stripe, nous allons stocker, ces 3 informations dans un tableau $customer qui va créer un client (avec la source de la transaction (le token), son email et une decription (ici le nom)).
    Rappelons que l'email et la description sont facultatifs ou peuvent être remplacé manuellement dans le code si l'on souhaite nous-même indiquer une information pour la transaction.
  • Ensuite, nous allons définir le montant de la transaction dans la variable $charge, la devise et l'id autogénéré du client qui réalise la transaction.

    Enfin si tout s'est bien passé, on retourne une phrase pour confirmer que la transaction a été effectuée.
<?php

$token = $_POST['stripeToken'];
$email = $_POST['email'];
$name = $_POST['name'];

if (filter_var($email, FILTER_VALIDATE_EMAIL) && !empty($name) && !empty($token))
{
    require ('stripe.php');
    $stripe = new Stripe('MA_CLE_PRIVEE'); /*Clé secrète Stripe*/
    $customer = $stripe->api('customers', [
        'source' => $token,
        'description' => $name, /*Information complémentaire pour identifier les clients sur Stripe (facultatif)*/
        'email' => $email, /*Information complémentaire pour identifier les clients sur Stripe (facultatif)*/
    ]);

    /*Pour un paiement simple (pas un abonnement) */
    $charge = $stripe->api('charges', [
        'amount' => 1000, /*Montant d'achat : 1000 = 10,00 € */
        'currency' => 'eur',
        'customer' => $customer->id,
    ]);

    var_dump($charge);
    die('Bravo le paiement a bien été enregistré');
}

Vous pouvez trouver l'intégralité du code sur mon repository
N'hésitez pas à suivre ce tuto pour réaliser ce formulaire.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment