Comercio electrónico

Con Astro, puedes construir diversas opciones de comercio electrónico, desde enlaces de checkout y páginas de pago alojadas hasta la creación de una tienda completa utilizando la API de un servicio de pago.

Capas superpuestas de procesamiento de pagos

Algunos servicios de procesamiento de pagos (p. ej. Lemon Squeezy, Paddle) añaden un formulario de pago para permitir que tu cliente compre desde tu sitio. Estos pueden ser overlays alojados o incrustados en una página de tu sitio. Estos pueden ofrecer cierta personalización básica o branding de tu sitio, y se pueden añadir a tu proyecto de Astro como scripts, botones o enlaces externos.

Lemon Squeezy

Lemon Squeezy es una plataforma todo en uno para pagos y suscripciones con soporte multidivisa, cumplimiento tributario global, integración con PayPal y más. Te permite crear y gestionar productos y servicios digitales a través del panel de control de tu cuenta y proporciona URLs de productos para el proceso de pago (checkout).

La biblioteca básica de JavaScript Lemon.js te permite vender tus productos de Lemon Squeezy con un enlace de checkout.

Uso básico

El siguiente es un ejemplo de cómo añadir un elemento “Buy now” de Lemon Squeezy a una página de Astro. Al hacer clic en este enlace se abrirá el checkout y permitirá al visitante completar una única compra.

1. Añade la siguiente etiqueta <script> al head o al body de tu página:

   src/pages/my-product-page.astro

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

2. Crea una etiqueta de enlace en la página que apunte a la URL de tu producto. Incluye la clase lemonsqueezy-button para abrir un overlay de checkout al hacer clic.

   src/pages/my-product-page.astro

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

Lemon.js

Lemon.js también proporciona comportamientos adicionales como abrir overlays mediante programación y gestionar eventos de overlays.

Lee la guía de inicio para desarrolladores de Lemon Squeezy para obtener más información.

Paddle

Paddle es una solución de facturación para productos y servicios digitales. Se encarga de los pagos, impuestos y la gestión de suscripciones a través de un overlay o un checkout en línea.

Paddle.js es una biblioteca de JavaScript ligera que te permite crear experiencias de facturación de suscripción ricas e integradas usando Paddle.

Uso básico

El siguiente es un ejemplo de cómo añadir un elemento “Buy Now” de Paddle a una página de Astro. Al hacer clic en este enlace se abrirá el checkout y permitirá al visitante completar una única compra.

Una vez que tu dominio de enlace de pago por defecto (tu propio sitio web) sea aprobado por Paddle, puedes convertir cualquier elemento de tu página en un activador para un overlay de checkout utilizando atributos de datos HTML.

1. Añade las siguientes dos etiquetas <script> al head o al body de tu 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' // replace with a client-side token
     });
   </script>

2. Convierte cualquier elemento de tu página en un botón de Checkout de Paddle añadiendo la clase paddle_button:

   src/pages/my-product-page.astro

   <a href="#" class="paddle_button">Buy Now</a>

3. Añade un atributo data-items para especificar el priceId y la quantity de tu producto en Paddle. También puedes pasar opcionalmente atributos de datos HTML compatibles adicionales para autocompletar datos, gestionar el éxito del checkout o dar estilo a tu botón y overlay de 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
       }
     ]'
   >
     Buy now
   </a>

Paddle.js

En lugar de pasar atributos de datos HTML, puedes enviar datos al overlay de checkout utilizando JavaScript para pasar múltiples atributos y obtener una personalización aún mayor. También puedes crear flujos de trabajo de actualización utilizando un checkout en línea.

Lee más sobre el uso de Paddle.js para crear un checkout en línea.

Soluciones de comercio electrónico con todas las funciones

Para una mayor personalización del carrito de compras y del proceso de pago de tu sitio, puedes conectar un proveedor de servicios financieros con más funciones (p. ej. Snipcart) a tu proyecto de Astro. Estas plataformas de comercio electrónico también pueden integrarse con otros servicios de terceros para la gestión de cuentas de usuario, personalización, inventario y analíticas.

Snipcart

Snipcart es una plataforma de carrito de compras potente en HTML/JavaScript enfocada en desarrolladores.

Snipcart también te permite integrarte con servicios de terceros como proveedores de envíos, habilitar webhooks para una integración avanzada de comercio electrónico entre tu carrito de compras y otros sistemas, elegir entre varias pasarelas de pago (p. ej. Stripe, Paypal y Square), personalizar plantillas de correo electrónico e incluso proporciona entornos de pruebas en vivo.

Consejo

¿Prefieres una solución de Snipcart preconstruida? Echa un vistazo a astro-snipcart, una plantilla de la comunidad de Astro completamente funcional que incluye un sistema de diseño opcional, lista para que la integres con tu cuenta existente de Snipcart.

Uso básico

El siguiente es un ejemplo de configuración de un checkout de Snipcart y de adición de botones para “Add to cart” y “Check out now” en una página de Astro. Esto permitirá a tus visitantes añadir productos a un carrito sin ser redirigidos inmediatamente a una página de checkout.

Para obtener instrucciones completas, incluida la configuración de tu tienda Snipcart, consulta la documentación de instalación de Snipcart.

1. Añade el script como se muestra en las instrucciones de instalación de Snipcart en tu página después del elemento <body>.

   src/pages/my-product-page.astro

   <body></body>
   <script>
     window.SnipcartSettings = {
       publicApiKey: "YOUR_API_KEY",
       loadStrategy: "on-user-interaction",
     };
   
     (function()...); // available from the Snipcart documentation
   </script>

2. Personaliza window.SnipcartSettings con cualquiera de los ajustes disponibles de Snipcart para controlar el comportamiento y la apariencia de tu carrito.

   src/pages/my-product-page.astro

   <script>
     window.SnipcartSettings = {
       publicApiKey: "YOUR_API_KEY",
       loadStrategy: "manual",
       version: "3.7.1",
       addProductBehavior: "none",
       modalStyle: "side",
     };
   
     (function()...); // available from the Snipcart documentation
   </script>

3. Añade class="snipcart-add-item" a cualquier elemento HTML, como un <button>, para añadir un elemento al carrito al hacer clic en él. Incluye también cualquier otro elemento de datos para atributos comunes de productos de Snipcart como precio y descripción, y cualquier campo opcional.

   src/pages/my-product-page.astro

   <button
     class="snipcart-add-item"
     data-item-id="astro-print"
     data-item-price="39.99"
     data-item-description="A framed print of the Astro logo."
     data-item-image="/assets/images/astro-print.jpg"
     data-item-name="Astro Print"
     data-item-custom1-name="Frame color"
     data-item-custom1-options="Brown|Silver[+10.00]|Gold[+20.00]"
     data-item-custom2-name="Delivery instructions"
     data-item-custom2-type="textarea"
   >
     Add to cart
   </button>

4. Añade un botón de checkout de Snipcart con la clase snipcart-checkout para abrir el carrito y permitir a los invitados completar su compra con un modal de checkout.

   src/pages/my-product-page.astro

   <button class="snipcart-checkout">Click here to checkout</button>

SDK de JavaScript de Snipcart

El SDK de JavaScript de Snipcart te permite configurar, personalizar y gestionar tu carrito de Snipcart mediante programación.

Esto te permite realizar acciones tales como:

• Recuperar información relevante sobre la sesión actual de Snipcart y aplicar ciertas operaciones al carrito.
• Escuchar eventos entrantes y desencadenar callbacks de forma dinámica.
• Escuchar cambios de estado y recibir una instantánea completa del estado del carrito.

Consulta la documentación de Snipcart para obtener más información sobre todas las opciones para integrar Snipcart con tu proyecto de Astro.

astro-snipcart

Existen dos paquetes de la comunidad de astro-snipcart que pueden simplificar el uso de Snipcart.

• Plantilla de Astro @lloydjatkinson/astro-snipcart: Esta plantilla de Astro incluye un sistema de diseño opcional para una solución de comercio electrónico completa lista para usar. Obtén más información en su propio sitio web de documentación detallada, incluyendo la motivación detrás de la creación de astro-snipcart para proporcionar una forma cómoda y nativa de Astro para interactuar con la API de Snipcart.

• Integración @Adammatthiesen/astro-snipcart: Esta integración se inspiró fuertemente en el tema astro-snipcart y proporciona componentes de Astro (o componentes de Vue) que puedes añadir a tu proyecto de Astro existente para crear productos, controlar el carrito y más. Consulta el tutorial completo para más información.

Recursos de la comunidad

• Experiencia práctica: ¿Una tienda de comercio electrónico con Astro?
• Recaudación de pagos con Stripe usando Astro