Comercio electrónico

Con Astro, puedes construir varias opciones de comercio electrónico, desde enlaces de pago hasta páginas de pago alojadas para construir una tienda completa utilizando una API de servicios de pago.

Superposiciones de procesamiento de pagos

Sección titulada Superposiciones de procesamiento de pagos

Algunos servicios de procesamiento de pagos (por ejemplo, Lemon Squeezy, Paddle) agregan un formulario de pago para permitir que tu cliente compre en tu sitio. Estos pueden ser superposiciones alojadas o incrustadas en una página de tu sitio. Estos pueden ofrecer alguna personalización básica o branding del sitio, y pueden agregarse a tu proyecto de Astro como scripts, botones o enlaces externos.

Lemon Squeezy

Sección titulada Lemon Squeezy

Lemon Squeezy es una plataforma todo en uno para pagos y suscripciones con soporte multi-moneda, cumplimiento fiscal global, integración de PayPal y más. Te permite crear y gestionar productos y servicios digitales a través de su panel de control de cuenta y proporciona URL de productos para el proceso de pago.

La sencilla biblioteca para JavaScript de Lemon.js te permite vender tus productos de Lemon Squeezy con un enlace de pago.

Uso Básico

Sección titulada Uso Básico

El siguiente es un ejemplo de cómo agregar un elemento “Comprar ahora” de Lemon Squeezy a una página de Astro. Al hacer clic en este enlace se abrirá un proceso de pago y permitirá al visitante completar una compra única.

1. Agrega la siguiente etiqueta <script> al head o 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 anclaje en la página que enlace a la URL de tu producto. Incluye la clase lemonsqueezy-button para abrir una superposición de pago al hacer clic.

   src/pages/my-product-page.astro

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

Lemon.js

Sección titulada Lemon.js

Lemon.js también proporciona comportamientos adicionales como abrir superposiciones programáticamente y manejar eventos de superposición.

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

Paddle

Sección titulada Paddle

Paddle es una solución de facturación para productos y servicios digitales. Maneja pagos, impuestos y gestión de suscripciones a través de una superposición o un proceso de pago incrustado.

Paddle.js es una biblioteca de JavaScript ligera que te permite construir experiencias de facturación de suscripción integradas utilizando Paddle.

Uso Básico

Sección titulada Uso Básico

El siguiente es un ejemplo de cómo agregar un elemento “Comprar ahora” de Paddle a una página de Astro. Al hacer clic en este enlace se abrirá un proceso de pago y permitirá al visitante completar una compra única.

Después de que tu dominio de enlace de pago predeterminado (tu propio sitio web) sea aprobado por Paddle, puedes convertir cualquier elemento de tu página en un disparador para una superposición de pago utilizando atributos de datos HTML.

1. Agrega las siguientes dos etiquetas <script> al head o 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' // reemplaza con un token del lado del cliente
     });
   </script>

2. Convierte cualquier elemento de tu página en un botón de pago de Paddle agregando la clase paddle_button:

   src/pages/my-product-page.astro

   <a href='#' class='paddle_button'>Comprar ahora</a>

3. Agrega 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 adicionales para prellenar datos, manejar el éxito del pago, o dar estilo a tu botón y superposición de pago:

   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
       }
     ]'
     >
     Comprar ahora
   </a>

Paddle.js

Sección titulada Paddle.js

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

Lee más sobre cómo usar Paddle.js para construir un pago en línea.

Soluciones de comercio electrónico completas

Sección titulada Soluciones de comercio electrónico completas

Para obtener más personalización sobre el carrito de compras de tu sitio y el proceso de pago, puedes conectar un proveedor de servicios financieros más completo (por ejemplo, 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 análisis.

Snipcart

Sección titulada Snipcart

Snipcart es una poderosa, plataforma de carrito de compras HTML/JavaScript para desarrolladores.

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

Consejo

¿Quieres una solución preconstruida de Snipcart en su lugar? 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 de Snipcart.

Uso Básico

Sección titulada Uso Básico

El siguiente es un ejemplo de cómo configurar un pago de Snipcart y agregar elementos de botón para “Agregar al carrito” y “Pagar ahora” a una página de Astro. Esto permitirá a tus visitantes agregar productos a un carrito sin ser enviados inmediatamente a una página de pago.

Para leer las instrucciones completas, incluyendo la configuración de tu tienda Snipcart, por favor ve la documentación de instalación de Snipcart.

1. Agrega 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: "TU_CLAVE_API",
       loadStrategy: "on-user-interaction",
     };
   
     (function()...); // disponible en la documentación de Snipcart
   </script>

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

   src/pages/my-product-page.astro

   <script>
     window.SnipcartSettings = {
       publicApiKey: "TU_CLAVE_API",
       loadStrategy: "manual",
       version: "3.7.1",
       addProductBehavior: "none",
       modalStyle: "side",
   
     };
   
     (function()...); // disponible en la documentación de Snipcart
   </script>

3. Agrega class="snipcart-add-item" a cualquier elemento HTML, como un <button>, para agregar un elemento al carrito al hacer clic en él. También incluye cualquier otro elemento de datos para atributos de producto comunes 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="Una impresión enmarcada del logotipo de Astro."
     data-item-image="/assets/images/astro-print.jpg"
     data-item-name="Impresión de Astro"
     data-item-custom1-name="Marco de color"
     data-item-custom1-options="Café|Plata[+10.00]|Oro[+20.00]"
     data-item-custom2-name="Instrucciones de entrega"
     data-item-custom2-type="textarea">
   
     Agregar al carrito
   </button>

4. Agregar un botón de pago de Snipcart con la clase snipcart-checkout para abrir el carrito y permitir a los visitantes completar su compra con un modal de pago.

   src/pages/my-product-page.astro

   <button class="snipcart-checkout">Haz clic aquí para pagar</button>

Snipcart JavaScript SDK

Sección titulada Snipcart JavaScript SDK

El SDK de JavaScript de Snipcart te permite configurar, personalizar y gestionar tu carrito de Snipcart programáticamente.

Esto te permite realizar acciones como:

• Recuperar información relevante sobre la sesión actual de Snipcart y aplicar ciertas operaciones al carrito.
• Escuchar eventos entrantes y activar devoluciones de llamada dinámicamente.
• 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

Sección titulada astro-snipcart

Hay dos paquetes de la comunidad 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. Aprende más en su propio sitio de documentación extensa, incluyendo la motivación detrás de la construcción de astro-snipcart como una forma conveniente y nativa de Astro para que interactúes con la API de Snipcart.

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

Recursos de la comunidad

Sección titulada Recursos de la comunidad

• Experiencia práctica: ¿Tienda de comercio electrónico con Astro?
• Recogiendo pagos con Stripe usando Astro