Creem

Create Creem Account

Create a Creem account at creem.io. No credit card required to sign up.

Get API Keys

Get your API keys from the Creem Dashboard:

• Go to Creem Dashboard > Developers > API & Webhooks, create a new API Key
• Copy the API key (Note: test mode starts with creem_test_, production mode starts with creem_live_)
• Save it to your environment file as CREEM_API_KEY

Set Up Webhook

Set up Webhook and get your Webhook secret:

• Go to Creem Dashboard > Developers > API & Webhooks, create a new Webhook
• Add Webhook URL: https://YOUR-DOMAIN.com/api/webhooks/creem
• Creem automatically listens for all payment and subscription related events, including:
  • checkout.completed
  • subscription.active
  • subscription.paid
  • subscription.update
  • subscription.canceled
  • subscription.scheduled_cancel
  • subscription.expired
  • subscription.past_due
  • subscription.unpaid
  • subscription.paused
  • subscription.trialing
• Copy the Webhook signing secret
• Save it to your environment file as CREEM_WEBHOOK_SECRET

Create Products and Pricing Plans

Create products in Creem and set up pricing plans:

• Go to Creem Dashboard > Commerce > Products
• Create the Pro subscription plan product:
  • Click to create a product
  • Name: Pro Plan
  • Description: Premium features with subscription pricing
  • Add monthly subscription price:
    • Price: $9.90 (currency: USD)
    • Billing type: recurring
    • Billing period: every-month
    • Save and copy the Product ID (starts with prod_), this will be used for VITE_CREEM_PRODUCT_PRO_MONTHLY
  • Copy the monthly subscription product, then add yearly subscription price:
    • Price: $99.00 (currency: USD)
    • Billing type: recurring
    • Billing period: every-year
    • Save and copy the Product ID (starts with prod_), this will be used for VITE_CREEM_PRODUCT_PRO_YEARLY
• Create the Lifetime plan product:
  • Click to create a product
  • Name: Lifetime Plan
  • Description: One-time payment for lifetime access
  • Add price:
    • Price: $199.00 (currency: USD)
    • Billing type: one_time
    • Save and copy the Product ID (starts with prod_), this will be used for VITE_CREEM_PRODUCT_LIFETIME

Configure Environment Variables

Add the following environment variables:

# Payment provider
VITE_PAYMENT_PROVIDER=creem

# Set to 'true' to use Creem test API, omit or set to 'false' for production
# CREEM_DEBUG=true

# API Key and Webhook Secret
CREEM_API_KEY=creem_test_...
CREEM_WEBHOOK_SECRET=...

# Product IDs
VITE_CREEM_PRODUCT_PRO_MONTHLY=prod_...
VITE_CREEM_PRODUCT_PRO_YEARLY=prod_...
VITE_CREEM_PRODUCT_LIFETIME=prod_...

Update Payment Configuration

Pricing plans — amounts, currencies, intervals, promotion codes, and plan metadata — are now defined in src/config/payment.ts instead of src/config/website.ts. The enable, provider, and priceId fields are automatically resolved from your environment variables (VITE_PAYMENT_PROVIDER and VITE_CREEM_PRODUCT_*), so you don't need to hardcode them. Creem ignores allowPromotionCode.

You must configure this section to match the products you created in Creem:

export function createPaymentConfig(env, locale?) {
  const provider = paymentProviderSchema.parse(env.VITE_PAYMENT_PROVIDER); // ← 'creem'
  const providerPriceIds = {
    creem: {
      proMonthly: env.VITE_CREEM_PRODUCT_PRO_MONTHLY,
      proYearly: env.VITE_CREEM_PRODUCT_PRO_YEARLY,
      lifetime: env.VITE_CREEM_PRODUCT_LIFETIME,
    },
    // ...other providers
  };
  const priceIds = provider ? providerPriceIds[provider] : undefined;

  return {
    enable: provider !== '',
    provider: provider || undefined,
    price: {
      plans: {
        free: {
          id: 'free',
          prices: [],
          isFree: true,
          isLifetime: false,
        },
        pro: {
          id: 'pro',
          prices: [
            {
              type: 'subscription',
              priceId: priceIds?.proMonthly ?? '', // ← auto: from VITE_CREEM_PRODUCT_PRO_MONTHLY
              amount: 990,                         // amount in cents ($9.90)
              currency: 'USD',
              interval: 'month',
              allowPromotionCode: true,
            },
            {
              type: 'subscription',
              priceId: priceIds?.proYearly ?? '',  // ← auto: from VITE_CREEM_PRODUCT_PRO_YEARLY
              amount: 9900,                        // amount in cents ($99.00)
              currency: 'USD',
              interval: 'year',
              allowPromotionCode: true,
            },
          ],
          isFree: false,
          isLifetime: false,
          popular: true,
        },
        lifetime: {
          id: 'lifetime',
          prices: [
            {
              type: 'one_time',
              priceId: priceIds?.lifetime ?? '',   // ← auto: from VITE_CREEM_PRODUCT_LIFETIME
              amount: 19900,                       // amount in cents ($199.00)
              currency: 'USD',
              allowPromotionCode: true,
            },
          ],
          isFree: false,
          isLifetime: true,
        },
      },
    },
  } satisfies PaymentConfig;
}