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

# Integrar con Remix

> Agrega cobros y pagos a tu aplicación de Remix.

Instala la Commet Skill para que tu agente integre el SDK actual y valide su trabajo contra el contrato vivo de la API.

```bash theme={null}
npx skills add commet-labs/skills --skill commet
```

<Steps>
  <Step title="Instalar">
    <Tabs>
      <Tab title="pnpm">
        ```bash theme={null}
        pnpm add @commet/node @remix-run/node
        ```
      </Tab>

      <Tab title="npm">
        ```bash theme={null}
        npm install @commet/node @remix-run/node
        ```
      </Tab>

      <Tab title="yarn">
        ```bash theme={null}
        yarn add @commet/node @remix-run/node
        ```
      </Tab>

      <Tab title="bun">
        ```bash theme={null}
        bun add @commet/node @remix-run/node
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configurar">
    ```bash title=".env" theme={null}
    COMMET_API_KEY=ck_sandbox_xxx
    ```

    El sufijo `.server.ts` asegura que este módulo nunca se incluya en el código del cliente.

    ```typescript title="app/lib/commet.server.ts" theme={null}
    import { Commet } from '@commet/node'

    export const commet = new Commet({
      apiKey: process.env.COMMET_API_KEY!,
    })
    ```
  </Step>

  <Step title="Suscribir">
    `customers.create` es idempotente — si ya existe un cliente con el mismo `id`, retorna el registro existente.

    ```typescript title="app/routes/billing.subscribe.ts" theme={null}
    import { json, redirect, type ActionFunctionArgs } from '@remix-run/node'
    import { commet } from '~/lib/commet.server'

    export async function action({ request }: ActionFunctionArgs) {
      const formData = await request.formData()
      const customerId = String(formData.get('customerId'))
      const email = String(formData.get('email'))

      await commet.customers.create({ email, id: customerId })

      const subscription = await commet.subscriptions.create({
        customerId,
        planCode: 'pro',
      })

      const checkoutUrl = subscription.checkoutUrl
      if (checkoutUrl) {
        return redirect(checkoutUrl)
      }

      return json({ subscribed: true })
    }
    ```
  </Step>

  <Step title="Verificar Acceso">
    ```typescript title="app/routes/billing.status.ts" theme={null}
    import { json, type LoaderFunctionArgs } from '@remix-run/node'
    import { commet } from '~/lib/commet.server'

    export async function loader({ request }: LoaderFunctionArgs) {
      const url = new URL(request.url)
      const customerId = url.searchParams.get('customerId')!

      const subscription = await commet.subscriptions.getActive({ customerId })

      if (!subscription) {
        return json({ error: 'no_active_subscription' }, { status: 404 })
      }

      const feature = await commet.featureAccess.get({
        code: 'api_calls',
        customerId,
      })

      return json({
        status: subscription.status,
        allowed: feature.allowed,
      })
    }
    ```
  </Step>

  <Step title="Trackear Uso">
    ```typescript title="app/routes/billing.usage.ts" theme={null}
    import { json, type ActionFunctionArgs } from '@remix-run/node'
    import { commet } from '~/lib/commet.server'

    export async function action({ request }: ActionFunctionArgs) {
      const { customerId } = await request.json()

      await commet.usage.track({
        customerId,
        featureCode: 'api_calls',
        value: 1,
      })

      return json({ tracked: true })
    }
    ```

    El uso se agrega y se cobra al final del período.
  </Step>

  <Step title="Portal del Cliente">
    ```typescript title="app/routes/billing.portal.ts" theme={null}
    import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
    import { commet } from '~/lib/commet.server'

    export async function loader({ request }: LoaderFunctionArgs) {
      const customerId = 'user_123'

      const portal = await commet.portal.getUrl({ customerId })

      return redirect(portal.portalUrl)
    }
    ```
  </Step>
</Steps>

## Relacionado

* [Suscripciones](/docs/es/manage-subscriptions)
* [Trackear Uso](/docs/es/track-usage)
* [Portal del Cliente](/docs/es/customer-portal)
* [Referencia del SDK](/docs/es/sdk-reference)


## Related topics

- [Integrar con Flask](/docs/es/integrate-with-flask.md)
- [Integrar con Java](/docs/es/integrate-with-java.md)
- [Integrar con Django](/docs/es/integrate-with-django.md)
- [Integrar con Encore](/docs/es/integrate-with-encore.md)
- [Integrar con Laravel](/docs/es/integrate-with-laravel.md)


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