Skip to content

STRIPE_SETUP.md

Latest commit

 

History

History
192 lines (146 loc) · 5.62 KB

STRIPE_SETUP.md

File metadata and controls

192 lines (146 loc) · 5.62 KB

Configuración de Stripe Checkout

Esta guía te ayudará a configurar Stripe Checkout en tu proyecto Astro para vender productos físicos.

1. Configuración de Stripe

1.1 Crear cuenta de Stripe

  1. Ve a stripe.com y crea una cuenta
  2. Completa la verificación de tu cuenta (información personal y bancaria)
  3. Activa tu cuenta para recibir pagos

1.2 Obtener las claves de API

Claves de prueba (Development)

  1. Ve al Dashboard de Stripe
  2. Asegúrate de estar en modo "Test" (toggle en la esquina superior derecha)
  3. Ve a Developers > API keys
  4. Copia las siguientes claves:
    • Publishable key (empieza con pk_test_)
    • Secret key (empieza con sk_test_)

Claves de producción (Production)

  1. Cambia a modo "Live" en el dashboard
  2. Ve a Developers > API keys
  3. Copia las claves de producción:
    • Publishable key (empieza con pk_live_)
    • Secret key (empieza con sk_live_)

2. Configuración del proyecto

2.1 Variables de entorno

Copia el archivo env.example a .env y configura las variables:

# Stripe Configuration
STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key_here
STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key_here

# Site Configuration
SITE_URL=https://grumlingames.com

⚠️ IMPORTANTE: Si no configuras las claves de Stripe, el sistema mostrará un error "Payment service is not configured" cuando intentes hacer una compra.

2.2 Verificar configuración

Puedes verificar que tu configuración sea correcta ejecutando:

npm run check-stripe

Este comando te mostrará qué variables están configuradas y cuáles faltan.

2.3 Configuración para producción

Para producción, usa las claves de producción y actualiza la URL:

STRIPE_SECRET_KEY=sk_live_your_production_secret_key
STRIPE_PUBLISHABLE_KEY=pk_live_your_production_publishable_key
SITE_URL=https://grumlingames.com

3. Configuración de webhooks (Opcional)

3.1 Crear webhook

  1. Ve a Developers > Webhooks en el dashboard de Stripe
  2. Haz clic en Add endpoint
  3. URL del endpoint: https://tu-dominio.com/api/webhook
  4. Eventos a escuchar:
    • checkout.session.completed
    • payment_intent.succeeded
    • payment_intent.payment_failed

3.2 Obtener webhook secret

  1. Después de crear el webhook, ve a Signing secret
  2. Copia el secret (empieza con whsec_)
  3. Añádelo a tu .env: 
    STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

4. Configuración de productos

4.1 Editar productos

Los productos se configuran en src/lib/products.ts. Cada producto debe tener:

{
  id: 'product-id',
  name: 'Nombre del producto',
  description: 'Descripción del producto',
  price: 2999, // Precio en centavos (29.99 USD)
  currency: 'USD',
  image: '/path/to/image.webp',
  category: 'physical', // Solo productos físicos
  available: true // false para productos no disponibles
}

4.2 Precios en Stripe (Opcional)

Para usar precios dinámicos de Stripe:

  1. Crea productos en el dashboard de Stripe
  2. Copia el Price ID
  3. Añádelo al producto: stripePriceId: 'price_1234567890'

5. Deploy

5.1 Vercel

  1. Conecta tu repositorio a Vercel
  2. Añade las variables de entorno en Settings > Environment Variables
  3. Deploy automático

5.2 Netlify

  1. Conecta tu repositorio a Netlify
  2. Añade las variables de entorno en Site settings > Environment variables
  3. Configura el build command: npm run build

5.3 Variables de entorno en producción

Asegúrate de configurar estas variables en tu plataforma de hosting:

STRIPE_SECRET_KEY=sk_live_...
STRIPE_PUBLISHABLE_KEY=pk_live_...
SITE_URL=https://grumlingames.com

6. Testing

6.1 Tarjetas de prueba

Usa estas tarjetas para probar los pagos:

  • Pago exitoso: 4242 4242 4242 4242
  • Pago fallido: 4000 0000 0000 0002
  • Requiere autenticación: 4000 0025 0000 3155

6.2 Flujo de prueba

  1. Ve a /shop en tu sitio
  2. Haz clic en "Comprar" en cualquier producto
  3. Usa una tarjeta de prueba
  4. Completa el pago
  5. Verifica que llegues a /thank-you

7. Monitoreo

7.1 Dashboard de Stripe

  • Ve a Payments para ver todos los pagos
  • Ve a Customers para ver información de clientes
  • Ve a Analytics para métricas de ventas

7.2 Logs

Los errores se registran en la consola del servidor. Revisa los logs de tu hosting para debugging.

8. Seguridad

8.1 Buenas prácticas

  • ✅ Nunca expongas la clave secreta en el frontend
  • ✅ Valida todos los datos de entrada
  • ✅ Usa HTTPS en producción
  • ✅ Mantén las dependencias actualizadas
  • ❌ No hardcodees las claves en el código
  • ❌ No uses las claves de producción en desarrollo

8.2 Validaciones implementadas

  • Validación de ID de producto
  • Verificación de disponibilidad
  • Sanitización de datos de entrada
  • Manejo de errores robusto

9. Personalización

9.1 Estilos

Los estilos del botón de compra se pueden personalizar en src/components/ui/BuyButton.astro

9.2 Mensajes

Los mensajes de éxito/error se pueden personalizar en:

  • src/pages/thank-you.astro
  • src/pages/cancelled.astro

9.3 Productos

Añade nuevos productos editando src/lib/products.ts

10. Soporte

Si tienes problemas:

  1. Revisa los logs del servidor
  2. Verifica las variables de entorno
  3. Confirma que las claves de Stripe sean correctas
  4. Contacta con soporte de Stripe si es necesario

Nota: Esta implementación es para venta directa simple. Para funcionalidades avanzadas como carritos, suscripciones o descuentos, considera usar Stripe Elements o implementar lógica adicional.