Comercio electrónico

Añade un carrito y un checkout a tu aplicación, sobre el proveedor de pagos que ya usa.

Sintaxis

$ vela enable ecommerce

Opciones

• --provider <provider> - Opcional. El carrito sigue al proveedor de pagos del proyecto, así que esto solo lo confirma; un proveedor distinto se rechaza.

Ejecuta antes vela enable payments. Se te pide un artículo para una página de demostración en /shop: un price_id de Stripe o una variante de producto de Shopify (gid://shopify/ProductVariant/...). Déjalo vacío para omitir la página.

Qué obtienes

• Un botón de carrito en la barra de navegación, a la izquierda del menú de la cuenta cuando la autenticación está habilitada. Abre el carrito en un panel lateral.
• src/lib/cart.svelte.ts - El carrito, un store de módulo que cualquier componente puede importar. Vive en el navegador: el servidor muestra un carrito vacío, que se llena cuando carga la página.
• src/lib/components/cart/add-to-cart.svelte - Pon <AddToCart> en las páginas que venden.

El carrito de cada proveedor es el código que escribirías para ese proveedor solo. No comparten nada.

Stripe

Stripe no tiene un objeto carrito, así que el carrito es una lista de precios de Stripe guardada en localStorage. <AddToCart> recibe el precio tal como lo cargó la página que lo vende:

<AddToCart price={{ price: 'price_...', name: 'T-shirt', unitAmount: 2500, currency: 'usd' }} />

El checkout es Stripe Checkout. El carrito envía sus precios y cantidades a la acción checkout de /cart, que crea una Checkout Session y redirige a ella. Stripe pone el precio de la sesión, así que nada guardado en el navegador puede cambiar lo que se cobra. La sesión admite códigos promocionales; los métodos de pago, los impuestos y el envío se configuran en tu panel de Stripe. Con la autenticación, un comprador que ha iniciado sesión paga como su cliente de Stripe.

• /cart - El carrito completo y la acción de checkout.
• /checkout/success - Adonde Stripe devuelve al comprador. Muestra el importe pagado y vacía el carrito.

Shopify

Shopify tiene su propio carrito, así que el navegador guarda solo su id y el store tiene el carrito tal como lo devuelve la Storefront API: líneas, costes y checkoutUrl. <AddToCart> recibe una variante de producto y, opcionalmente, propiedades de la línea:

<AddToCart merchandiseId="gid://shopify/ProductVariant/..." />

El checkout es un enlace al checkoutUrl del carrito, el checkout propio de Shopify. No hay rutas de servidor, así que el carrito funciona en un sitio estático.