Commerce électronique dès la conception
Simple à l’achat.Simple à gérer.
Une boutique a deux côtés : celui que voit votre clientèle et celui que gère votre équipe. Sur notre nouveau système, les deux reposent sur des règles inscrites dans le code : un choix avant le panier, un panier qui ne se perd pas, des prix revérifiés à la caisse, des taxes au cent près. Plus bas, une petite boutique de démonstration, Nocturne, est ouverte. Ajoutez, choisissez, changez d’idée : rien n’est vendu, rien n’est facturé.
Nocturne est une démonstration : ses articles sont dessinés pour cette page, ses prix sont inventés et aucune donnée de paiement n’est demandée. Les règles s’exécutent dans votre navigateur, et votre panier de démonstration y reste.
01 · L’étalage
Un geste, et le panier répond.
Rien à choisir : un geste depuis la carte. Des options : la carte demande d’abord. Regardez le panier répondre, puis prenez la main : les articles sont inventés, le panier est du vrai code de boutique, gardé dans votre navigateur.
Nocturneprovisions pour nuits claires
01 · L’étalage
Graines de comète
9,00 $
Rien à choisir
Casse-tête constellation
29,00 $
3 au plus dans le panier
Verre de marée
24,00 $
Format unique · 500 ml
Lanterne de lune
38,00 – 64,00 $
4 phases · 1 épuisée
Lanterne de lune
Choisissez une phase38,00 – 64,00 $
Thé des étoiles
14,00 – 28,00 $
50 g ou 120 g
Thé des étoiles
Choisissez un format14,00 – 28,00 $
Écharpe aurore
72,00 $
4 couleurs · 1 épuisée
Écharpe aurore
Choisissez une couleur72,00 $
02 · Votre panier
Montré par la visite
Articles dessinés, prix inventés. Le panier est du vrai code de boutique, gardé dans votre navigateur, sans rien envoyer.
Comment c’est lu
Un geste, ou un choix d’abord
Les règles d’achat communes de notre nouveau système décident de l’action de chaque carte. Un produit sans rien à choisir, ou à option unique, entre dans le panier d’un seul geste, depuis sa carte. Un produit à options demande d’abord le choix, et sa carte affiche la fourchette de prix tant que rien n’est choisi. Une option épuisée reste en vue, désactivée. Chaque produit garde aussi sa propre limite par ligne.
Ce qu’une ligne garde
Le produit, l’option choisie, la quantité, et un prix gardé pour l’affichage seulement : à la caisse, la boutique reprend le panier à ses propres prix.
Où il est gardé
Dans le stockage de ce navigateur, sous un nom qui lui est propre : il vous suit dans un deuxième onglet et après un rechargement. Rien n’en est envoyé. La vraie boutique de ce site garde un panier distinct, auquel cette page ne touche pas.
La visite
L’histoire qui joue d’abord se déroule dans un panier à elle, marqué « Montré par la visite ». Elle n’écrit jamais dans le vôtre : seuls vos propres gestes le font.
02 · Les choix
Pas de choix, pas de panier.
Tant qu’aucune phase n’est choisie, la lanterne affiche sa fourchette de prix et son bouton dit ce qui manque. Une phase épuisée reste visible, désactivée. Retirez la règle et voyez ce que fait une boutique ordinaire.
La fiche de la lanterne de lune
01 · La pièce
02 · Le choix
Lanterne de lune
fourchette de prix · aucun choix
03 · Les règles
0 sur 5 allumées par vous- Rien n’entre sans choix, pas encore appliquée
- Sans choix, le prix est une fourchette, pas encore appliquée
- L’option épuisée reste visible, désactivée, pas encore appliquée
- Une seule option n’est pas une question, pas encore appliquée
- La quantité respecte les limites du produit, pas encore appliquée
Quarantaine · hors de votre panier
Vide. Seul le mode « Sans elle » y dépose une ligne.
Les règles s’exécutent en direct, depuis le code des boutiques de notre nouveau système. La lanterne, ses prix et son stock sont inventés.
Comment c’est lu
- Rien n’entre sans choix
- Le bouton Ajouter consulte d’abord les règles d’achat partagées. Tant qu’aucune phase n’est choisie, elles répondent qu’un choix manque, et aucune ligne n’est créée. Mettre la première option au panier sans demander produit une commande fausse et pourtant cohérente : c’est la clientèle qui la découvre, pas un test.
- Sans choix, le prix est une fourchette
- Tant qu’aucune phase n’est choisie, aucun prix unique n’est vrai : la fiche affiche le plus bas et le plus haut des phases de la lanterne. Un seul prix apparaît dès que les règles ont une phase à évaluer.
- L’option épuisée reste visible, désactivée
- Une phase épuisée reste sur la fiche, nommée et désactivée. Le clavier l’atteint toujours et entend pourquoi elle ne peut pas être choisie ; une phase disparue laisserait la clientèle se demander si elle a déjà existé.
- Une seule option n’est pas une question
- Quand un produit n’a qu’une option, les règles la choisissent d’avance, même sur une fiche qui demande tous les autres choix. Le verre de marée entre d’un seul geste.
- La quantité respecte les limites du produit
- Le sélecteur prend son minimum, son maximum et son pas dans le produit, et les règles les vérifient de nouveau quand la ligne est créée. Votre panier tient chaque ligne au même maximum : la lanterne s’arrête à deux par phase.
- En direct, et « Sans elle »
- Chaque anneau s’allume selon la réponse des règles partagées, calculée dans votre navigateur, pas selon une minuterie. « Sans elle » fait passer la même lanterne par un raccourci, la première phase quand rien n’est choisi ; sa ligne reste en quarantaine et n’atteint jamais votre panier. La visite appuie sur les mêmes boutons que vous et n’écrit jamais dans votre panier.
03 · Le panier
Un panier qui suit.
Changez une quantité : chaque chiffre suit. Retirez une ligne : elle peut revenir. Franchissez le seuil : un cadeau s’ajoute. Puis rechargez la page ou ouvrez un deuxième onglet : le panier est gardé dans votre navigateur.
Le panier, sur l’établi
01 · Le panier
Encore 28,00 $ pour une carte postale du ciel, gratuite
- 9,00 $
Graines de comète
9,00 $ l’unité
1 - 24,00 $
Verre de marée
500 ml
24,00 $ l’unité
1 - 14,00 $
Thé des étoiles
50 g
14,00 $ l’unité
1
02 · Gardé dans votre navigateur
Lu en direct
—
03 · Un autre onglet
Ouvrez un deuxième onglet et changez-y le panier : celui-ci suit.
Ouvrez un deuxième onglet pour le voir
Lu en direct dans le stockage de ce navigateur. Rien de ce panier ne quitte votre appareil.
Comment c’est lu
Où vit le panier
Le panier est le module de panier qu’utilisent les boutiques WordPress découplées de notre nouveau système, gardé dans le localStorage de ce navigateur sous une clé à lui. Chaque modification réécrit tout le panier avec une nouvelle révision, un identifiant aléatoire qui permet à la boutique de distinguer une version de la suivante. Les octets sont la longueur de ce qui est enregistré, comptée en UTF-8.
Après un rechargement, dans un deuxième onglet
Au chargement, le panier est relu depuis le stockage, et de nouveau à l’événement pageshow : les boutons Précédent et Suivant le ramènent aussi. Un autre onglet de ce site reçoit un événement storage chaque fois que celui-ci écrit, et relit le panier : les deux restent à jour. Un événement storage ne survient que pour une modification faite dans un autre onglet ; l’étiquette « en direct » est donc la preuve qu’il existe.
Quand le stockage est refusé
Certaines fenêtres privées et certains réglages stricts refusent le stockage. Le panier vit alors en mémoire pour cette visite, et le dit ici, au lieu d’échouer.
Des intentions, pas une commande
Le panier garde des produits, des options et des quantités, avec les prix affichés. Ce n’est pas une commande : les prix sont confirmés à la caisse, d’après les registres de la boutique (section 04).
Le cadeau et les requêtes
Une boutique peut offrir un cadeau à partir d’un seuil ; celui de Nocturne, la carte postale et ses prix sont inventés. Ici, le cadeau se tient en tête du panier, déduit du sous-total : ce n’est pas une ligne, il n’est donc ni compté, ni facturé, ni retiré. Sur les boutiques WordPress de notre nouveau système, le serveur de la boutique applique de nouveau la règle à la commande qu’il reçoit. Le compte de requêtes lit le Resource Timing du navigateur : les requêtes lancées dans la seconde qui suit chacune de vos modifications ici, sans compter les préchargements de pages du cadriciel.
La visite
La visite se joue sur une copie : de votre panier s’il a des lignes, d’un panier d’exemple s’il est vide. Son rechargement et son deuxième onglet sont montrés, pas faits ; les deux boutons du haut les font réellement.
04 · La caisse
Les prix se fixent à la porte.
Ce qui quitte votre navigateur nomme des produits, des options et des quantités, sans aucun prix. La boutique les reprend à ses propres prix et les taxe selon la destination. Modifiez un prix ici : il est ignoré.
01 · Votre navigateur
Le panier, en données
- basketId
- 6e6f637475726e65a7c3e19052d48f6b
- revision
- 3f1c9a7e5b2d4086c1e8f3a59b7d2e60
- Graines de comètecombien ×1prix affiché 9,00 $9001 · 0
- Verre de marée · 500 mlcombien ×1prix affiché 24,00 $9003 · 90031
- Thé des étoiles · 50 gcombien ×1prix affiché 14,00 $9005 · 90051
- Lanterne de lune · Croissantcombien ×1prix affiché 38,00 $9004 · 90041
02 · Notre serveur
Ce qui part vraiment
- version
- 1locale fr
- basketId
- 6e6f637475726e65a7c3e19052d48f6b
- revision
- 3f1c9a7e5b2d4086c1e8f3a59b7d2e60
- productId 9001variationId 0quantity 1
- productId 9003variationId 90031quantity 1
- productId 9005variationId 90051quantity 1
- productId 9004variationId 90041quantity 1
Sceau · HMAC-SHA-256valable 5:00
—
—
après le # de l’adresse, hors des journaux
03 · Les registres
Prix repris, taxes selon l’adresse
- Graines de comète×1affiché 9,00 $9,00 $
- Verre de marée · 500 ml×1affiché 24,00 $24,00 $
- Thé des étoiles · 50 g×1affiché 14,00 $14,00 $produit d’épicerie de base · ni TPS ni TVQ
- Lanterne de lune · Croissant×1affiché 38,00 $38,00 $
Sous-total85,00 $
taxes sur 71,00 $
- TPS 5 %3,553,55
- TVQ 9,975 %7,082257,08
Total95,63 $
04 · Le paiement
Scellé, et pas chez nous
Les données de carte se saisissent dans les champs sécurisés du fournisseur de paiement, jamais dans les nôtres. Pour une boutique WordPress, la caisse de WooCommerce prend le relais ici.
Cette démonstration s’arrête à la porte.
Code de paiement chargé par cette page
—
js.stripe.com · m.stripe.network
01 · Le panier
Tel qu’il est
- revision
- 3f1c9a7e5b2d4086c1e8f3a59b7d2e60
- caisse ouverte à
- b84e2a6c90d13f57e2a8c4b6d1f09e35
- Graines de comète×1
- Verre de marée · 500 ml×1
- Casse-tête constellation×1ajouté depuis
- + 2 autres lignes
02 · Le reçu
Au retour de la caisse
- état
- completed
- pour la révision
- b84e2a6c90d13f57e2a8c4b6d1f09e35
- articles
- —
isLostCheckout(receipt)false
03 · Le panier après
Ce que les règles décident
reconcileBasket(bag, receipt)
Gardé5 lignes
- Graines de comète×1
- Verre de marée · 500 ml×1
- Casse-tête constellation×1
- + 2 autres lignes
04 · Quatre retours
Essayez chacun
Seule une commande terminée pour ce panier exact le vide.
Modifiez un prix, passez à la caisse, modifiez le paquet : chaque vérification s’exécute dans votre navigateur, sur une copie du panier.
Le paquet est construit à partir du panier d’exemple ; les taxes suivent les taux vérifiés le 2026-10-02. Le côté boutique est simulé. Signé ici avec une clé jetable créée dans votre navigateur pour cette page. Une vraie boutique signe sur son serveur, avec un secret que le navigateur ne voit jamais.
Comment c’est lu
- La projection
- La fonction qu’exécutent les boutiques WordPress de notre nouveau système avant la caisse, appliquée en direct à une copie du panier. Elle garde la version, le panier, sa révision, la langue et, pour chaque ligne, le produit, l’option et la quantité. Toute autre clé est écartée, et la liste des clés écartées est calculée, pas écrite.
- Le sceau
- Un HMAC-SHA-256 calculé par la cryptographie de votre navigateur, sur le paquet écrit en base64url, avec une clé créée une seule fois à l’ouverture de cette page, jamais enregistrée, disparue quand vous partez. Sur nos boutiques WordPress, le serveur signe avec un secret qu’il ne partage qu’avec la boutique ; le paquet vaut cinq minutes et voyage après le # de l’adresse. Pour notre propre boutique, le serveur vérifie lui-même le panier et fixe le prix de chaque article d’après son catalogue avant d’appeler le fournisseur de paiement.
- Les prix
- Le catalogue de Nocturne tient lieu des registres de la boutique : le côté serveur est simulé dans votre navigateur, et les prix sont inventés.
- Les taxes
- Le module de taxes de vente du site, pour une boutique québécoise inscrite aux fichiers de la TPS/TVH et de la TVQ : chaque taxe est calculée sur les lignes taxables et arrondie au cent séparément, comme sur une facture. Le Thé des étoiles, produit d’épicerie de base, est détaxé. Une taxe de vente provinciale ne s’applique que là où la boutique y est inscrite : aucune n’est montrée.
- Le retour
- Les deux règles qu’appliquent les boutiques de notre nouveau système quand on revient de la caisse, sur une copie du panier et avec des reçus inventés. Un reçu pour une révision plus ancienne n’efface jamais des choix plus récents, et une caisse ouverte qui ne contient rien est traitée comme perdue, pas comme un choix.
- Le code de paiement
- Lu en direct dans le Resource Timing : les requêtes de cette page vers js.stripe.com et m.stripe.network. Notre propre boutique ne charge le script de Stripe qu’à l’ouverture de sa caisse, et cette page n’a pas de caisse.
05 · Votre côté
Un geste pour eux. Quatre choses pour vous.
La clientèle voit une confirmation dans sa langue. De votre côté, au même moment : la commande arrive dans WordPress, le stock baisse là où il est suivi, les courriels partent, le paiement est inscrit. Regardez les deux côtés.
01 · Leur écran
02 · Votre côté
Une commande d’exemple, montrée par la visite
Merci
Commande DEMO-7F3A
- Graines de comète×1
- Verre de marée×1
- Thé des étoiles×1
- +1 de plus
- Carte postale du cielGratuit
Total95,63 $
Une confirmation est en route
- Commandesdans WordPressEn attente de la prochaine commandeDEMO-7F3A4 articles95,63 $PayéeNouvelleDEMO-9B052 articles66,69 $PayéeExempleDEMO-2C811 article28,00 $PayéeExempleDEMO-7F3A · 4 articles · 95,63 $Payée
- Stocklà où la boutique le suit+1 autre ligneLanterne de lune · Croissant2 → 1Stock bas · votre équipe est aviséeVerre de marée · 500 ml7 → 6Thé des étoiles · 50 g12 → 11Lanterne de lune · Croissant · 2 → 1Stock bas · votre équipe est avisée
- Courrielsenvoyés par votre boutique
À la clientèle · en françaisDessiné, non envoyé
Votre commande Nocturne DEMO-7F3A est confirmée
Merci. 4 articles, 95,63 $, TPS & TVQ incluses.
- Paiementinscrit à la commande
- Payé
- Inscrit à la commande
- Versé selon les conditions de votre fournisseur
Total 95,63 $ : sous-total 85,00, plus TPS 3,55, TVQ 7,08. Thé des étoiles : produit d’épicerie de base · ni TPS ni TVQ.
Payé · inscrit · versé selon les conditions de votre fournisseurThé des étoiles : produit d’épicerie de base · ni TPS ni TVQ95,63 $
1 commande · 4 articles · stock à jour · 2 courriels · 95,63 $ inscrits
Dans l’administration de votre boutique, là où votre équipe modifie déjà le site. Enregistrer un produit actualise la vitrine en arrière-plan (voir Performance dès la conception).
Aucune commande n’est créée, rien n’est facturé. Les étapes sont celles d’une vente sur notre nouveau système ; temps dessinés ; taxes calculées sur votre panier.
Comment c’est lu
- Là où votre équipe travaille
- Dans l’administration de votre boutique, là où votre équipe modifie déjà le site. Enregistrer un produit actualise la vitrine en arrière-plan (voir Performance dès la conception).
- Illustratif
- Le déroulement et ses temps sont dessinés. Aucune commande n’est créée, aucun courriel n’est envoyé et rien n’est facturé. Le stock de Nocturne et les deux commandes d’exemple de la liste sont inventés, comme ses articles et ses prix.
- Les quatre étapes
- C’est ainsi qu’une vente s’inscrit dans les boutiques WooCommerce de notre nouveau système : la commande créée dans WooCommerce, le stock diminué là où la boutique le suit, la confirmation à la clientèle et l’avis de nouvelle commande à l’équipe envoyés par la boutique, et le paiement inscrit à la commande par le fournisseur de paiement. Un panier qui demande plus que l’étalage n’en contient est refusé à la caisse.
- Réel
- Les montants sont calculés sur le panier, en cents entiers. Les taxes viennent du module de taxes de vente du site, calculées sur les lignes taxables (le Thé des étoiles, produit d’épicerie de base, ne porte ni TPS ni TVQ), chaque taxe arrondie au cent séparément, aux taux vérifiés le 2026-10-02. Votre panier est vidé par la vraie règle : l’ouverture de la caisse marque la révision du panier, et seule une commande complétée pour cette même révision le vide ; un panier changé depuis est gardé. « Remettre le panier » y replace vos lignes.
- Dans notre propre boutique
- La boutique de ce site ajoute deux étapes à elle : un paiement est confirmé par un message signé du fournisseur de paiement et vérifié auprès de ses registres, un message répété n’étant compté qu’une fois ; puis un lien de téléchargement privé est envoyé par courriel dans la langue de l’acheteur, valable sept jours.
La pratique
Une boutique tient parole. À chaque clic.
Une bonne boutique repose sur des règles communes, plutôt que redécidées à chaque projet : un choix avant le panier, un panier qui ne se perd pas, un prix vérifié à la porte, des taxes calculées au cent près, et des données de paiement confiées au fournisseur de paiement. Nous bâtissons des boutiques sur WordPress et WooCommerce pour les équipes qui gèrent leur propre catalogue, et sur Stripe pour les catalogues plus petits, comme le nôtre. Notre nouveau système part de ces règles pour chacune ; le style, les produits et la voix sont les vôtres.
Ce que montre cette page, c’est notre nouveau système, notre façon de bâtir aujourd’hui. Les sites livrés avant lui ne l’incluent pas forcément.
Une boutique en vue ?
Dites-nous ce que vous vendez. Nous vous montrerons les premières règles que nous appliquerions à votre boutique.