Complete guide to integrating Creem payment system, including product creation, webhook configuration, and testing.

Payment Setup (Creem)

This guide covers how to integrate the Creem payment system with Kensa, including creating products, configuring webhooks, and testing the payment flow.

Prerequisites

1. Register a Creem Account

Visit the Creem Dashboard to register and complete verification.

2. Get API Keys

Log in to Creem Dashboard
Go to Settings > API Keys
Create a Publishable Key and Secret Key
Add them to .env.local:

CREEM_API_KEY='creem_live_xxx'  # or creem_test_xxx for testing
CREEM_WEBHOOK_SECRET='your-webhook-secret'

3. Confirm Environment Variables

Ensure these are set in .env.local:

# App URL (important: used for webhook callback)
NEXT_PUBLIC_APP_URL='http://localhost:3000'  # development
# NEXT_PUBLIC_APP_URL='https://your-domain.com'  # production

# Payment provider
NEXT_PUBLIC_BILLING_PROVIDER='creem'

Create Creem Products

You need to create 9 products in the Creem dashboard (3 monthly subscriptions, 3 yearly subscriptions, 3 one-time credit packs).

Product List

Monthly Subscriptions

Product Name	Price	Cycle	Credits
Basic Plan	$9.90	Monthly	280
Pro Plan	$29.90	Monthly	960
Ultimate Plan	$79.90	Monthly	2,850

Yearly Subscriptions

Product Name	Price	Cycle	Credits
Basic Plan (Yearly)	$99.00	Yearly	3,360
Pro Plan (Yearly)	$299.00	Yearly	11,520
Ultimate Plan (Yearly)	$799.00	Yearly	34,200

One-Time Credit Packages

Product Name	Price	Credits	Access
Starter Pack	$14.90	280	All users
Standard Pack	$39.90	960	Subscribers only
Pro Pack	$99.90	2,850	Subscribers only

Creating a Subscription Product (Example: Basic Monthly)

Log in to the Creem Dashboard
Go to Products and click Create Product
Fill in the product details:

Product Type: Subscription
Product Name: Basic Plan
Description: 280 credits/month - Perfect for individuals

Pricing:
  Currency: USD
  Price: 9.90
  Billing Cycle: Monthly
  Trial Period: 0

Metadata (optional):
  credits: "280"
  features: "hd_videos,fast_generation"

Click Create Product
Copy the generated Product ID (format: prod_xxx)
Save it to the corresponding entry in pricing-user.ts

Creating Yearly Subscriptions

Repeat the steps above with these changes:

Product Name: Basic Plan (Yearly)
Price: 99.00
Billing Cycle: Yearly
Metadata:
  credits: "3360"

Creating One-Time Credit Packs

Set Product Type to One-time
Do not set a billing cycle
Example configuration:

Product Type: One-time
Product Name: Starter Pack
Description: 280 credits - One-time purchase

Pricing:
  Currency: USD
  Price: 14.90

Metadata:
  credits: "280"
  allow_free_user: "true"

Configure Webhooks

Webhooks receive payment status notifications from Creem and automatically add credits to user accounts.

Step 1: Determine Your Webhook URL

# Development
https://localhost:3000/api/auth/creem/webhook

# Production
https://your-domain.com/api/auth/creem/webhook

Step 2: Set Up Webhook in Creem

Go to Creem Dashboard > Webhooks
Click Add Webhook
Configure:

Endpoint URL: https://your-domain.com/api/auth/creem/webhook
Events:
  - checkout.completed    (payment completed)
  - subscription.created  (subscription created)
  - subscription.updated  (subscription updated)
  - subscription.cancelled (subscription cancelled)
  - subscription.expired  (subscription expired)
Secret: (auto-generated, copy to .env.local)

Click Save
Copy the generated Webhook Secret to .env.local:

CREEM_WEBHOOK_SECRET='whsec_xxx'

Step 3: Verify Webhook (Optional)

Creem sends a test webhook to verify your server can receive it:

# Check local development server logs
pnpm dev

# Or use ngrok to expose local port for testing
ngrok http 3000

Update Code Configuration

Step 1: Update Product IDs

Open src/config/pricing-user.ts and replace all prod_xxx placeholders with the actual Product IDs from Creem:

export const SUBSCRIPTION_PRODUCTS = [
  {
    id: "prod_YOUR_BASIC_MONTHLY_ID", // Replace with actual ID
    name: "Basic Plan",
    priceUsd: 9.9,
    credits: 280,
    period: "month" as const,
    popular: false,
    enabled: true,
  },
  {
    id: "prod_YOUR_PRO_MONTHLY_ID", // Replace with actual ID
    name: "Pro Plan",
    priceUsd: 29.9,
    credits: 960,
    period: "month" as const,
    popular: true,
    enabled: true,
  },
  // ... other products
];

Step 2: Verify Configuration

# Start development server
pnpm dev

# Visit pricing page
open http://localhost:3000/pricing

Verify:

All 9 products are displayed on the page
Prices display correctly ($9.90, $29.90, etc.)
Credit amounts display correctly
"Popular" tags appear on the correct products

Testing the Payment Flow

1. Test Environment Configuration

Creem provides test keys for simulating payments:

# .env.local
CREEM_API_KEY='creem_test_xxx'
CREEM_WEBHOOK_SECRET='whsec_test_xxx'

2. Test One-Time Purchase

Visit the pricing page at http://localhost:3000/pricing
Click the One-time credit packs tab
Click the purchase button on Starter Pack
Use the Creem test card to complete payment
After success, redirect to /my-creations?payment=success
Check that user credits increased

Test card details (Creem test environment):

Card Number: 4242 4242 4242 4242
Expiry: Any future date (e.g., 12/34)
CVC: Any 3 digits (e.g., 123)

3. Test Subscription Purchase

Switch to the Monthly subscription tab
Click the subscribe button on Pro Plan
Complete payment
Verify user subscription status, credits, and subscription management button

4. Test Webhook

Use Creem Dashboard's webhook testing feature:

Go to Webhooks and select your webhook
Click Send test webhook
Select event type: checkout.completed
Check your server logs to confirm receipt

5. Verify Credit System

pnpm script:check-credits [email protected]

Troubleshooting

Product ID Not Found

Cause: Product not created or ID copied incorrectly.

Fix:

Log in to Creem Dashboard
Go to Products and find the product
Copy the Product ID (format: prod_xxx)
Paste into pricing-user.ts without extra spaces

Webhook Not Working

Checklist:

NEXT_PUBLIC_APP_URL is correct (no trailing slash)
Webhook URL is https://yourdomain.com/api/auth/creem/webhook
Webhook Secret is correctly copied to .env.local
Server is accessible from the internet (use ngrok for development)

Payment Succeeded But Credits Not Added

Cause: Webhook not processed correctly.

Debug steps:

Check server logs for Creem-related entries
Query the credit_transactions table in your database
Query the creem_subscriptions table

How to Disable a Product

Set enabled to false in pricing-user.ts:

{
  id: "prod_xxx",
  name: "Basic Plan",
  enabled: false, // Disabled
  // ...
}

How to Change Prices

Important: Do not modify existing products directly. The correct process is:

Create a new product (v2) in Creem dashboard
Update the Product ID in pricing-user.ts
New users will use the new product
Existing subscribers continue on the old product until their subscription ends

Production Checklist

Before deploying to production, complete the following:

Environment Variables

NEXT_PUBLIC_APP_URL set to production domain
CREEM_API_KEY using production key (creem_live_xxx)
CREEM_WEBHOOK_SECRET using production secret

Product Configuration

All 9 product IDs filled in
Product prices match pricing-user.ts
Credit amounts configured correctly

Webhook

Webhook URL uses production domain
Webhook secret updated
Test webhook sent successfully

Functional Testing

One-time credit pack purchase works
Monthly subscription purchase works
Yearly subscription purchase works
Credits appear after successful payment
Subscription management page accessible

Security

.env.local is in .gitignore
No API keys hardcoded in source code
Webhook secret verification configured