Proceso de Compra

El carrito de compra: carrito.astro

El carrito de compra está estructurado en tres partes bien diferenciadas:

carrito.astro

1.Estructura HTML (Layout)

  1. Contiene un aviso visual condicional (id="cesta-vacia") que se muestra si no hay artículos.
  2. Cuenta con un contenedor dinámico (id="contenedor-cesta") donde se insertarán los productos mediante JavaScript.
  3. Muestra el resumen del precio total y un botón que activa el API que procesa el pago en Stripe.

2. Lógica de Cliente (JavaScript en <script>)

  1. obtenerCesta() / guardarCesta(): Leen y escriben en el localStorage del navegador para mantener la persistencia de los productos agregados. También ejecutan el evento (cestaUpdated) por si se tiene otro componente (como un contador en el header) que necesite actualizarse.
  2. cambiarCantidad(): Permite incrementar o disminuir la cantidad de un producto. Si la cantidad baja a 0, elimina automáticamente el producto del array y actualiza el almacenamiento.
  3. renderizarCesta() Recorre los elementos guardados en la cesta, calcula los subtotales, pinta dinámicamente el HTML de cada fila con Tailwind CSS y actualiza el precio total en pantalla.
  4. Manejar el proceso de pago con Stripe: Redirige a crear-checkout.ts para procesar el pago.

¿Qué necesitamos hacer para utilizar Stripe para recibir pagos?

Como los datos del carrito viven en el navegador (localStorage), el proceso para integrar Stripe con Astro requiere una pasarela segura que se comunique con el servidor. Pasos:

1. Instalar Stripe en el proyecto

Instalamos el SDK oficial de Node.js para Stripe:


    pnpm add stripe
    pnpm add -D @types/stripe

2. Configuramos las variables de entorno

Para hacerlo, solo debes usar tus claves de prueba (test keys) en el archivo .env (en la raíz del proyecto de Astro). Estas claves suelen empezar por sk_test_... para la secreta y pk_test_... para la pública, las cuales posteriormente, se cambian por las reales.

Stripe proporciona un número de tarjeta de prueba oficial para simular pagos exitosos. La tarjeta clásica para un pago exitoso en modo test es el número 4242 4242 4242 4242 con cualquier fecha de expiración futura y cualquier CVC de 3 dígitos.

Edita el archivo .env (en la raíz del proyecto de Astro) y agrega las claves de Stripe (puedes obtenerlas en tu panel de control de Stripe):


    STRIPE_SECRET_KEY=sk_test_tu_clave_secreta
    PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_tu_clave_publica

Flujo de trabajo

El botón y /api/crear-checkout.ts

El botón del carrito hace un fetch a esta API. La API le pide a Stripe un enlace seguro y el navegador redirige al usuario a la pasarela oficial de Stripe.

Stripe se encarga de crear la página de pago por seguridad, procesa el pago y, si es exitoso, redirige al usuario de vuelta a la web (a una página que llamaremos /exito).

crear-checkout.ts

La página /exito

En la página exito.astro

exito.astro
  1. Revisamos la URL: Detectamos si viene el parámetro ?session_id=... que Stripe envía de forma automática al redirigir.
  2. Validamos con Stripe: Preguntamos directamente a los servidores de Stripe si esa sesión está pagada (payment_status === 'paid'), evitando que cualquiera pueda alterar la página de éxito manualmente.
  3. Guardamos en la Base de Datos: Extraemos el userId que guardamos de forma segura en los metadatos y ejecutamos la función crearFactura de src/lib/facturas.ts para hacer el INSERT INTO en tu Postgres mediante pg.
    facturas.ts
  4. Limpiamos el Carrito en el localStorage: Si todo fue bien, un pequeño script de cliente borra la clave "cesta" del localStorage del navegador para que el usuario no se quede con los productos en la cesta virtual después de haberlos pagado.