Adaptador de Nuxt - Dodo Payments Documentation

Checkout API Route

Integra el checkout de Dodo Payments en tu aplicación Nuxt usando una ruta del servidor.

Customer Portal API Route

Permite a los clientes gestionar sus suscripciones y detalles mediante una ruta del servidor de Nuxt.

Webhooks API Route

Recibe y procesa eventos de webhook de Dodo Payments de forma segura en Nuxt.

Descripción general

Esta guía explica cómo integrar Dodo Payments en tu aplicación Nuxt mediante el módulo oficial de Nuxt. Aprenderás a configurar las rutas de API para checkout, el portal de clientes y webhooks, así como a manejar de forma segura las variables de entorno.

Instalación

Install the Nuxt module

Ejecuta el siguiente comando en la raíz de tu proyecto:

npm install @dodopayments/nuxt

Agrega @dodopayments/nuxt a tu arreglo de modules y configúralo:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@dodopayments/nuxt"],
  devtools: { enabled: true },
  compatibilityDate: "2025-02-25",
  runtimeConfig: {
    private: {
      bearerToken: process.env.NUXT_PRIVATE_BEARER_TOKEN,
      webhookKey: process.env.NUXT_PRIVATE_WEBHOOK_KEY,
      environment: process.env.NUXT_PRIVATE_ENVIRONMENT,
      returnUrl: process.env.NUXT_PRIVATE_RETURNURL
    },
  }
});

Nunca confirmes tu archivo .env ni secretos en el control de versiones.

Ejemplos de Manejadores de Rutas de API

Todas las integraciones de Dodo Payments en Nuxt se manejan mediante rutas del servidor en el directorio server/routes/api/.

Checkout API Route
Customer Portal API Route
Webhook API Route

Usa este manejador para integrar el checkout de Dodo Payments en tu aplicación Nuxt. Admite flujos de pago estáticos (GET), dinámicos (POST) y de sesión (POST).

export default defineEventHandler((event) => {
  const {
    private: { bearerToken, environment, returnUrl },
  } = useRuntimeConfig();

  const handler = checkoutHandler({
    bearerToken: bearerToken,
    environment: environment,
    returnUrl: returnUrl,
  });

  return handler(event);
});

export default defineEventHandler((event) => {
  const {
    private: { bearerToken, environment, returnUrl },
  } = useRuntimeConfig();

  const handler = checkoutHandler({
    bearerToken: bearerToken,
    environment: environment,
    returnUrl: returnUrl,
    type: "dynamic"
  });

  return handler(event);
});

export default defineEventHandler((event) => {
  const {
    private: { bearerToken, environment, returnUrl },
  } = useRuntimeConfig();

  const handler = checkoutHandler({
    bearerToken: bearerToken,
    environment: environment,
    returnUrl: returnUrl,
    type: "session"
  });

  return handler(event);
});

Si productId falta o es inválido, el manejador devuelve una respuesta 400.

curl --request GET \
--url 'https://example.com/api/checkout?productId=pdt_fqJhl7pxKWiLhwQR042rh' \
--header 'User-Agent: insomnia/11.2.0' \
--cookie mode=test

curl --request POST \
--url https://example.com/api/checkout \
--header 'Content-Type: application/json' \
--header 'User-Agent: insomnia/11.2.0' \
--cookie mode=test \
--data '{
"billing": {
  "city": "Texas",
  "country": "US",
  "state": "Texas",
  "street": "56, hhh",
  "zipcode": "560000"
},
"customer": {
  "email": "test@example.com",
  	"name": "test"
},
"metadata": {},
"payment_link": true,
  "product_id": "pdt_QMDuvLkbVzCRWRQjLNcs",
  "quantity": 1,
  "billing_currency": "USD",
  "discount_codes": ["IKHZ23M9GQ"],
  "return_url": "https://example.com",
  "trial_period_days": 10
}'

curl --request POST \
--url https://example.com/api/checkout \
--header 'Content-Type: application/json' \
--header 'User-Agent: insomnia/11.2.0' \
--cookie mode=test \
--data '{
"product_cart": [
  {
    "product_id": "pdt_QMDuvLkbVzCRWRQjLNcs",
    "quantity": 1
  }
],
"customer": {
  "email": "test@example.com",
  "name": "test"
},
"return_url": "https://example.com/success"
}'

Crea una ruta GET para permitir que los clientes accedan a su portal. Acepta customer_id como parámetro de consulta.

export default defineEventHandler((event) => {
  const {
    private: { bearerToken, environment },
  } = useRuntimeConfig();

  const handler = customerPortalHandler({
    bearerToken,
    environment: environment,
  });

  return handler(event);
});

Parámetros de Consulta:

customer_id (requerido): El ID del cliente para la sesión del portal (por ejemplo, ?customer_id=cus_123)
send_email (opcional, booleano): Si es true, envía un correo electrónico al cliente con el enlace del portal.

Devuelve 400 si customer_id falta.

curl --request GET \
--url 'https://example.com/api/customer-portal?customer_id=cus_9VuW4K7O3GHwasENg31m&send_email=true' \
--header 'User-Agent: insomnia/11.2.0' \
--cookie mode=test

Crea una ruta POST para recibir y procesar de forma segura los eventos webhook de Dodo Payments.

export default defineEventHandler((event) => {
  const {
    private: { webhookKey },
  } = useRuntimeConfig();

  const handler = Webhooks({
    webhookKey: webhookKey,
    onPayload: async (payload: any) => {
      // Handle webhook payload here
    },
    // ...add other event handlers as needed
  });

  return handler(event);
});

Manejador de Ruta de Checkout

Dodo Payments admite tres tipos de flujos de pago para integrar pagos en tu sitio web; este adaptador es compatible con todos ellos.

Enlaces de Pago Estáticos: URLs instantáneamente compartibles para la recolección de pagos rápida y sin código.
Enlaces de Pago Dinámicos: Genera programáticamente enlaces de pago con detalles personalizados utilizando la API o SDKs.
Sesiones de Checkout: Crea experiencias de checkout seguras y personalizables con carritos de productos preconfigurados y detalles del cliente.

Static Checkout (GET)

Parámetros de consulta

productId

string

requerido

Identificador del producto (p. ej., ?productId=pdt_nZuwz45WAs64n3l07zpQR).

quantity

integer

Cantidad del producto.

fullName

string

Nombre completo del cliente.

firstName

string

Primer nombre del cliente.

lastName

string

Apellido del cliente.

string

Correo electrónico del cliente.

country

string

País del cliente.

addressLine

string

Dirección del cliente.

city

string

Ciudad del cliente.

state

string

Estado o provincia del cliente.

zipCode

string

Código postal del cliente.

disableFullName

boolean

Desactiva el campo de nombre completo.

disableFirstName

boolean

Desactiva el campo de primer nombre.

disableLastName

boolean

Desactiva el campo de apellido.

disableEmail

boolean

Desactiva el campo de correo electrónico.

disableCountry

boolean

Desactiva el campo de país.

disableAddressLine

boolean

Desactiva el campo de dirección.

disableCity

boolean

Desactiva el campo de ciudad.

disableState

boolean

Desactiva el campo de estado.

disableZipCode

boolean

Desactiva el campo de código postal.

paymentCurrency

string

Especifica la moneda del pago (p. ej., USD).

showCurrencySelector

boolean

Muestra el selector de moneda.

paymentAmount

integer

Especifica el monto del pago (p. ej., 1000 para $10.00).

showDiscounts

boolean

Muestra los campos de descuento.

metadata_*

string

Cualquier parámetro de consulta que comience con metadata_ se pasará como metadatos.

Si productId falta, el manejador devuelve una respuesta 400. Los parámetros de consulta inválidos también generan una respuesta 400.

Formato de Respuesta

El checkout estático devuelve una respuesta JSON con la URL de checkout:

{
  "checkout_url": "https://checkout.dodopayments.com/..."
}

Dynamic Checkout (POST)

Envía los parámetros como un cuerpo JSON en una solicitud POST.
Admite pagos únicos y recurrentes.
Para obtener la lista completa de campos admitidos en el cuerpo POST, consulta:
- Request body for a One Time Payment Product
- Request body for a Subscription Product

Formato de Respuesta

El checkout dinámico devuelve una respuesta JSON con la URL de checkout:

{
  "checkout_url": "https://checkout.dodopayments.com/..."
}

Checkout Sessions (POST)

Las sesiones de checkout ofrecen una experiencia de pago alojada más segura que maneja el flujo completo del pago tanto para compras únicas como suscripciones con control total de personalización.Consulta la Guía de Integración de Sesiones de Checkout para más detalles y una lista completa de campos soportados.

Formato de Respuesta

Las sesiones de checkout devuelven una respuesta JSON con la URL de checkout:

{
  "checkout_url": "https://checkout.dodopayments.com/session/..."
}

Manejador de Ruta del Portal del Cliente

El Manejador de Ruta del Portal del Cliente te permite integrar sin problemas el portal del cliente de Dodo Payments en tu aplicación Nuxt.

Parámetros de consulta

customer_id

string

requerido

El ID del cliente para la sesión del portal (p. ej., ?customer_id=cus_123).

send_email

boolean

Si se establece en true, envía un correo electrónico al cliente con el enlace del portal.

Devuelve 400 si customer_id falta.

Manejador de Ruta de Webhook

Método: Solo se admiten solicitudes POST. Otros métodos devuelven 405.
Verificación de Firma: Verifica la firma del webhook utilizando webhookKey. Devuelve 401 si la verificación falla.
Validación de Payload: Validado con Zod. Devuelve 400 para payloads inválidos.
Manejo de Errores:
- 401: Firma inválida
- 400: Payload inválido
- 500: Error interno durante la verificación
Enrutamiento de Eventos: Llama al manejador de eventos apropiado según el tipo de payload.

Controladores de eventos webhook compatibles

onPayload?: (payload: WebhookPayload) => Promise<void>;
onPaymentSucceeded?: (payload: WebhookPayload) => Promise<void>;
onPaymentFailed?: (payload: WebhookPayload) => Promise<void>;
onPaymentProcessing?: (payload: WebhookPayload) => Promise<void>;
onPaymentCancelled?: (payload: WebhookPayload) => Promise<void>;
onRefundSucceeded?: (payload: WebhookPayload) => Promise<void>;
onRefundFailed?: (payload: WebhookPayload) => Promise<void>;
onDisputeOpened?: (payload: WebhookPayload) => Promise<void>;
onDisputeExpired?: (payload: WebhookPayload) => Promise<void>;
onDisputeAccepted?: (payload: WebhookPayload) => Promise<void>;
onDisputeCancelled?: (payload: WebhookPayload) => Promise<void>;
onDisputeChallenged?: (payload: WebhookPayload) => Promise<void>;
onDisputeWon?: (payload: WebhookPayload) => Promise<void>;
onDisputeLost?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionActive?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionOnHold?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionRenewed?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionPlanChanged?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionCancelled?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionFailed?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionExpired?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionUpdated?: (payload: WebhookPayload) => Promise<void>;
onLicenseKeyCreated?: (payload: WebhookPayload) => Promise<void>;
onAbandonedCheckoutDetected?: (payload: WebhookPayload) => Promise<void>;
onAbandonedCheckoutRecovered?: (payload: WebhookPayload) => Promise<void>;
onDunningStarted?: (payload: WebhookPayload) => Promise<void>;
onDunningRecovered?: (payload: WebhookPayload) => Promise<void>;
onCreditAdded?: (payload: WebhookPayload) => Promise<void>;
onCreditDeducted?: (payload: WebhookPayload) => Promise<void>;
onCreditExpired?: (payload: WebhookPayload) => Promise<void>;
onCreditRolledOver?: (payload: WebhookPayload) => Promise<void>;
onCreditRolloverForfeited?: (payload: WebhookPayload) => Promise<void>;
onCreditOverageCharged?: (payload: WebhookPayload) => Promise<void>;
onCreditManualAdjustment?: (payload: WebhookPayload) => Promise<void>;
onCreditBalanceLow?: (payload: WebhookPayload) => Promise<void>;

Solicitud para LLM

You are an expert Nuxt developer assistant. Your task is to guide a user through integrating the @dodopayments/nuxt module into their existing Nuxt project.

The @dodopayments/nuxt module provides API route handlers for Dodo Payments' Checkout, Customer Portal, and Webhook functionalities, designed for Nuxt 3 server routes.

First, install the necessary package:

npm install @dodopayments/nuxt

Second, add the configuration to nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@dodopayments/nuxt"],
  devtools: { enabled: true },
  compatibilityDate: "2025-02-25",
  runtimeConfig: {
    private: {
      bearerToken: process.env.NUXT_PRIVATE_BEARER_TOKEN,
      webhookKey: process.env.NUXT_PRIVATE_BEARER_TOKEN,
      environment: process.env.NUXT_PRIVATE_ENVIRONMENT,
      returnUrl: process.env.NUXT_PRIVATE_RETURNURL
    },
  }
});

Here's how you should structure your response:

    Ask the user which functionalities they want to integrate.

"Which parts of the @dodopayments/nuxt module would you like to integrate into your project? You can choose one or more of the following:

    Checkout API Route (for handling product checkouts)
    Customer Portal API Route (for managing customer subscriptions/details)
    Webhook API Route (for receiving Dodo Payments webhook events)
    All (integrate all three)"

    Based on the user's selection, provide detailed integration steps for each chosen functionality.

If Checkout API Route is selected:

Purpose: This route redirects users to the Dodo Payments checkout page.
File Creation: Create a new file at server/routes/api/checkout.get.ts in your Nuxt project.

Code Snippet:

// server/routes/api/checkout.get.ts

export default defineEventHandler((event) => {
  const {
    private: { bearerToken, environment, returnUrl },
  } = useRuntimeConfig();

  const handler = checkoutHandler({
    bearerToken: bearerToken,
    environment: environment,
    returnUrl: returnUrl,
  });

  return handler(event);
});

Configuration & Usage:
- bearerToken: Your Dodo Payments API key. Set via the NUXT_PRIVATE_BEARER_TOKEN environment variable.
- returnUrl: (Optional) The URL to redirect the user to after a successful checkout.
- environment: (Optional) Set to your environment (e.g., "test_mode" or "live_mode").

Static Checkout (GET) Query Parameters:
- productId (required): Product identifier (e.g., ?productId=pdt_nZuwz45WAs64n3l07zpQR)
- quantity (optional): Quantity of the product
- Customer Fields (optional): fullName, firstName, lastName, email, country, addressLine, city, state, zipCode
- Disable Flags (optional, set to true to disable): disableFullName, disableFirstName, disableLastName, disableEmail, disableCountry, disableAddressLine, disableCity, disableState, disableZipCode
- Advanced Controls (optional): paymentCurrency, showCurrencySelector, paymentAmount, showDiscounts
- Metadata (optional): Any query parameter starting with metadata_ (e.g., ?metadata_userId=abc123)

Dynamic Checkout (POST): Parameters are sent as a JSON body. Supports both one-time and recurring payments. For a complete list of supported POST body fields, refer to:
- Docs - One Time Payment Product: https://docs.dodopayments.com/api-reference/payments/post-payments
- Docs - Subscription Product: https://docs.dodopayments.com/api-reference/subscriptions/post-subscriptions

Checkout Sessions (POST) - (Recommended) A more customizable checkout experience. Returns JSON with checkout_url: Parameters are sent as a JSON body. Supports both one-time and recurring payments. Returns: {"checkout_url": "https://checkout.dodopayments.com/session/..."}. For a complete list of supported fields, refer to:

  Checkout Sessions Integration Guide: https://docs.dodopayments.com/developer-resources/checkout-session

Error Handling: If productId is missing or other query parameters are invalid, the handler will return a 400 response.

If Customer Portal API Route is selected:

Purpose: This route allows customers to access their Dodo Payments customer portal.
File Creation: Create a new file at server/routes/api/customer-portal.get.ts in your Nuxt project.

Code Snippet:

// server/routes/api/customer-portal.get.ts

export default defineEventHandler((event) => {
  const {
    private: { bearerToken, environment },
  } = useRuntimeConfig();

  const handler = customerPortalHandler({
    bearerToken,
    environment: environment,
  });

  return handler(event);
});

Query Parameters:
- customer_id (required): The customer ID for the portal session (e.g., ?customer_id=cus_123)
- send_email (optional, boolean): If set to true, sends an email to the customer with the portal link.
- Returns 400 if customer_id is missing.

If Webhook API Route is selected:

Purpose: This route processes incoming webhook events from Dodo Payments, allowing your application to react to events like successful payments, refunds, or subscription changes.
File Creation: Create a new file at server/routes/api/webhook.post.ts in your Nuxt project.

Code Snippet:

// server/routes/api/webhook.post.ts

export default defineEventHandler((event) => {
  const {
    private: { webhookKey },
  } = useRuntimeConfig();

  const handler = Webhooks({
    webhookKey: webhookKey,
    onPayload: async (payload) => {
      // handle the payload
    },
    // ... other event handlers for granular control
  });

  return handler(event);
});

Handler Details:
- Method: Only POST requests are supported. Other methods return 405.
- Signature Verification: The handler verifies the webhook signature using webhookKey and returns 401 if verification fails.
- Payload Validation: The payload is validated with Zod. Returns 400 for invalid payloads.

Error Handling:
- 401: Invalid signature
- 400: Invalid payload
- 500: Internal error during verification

Event Routing: Calls the appropriate event handler based on the payload type. Supported event handlers include:
- onPayload?: (payload: WebhookPayload) => Promise<void>
- onPaymentSucceeded?: (payload: WebhookPayload) => Promise<void>
- onPaymentFailed?: (payload: WebhookPayload) => Promise<void>
- onPaymentProcessing?: (payload: WebhookPayload) => Promise<void>
- onPaymentCancelled?: (payload: WebhookPayload) => Promise<void>
- onRefundSucceeded?: (payload: WebhookPayload) => Promise<void>
- onRefundFailed?: (payload: WebhookPayload) => Promise<void>
- onDisputeOpened?: (payload: WebhookPayload) => Promise<void>
- onDisputeExpired?: (payload: WebhookPayload) => Promise<void>
- onDisputeAccepted?: (payload: WebhookPayload) => Promise<void>
- onDisputeCancelled?: (payload: WebhookPayload) => Promise<void>
- onDisputeChallenged?: (payload: WebhookPayload) => Promise<void>
- onDisputeWon?: (payload: WebhookPayload) => Promise<void>
- onDisputeLost?: (payload: WebhookPayload) => Promise<void>
- onSubscriptionActive?: (payload: WebhookPayload) => Promise<void>
- onSubscriptionOnHold?: (payload: WebhookPayload) => Promise<void>
- onSubscriptionRenewed?: (payload: WebhookPayload) => Promise<void>
- onSubscriptionPlanChanged?: (payload: WebhookPayload) => Promise<void>
- onSubscriptionCancelled?: (payload: WebhookPayload) => Promise<void>
- onSubscriptionFailed?: (payload: WebhookPayload) => Promise<void>
- onSubscriptionExpired?: (payload: WebhookPayload) => Promise<void>
- onSubscriptionUpdated?: (payload: WebhookPayload) => Promise<void>
- onLicenseKeyCreated?: (payload: WebhookPayload) => Promise<void>
- onAbandonedCheckoutDetected?: (payload: WebhookPayload) => Promise<void>
- onAbandonedCheckoutRecovered?: (payload: WebhookPayload) => Promise<void>
- onDunningStarted?: (payload: WebhookPayload) => Promise<void>
- onDunningRecovered?: (payload: WebhookPayload) => Promise<void>
- onCreditAdded?: (payload: WebhookPayload) => Promise<void>
- onCreditDeducted?: (payload: WebhookPayload) => Promise<void>
- onCreditExpired?: (payload: WebhookPayload) => Promise<void>
- onCreditRolledOver?: (payload: WebhookPayload) => Promise<void>
- onCreditRolloverForfeited?: (payload: WebhookPayload) => Promise<void>
- onCreditOverageCharged?: (payload: WebhookPayload) => Promise<void>
- onCreditManualAdjustment?: (payload: WebhookPayload) => Promise<void>
- onCreditBalanceLow?: (payload: WebhookPayload) => Promise<void>

Environment Variable Setup:
To ensure the module functions correctly, set up the following environment variables in your Nuxt project's deployment environment (e.g., Vercel, Netlify, AWS, etc.):
- NUXT_PRIVATE_BEARER_TOKEN: Your Dodo Payments API Key (required for Checkout and Customer Portal).
- NUXT_PRIVATE_WEBHOOK_KEY: Your Dodo Payments Webhook Secret (required for Webhook handler).
- NUXT_PRIVATE_ENVIRONMENT: (Optional) Set to your environment (e.g., "test_mode" or "live_mode").
- NUXT_PRIVATE_RETURNURL: (Optional) The URL to redirect to after a successful checkout (for Checkout handler).

Usage in your code:
bearerToken: useRuntimeConfig().private.bearerToken
webhookKey: useRuntimeConfig().private.webhookKey

Important: Never commit sensitive environment variables directly into your version control. Use environment variables for all sensitive information.

If the user needs assistance setting up environment variables for their specific deployment environment, ask them what platform they are using (e.g., Vercel, Netlify, AWS, etc.), and provide guidance.

Checkout API Route

Customer Portal API Route

Webhooks API Route

​Descripción general

​Instalación

​Ejemplos de Manejadores de Rutas de API

​Manejador de Ruta de Checkout

​Parámetros de consulta

​Formato de Respuesta

​Formato de Respuesta

​Formato de Respuesta

​Manejador de Ruta del Portal del Cliente

​Parámetros de consulta

​Manejador de Ruta de Webhook

​Controladores de eventos webhook compatibles

​Solicitud para LLM

Descripción general

Instalación

Ejemplos de Manejadores de Rutas de API

Manejador de Ruta de Checkout

Parámetros de consulta

Formato de Respuesta

Formato de Respuesta

Formato de Respuesta

Manejador de Ruta del Portal del Cliente

Parámetros de consulta

Manejador de Ruta de Webhook

Controladores de eventos webhook compatibles

Solicitud para LLM