Le paiement à la livraison dans une boutique en ligne : prendre des commandes quand rien n'est payé en ligne

Comment nous avons intégré le paiement à la livraison à notre plateforme e-commerce : commande en deux étapes, statuts, erreurs lisibles, prix, stock et sécurité.

Points clés

  • Notre plateforme e-commerce accepte les paiements par Stripe et PayPal. Pour les marchés que ces prestataires ne servent pas, comme le Liban, nous avons ajouté deux moyens de paiement : le paiement à la livraison et Whish Money.
  • Le paiement à la livraison s'insère dans la commande standard en deux étapes de la plateforme, comme n'importe quel autre moyen de paiement. La commande est passée en ligne ; la transaction reste ouverte jusqu'à l'encaissement.
  • Les difficultés : les statuts de transaction, des erreurs sur lesquelles le client peut agir, et la revérification des prix et du stock au moment de commander.
  • Les montants viennent toujours du panier côté serveur, aux prix du jour, jamais de la requête, et une transaction ne peut être réglée qu'une fois.
  • Son premier déploiement est shoporganyc.com, la boutique Organyc de New Tripolis Pharma au Liban, qui fonctionne uniquement en paiement à la livraison.

FNB Solutions dispose de sa propre plateforme e-commerce : catalogue, variantes, paniers, commande, suivi des commandes et gestion de contenu. Les paiements par carte et portefeuille passent par Stripe et PayPal. Ces prestataires ne couvrent pas tous les marchés : la liste des pays pris en charge par Stripe, par exemple, ne comprend pas le Liban (Stripe, Global availability). Pour ces marchés, nous avons intégré deux moyens de paiement à la plateforme : le paiement à la livraison, et Whish Money, une application de paiement libanaise agréée par la Banque du Liban.

Cet article porte sur le paiement à la livraison, avec shoporganyc.com comme exemple (étude de cas).

La contrainte : une commande où rien n'est payé

La commande se fait en deux étapes, et chaque moyen de paiement implémente les deux :

  1. Initier le paiement. Le panier est chargé depuis la base et validé, et le moyen de paiement lance un paiement chez son prestataire et enregistre une transaction.
  2. Confirmer la commande. Le moyen de paiement confirme que le paiement est passé, et la plateforme crée la commande, marque le panier comme acheté et décrémente le stock, dans une seule transaction de base de données.

Avec une carte ou un portefeuille, l'argent change de mains entre ces deux étapes. Avec le paiement à la livraison, il change de mains quelques jours plus tard, à la porte du client. La commande doit être passée tout de suite, mais la transaction doit rester ouverte jusqu'à ce que le livreur remette les espèces.

Comment ça fonctionne

ÉtapeCe qui se passeStatut de la transaction
InitierLe client, l'adresse de livraison, les prix du jour, le stock et les limites de montant sont vérifiés, puis une transaction est enregistrée avec un instantané des articles et de l'adresse. Rien n'est débité.pending
ConfirmerLa transaction est vérifiée par rapport à ce panier et à ce client. La commande est créée, le panier marqué comme acheté et le stock décrémenté.processing
EncaisserÀ la remise des espèces, un administrateur coche Cash collected (espèces encaissées). La date d'encaissement est enregistrée. Décocher annule les deux.succeeded
AbandonSi le client recommence sa commande sur le même panier, les transactions non confirmées précédentes sont closes.expired

Chaque statut a un seul sens : processing signifie que la commande est passée et que les espèces ne sont pas encore encaissées, ce que l'équipe de la boutique a besoin de voir chaque jour.

Cinq problèmes à résoudre

1. Les commandes passées ne pouvaient pas rester en « pending »

La première version laissait les commandes passées en pending, puisque aucun argent n'était arrivé. Cela fonctionnait, mais par chance : la commande règle les transactions pending, et un seul détail empêchait qu'une commande passée soit réglée une seconde fois.

Faire passer les commandes en processing a supprimé cette dépendance. Seules les transactions pending sans commande peuvent être réglées, et elles sont réservées de façon atomique : même deux confirmations simultanées ne peuvent pas régler deux fois la même. Les commandes déjà passées sur shoporganyc.com ont été basculées en processing par une migration de données.

2. Les clients voyaient « Error initiating payment. »

La gestion des erreurs de la commande avait été pensée pour les paiements par carte : tout échec d'un moyen de paiement devenait un message générique, Error initiating payment. Pour le paiement à la livraison, la plupart des échecs viennent de choses que le client peut corriger : un numéro d'immeuble, un téléphone, un repère sur la carte.

Pour ces problèmes, le moyen de paiement renvoie désormais la raison dans un champ que la commande lit déjà, et une petite fonction la transforme en message :

ts
const problem = getCashOnDeliveryError(error) // { code, message, fields?, ids? } ou null if (problem?.code === 'PriceChanged') await refreshCart() showError(problem?.message ?? 'Your order could not be placed.')

La page de commande affiche maintenant la vraie raison, par exemple « The delivery address is missing: building. » Il y a 14 codes d'erreur, partagés entre le serveur et le navigateur, chacun avec un message en anglais remplaçable des deux côtés.

3. Les prix et le stock sont revérifiés au moment de commander

Le total d'un panier est enregistré quand le panier est sauvegardé. Si un prix change après l'ajout d'un article, ce total n'est plus à jour. Et le stock doit être vérifié pour chaque variante (un format de paquet, par exemple), pas seulement pour le produit.

Le paiement à la livraison ne se fie donc pas au panier enregistré. Il calcule le prix de chaque article au tarif du jour, et vérifie le stock de chaque produit et de chaque variante. Si les prix ont changé, il enregistre le panier avec le nouveau total et refuse la commande avec PriceChanged, pour que le client vérifie son panier avant de commander.

4. Les cas limites côté administration

« Cash collected » est une case à cocher, et une case se décoche par erreur. La décocher remet la transaction en processing et efface la date. Cela fonctionne pour les mises à jour par l'API comme par l'interface d'administration. La case ne peut pas être cochée sur une transaction sans commande.

5. Les invités

On peut commander sans compte. L'e-mail d'un invité doit correspondre à celui du panier, et un invité qui se connecte entre les deux étapes peut terminer sa commande, à condition d'utiliser le même e-mail. Les commandes d'invités reçoivent un lien privé pour les consulter.

Sécurité

  • Les montants et les articles viennent toujours du panier côté serveur et des prix actuels, jamais de la requête.
  • Seule une liste fixe de champs d'adresse est enregistrée, sous forme de texte ou de nombres.
  • La confirmation exige l'identifiant de transaction et le panier et le client correspondants.
  • Une transaction ne peut être réglée qu'une fois.

Configurable pour chaque boutique

Le paiement à la livraison est un moyen de paiement autonome : une boutique peut le proposer seul, comme shoporganyc.com, ou à côté de Stripe, PayPal ou Whish Money. Chaque boutique le configure :

OptionRôle
calculateAmountAjoute des frais de livraison, de traitement ou des remises au total
minimumAmount / maximumAmountLimites sur le total de la commande
allowedCountriesPays livrés par la boutique
requiredAddressFields, extraAddressFields, requirePhone, requireLocationCe que doit contenir une adresse de livraison, y compris un repère sur la carte
orderStatusStatut donné aux nouvelles commandes
expireAbandonedActive ou non la clôture des commandes abandonnées
messagesTraduit ou réécrit tout message d'erreur affiché au client

Sur shoporganyc.com, le paiement à la livraison exige un repère sur la carte, un quartier, un immeuble et un étage, pour que le livreur trouve la bonne porte ; le code postal est facultatif. Le repère génère aussi un lien Google Maps pour le livreur.

Questions fréquentes

Quand le paiement à la livraison a-t-il du sens ? Quand les prestataires de paiement par carte ne servent pas le pays de votre entreprise, comme ici, ou quand vos clients préfèrent payer à la réception. Il peut aussi coexister avec les paiements par carte et portefeuille, pour laisser le choix au client.

Peut-il ajouter des frais de livraison ? Oui, avec calculateAmount, qui reçoit le sous-total, le panier et l'adresse de livraison et renvoie le montant à encaisser.

Change-t-il le fonctionnement des commandes et du stock ? Non. Il utilise la commande standard en deux étapes de la plateforme : commandes, paniers et stock se comportent exactement comme avec Stripe ou PayPal.


FNB Solutions construit et exploite des boutiques en ligne sur sa propre plateforme e-commerce, avec Stripe, PayPal, le paiement à la livraison et Whish Money. Voir l'étude de cas shoporganyc.com, notre offre de développement d'applications web sur mesure, ou parlez-nous de votre projet.

Sources