Commet
  • Pricing
Log InTry out
Introduction

Quickstart

Integrate with Next.jsIntegrate with RemixIntegrate with NuxtIntegrate with SvelteKitIntegrate with AstroIntegrate with ExpressIntegrate with HonoIntegrate with Bun

Learn

Resources

SDK ReferenceError HandlingTestingCLI

Plugins

Better Auth
DocumentationKnowledge BaseBuild with AIAPI ReferenceWebhooks

Integrate with Remix

Add billing and payments to your Remix application.

Use this pre-built prompt to integrate Commet faster with AI assistants.

Install

pnpm add @commet/node @remix-run/node
npm install @commet/node @remix-run/node
yarn add @commet/node @remix-run/node
bun add @commet/node @remix-run/node

Configure

.env
COMMET_API_KEY=ck_sandbox_xxx

The .server.ts suffix ensures this module is never bundled into client code.

app/lib/commet.server.ts
import { Commet } from '@commet/node'

export const commet = new Commet({
  apiKey: process.env.COMMET_API_KEY!,
  environment: 'sandbox',
})

Subscribe

customers.create is idempotent — if a customer with the same id already exists, it returns the existing record.

app/routes/billing.subscribe.ts
import { 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',
  })

  return redirect(subscription.data.checkoutUrl!)
}

Check Access

app/routes/billing.status.ts
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 { data: subscription } = await commet.subscriptions.get(customerId)

  const { data: feature } = await commet.features.check({
    code: 'api_calls',
    customerId,
  })

  return json({
    status: subscription.status,
    allowed: feature.allowed,
  })
}

Track Usage

app/routes/billing.usage.ts
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,
    feature: 'api_calls',
    value: 1,
  })

  return json({ tracked: true })
}

Usage is aggregated and billed at end of period.

Customer Portal

app/routes/billing.portal.ts
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 { data } = await commet.portal.getUrl({ customerId })

  return redirect(data.portalUrl)
}

Related

  • Subscriptions
  • Track Usage
  • Customer Portal
  • SDK Reference

How is this guide?

Integrate with Next.js

Add billing and payments to your Next.js application.

Integrate with Nuxt

Add billing and payments to your Nuxt application.

On this page

Install
Configure
Subscribe
Check Access
Track Usage
Customer Portal
Related