Integration
How to implement the billing feature in an existing application.
This guide explains how to implement the billing feature in a new/existing application using the @kit/billing
package.
Installation
First, install the billing package:
Configuration File
Create the billing configuration in config/billing.config.ts
:
import { parseBillingConfig } from '@kit/billing/config'; /** * Your billing config allow you to define how you want to bill your users. * * To set your products, first create them on the billing provider's dashboard. * Then, copy the product ID and price ID from the billing provider's dashboard and paste them into the `products` array. */ export const billingConfig = parseBillingConfig({ provider: 'stripe', // or 'lemon-squeezy' checkoutUI: 'embedded', attachedTable: 'user', products: [ { id: 'prod_SnZo9gjf64pu8V', // ex of stripe product id features: ['Feature 1', 'Feature 2', 'Feature 3'], }, { id: 'prod_SoMQHe5KvYYTXd', // ex of stripe product id popular: true, features: ['Feature 1', 'Feature 2', 'Feature 3', 'Feature 4', 'Feature 5'], }, { id: 'prod_SoMReYpTHqroXz', // ex of stripe product id features: [ '1000 credits', 'Create as much folder that you want in your workspace', 'Use the AI to generate content', '7 days free trial', 'Full support at any time', ], }, ], });
If you are looking for a Lemon Squeezy example, look the the config folder of the dashboard app.
BillingConfig
Prop | Type | Default |
---|---|---|
provider* | "stripe" | "lemon-squeezy" | |
attachedTable* | "user" | "organization" | 'user' |
products* | [{ id: string; features:... | |
checkoutUI | "hosted" | "embedded" | 'hosted' |
access | "authenticated" | "public" | 'authenticated' |
goBackUrl | string | null |
numberAfterComma | number | 2 |
checkout | { submit?: { text?: string |... |
Environment Variables
Add the required environment variables based on your chosen provider:
Stripe
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
LemonSqueezy
LEMON_SQUEEZY_API_KEY=...
LEMON_SQUEEZY_WEBHOOK_SECRET=...
NEXT_PUBLIC_LEMON_SQUEEZY_STORE_ID=...
Billing Pages
Create billing management pages using the provided components. The dashboard app uses these components in the settings section.
Check the Billing Settings and Pricing pages for more details.
Server Actions
The billing package provides server actions for common operations. Import and use them in your route handlers or server components:
import {
createCheckoutSession,
createBillingPortalSessionUrl,
updateBillingCustomer,
} from '@kit/billing/actions';
Examples
Create Checkout Session
const session = await createCheckoutSession({
config: billingConfig,
priceId: 'price_1234567890',
customerId: userId,
successUrl: '/dashboard/billing',
cancelUrl: '/pricing',
});
Create Customer Portal
const portalUrl = await createBillingPortalSessionUrl({
config: billingConfig,
customerId: userId,
returnUrl: '/dashboard/billing',
});
The attachedTable: 'user'
in your config links billing records to the user table. The package automatically handles the relationship.
What's Next
You've successfully integrated the core billing system. Now you can:
Page | Description |
---|---|
User Settings | Add billing dashboard UI |
Pricing | Display pricing plans |
Add subscription and payment capabilities to your application with multiple billing providers.
Display the billing dashboard UI for users to manage their subscriptions and billing information.
How is this guide?
Last updated on 10/17/2025