Comércio Eletrônico

Com Astro, você pode construir diversas opções de comércio eletrônico, desde links de checkout até próprias páginas de pagamento para operar completamente uma loja usando a API do serviço de pagamento.

Sobreposições de processamento de pagamento

Seção intitulada Sobreposições de processamento de pagamento

Alguns serviços de processamento de pagamento (como Lemon Squeezy e Paddle) adicionam um formulário de pagamento para permitir que seu cliente compre do seu site. Essas sobreposições podem ser hospedadas ou embutidas em uma página do seu site. Elas podem oferecer algumas personalizações básicas ou introduzir a marca do site, e podem ser adicionadas em seu projeto Astro como scripts, botões ou links externos.

Lemon Squeezy

Seção intitulada Lemon Squeezy

Lemon Squeezy é uma plataforma “tudo em um” para assinaturas e pagamentos com suporte a múltiplas moedas, conformidade com taxas globais, integração com PayPal e mais. Ela permite que você crie e gerencie produtos e serviços digitais através do painel da sua conta, e fornece URLs de produto para o processo de checkout.

A biblioteca JavaScript Lemon.js JavaScript básica permite que você venda seus produtos Lemon Squeezy com um link de checkout.

Uso Básico

Seção intitulada Uso Básico

Um exemplo a seguir sobre como adicionar o elemento Lemon Squeezy “Compre agora” na sua página Astro. Clicando nesse link um checkout será aberto para permitir que o visitante complete uma compra individual.

1. Adicione a seguinte tag <script> no head ou body da sua página:

   src/pages/my-product-page.astro

   <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>

2. Crie uma âncora na página ligando-a à sua URL de produto. Inclua a classe lemonsqueezy-button para abrir uma camada de checkout quando clicado.

   src/pages/my-product-page.astro

   <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
     Compre agora
   </a>

Lemon.js

Seção intitulada Lemon.js

Lemon.js também fornece comportamentos adicionais como abrir sobreposições de maneira programática e manipular eventos de sobreposição.

Leia o guia inicial do desenvolvedor Lemon Squeezy para mais informações.

Paddle

Seção intitulada Paddle

Paddle é uma solução de cobrança para produtos e serviços digitais. Ele lida com pagamentos e taxas, e gerencia assinaturas através de uma sobreposição ou um checkout embutido.

Paddle.js é uma biblioteca JavaScript leve que permite que você construa experiências de cobranças ricas e integradas usando Paddle.

Uso Básico

Seção intitulada Uso Básico

Um exemplo a seguir sobre como adicionar um elemento Paddle “Comprar Agora” em uma página Astro. Clicando nesse link um checkout será aberto para permitir que o visitante complete uma compra individual.

Depois de o link de pagamento padrão do domínio (seu próprio website) for aprovado por Paddle, você pode transformar qualquer elemento da sua página em uma sobreposição de checkout usando atributos de dados HTML.

1. Adicione as duas tags <script> seguintes no head ou body da sua página:

   src/pages/my-product-page.astro

   <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
   <script type="text/javascript">
     Paddle.Setup({
       token: '7d279f61a3499fed520f7cd8c08' // substitua com um token do lado do cliente
     });
   </script>

2. Transforme qualquer elemento em sua página em um botão de Checkout Paddle ao adicionar a classe paddle_button:

   src/pages/my-product-page.astro

   <a href="#" class="paddle_button">Compre Agora</a>

3. Adicione um atributo data-items para especificar o priceId e quantity do seu produto Paddle. Você pode também opcionalmente passar can also optionally pass additional atributos de dados HTML para preencher dados, lidar com sucesso no checkout, ou estilizar seu botão e a sobreposição checkout:

   src/pages/my-product-page.astro

   <a
     href="#"
     class="paddle_button"
     data-display-mode="overlay"
     data-theme="light"
     data-locale="en"
     data-success-url="https://example.com/thankyou"
     data-items='[
       {
         "priceId": "pri_01gs59hve0hrz6nyybj56z04eq",
         "quantity": 1
       }
     ]'
   >
     Compre agora
   </a>

Paddle.js

Seção intitulada Paddle.js

Em vez de passar atributos de dados HTML, você pode enviar dados para a sobreposição do checkout usando JavaScript para passar múltiplos atributos e ainda maior personalização. Você também pode criar fluxos de trabalhos melhorados usando um checkout embutido.

Leia mais sobre utilizar Paddle.js para construir um checkout embutido.

Soluções completas de comércio eletrônico

Seção intitulada Soluções completas de comércio eletrônico

Para mais personalização sobre o carrinho de compras e o processo de checkout do seu site, você pode conectar um provedor de serviços financeiros mais completo (como Snipcart) em seu projeto Astro. Essas plataformas de e-commerce também podem integrar-se com outros serviços de terceiros para gerenciamento de contas de usuário, personalização, inventário e análises.

Snipcart

Seção intitulada Snipcart

Snipcart é uma plataforma de carrinho de compras poderosa voltada para desenvolvedores, baseada em HTML/JavaScript.

O Snipcart permite a integração com serviços de terceiros, como provedores de envio, habilitação de webhooks para integração avançada entre seu carrinho e outros sistemas, escolha entre várias plataformas de pagamento (como Stripe, Paypal e Square), personalização de modelos de e-mail, além de fornecer ambientes de teste ao vivo.

Dica

Quer uma solução Snipcart pré-construída? Confira astro-snipcart, um modelo da comunidade Astro totalmente funcional, incluindo um sistema de design opcional, pronto para integração com sua conta Snipcart.

Uso Básico

Seção intitulada Uso Básico

A seguir está um exemplo de configuração de um checkout com Snipcart e a adição de elementos de botão para “Adicionar ao carrinho” e “Finalizar compra” em uma página Astro. Isso permitirá que os visitantes adicionem produtos ao carrinho sem serem direcionados imediatamente para a página de checkout.

Para instruções completas, incluindo a configuração da sua loja Snipcart, veja a documentação de instalação Snipcart.

1. Adicione o script conforme mostrado nas instruções de instalação Snipcart em sua página, após o elemento <body>.

   src/pages/my-product-page.astro

   <body></body>
   <script>
     window.SnipcartSettings = {
       publicApiKey: "SUA_CHAVE_API",
       loadStrategy: "on-user-interaction",
     };
   
     (function()...); // disponível na documentação Snipcart
   </script>

2. Personalize window.SnipcartSettings com qualquer uma das configurações Snipcart disponíveis para controlar o comportamento e a aparência do seu carrinho.

   src/pages/my-product-page.astro

   <script>
     window.SnipcartSettings = {
       publicApiKey: "SUA_CHAVE_API",
       loadStrategy: "manual",
       version: "3.7.1",
       addProductBehavior: "none",
       modalStyle: "side",
     };
   
     (function()...); // disponível na documentação Snipcart
   </script>

3. Adicione class="snipcart-add-item" a qualquer elemento HTML, como um <button>, para adicionar um item ao carrinho ao clicar nele. Inclua também outros elementos de dados para atributos de produto comuns do Snipcart, como preço e descrição, e quaisquer campos opcionais.

   src/pages/my-product-page.astro

   <button
     class="snipcart-add-item"
     data-item-id="astro-print"
     data-item-price="39.99"
     data-item-description="Uma impressão emoldurada do logotipo Astro."
     data-item-image="/assets/images/astro-print.jpg"
     data-item-name="Astro Print"
     data-item-custom1-name="Cor da moldura"
     data-item-custom1-options="Marrom|Prata[+10.00]|Ouro[+20.00]"
     data-item-custom2-name="Instruções de entrega"
     data-item-custom2-type="textarea"
   >
     Adicionar ao carrinho
   </button>

4. Adicione um botão de checkout Snipcart com a classe snipcart-checkout para abrir o carrinho e permitir que os clientes concluam a compra em um modal de checkout.

   src/pages/my-product-page.astro

   <button class="snipcart-checkout">Clique aqui para finalizar a compra</button>

SDK JavaScript Snipcart

Seção intitulada SDK JavaScript Snipcart

O SDK JavaScript Snipcart permite configurar, personalizar e gerenciar seu carrinho Snipcart de forma programática.

Isso permite realizar ações como:

• Obter informações relevantes sobre a sessão Snipcart atual e aplicar determinadas operações ao carrinho.
• Escutar eventos e acionar callbacks dinamicamente.
• Escutar mudanças de estado e receber um instantâneo completo do estado do carrinho.

Consulte a documentação Snipcart para mais informações sobre todas as opções de integração com Snipcart em seu Projeto Astro.

astro-snipcart

Seção intitulada astro-snipcart

Existem dois pacotes astro-snipcart da comunidade que podem simplificar o uso de Snipcart.

• Modelo Astro @lloydjatkinson/astro-snipcart: Este modelo Astro inclui um sistema de design opcional para uma solução completa de e-commerce. Saiba mais em seu próprio e amplo site de documentação, incluindo a motivação por trás da criação de astro-snipcart, como uma forma conveniente e nativa de Astro interagir com a API Snipcart.

• Integração @Adammatthiesen/astro-snipcart: Esta integração foi fortemente inspirada no tema astro-snipcart e fornece componentes Astro (ou Vue) que podem ser adicionados ao seu projeto Astro para criar produtos, controlar o carrinho e muito mais. Veja o tutorial completo para mais informações.

Recursos da Comunidade

Seção intitulada Recursos da Comunidade

• Experiência prática: Loja eCommerce com Astro?
• Coletando Pagamentos com Stripe usando Astro