> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adaptador de Remix

> Añade checkout de Dodo Payments, Customer Portal y manejadores de webhook a los loaders y actions de Remix con el paquete @dodopayments/remix.

El paquete `@dodopayments/remix` proporciona a tu aplicación Remix tres manejadores de solicitudes. `Checkout` devuelve URLs de checkout, `CustomerPortal` envía al cliente al Customer Portal y `Webhooks` verifica los eventos de webhook y los dirige a tu código. Cada manejador recibe un `Request` y devuelve un `Response`, por lo que debes llamarlo desde el `loader` o `action` de una ruta.

<CardGroup cols={2}>
  <Card title="Checkout Handler" icon="cart-shopping" href="#checkout-route-handler">
    Crea URLs de checkout desde tu aplicación Remix.
  </Card>

  <Card title="Customer Portal" icon="user" href="#customer-portal-route-handler">
    Permite que los clientes administren sus suscripciones y datos.
  </Card>

  <Card title="Webhooks" icon="bell" href="#webhook-route-handler">
    Recibe y verifica eventos de webhook de Dodo Payments.
  </Card>
</CardGroup>

## Instalación

<Steps>
  <Step title="Install the Package">
    Ejecuta este comando en la raíz de tu proyecto:

    ```bash theme={null}
    npm install @dodopayments/remix
    ```

    El paquete incluye Remix 2 (`remix` 2.16.8 o posterior) y `zod` 3.25 o posterior como dependencias peer.
  </Step>

  <Step title="Set Up Environment Variables">
    Crea un archivo `.env` en la raíz de tu proyecto:

    ```env expandable theme={null}
    DODO_PAYMENTS_API_KEY=your-api-key
    DODO_PAYMENTS_WEBHOOK_KEY=your-webhook-secret
    DODO_PAYMENTS_RETURN_URL=https://yourdomain.com/checkout/success
    # test_mode or live_mode
    DODO_PAYMENTS_ENVIRONMENT=test_mode
    ```

    Crea la API key en **Developer → API Keys**. Añade tu endpoint de webhook en **Developer → Webhooks** y copia su signing secret en `DODO_PAYMENTS_WEBHOOK_KEY`. `DODO_PAYMENTS_RETURN_URL` es el lugar al que llegan los clientes después del checkout. Si no pasas un entorno, los manejadores usan `live_mode`.

    <Warning>
      Nunca subas tu archivo `.env` ni los secretos al control de versiones.
    </Warning>
  </Step>
</Steps>

## Ejemplos de manejadores de rutas

<Info>
  Los ejemplos son resource routes de Remix, que exportan un `loader` para solicitudes GET o un `action` para solicitudes POST y ningún componente. Con flat file routes, `app/routes/api.checkout.tsx` sirve `/api/checkout`.
</Info>

<Tabs>
  <Tab title="Checkout Handler">
    <Info>
      Usa este manejador para añadir el checkout de Dodo Payments a tu aplicación Remix. `loader` sirve el checkout estático. `action` sirve aquí el checkout dinámico. Para servir sesiones de checkout, el flujo recomendado, devuelve `checkoutSessionHandler(request)` desde `action` en su lugar.
    </Info>

    <CodeGroup>
      ```typescript Remix Route Handler expandable theme={null}
      // app/routes/api.checkout.tsx
      import { Checkout } from "@dodopayments/remix";
      import type { LoaderFunctionArgs } from "@remix-run/node";

      const checkoutGetHandler = Checkout({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT as "test_mode" | "live_mode",
          type: "static"
      });

      const checkoutPostHandler = Checkout({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT as "test_mode" | "live_mode",
          type: "dynamic", // for dynamic checkout
      });

      const checkoutSessionHandler = Checkout({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT as "test_mode" | "live_mode",
          type: "session", // for checkout sessions
      });

      export const loader = ({ request }: LoaderFunctionArgs) => checkoutGetHandler(request);
      export const action = ({ request }: LoaderFunctionArgs) => {
          // You can conditionally route to different handlers based on your needs
          // For checkout sessions, use checkoutSessionHandler(request)
          return checkoutPostHandler(request);
      };
      ```
    </CodeGroup>

    <CodeGroup>
      ```bash Static Checkout cURL Example theme={null}
      curl --request GET \
      --url 'https://example.com/api/checkout?productId=pdt_fqJhl7pxKWiLhwQR042rh'
      ```
    </CodeGroup>

    <CodeGroup>
      ```bash Dynamic Checkout cURL Example expandable theme={null}
      curl --request POST \
      --url https://example.com/api/checkout \
      --header 'Content-Type: application/json' \
      --data '{
      "billing": {
        "city": "Austin",
        "country": "US",
        "state": "TX",
        "street": "123 Main St",
        "zipcode": "78701"
      },
      "customer": {
        "email": "customer@example.com",
        "name": "John Doe"
      },
      "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
      }'
      ```
    </CodeGroup>

    <CodeGroup>
      ```bash Checkout Session cURL Example expandable theme={null}
      curl --request POST \
      --url https://example.com/api/checkout \
      --header 'Content-Type: application/json' \
      --data '{
      "product_cart": [
        {
          "product_id": "pdt_QMDuvLkbVzCRWRQjLNcs",
          "quantity": 1
        }
      ],
      "customer": {
        "email": "customer@example.com",
        "name": "John Doe"
      },
      "return_url": "https://example.com/success"
      }'
      ```
    </CodeGroup>

    La solicitud de la sesión de checkout funciona cuando `action` devuelve `checkoutSessionHandler(request)`.
  </Tab>

  <Tab title="Customer Portal Handler">
    <Info>
      Usa este manejador para enviar a los clientes al Customer Portal de Dodo Payments, donde pueden administrar sus suscripciones y datos.
    </Info>

    <CodeGroup>
      ```typescript Remix Route Handler expandable theme={null}
      // app/routes/api.customer-portal.tsx
      import { CustomerPortal } from "@dodopayments/remix";
      import type { LoaderFunctionArgs } from "@remix-run/node";

      const customerPortalHandler = CustomerPortal({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT as "test_mode" | "live_mode"
      });

      export const loader = ({ request }: LoaderFunctionArgs) => customerPortalHandler(request);
      ```
    </CodeGroup>

    <CodeGroup>
      ```bash Customer Portal cURL Example theme={null}
      curl --request GET \
      --url 'https://example.com/api/customer-portal?customer_id=cus_9VuW4K7O3GHwasENg31m&send_email=true'
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Webhook Handler">
    <Info>
      Usa este manejador para recibir eventos de webhook de Dodo Payments en tu aplicación Remix y verificar sus firmas.
    </Info>

    <CodeGroup>
      ```typescript Remix Route Handler expandable theme={null}
      // app/routes/api.webhook.tsx
      import { Webhooks } from "@dodopayments/remix";
      import type { LoaderFunctionArgs } from "@remix-run/node";

      const webhookHandler = Webhooks({
      webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_KEY!,
      onPayload: async (payload) => {
          //Handle Payload Here
          console.log(payload)
      }
      });
      export const action = ({ request }: LoaderFunctionArgs) => webhookHandler(request);
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Manejador de rutas de checkout

El manejador de checkout admite las tres formas de aceptar pagos con Dodo Payments:

* **Static Payment Links:** URLs que puedes compartir y que recaudan pagos sin código.
* **Dynamic Payment Links:** enlaces de pago que generas con detalles personalizados. Usan endpoints obsoletos.
* **Checkout Sessions:** checkout alojado con un carrito de productos, datos del cliente y opciones de personalización. Este es el flujo recomendado.

`Checkout` acepta estas opciones:

| Opción | Tipo | Descripción |
| - | - | - |
| `bearerToken` | `string` | Tu API key de Dodo Payments. |
| `environment` | `string` | `test_mode` o `live_mode`. El valor predeterminado es `live_mode`. |
| `returnUrl` | `string` | Opcional. La URL a la que checkout redirige al cliente después del pago. Un `return_url` en el cuerpo de un POST tiene prioridad. |
| `type` | `string` | Opcional. `static` (el valor predeterminado) para el manejador al que llama tu `loader`. Para solicitudes POST, `dynamic` selecciona el checkout dinámico y cualquier otro valor, o ninguno, selecciona las sesiones de checkout. |

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    ### Parámetros de consulta compatibles

    <ParamField query="productId" type="string" required>
      Identificador del producto, por ejemplo `?productId=pdt_nZuwz45WAs64n3l07zpQR`.
    </ParamField>

    <ParamField query="quantity" type="integer" default="1">
      Cantidad del producto.
    </ParamField>

    <ParamField query="fullName" type="string">
      Nombre completo del cliente. Se ignora si se proporciona `firstName` o `lastName`.
    </ParamField>

    <ParamField query="firstName" type="string">
      Nombre del cliente.
    </ParamField>

    <ParamField query="lastName" type="string">
      Apellido del cliente.
    </ParamField>

    <ParamField query="email" type="string">
      Dirección de correo electrónico del cliente.
    </ParamField>

    <ParamField query="country" type="string">
      País del cliente, como código ISO 3166-1 alpha-2.
    </ParamField>

    <ParamField query="addressLine" type="string">
      Línea de dirección del cliente.
    </ParamField>

    <ParamField query="city" type="string">
      Ciudad del cliente.
    </ParamField>

    <ParamField query="state" type="string">
      Estado o provincia del cliente.
    </ParamField>

    <ParamField query="zipCode" type="string">
      Código ZIP o postal del cliente.
    </ParamField>

    <ParamField query="disableFullName" type="boolean">
      Establece `true` para desactivar el campo de nombre completo.
    </ParamField>

    <ParamField query="disableFirstName" type="boolean">
      Establece `true` para desactivar el campo de nombre.
    </ParamField>

    <ParamField query="disableLastName" type="boolean">
      Establece `true` para desactivar el campo de apellido.
    </ParamField>

    <ParamField query="disableEmail" type="boolean">
      Establece `true` para desactivar el campo de correo electrónico.
    </ParamField>

    <ParamField query="disableCountry" type="boolean">
      Establece `true` para desactivar el campo de país.
    </ParamField>

    <ParamField query="disableAddressLine" type="boolean">
      Establece `true` para desactivar el campo de línea de dirección.
    </ParamField>

    <ParamField query="disableCity" type="boolean">
      Establece `true` para desactivar el campo de ciudad.
    </ParamField>

    <ParamField query="disableState" type="boolean">
      Establece `true` para desactivar el campo de estado.
    </ParamField>

    <ParamField query="disableZipCode" type="boolean">
      Establece `true` para desactivar el campo de código ZIP.
    </ParamField>

    <ParamField query="paymentCurrency" type="string">
      Moneda del pago, por ejemplo `USD`.
    </ParamField>

    <ParamField query="showCurrencySelector" type="boolean" default="true">
      Muestra u oculta el selector de moneda.
    </ParamField>

    <ParamField query="paymentAmount" type="number">
      Fija el importe cobrado, en unidades mayores de moneda, por ejemplo `12.5` para \$12.50. Solo funciona con productos Pay What You Want y se ignora si está por debajo del precio mínimo del producto.
    </ParamField>

    <ParamField query="showDiscounts" type="boolean" default="true">
      Muestra u oculta la sección de descuentos.
    </ParamField>

    <ParamField query="metadata_*" type="string">
      Cualquier parámetro de consulta que comience con `metadata_` se pasa como metadata.
    </ParamField>

    El manejador añade `returnUrl` de su configuración al enlace como `redirect_url`.

    <Warning>
      Si falta `productId`, el manejador devuelve una respuesta 400. Los parámetros de consulta no válidos y los ID de producto inexistentes también devuelven 400.
    </Warning>

    ### Formato de respuesta

    El checkout estático devuelve una respuesta JSON con la URL de checkout. En modo de prueba, la URL usa `test.checkout.dodopayments.com`.

    ```json theme={null}
    {
      "checkout_url": "https://checkout.dodopayments.com/..."
    }
    ```
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    * Envía los parámetros como un cuerpo JSON en una solicitud POST.
    * Admite pagos únicos y recurrentes.
    * `billing` e `customer` son obligatorios.
    * Para consultar todos los campos de cuerpo compatibles, consulta:
      * [Cuerpo de solicitud para un producto de pago único](https://docs.dodopayments.com/api-reference/payments/post-payments)
      * [Cuerpo de solicitud para un producto de suscripción](https://docs.dodopayments.com/api-reference/subscriptions/post-subscriptions)

    <Warning>
      El checkout dinámico actúa como proxy de los endpoints obsoletos `POST /payments` y `POST /subscriptions`. Sigue funcionando para integraciones existentes, pero las nuevas integraciones deben usar sesiones de checkout.
    </Warning>

    ### Formato de respuesta

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

    ```json theme={null}
    {
      "checkout_url": "https://checkout.dodopayments.com/..."
    }
    ```
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    Las sesiones de checkout crean un checkout alojado para compras únicas y suscripciones, con control total sobre la personalización. `product_cart` es el único campo obligatorio. Si el cuerpo no contiene `return_url`, el manejador usa `returnUrl` de su configuración.

    Para obtener más detalles y consultar todos los campos compatibles, consulta la [Guía de integración de Checkout Sessions](https://docs.dodopayments.com/developer-resources/checkout-session).

    Una sesión creada con `payment_method_id` no devuelve una URL de checkout, por lo que el manejador responde con 400. Para realizar un cargo en un método de pago guardado, crea la sesión con el SDK.

    ### Formato de respuesta

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

    ```json theme={null}
    {
      "checkout_url": "https://checkout.dodopayments.com/session/..."
    }
    ```
  </Accordion>
</AccordionGroup>

## Manejador de rutas de Customer Portal

El manejador de rutas de Customer Portal crea una sesión de Customer Portal para el cliente que indiques y redirige el navegador a ella con una respuesta 307.

<Warning>
  El manejador no comprueba quién lo llama. Cualquiera que lo solicite con un ID de cliente obtiene el portal de ese cliente. Protege la ruta con tu propia autenticación y pasa únicamente el ID de cliente del usuario que inició sesión.
</Warning>

### Parámetros de consulta

<ParamField query="customer_id" type="string" required>
  El ID de cliente de la sesión del portal, por ejemplo `?customer_id=cus_123`.
</ParamField>

<ParamField query="send_email" type="boolean">
  Si se establece en `true`, Dodo Payments también envía por correo electrónico el enlace del portal al cliente.
</ParamField>

<Warning>
  Devuelve 400 si falta `customer_id` y 500 si no se puede crear la sesión del portal.
</Warning>

## Manejador de rutas de webhook

El manejador de rutas de webhook verifica cada solicitud antes de ejecutar tu código:

* **Method:** Solo se admiten solicitudes POST. Otros métodos devuelven 405.
* **Signature Verification:** Verifica el cuerpo sin procesar de la solicitud y los encabezados `webhook-id`, `webhook-timestamp` y `webhook-signature` con `webhookKey`, conforme a la especificación de [Standard Webhooks](https://standardwebhooks.com/). Devuelve 401 si la verificación falla.
* **Payload Validation:** Valida el payload con Zod. Devuelve 400 si el payload no es válido.
* **Error Handling:**
  * 401: Firma no válida
  * 400: Payload no válido
  * 500: Error interno durante la verificación
* **Event Routing:** Llama a `onPayload` para cada evento, después al manejador correspondiente al tipo de evento y devuelve 200.

El adaptor no captura los errores generados en tus manejadores. Se propagan a Remix y la solicitud falla.

### Manejadores de eventos de webhook compatibles

Cada manejador recibe el payload verificado correspondiente a su tipo de evento:

<CodeGroup>
  ```typescript TypeScript expandable theme={null}
  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>;
  onSubscriptionPaused?: (payload: WebhookPayload) => Promise<void>;
  onSubscriptionUnpaused?: (payload: WebhookPayload) => Promise<void>;
  onSubscriptionUpdatePaymentMethod?: (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>;
  onCreditOverageReset?: (payload: WebhookPayload) => Promise<void>;
  onCreditManualAdjustment?: (payload: WebhookPayload) => Promise<void>;
  onCreditBalanceLow?: (payload: WebhookPayload) => Promise<void>;
  onEntitlementGrantCreated?: (payload: WebhookPayload) => Promise<void>;
  onEntitlementGrantDelivered?: (payload: WebhookPayload) => Promise<void>;
  onEntitlementGrantFailed?: (payload: WebhookPayload) => Promise<void>;
  onEntitlementGrantRevoked?: (payload: WebhookPayload) => Promise<void>;
  onPayoutCreated?: (payload: WebhookPayload) => Promise<void>;
  onPayoutOnHold?: (payload: WebhookPayload) => Promise<void>;
  onPayoutInProgress?: (payload: WebhookPayload) => Promise<void>;
  onPayoutFailed?: (payload: WebhookPayload) => Promise<void>;
  onPayoutSuccess?: (payload: WebhookPayload) => Promise<void>;
  ```
</CodeGroup>

Para saber qué significa cada evento, consulta la [Guía de eventos de webhook](/developer-resources/webhooks/intents/webhook-events-guide).

***

## Prompt para LLM

Copia este prompt en tu asistente de programación con IA para que añada el adaptor a tu proyecto. Para proporcionar también a tu agente la documentación y las skills de Dodo Payments, instala el [Agent Plugin](/developer-resources/build-with-ai-coding-agents).

```text expandable theme={null}

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

The @dodopayments/remix adapter provides route handlers for Dodo Payments' Checkout, Customer Portal, and Webhook functionalities, designed for Remix route handlers.

First, install the necessary packages. Use the package manager appropriate for your project (npm, yarn, or bun) based on the presence of lock files (e.g., package-lock.json for npm, yarn.lock for yarn, bun.lockb for bun):

npm install @dodopayments/remix

Here's how you should structure your response:

    Ask the user which functionalities they want to integrate.

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

    Checkout Route Handler (for handling product checkouts)

    Customer Portal Route Handler (for managing customer subscriptions/details)

    Webhook Route Handler (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 Route Handler is selected:

Purpose: This handler returns a JSON response with a checkout_url for the Dodo Payments checkout page. The loader serves static checkout (GET). The action serves dynamic checkout or checkout sessions (POST); checkout sessions are recommended for new integrations.
File Creation: Create a new file at app/routes/api.checkout.tsx in your Remix project.

Code Snippet:

// app/routes/api.checkout.tsx
import { Checkout } from "@dodopayments/remix";
import type { LoaderFunctionArgs } from "@remix-run/node";

const checkoutGetHandler = Checkout({
  bearerToken: process.env.DODO_PAYMENTS_API_KEY,
  returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
  environment: process.env.DODO_PAYMENTS_ENVIRONMENT as "test_mode" | "live_mode",
  type: "static",
});

const checkoutPostHandler = Checkout({
  bearerToken: process.env.DODO_PAYMENTS_API_KEY,
  returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
  environment: process.env.DODO_PAYMENTS_ENVIRONMENT as "test_mode" | "live_mode",
  type: "dynamic", // for dynamic checkout
});

const checkoutSessionHandler = Checkout({
  bearerToken: process.env.DODO_PAYMENTS_API_KEY,
  returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
  environment: process.env.DODO_PAYMENTS_ENVIRONMENT as "test_mode" | "live_mode",
  type: "session", // for checkout sessions
});

export const loader = ({ request }: LoaderFunctionArgs) => checkoutGetHandler(request);

export const action = ({ request }: LoaderFunctionArgs) => {
  // You can conditionally route to different handlers based on your needs
  // For checkout sessions, use checkoutSessionHandler(request)
  return checkoutPostHandler(request);
};

If Customer Portal Route Handler is selected:

Purpose: This handler redirects a customer to their Dodo Payments customer portal. It does not authenticate the caller, so protect the route and pass only the signed-in user's customer ID.
File Creation: Create a new file at app/routes/api.customer-portal.tsx in your Remix project.

Code Snippet:

// app/routes/api.customer-portal.tsx
import { CustomerPortal } from "@dodopayments/remix";
import type { LoaderFunctionArgs } from "@remix-run/node";

const customerPortalHandler = CustomerPortal({
  bearerToken: process.env.DODO_PAYMENTS_API_KEY,
  environment: process.env.DODO_PAYMENTS_ENVIRONMENT as "test_mode" | "live_mode"
});

export const loader = ({ request }: LoaderFunctionArgs) => customerPortalHandler(request);

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 Route Handler is selected:

Purpose: This handler 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 app/routes/api.webhook.tsx in your Remix project.

Code Snippet:

// app/routes/api.webhook.tsx
import { Webhooks } from "@dodopayments/remix";
import type { LoaderFunctionArgs } from "@remix-run/node";

const webhookHandler = Webhooks({
  webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_KEY!,
  onPayload: async (payload) => {
    //Handle Payload Here
    console.log(payload)
  }
});

export const action = ({ request }: LoaderFunctionArgs) => webhookHandler(request);

Handler Details:

    Method: Only POST requests are supported. Other methods return 405.

    Signature Verification: The handler verifies the webhook signature using the 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 onPayload for every event, then the handler for the event's type.

Supported Webhook Event Handlers:

    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>

    onSubscriptionPaused?: (payload: WebhookPayload) => Promise<void>

    onSubscriptionUnpaused?: (payload: WebhookPayload) => Promise<void>

    onSubscriptionUpdatePaymentMethod?: (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>

    onCreditOverageReset?: (payload: WebhookPayload) => Promise<void>

    onCreditManualAdjustment?: (payload: WebhookPayload) => Promise<void>

    onCreditBalanceLow?: (payload: WebhookPayload) => Promise<void>

    onEntitlementGrantCreated?: (payload: WebhookPayload) => Promise<void>

    onEntitlementGrantDelivered?: (payload: WebhookPayload) => Promise<void>

    onEntitlementGrantFailed?: (payload: WebhookPayload) => Promise<void>

    onEntitlementGrantRevoked?: (payload: WebhookPayload) => Promise<void>

    onPayoutCreated?: (payload: WebhookPayload) => Promise<void>

    onPayoutOnHold?: (payload: WebhookPayload) => Promise<void>

    onPayoutInProgress?: (payload: WebhookPayload) => Promise<void>

    onPayoutFailed?: (payload: WebhookPayload) => Promise<void>

    onPayoutSuccess?: (payload: WebhookPayload) => Promise<void>

    Environment Variable Setup:

To ensure the adapter functions correctly, you will need to manually set up the following environment variables in your Remix project's deployment environment (e.g., Vercel, Netlify, AWS, etc.):

    DODO_PAYMENTS_API_KEY: Your Dodo Payments API Key (required for Checkout and Customer Portal).

    DODO_PAYMENTS_RETURN_URL: (Optional) The URL to redirect to after a successful checkout (for Checkout handler).

    DODO_PAYMENTS_ENVIRONMENT: (Optional) "test_mode" or "live_mode". Defaults to "live_mode".

    DODO_PAYMENTS_WEBHOOK_KEY: Your Dodo Payments Webhook Secret (required for Webhook handler).

Example .env file:

DODO_PAYMENTS_API_KEY=your-api-key
DODO_PAYMENTS_RETURN_URL=your-return-url
DODO_PAYMENTS_ENVIRONMENT=test_mode
DODO_PAYMENTS_WEBHOOK_KEY=your-webhook-secret

Usage in your code:

bearerToken: process.env.DODO_PAYMENTS_API_KEY
webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_KEY!

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. You can also add comments to their PR or chat depending on the context

```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.