Vendre des beats en ligne avec un panier qui fonctionne

Pendant des années, chaque beat de ma boutique avait un seul bouton : acheter. Il ouvrait le sélecteur de licence, vous en choisissiez une, et BeatStars vous emmenait sur son checkout avec ce seul beat chargé. Ça fonctionnait, et ça perdait discrètement des ventes. Si un producteur voulait deux beats, il devait payer deux fois, parce que chaque bouton démarrait un nouvel achat. Personne ne fait ça. Il en achète un, dit qu'il reviendra pour l'autre, et ne revient pas.

Donc le 22 octobre, j'ai mis un vrai panier sur le site. Pas un plugin : la boutique est un site statique construit avec Astro, sans base de données et sans panneau d'administration à elle. C'est le plus gros changement que cette boutique a connu depuis son lancement, et voici comment ça marche.

Le problème du bouton d'achat

Une boutique de beats n'est pas un magasin avec un chariot. C'est un catalogue où chaque article a six paliers de licence, et où le prix change avec le palier, pas avec la quantité. C'est pourquoi la plupart des producteurs ne se sont jamais embêtés avec un panier : la plateforme donne un lien par beat et on envoie l'acheteur là.

Le coût est invisible mais réel. Chaque checkout en plus est une occasion de plus pour l'acheteur de changer d'avis. Il passe deux fois par un formulaire de paiement, saisit deux fois les mêmes informations et reçoit deux mails séparés pour deux fichiers. Et s'il voulait comparer une licence basique sur un beat avec une licence stems sur un autre, les deux achats étaient totalement indépendants.

Ce que BeatStars donne pour travailler

BeatStars ne publie pas d'API de panier, mais le front end de la boutique en utilise une, et elle est accessible. Trois appels suffisent :

• Créer un panier avec un nouvel uuid. Chaque checkout en reçoit un neuf, pour qu'un acheteur n'hérite jamais d'articles d'une visite précédente.
• Ajouter une ligne avec l'id de la piste et l'id du contrat de la licence choisie. C'est le contrat qui fixe le palier et le prix, pas la seule piste.
• Demander un lien de partage. Quand l'acheteur l'ouvre, cette URL copie le panier dans son navigateur et le dépose sur le checkout BeatStars avec tout chargé.

Le point important : le paiement et la livraison restent chez BeatStars. Le site ne touche jamais une carte, ne stocke jamais un acheteur et ne devient jamais une boutique. Il construit seulement le panier et le transmet, c'est pourquoi tout ça peut vivre dans une page statique.

Garder un site statique statique

Le panier vit dans le navigateur. Il stocke deux choses par ligne : quel beat et quelle licence. Rien d'autre. Les noms, les prix et les ids de contrat sont lus dans la configuration du site à chaque chargement de page, donc un changement de prix ne laisse jamais un chiffre périmé dans un panier commencé la semaine dernière.

Le compteur de l'en-tête, les boutons ajouter et retirer et les totaux sont du JavaScript simple. Il n'y a pas de session, pas de login et aucun serveur à moi au milieu. Le seul moment où le site parle à quelqu'un, c'est quand l'acheteur appuie sur checkout et que le lien de partage est construit.

Deux petits détails ont fait la différence en test. Une licence par beat : le panier refuse de contenir deux fois le même beat, parce que c'est ce que fait la plateforme et qu'un acheteur qui essaie se retrouve perdu, pas servi. Et quand quelqu'un part vers le checkout puis revient sans payer, le panier est toujours là, restauré depuis une copie sauvegardée juste avant le départ. C'est ce qui ressemble le plus à une relance de panier abandonné qu'on puisse construire sans système de comptes.

Les remises, la partie que personne ne réussit

Mes licences portent l'offre de la boutique : achetez une basique et deux offertes, ou trois standard et deux offertes. BeatStars applique ça une fois par panier, au checkout, sur les lignes les moins chères. Si le site affiche un total de 65,90 $ et que le checkout dit 32,95 $, l'acheteur ne se sent pas chanceux, il se sent piégé.

Donc le panier reproduit la règle et montre la même arithmétique avant que quiconque parte : ce qui est offert, ce qui manque encore pour débloquer la prochaine ligne gratuite, et quel sera le total. L'échelle est visible pendant que le panier se remplit, au lieu d'apparaître comme une surprise à la fin. Et ça dit la vérité à l'acheteur, ce qui est la seule version d'une remise qui survit au contact d'une page de paiement.

Pourquoi vous n'allez probablement pas construire ça vous-même

Ça ressemble à une petite fonctionnalité et ça ne l'est pas. Le site n'a pas de panneau d'administration, pas de CMS et pas de plugins : chaque page est générée à l'avance et mise en ligne en HTML simple. Un panier qui n'existe que dans le navigateur doit garder le total, la licence et le checkout d'accord sans aucun serveur pour arbitrer.

Le côté boutique est pire. BeatStars ne documente pas d'API de panier, donc les trois appels derrière ont été trouvés dans son propre front end et testés un par un. Chaque ligne a besoin de l'id de la piste et de l'id du contrat de la licence, parce que le prix vit dans le contrat, pas dans le beat. Une licence que la boutique a désactivée sur une piste fait échouer tout le checkout, donc l'erreur doit revenir avec le nom du beat fautif au lieu d'un écran vide.

Puis il y a la partie que personne ne voit : reproduire l'échelle de remises avant que l'acheteur parte, pour que le total ici et le total au checkout soient le même chiffre. BeatStars applique ses lignes gratuites une fois par panier, sur les moins chères. Ratez ça et le panier n'est plus une fonctionnalité, c'est une réclamation.

C'est pour ça que la plupart des producteurs louent une plateforme au lieu d'en construire une. Et c'est la raison pour laquelle ce site tourne sur un hébergement qui ne tombe pas : tout le reste est un fichier statique, et la seule pièce mobile est la plateforme qui encaisse.

Le site en dessous

Rien de tout ça ne survivrait à un WordPress avec quinze plugins. La boutique est un site statique : 430 pages construites à l'avance, une feuille de style et un peu de JavaScript pour le lecteur et le panier. Quand un visiteur arrive, aucune base de données n'est sollicitée.

L'audio suit la même idée : du HE-AAC à 56 kbps au lieu d'un MP3 en 320 kbps, avec l'index au début du fichier pour que la lecture démarre avant la fin du téléchargement, et un en-tête de cache qui le garde sur la machine du visiteur pendant un an.

Ce qu'un hébergeur doit faire ensuite est petit, mais il doit bien le faire : servir les fichiers vite, respecter les byte ranges et les en-têtes de cache, inclure SSL et HTTP/2. C'est celui sur lequel ce site tourne. Si vous voulez la même base sous votre boutique, c'est la seule pièce que vous devez vraiment louer.

Voir l'hébergement que j'utilise

Si vous vendez sur une autre plateforme

Cette astuce précise, c'est BeatStars, parce que c'est là que sont mes licences et mes acheteurs. La logique voyage : n'importe quelle boutique qui expose un endpoint de panier peut être pilotée depuis un site statique de la même façon. Ce qui ne voyage pas, c'est le raccourci. Un panier n'est pas un bouton qui dit ajouter au panier ; c'est un prix qui correspond, une licence qui correspond et un checkout qui s'ouvre avec exactement ce que l'acheteur a choisi.

Si vous vendez encore un beat par checkout, commencez par le catalogue et les licences, puis construisez le panier. Le catalogue complet de beats est ici, et si vous voulez entendre le genre de beat autour duquel cette boutique est construite, commencez par cet instrumental boom bap.

Questions fréquentes

Faut-il un développeur pour ajouter un panier à ma boutique de beats ?

Pour un site statique, oui, un peu de code. Les appels sont trois mutations vers l'endpoint de panier de la boutique et le reste est de l'état de navigateur, mais quelqu'un doit l'écrire et tester chaque palier de licence contre le total du checkout.

Le panier fonctionne-t-il si l'acheteur change d'avis sur la licence ?

Oui. Chaque ligne porte sa propre licence, et on peut la changer depuis le panier. Le panier n'accepte pas deux fois le même beat, donc changer une licence remplace la ligne au lieu d'en ajouter une seconde.

Où se fait le paiement ?

Sur BeatStars, toujours. Le site construit seulement le panier et ouvre le checkout avec lui chargé. Cartes, factures, livraison et PDF de licence restent dans la plateforme.

Pourquoi ne pas vendre directement sur le site ?

Parce qu'il faudrait alors un processeur de paiement, la gestion des taxes, des factures et une base de clients. Un catalogue statique avec un panier qui passe la main à la plateforme garde la partie rapide rapide et laisse la partie argent à ceux qui le font déjà légalement.