Une des pires choses qui peut arriver lors d’un processus de paiement, c’est de perdre les informations saisies pas l’utilisateur.

Voici les 3 principales façons de perdre les informations de vos clients, à vous de vérifier le comportement de votre checkout. S’il présente des failles, corrigez et puisque vous y êtes, profitez-en pour le tester (split testing).

3 principales façons de perdre les informations de vos clients.

1 – Sortir du checkout sans enregistrer les données

Les informations sont envoyées au serveur Web pour le traitement et l’enregistrement des données au moment du clic sur le bouton « Envoyer » ou « Continuer ». L’effacement des informations se produira si l’utilisateur rafraîchit la page ou si naturellement, il la quitte.

En ce cas de figure, plusieurs solutions s’offrent à vous.
Premièrement, vous devez tout faire pour garder l’utilisateur en direction de la page de Confirmation.

Pour cela, minimisez les liens de navigation dans le processus de commande et assurez-vous de révéler l’information nécessaire dans une lightbox / pop-up plutôt que de charger une nouvelle page (voir l’article sur l’isolation du Checkout). Si ce n’est pas possible, utilisez l’évènement onclick sur vos liens pour déclencher une fonction JavaScript du type « form.submit ». Et si votre utilisateur quitte la page, vous pouvez également utiliser onUnload pour déclencher l’envoi du formulaire.
Et mieux encore, utiliser les fonctionnalités sessionStorage et localStorage du HTML5 compatible avec Chrome, Safari, Opera, Firefox 4, Internet Explorer 8 et 9.

Et comme une bonne nouvelle arrive rarement seule :

On peut enregistrer les données même quand la connexion internet est coupée (le storage étant dans le navigateur).
On peut gérer les données par session (si vous avez 2 fenêtres sur le même site, une action sur le sessionStorage sera répercutée sur l’autre).
On peut gérer les données au niveau de la page (localStorage).

Le storage a pour but de répondre à une des limites des cookies, c’est-à-dire leur taille (4 ko pour les cookies et jusqu’à 10Mo pour le storage !).

Et cerise sur le gâteau, l’implémentation semble assez simple :

Pour stocker une valeur dans une clé : localStorage.setItem(‘prenom’) = ‘Franck’;
Récupérer la valeur de la clé « nom » dans une variable: var prenom= localStorage.getItem(‘prenom’);

2 – Ajouter un nouveau produit dans le panier.

Le processus de paiement a été initié, mais interrompu – pour ajouter un produit supplémentaire à la commande – le checkout devrait reprendre là où il s’était interrompu. Supposez que j’ai entré mes données personnelles et l’adresse de livraison. Mais juste avant d’entrer mon numéro de carte de crédit, je me souviens que je dois acheter quelque chose d’autre. Je retourne chercher le produit et l’ajoute dans mon panier. Quand je clique sur le bouton « Paiement », je souhaite aller directement à l’étape de paiement pour compléter le processus de commande commencé plus tôt. Je n’ai pas envie d’avoir à recommencer tout le parcours de paiement.

Pour être en mesure de retrouver les informations, il faudrait les enregistrer dans un cookie de session ou faire appel aux fonctionnalités Storage HTML5.

3 – Revenir plus tard valider son panier d’achats.

Même après avoir abandonné leur panier, beaucoup d’utilisateurs reviennent les jours suivants pour finaliser leur achat. Ainsi, perdre l’information sur le contenu de panier d’achats est presque synonyme de perte de revenue.

La solution la plus simple consiste à proposer l’enregistrement du panier.
Regarder le rapport Analytics « jour avant achat » pour identifier la durée pendant laquelle les paniers doivent être enregistrées. Alternativement, les éléments peuvent être déplacés vers une liste de souhaits ou « Articles sauvegardés » .