Live Coding : Utilisation de Stripe

30 novembre 2019 - : Javascript PHP Tutoriel Live-Coding Stripe - : 0 commentaire - : 191 - Tutoriel Javascript PHP Live-Coding Stripe

Visualisez les fichiers de cette série sur GitHub

Dans cet article nous allons traiter d'une façon simple d'insérer un formulaire de paiement sur votre site avec le service Stripe, qui est similaire à Paypal.

Dans de nombreux sites, il est nécessaire de procéder à la mise en place d'un paiement en ligne. De nombreuses solutions existent, parmi lesquelles :

  • Paypal, très utilisé à l'heure actuelle, assez complexe à implémenter pour des petits sites
  • Les services des banques, assez coûteux
  • Stripe, moins coûteux que les précédents et simple à implémenter

C'est ce dernier que nous allons voir aujourd'hui, dans sa version simple, intégrée en javascript à notre site.

Créer son compte

Nous devons commencer par créer notre compte, sur stripe.com.

Dans la procédure d'inscription, il sera nécessaire de donner quelques informations, et surtout, des coordonnées bancaires, utiles pour recevoir les paiements.

Une fois l'inscription terminée, vous accéderez à un tableau de bord et à un environnement de test.

Cet environnement de test vous permettra de vous assurer du bon fonctionnement de votre code avant mise en production.

Vous aurez également accès à des clés d'API, l'une publique, qui pourra être intégrée à votre javascript, l'autre privée, que personne ne devra connaître mis à part les développeurs.

Mettre en place le projet, installer Stripe

Pour commencer, nous allons mettre en place notre projet et y installer Stripe.

Il vous faudra, dans cette étape, installer Composer sur votre ordinateur.

Les fichiers du projet

Nous allons créer des pages simples qui ne contiendront que le minimum vital pour faire fonctionner Stripe.

La page d'accueil "index.php" contiendra un petit formulaire permettant d'entrer un montant et de valider

<form action="paiement.php" method="post">
    <label for="prix">Prix</label>
    <input type="text" name="prix" id="prix">
    <button>Procéder au paiement</button>
</form>

Comme vous pouvez le constater, ce formulaire chargera "paiement.php" qui servira à la gestion du paiement lui même, détaillé un peu plus bas.

Nous aurons également un fichier javascript "scripts.js" qui se chargera de la gestion du formulaire de paiement.

Installer Stripe

La dernière chose à faire maintenant est d'installer Stripe lui même au moyen de Composer.

La ligne de commande, à exécuter dans un terminal, est la suivante

composer require stripe/stripe-php

Voilà, tout est prêt, nous pouvons maintenant utiliser Stripe.

Le paiement

Dans la procédure de paiement, nous allons devoir séparer 3 étapes :

  • L'intention de paiement : nous informons Stripe qu'un paiement va arriver avec un certain montant
  • L'affichage du formulaire de paiement
  • La gestion du paiement

L'intention de paiement

Dans un premier temps, nous allons informer Stripe qu'un paiement va arriver.

Pour ce faire, nous allons ouvrir notre fichier "paiement.php" et y insérer un peu de code.

Le fichier de base sera un simple code HTML classique

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Paiement</title>

    </head>
    <body>

        <script src="js/scripts.js"></script>
    </body>
</html>

Nous allons y insérer, au début du fichier, le code permettant d'informer Stripe du paiement à venir.

Nous avons son montant en euros qui nous a été envoyé en méthode POST depuis la page d'accueil. Nous commençons par vérifier que nous avons bien reçu ce montant

if(isset($_POST['prix']) && !empty($_POST['prix'])){

}

A l'intérieur de cette condition nous savons que nous avons reçu un prix.

Attention, je ne mets pas tous les contrôles mais il est également nécessaire de s'assurer qu'il s'agit bien d'un nombre décimal, par exemple.

Une fois assurés que nous avons un prix, nous pouvons appeler Stripe et lui transmettre notre intention de paiement.

Vous aurez besoin de votre clé d'API privée à cette étape

if(isset($_POST['prix']) && !empty($_POST['prix'])){
    // Nous appelons l'autoloader pour avoir accès à Stripe
    require_once('vendor/autoload.php');

    // Nous instancions Stripe en indiquand la clé privée, pour prouver que nous sommes bien à l'origine de cette demande
    \Stripe\Stripe::setApiKey('VOTRE_CLE_PRIVEE_STRIPE');

    // Nous créons l'intention de paiement et stockons la réponse dans la variable $intent
    $intent = \Stripe\PaymentIntent::create([
        'amount' => $_POST['prix']*100, // Le prix doit être transmis en centimes
        'currency' => 'eur',
    ]);
}

C'est terminé, nous avons informé Stripe de notre intention d'encaisser un paiement et avons reçu une réponse en retour, qui nous servira par la suite.

Le formulaire de paiement

Pour procéder au paiement, nous devons afficher un formulaire de saisie de numéro de carte bancaire et gérer son fonctionnement.

Nous allons décomposer tout ceci, qui sera fourni par Stripe en javascript.

Pour commencer, toujours dans notre fichier "paiement.php" nous allons insérer le fichier javascript de Stripe, avant le notre.

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

Ensuite, dans la partie "<body>", nous allons ajouter un formulaire

<form method="post">

</form>

Ce formulaire se découpera en plusieurs partie.

Tout d'abord, une zone d'affichage des erreurs de paiement

<div id="errors"></div>

Puis une zone de saisie de l'identité de la personne

<input id="cardholder-name" type="text" placeholder="Titulaire de la carte">

Vient ensuite le formulaire de saisie du numéro de carte, date d'expiration, code de validation et code postal

<div id="card-element">
</div>

Ensuite l'affichage des erreurs relatives au numéro de carte

<div id="card-errors" role="alert"></div>

Et enfin,le bouton de validation

<button id="card-button" type="button" data-secret="<?= $intent['client_secret'] ?>">Valider le paiement</button>

Vous pouvez constater que nous avons injecté un code secret dans l'attribut "data-secret" du bouton. Il s'agit de l'élément qui fera le lien entre le paiement et l'intention de paiement précédemment générée.

Ce qui nous donne un formulaire complet comme ceci

<form method="post">
    <div id="errors"></div>
    <input id="cardholder-name" type="text" placeholder="Titulaire de la carte">
    <div id="card-element">
    </div>
    <div id="card-errors" role="alert"></div>
    <button id="card-button" type="button" data-secret="<?= $intent['client_secret'] ?>">Valider le paiement</button>
</form>

Il est maintenant nécessaire d'utiliser l'API Stripe pour générer le contenu et les contrôles de ce formulaire.

Le asuite du code sera écrite dans le fichier "scripts.js".

On commence par s'assurer du bon chargement du document avant de le manipuler

window.onload = () => {

}

Puis on instancie Stripe et on crée les variables qui nous serviront plus tard

// On instancie Stripe et on lui passe notre clé publique
let stripe = Stripe('VOTRE_CLE_PUBLIQUE');

// Initialise les éléments du formulaire
let elements = stripe.elements();

// Définit la redirection en cas de succès du paiement
let redirect = "/index.php";

// Récupère l'élément qui contiendra le nom du titulaire de la carte
let cardholderName = document.getElementById('cardholder-name');

// Récupère l'élement button
let cardButton = document.getElementById('card-button');

// Récupère l'attribut data-secret du bouton
let clientSecret = cardButton.dataset.secret;

// Crée les éléments de carte et les stocke dans la variable card
let card = elements.create("card");

Vient ensuite le moment d'injecter le formulaire dans notre page

card.mount("#card-element");

Nous allons maintenant mettre en place l'écouteur d'évènements "change" qui se chargera de surveiller que le formulaire est rempli correctement

card.addEventListener('change', function(event) {
    // On récupère l'élément qui permet d'afficher les erreurs de saisie
    let displayError = document.getElementById('card-errors');

    // Si il y a une erreur
    if (event.error) {
        // On l'affiche
        displayError.textContent = event.error.message;
    } else {
        // Sinon on l'efface
        displayError.textContent = '';
    }
});

Cette partie est terminée, notre formulaire de paiement est fonctionnel. Reste à gérer le paiement en lui même.

Gérer le paiement

Pour terminer, nous allons devoir gérer le paiement lui-même et le transmettre à Stripe.

Le paiement sera transmis au moment où l'utilisateur cliquera sur le bouton de validation. Nous allons donc ajouter un écouteur d'évènements sur ce bouton, pour l'évènement "click".

Cet évènement déclenchera une promesse javascript sur l'objet Stripe, dont on va gérer la réponse.

cardButton.addEventListener('click', () => {
    // On envoie la promesse contenant le code de l'intention, l'objet "card" contenant les informations de carte et le nom du client
    stripe.handleCardPayment(
        clientSecret, card, {
            payment_method_data: {
                billing_details: {name: cardholderName.value}
            }
        }
    ).then(function(result) {
        // Quand on reçoit une réponse
        if (result.error) {
            // Si on a une erreur, on l'affiche
            document.getElementById("errors").innerText = result.error.message;
        } else {
            // Sinon on redirige l'utilisateur
            document.location.href = redirect;
        }
    });
});

Voilà, nous avons terminé.

Il ne reste plus qu'à tester. Stripe fournit des numéros de carte de test

Numéro Description
4242 4242 4242 4242 Paiement validé immédiatement
4000 0025 0000 3155 Active 3D Secure
4000 0000 0000 9995 Echoue sur "Fonds insuffisants"

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Ecrire un commentaire