Vender beats online com um carrinho que funciona
Durante anos, cada beat da minha loja tinha um botão: comprar. Abria o seletor de licenças, escolhias uma, e o BeatStars levava-te ao seu pagamento com esse único beat carregado. Funcionava, e estava a perder vendas em silêncio. Se um produtor queria dois beats, tinha de pagar duas vezes, porque cada botão iniciava uma compra nova. Ninguém faz isso. Compra um, diz que volta depois para o outro, e não volta.
Por isso, a 22 de outubro pus um carrinho a sério no site. Não um plugin: a loja é um site estático construído com Astro, sem base de dados e sem painel de administração próprio. É a maior mudança que esta loja teve desde que a lancei, e funciona assim.
O problema de um botão de compra
Uma loja de beats não é uma loja com carrinho de supermercado. É um catálogo onde cada artigo tem seis níveis de licença, e o preço muda com o nível, não com a quantidade. É por isso que a maioria dos produtores nunca se preocupou com um carrinho: a plataforma dá-te um link por beat e mandas o comprador para lá.
O custo é invisível mas real. Cada pagamento extra é mais uma oportunidade para o comprador mudar de ideias. Passa duas vezes por um formulário de pagamento, introduz os mesmos dados duas vezes e recebe dois emails separados por dois ficheiros. E se quisesse comparar uma licença básica num beat com uma licença de stems noutro, as duas compras eram completamente independentes.
Com o que o BeatStars te deixa trabalhar
O BeatStars não publica uma API de carrinho, mas a interface da loja usa uma, e é acessível. Três chamadas chegam:
- Criar um carrinho com um uuid novo. Cada pagamento recebe um de fresco, para que um comprador nunca herde artigos de uma visita anterior.
- Adicionar uma linha com o id da faixa e o id do contrato da licença escolhida. É o contrato que fixa o nível e o preço, não a faixa sozinha.
- Pedir um link de partilha. Quando o comprador o abre, esse URL copia o carrinho para o navegador dele e deixa-o no pagamento do BeatStars com tudo carregado.
A parte importante: o pagamento e a entrega ficam no BeatStars. O site nunca toca num cartão, nunca guarda um comprador e nunca se torna uma loja. Só constrói o carrinho e entrega-o, e é por isso que a coisa toda pode viver numa página estática.
Manter um site estático estático
O carrinho vive no navegador. Guarda duas coisas por linha: que beat e que licença. Nada mais. Nomes, preços e ids de contrato são lidos da configuração do próprio site de cada vez que a página carrega, por isso uma mudança de preço nunca deixa um número desatualizado num carrinho que alguém começou na semana passada.
O contador do cabeçalho, os botões de adicionar e remover e os totais são JavaScript simples. Não há sessão, nem login, nem servidor meu no meio. O único momento em que o site fala com alguém é quando o comprador carrega em pagar e o link de partilha é construído.
Dois pequenos detalhes fizeram diferença nos testes. Uma licença por beat: o carrinho recusa ter o mesmo beat duas vezes, porque é o que a plataforma faz e um comprador que o tenta fica confuso, não servido. E quando alguém sai para o pagamento e volta sem pagar, o carrinho ainda está lá, restaurado de uma cópia guardada mesmo antes de sair. É o mais perto que se chega de recuperar carrinhos abandonados sem um sistema de contas.
Os descontos são a parte que ninguém acerta
As minhas licenças trazem a oferta da loja: compra uma básica e leva duas grátis, ou três standard e leva duas grátis. O BeatStars aplica isso uma vez por carrinho, no pagamento, nas linhas mais baratas. Se o site mostra um total de 65,90 dólares e o pagamento diz 32,95, o comprador não se sente com sorte, sente-se enganado.
Por isso o carrinho reproduz a regra e mostra a mesma aritmética antes de alguém sair: o que é grátis, o que falta para desbloquear a próxima linha grátis e qual será o total. A escada é visível enquanto o carrinho se vai enchendo, em vez de aparecer como surpresa no fim. Também diz a verdade ao comprador, que é a única versão de um desconto que sobrevive ao contacto com uma página de pagamento.
Porque provavelmente não vais construir isto sozinho
Isto parece uma funcionalidade pequena e não é. O site não tem painel de administração, nem CMS, nem plugins: cada página é gerada antecipadamente e carregada como HTML simples. Um carrinho que só existe no navegador tem de manter total, licença e pagamento de acordo sem nenhum servidor para arbitrar.
O lado da loja é pior. O BeatStars não documenta uma API de carrinho, por isso as três chamadas por trás disto foram encontradas na sua própria interface e testadas uma a uma. Cada linha precisa do id da faixa e do id do contrato da licença, porque o preço vive no contrato, não no beat. Uma licença que a loja desativou numa faixa faz falhar o pagamento inteiro, por isso o erro tem de voltar com o nome do beat que o estragou em vez de um ecrã em branco.
Depois há a parte que ninguém vê: reproduzir a escada de descontos antes de o comprador sair, para que o total aqui e o total no pagamento sejam o mesmo número. O BeatStars aplica as linhas grátis uma vez por carrinho, nas mais baratas. Erra isso e o carrinho deixa de ser uma funcionalidade e passa a ser uma reclamação.
É por isso que a maioria dos produtores aluga uma plataforma em vez de construir uma. E é a razão pela qual este site corre num alojamento que não cai: tudo o resto é um ficheiro estático, e a única peça móvel é a plataforma que recebe o dinheiro.
O site por baixo
Nada disto sobreviveria a um WordPress com quinze plugins. A loja é um site estático: 430 páginas construídas antecipadamente, uma folha de estilos e um pouco de JavaScript para o player e o carrinho. Quando um visitante chega, não se pede nada a nenhuma base de dados.
O áudio segue a mesma ideia: HE-AAC a 56 kbps em vez de um MP3 a 320 kbps, com o índice no início do ficheiro para a reprodução poder começar antes de o beat estar descarregado, e um cabeçalho de cache que o mantém na máquina do visitante durante um ano.
O que um alojamento tem de fazer a seguir é pouco, mas tem de o fazer bem: servir ficheiros depressa, respeitar os intervalos de bytes e os cabeçalhos de cache, incluir SSL e HTTP/2. É neste que este site corre. Se queres a mesma base debaixo da tua loja, é a única peça que tens mesmo de alugar.
Se vendes noutra plataforma
Este truque específico é BeatStars, porque é onde estão as minhas licenças e os meus compradores. A lógica viaja: qualquer loja que exponha um endpoint de carrinho pode ser conduzida de um site estático da mesma forma. O que não viaja é o atalho. Um carrinho não é um botão que diz adicionar ao carrinho; é um preço que bate certo, uma licença que bate certo e um pagamento que abre com exatamente o que o comprador escolheu.
Se ainda vendes um beat por pagamento, começa pelo catálogo e pelas licenças, e depois constrói o carrinho. O catálogo completo de beats está aqui, e se queres ouvir o tipo de beat à volta do qual esta loja é construída, começa por este instrumental boom bap.
Perguntas frequentes
Preciso de um programador para pôr um carrinho na minha loja de beats?
Num site estático, sim, algum código. As chamadas são três mutações contra o endpoint de carrinho da loja e o resto é estado do navegador, mas alguém tem de o escrever e testar cada nível de licença contra o total do pagamento.
O carrinho funciona se o comprador mudar de ideias sobre a licença?
Sim. Cada linha leva a sua própria licença e pode ser trocada no próprio carrinho. O carrinho não permite o mesmo beat duas vezes, por isso mudar a licença substitui a linha em vez de acrescentar uma segunda.
Onde acontece o pagamento?
No BeatStars, sempre. O site só constrói o carrinho e abre o pagamento com ele carregado. Cartões, faturas, entrega e o PDF da licença ficam dentro da plataforma.
Porque não vender diretamente no site?
Porque aí o site precisava de um processador de pagamentos, tratamento de impostos, faturas e uma base de dados de clientes. Um catálogo estático com um carrinho que passa a bola à plataforma mantém a parte rápida rápida e deixa a parte do dinheiro a quem já o faz legalmente.
