Saltar al contenido principal

​
Descripción General

La plantilla mínima de Astro proporciona un punto de partida listo para usar para integrar Dodo Payments con tu aplicación Astro. Esta plantilla incluye sesiones de pago, manejo de webhooks, portal de clientes y componentes de UI modernos para ayudarte a comenzar a aceptar pagos rápidamente.
Esta plantilla utiliza Astro 5 con TypeScript, Tailwind CSS 4 y el @dodopayments/astro adaptador.

​
Características

  • Configuración Rápida - Comienza en menos de 5 minutos
  • Integración de Pagos - Flujo de pago preconfigurado usando @dodopayments/astro
  • UI Moderna - Página de precios limpia y con tema oscuro usando Tailwind CSS
  • Manejador de Webhooks - Endpoint de webhook listo para usar para eventos de pago
  • Portal de Clientes - Gestión de suscripciones con un solo clic
  • TypeScript - Totalmente tipado con tipos mínimos y enfocados
  • Checkout Pre-llenado - Demuestra cómo pasar datos del cliente para mejorar la experiencia de usuario

​
Requisitos Previos

Antes de comenzar, asegúrate de tener:
  • Versión LTS de Node.js (requerido para Astro 5)
  • Cuenta de Dodo Payments (para acceder a las claves de API y Webhook desde el panel de control)

​
Inicio Rápido

1

Clona el Repositorio

git clone https://github.com/dodopayments/dodo-astro-minimal-boilerplate.git
cd dodo-astro-minimal-boilerplate
2

Instala Dependencias

npm install
3

Obtén Credenciales de API

Regístrate en Dodo Payments y obtén tus credenciales desde el panel de control:
¡Asegúrate de estar en Modo de Prueba mientras desarrollas!
4

Configura Variables de Entorno

Crea un archivo .env en el directorio raíz:
cp .env.example .env
Actualiza los valores con tus credenciales de Dodo Payments:
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
DODO_PAYMENTS_RETURN_URL=http://localhost:4321/
DODO_PAYMENTS_ENVIRONMENT=test_mode
Nunca cometas tu archivo .env en el control de versiones. Ya está incluido en .gitignore.
5

Agrega Tus Productos

Actualiza src/lib/products.ts con tus IDs de producto reales de Dodo Payments:
export const products: Product[] = [
  {
    product_id: "pdt_001", // Replace with your product ID
    name: "Basic Plan",
    description: "Get access to basic features and support",
    price: 9999, // in cents
    features: [
      "Access to basic features",
      "Email support",
      "1 Team member",
      "Basic analytics",
    ],
  },
  // ... add more products
];
6

Ejecuta el Servidor de Desarrollo

npm run dev
¡Abre http://localhost:4321 para ver tu página de precios!

​
Estructura del Proyecto

src/
├── components/
│   ├── Footer.astro           # Reusable footer
│   ├── Header.astro           # Navigation header
│   └── ProductCard.astro      # Product pricing card
├── layouts/
│   └── Layout.astro           # Root layout
├── lib/
│   └── products.ts            # Product definitions
├── pages/
│   ├── index.astro            # Pricing page (home)
│   └── api/
│       ├── checkout.ts        # Checkout session handler
│       ├── customer-portal.ts # Customer portal redirect
│       └── webhook.ts         # Webhook event handler
└── styles/
    └── global.css             # Global styles with Tailwind

​
Personalización

​
Actualiza la Información del Producto

Edita src/lib/products.ts para modificar:
  • IDs de producto (desde tu panel de Dodo)
  • Precios
  • Características
  • Descripciones

​
Pre-llenar Datos del Cliente

En src/components/ProductCard.astro, reemplaza los valores codificados con los datos reales de tu usuario: 
customer: {
  name: "John Doe",
  email: "[email protected]",
},

​
Actualiza el Portal de Clientes

En src/components/Header.astro, reemplaza el ID de cliente codificado con el ID de cliente real de tu sistema de autenticación o base de datos: 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
Puedes completar una compra de prueba para obtener el ID de cliente para pruebas.

​
Eventos de Webhook

La plantilla demuestra cómo manejar eventos de webhook en src/pages/api/webhook.ts:
  • onSubscriptionActive - Se activa cuando una suscripción se vuelve activa
  • onSubscriptionCancelled - Se activa cuando una suscripción es cancelada
Agrega tu lógica de negocio dentro de estos manejadores: 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
Agrega más eventos de webhook según sea necesario. Para el desarrollo local, puedes usar herramientas como ngrok para crear un túnel seguro a tu servidor local y usarlo como tu URL de webhook.

​
Despliegue

Esta plantilla utiliza salida estática con renderizado bajo demanda para rutas de API. Necesitarás instalar un adaptador para tu plataforma de despliegue:
PlataformaGuía
VercelDesplegar en Vercel
NetlifyDesplegar en Netlify
CloudflareDesplegar en Cloudflare
Consulta las guías de despliegue de Astro para todas las plataformas.

​
Actualiza la URL de Webhook

Después de desplegar, actualiza tu URL de webhook en el Panel de Dodo Payments: 
https://your-domain.com/api/webhook
También recuerda actualizar la variable de entorno DODO_PAYMENTS_WEBHOOK_KEY en tu entorno de producción para que coincida con la clave de firma de webhook para tu dominio desplegado.

​
Solución de Problemas

Elimina node_modules y reinstala las dependencias:
rm -rf node_modules package-lock.json
npm install
Causas comunes:
  • ID de producto inválido - verifica que exista en tu panel de Dodo
  • Clave de API incorrecta o configuración de entorno en .env
  • Revisa la consola del navegador y la terminal en busca de errores
Para pruebas locales, usa ngrok para exponer tu servidor:
ngrok http 4321
Actualiza la URL de webhook en tu panel de Dodo a la URL de ngrok. Recuerda actualizar tu archivo .env con la clave de verificación de webhook correcta.
Reemplaza el CUSTOMER_ID codificado en src/components/Header.astro con un ID de cliente real de tu panel de Dodo.O integra tu sistema de autenticación y base de datos para obtener el ID de cliente dinámicamente.
Esta plantilla utiliza salida estática con rutas de API bajo demanda. Necesitas instalar un adaptador para el despliegue:Consulta las guías de despliegue de Astro para más detalles.

​
Aprende Más

​
Soporte

¿Necesitas ayuda con la plantilla?