Scriptorium · I

Adicione um botão de compra ao seu site Astro

Você não precisa de um pacote de integração, uma diretiva de cliente ou uma ilha. O botão é HTML simples que navega com sua compilação estática, que é a coisa mais moldada por Astro que um widget de pagamento pode ser.

Adicione a tag de script, uma vez

Coloque a tag de script no cabeçalho de seu layout base, src/layouts/Layout.astro na maioria dos projetos. Cada página que usa o layout pode renderizar botões a partir de então.

---
// src/layouts/Layout.astro
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <script src="https://sdk.coinmoebius.com/latest/sdk.global.js"
      crossorigin="anonymous"
      defer></script>
  </head>

Nomeie o produto em seu painel

Abra seu projeto, mude para a aba Produtos e adicione o produto: uma referência que você escolhe, um nome, um preço, uma moeda. A partir daqui, o painel escreve ambos os blocos nesta página com seu ID de projeto real. O que você vê abaixo é a forma.

Coloque o botão onde você vender

Cole o botão no corpo de qualquer página ou componente .astro. Astro o transmite para o HTML construído intacto.

<coin-moebius-buy
  project-id="proj_YOUR_ID_HERE"
  product-id="t-shirt-medium"
  label="Buy a t-shirt">
</coin-moebius-buy>

Publicar. O botão renderiza com a página e o seletor de pagamento carrega a primeira vez que um comprador o clica. Cada produto adicional é o mesmo bloco com uma referência e rótulo diferentes.

Tenha cuidado com estes

Nenhum JavaScript adicionado às suas ilhas

Este não é um componente de framework, portanto não precisa de client:load e nunca aparece em suas estatísticas de pacote. A tag de script faz seu trabalho no navegador, após seu HTML.

MDX e coleções de conteúdo

Páginas renderizadas através do layout já têm o script. Para vender de dentro do conteúdo MDX, cole o mesmo botão HTML diretamente no arquivo.

Estático, SSR, híbrido: tudo bem

O botão não se importa com a maneira como o HTML foi produzido. Se a página chegar a um navegador, ela vende.

Pronto quando sua página estiver

Grátis cobre 150 transações por mês. Sem cartão para se inscrever.