Demander un devis

Réalisation · application client, commerce en ligne

Un formulaire de paiement refait avec Stripe, pour un commerçant en ligne.

Le parcours de paiement du commerçant était jugé complexe et peu rassurant. Nous l'avons réécrit autour de Stripe : les données de carte se saisissent dans des champs fournis par Stripe, et l'authentification forte s'ouvre dans le parcours quand la banque la demande. Le serveur du commerçant ne garde aucune donnée bancaire.

01/Le contexteD'où nous sommes partis

Un paiement qui inquiète fait partir le client avant la fin

Le point de départ : un parcours complexe et peu rassurant, que des clients abandonnaient avant de payer. Pour chaque point qui coinçait, ce que fait le formulaire.

  1. 01Des clients abandonnaient au moment de payer, devant un parcours complexe et peu rassurant.Un formulaire court, des champs de carte fournis par Stripe, des messages d'erreur clairs au fil de la saisie.
  2. 02L'authentification forte imposée en Europe ajoute une étape que beaucoup de formulaires gèrent mal.La vérification 3D Secure s'ouvre dans le parcours quand la banque la demande, puis le paiement reprend.
  3. 03Garder des numéros de carte engage la responsabilité du commerçant.Les numéros de carte partent directement chez Stripe ; le serveur ne manipule que des identifiants de paiement.
  4. 04Une page de remerciement ne prouve pas que l'argent est arrivé.La commande se confirme à la réception des notifications de Stripe, pas au retour du navigateur.
02/Ce que nous avons construitLivré au client

Un parcours de paiement court, où la carte ne touche pas le serveur

Ce qui concerne la carte reste chez Stripe ; le formulaire, les contrôles et la confirmation sont notre code.

  • 01
    Intention de paiement. Chaque paiement est créé côté serveur avec l'API Payment Intents de Stripe.
  • 02
    Champs de carte Stripe Elements. Numéro, date d'expiration et cryptogramme se saisissent dans des champs servis par Stripe.
  • 03
    Validation au fil de la saisie. Numéro, date et cryptogramme sont vérifiés en direct, avec un message clair sous le champ.
  • 04
    Authentification forte. Les vérifications 3D Secure demandées par la banque s'ouvrent dans le parcours.
  • 05
    Confirmation par Stripe. Le serveur écoute les notifications de Stripe (webhooks) pour confirmer la commande et mettre à jour son statut.
  • 06
    Protection des formulaires. Jetons contre la falsification de requêtes, et saisies nettoyées contre l'injection de script.
  • 07
    Limite de tentatives. Le nombre d'essais est borné, contre les tentatives en rafale.
  • 08
    Journal des transactions. Chaque transaction est tracée, pour retrouver ce qui s'est passé.
03/Un schémaComposé en texte, ce n'est pas une capture

Un schéma du parcours, faute de capture

Les captures d'origine sont perdues et le code n'a pas été relancé en mode test : ce schéma suit le paiement, étape par étape.

Schéma du parcours de paiement en quatre temps : le panier validé sur le site, la carte saisie dans un champ de Stripe sans donnée bancaire conservée sur le serveur du site, l'authentification forte 3D Secure quand la banque la demande, la validation de la commande quand Stripe prévient le serveurSchéma du parcours de paiement en quatre temps : le panier validé sur le site, la carte saisie dans un champ de Stripe sans donnée bancaire conservée sur le serveur du site, l'authentification forte 3D Secure quand la banque la demande, la validation de la commande quand Stripe prévient le serveur
Fig. 01Schéma du parcours, composé en texte. Le client n'est pas nommé et aucune capture n'est publiée.

Quatre temps, du panier à la commande validée

Le panier validé, la carte saisie dans un champ de Stripe, l'authentification forte quand la banque la demande, puis la commande validée quand Stripe prévient le serveur.

04/TechnologiesCe que nous avons choisi, et pourquoi

Le paiement confié à Stripe, le reste écrit à la main

Ce qui touche à la carte reste chez le prestataire de paiement ; le parcours autour est notre code, contrôlé de bout en bout.

  • ServeurPHP 8.2, architecture MVC.
  • PaiementAPI Payment Intents de Stripe ; notifications de Stripe (webhooks) pour confirmer chaque paiement.
  • SaisieStripe Elements pour les champs de carte ; JavaScript sans bibliothèque pour la validation au fil de la saisie.
  • Authentification3D Secure, déclenché quand la banque le demande.
  • ProtectionÉchanges chiffrés, jetons contre la falsification de requêtes, saisies nettoyées, limite de tentatives.
  • TracesJournal de chaque transaction.
05/Pour aller plus loinPrestations voisines

Pour un site qui encaisse sans inquiéter

Création de site internet à StrasbourgRapide, accessible, hébergé en FranceDéveloppement de logiciel sur mesureLa démarche complète, du cadrage à la propriété du code

Et maintenant

Un paiement par carte à ajouter à votre site, ou à refaire ?

Champs de carte, authentification forte, confirmation fiable : décrivez-nous votre boutique ou votre service, nous vous dirons ce qui est faisable, avec un délai et un ordre de prix.

Discuter de votre projet

Réponse sous 24 h ouvrées, par l'un des deux fondateurs. Ou par téléphone : 07 59 96 14 99.