Creem

MkSaaS supports Creem for payment processing, supporting both one-time payments and subscriptions.

Setup

MkSaaS template provides three pricing plans by default: a free plan, a pro subscription plan (monthly/yearly), and a lifetime plan (one-time payment). Follow these steps to set up:

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.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:

.env

# 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 the payment section in src/config/website.ts to configure pricing plans — amounts, currencies, intervals, and plan metadata. 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.

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

src/config/website.ts

payment: {
  enable: isPaymentEnabled,              // ← auto: true when VITE_PAYMENT_PROVIDER is set
  provider: isPaymentEnabled ? paymentProvider : undefined, // ← auto: 'creem'
  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',
          },
          {
            type: 'subscription',
            priceId: priceIds.proYearly,   // ← auto: from VITE_CREEM_PRODUCT_PRO_YEARLY
            amount: 9900,                  // amount in cents ($99.00)
            currency: 'USD',
            interval: 'year',
          },
        ],
        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,
      },
    },
  },
},

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Environment Configuration

Set up environment variables

Development Environment

For local development, we recommend using hostc to expose your local server to the internet so Creem can send webhook events:

npx hostc

hostc will generate a temporary domain for you (e.g., https://xxxx.hostc.dev). Since Creem needs to communicate with your local server via webhooks, you need to update the temporary domain in the following three places:

Update .env Environment Variables

Edit your .env file and add or update the following variable:

.env

# Add the temporary domain to environment variables
APP_URL=https://xxxx.hostc.dev

Update Google OAuth Credentials

If your application uses Google OAuth login, you need to update the authorized redirect URIs in the Google Cloud Console:

Go to APIs & Services > Credentials
Edit your OAuth client
Add https://xxxx.hostc.dev to Authorized JavaScript origins
Add https://xxxx.hostc.dev/api/auth/callback/google to Authorized redirect URIs

Update Creem Webhook URL

Set the Creem Dashboard webhook URL to the temporary domain:

Go to Creem Dashboard > Developers > API & Webhooks
Add Webhook URL: https://xxxx.hostc.dev/api/webhooks/creem

After completing the above configuration, you can make payment operations on the website to test whether the event processing flow works as expected.

Demo video: https://cdn.mksaas.com/mksaas/video/mksaas-creem-payment.mp4

Creem provides a full test environment. When using API keys starting with creem_test_, all operations run in a sandbox and no real transactions are made.

Production Environment

Go to Creem Dashboard > Developers > API & Webhooks
Add the production Webhook URL: https://YOUR-DOMAIN.com/api/webhooks/creem
Switch the API key from test key (creem_test_) to production key (creem_live_)
Make sure your environment variables are updated with production keys and product IDs

Webhook Events

Creem supports the following webhook events:

Event	Description
`checkout.completed`	Checkout session completed
`subscription.active`	New subscription created (for sync only)
`subscription.paid`	Subscription payment successful (use to activate access)
`subscription.update`	Subscription updated (plan change, period renewal)
`subscription.canceled`	Subscription canceled
`subscription.scheduled_cancel`	Subscription marked to cancel at end of billing period
`subscription.past_due`	Payment failed, subscription awaiting retry
`subscription.expired`	Billing period ended without payment
`subscription.trialing`	Subscription entered trial period
`subscription.paused`	Subscription paused

Creem recommends using the subscription.paid event to activate user access, rather than subscription.active. subscription.active is only for data synchronization.

Webhook Signature Verification

Creem uses the HMAC-SHA256 algorithm to sign webhook requests. The signature is sent via the creem-signature request header.

MkSaaS uses Web Crypto API for signature verification (compatible with Cloudflare Workers):

src/payment/provider/creem.ts

async function verifySignature(payload: string, signature: string, secret: string): Promise<boolean> {
  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    'raw',
    encoder.encode(secret),
    { name: 'HMAC', hash: 'SHA-256' },
    false,
    ['sign']
  );

  const signatureBuffer = await crypto.subtle.sign('HMAC', key, encoder.encode(payload));
  const computed = Array.from(new Uint8Array(signatureBuffer))
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('');

  return computed === signature;
}

Customer Portal

After every successful payment, your customers will receive an email with a link to their Customer Portal. The Customer Portal allows them to:

View subscription details
Manage subscriptions (upgrade, pause, cancel)
View payment history
Update payment methods

Test Cards

To test Creem integration, use Creem's test mode with test credit cards:

4242 4242 4242 4242 - Successful payment
4000 0000 0000 0002 - Payment failure

When using test mode (API keys starting with creem_test_), all transactions run in a sandbox environment with no real charges.

Best Practices

Protect API keys: Never expose your Creem API key in client-side code
Validate webhook signatures: Always verify the creem-signature of webhook events
Handle errors gracefully: Provide user-friendly error messages when payments fail
Test webhooks thoroughly: Make sure all webhook events are handled correctly

References

MkSaaS supports Creem for payment processing, supporting both one-time payments and subscriptions.

Setup

MkSaaS template provides three pricing plans by default: a free plan, a pro subscription plan (monthly/yearly), and a lifetime plan (one-time payment). Follow these steps to set up:

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.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:

.env

# 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 Website Configuration

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

src/config/website.ts

payment: {
  enable: isPaymentEnabled,              // ← auto: true when VITE_PAYMENT_PROVIDER is set
  provider: isPaymentEnabled ? paymentProvider : undefined, // ← auto: 'creem'
  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',
          },
          {
            type: 'subscription',
            priceId: priceIds.proYearly,   // ← auto: from VITE_CREEM_PRODUCT_PRO_YEARLY
            amount: 9900,                  // amount in cents ($99.00)
            currency: 'USD',
            interval: 'year',
          },
        ],
        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,
      },
    },
  },
},

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Environment Configuration

Set up environment variables

Development Environment

For local development, we recommend using hostc to expose your local server to the internet so Creem can send webhook events:

npx hostc

Update .env Environment Variables

Edit your .env file and add or update the following variable:

.env

# Add the temporary domain to environment variables
APP_URL=https://xxxx.hostc.dev

Update Google OAuth Credentials

If your application uses Google OAuth login, you need to update the authorized redirect URIs in the Google Cloud Console:

Go to APIs & Services > Credentials
Edit your OAuth client
Add https://xxxx.hostc.dev to Authorized JavaScript origins
Add https://xxxx.hostc.dev/api/auth/callback/google to Authorized redirect URIs

Update Creem Webhook URL

Set the Creem Dashboard webhook URL to the temporary domain:

Go to Creem Dashboard > Developers > API & Webhooks
Add Webhook URL: https://xxxx.hostc.dev/api/webhooks/creem

After completing the above configuration, you can make payment operations on the website to test whether the event processing flow works as expected.

Demo video: https://cdn.mksaas.com/mksaas/video/mksaas-creem-payment.mp4

Creem provides a full test environment. When using API keys starting with creem_test_, all operations run in a sandbox and no real transactions are made.

Production Environment

Go to Creem Dashboard > Developers > API & Webhooks
Add the production Webhook URL: https://YOUR-DOMAIN.com/api/webhooks/creem
Switch the API key from test key (creem_test_) to production key (creem_live_)
Make sure your environment variables are updated with production keys and product IDs

Webhook Events

Creem supports the following webhook events:

Event	Description
`checkout.completed`	Checkout session completed
`subscription.active`	New subscription created (for sync only)
`subscription.paid`	Subscription payment successful (use to activate access)
`subscription.update`	Subscription updated (plan change, period renewal)
`subscription.canceled`	Subscription canceled
`subscription.scheduled_cancel`	Subscription marked to cancel at end of billing period
`subscription.past_due`	Payment failed, subscription awaiting retry
`subscription.expired`	Billing period ended without payment
`subscription.trialing`	Subscription entered trial period
`subscription.paused`	Subscription paused

Creem recommends using the subscription.paid event to activate user access, rather than subscription.active. subscription.active is only for data synchronization.

Webhook Signature Verification

Creem uses the HMAC-SHA256 algorithm to sign webhook requests. The signature is sent via the creem-signature request header.

MkSaaS uses Web Crypto API for signature verification (compatible with Cloudflare Workers):

src/payment/provider/creem.ts

async function verifySignature(payload: string, signature: string, secret: string): Promise<boolean> {
  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    'raw',
    encoder.encode(secret),
    { name: 'HMAC', hash: 'SHA-256' },
    false,
    ['sign']
  );

  const signatureBuffer = await crypto.subtle.sign('HMAC', key, encoder.encode(payload));
  const computed = Array.from(new Uint8Array(signatureBuffer))
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('');

  return computed === signature;
}

Customer Portal

After every successful payment, your customers will receive an email with a link to their Customer Portal. The Customer Portal allows them to:

View subscription details
Manage subscriptions (upgrade, pause, cancel)
View payment history
Update payment methods

Test Cards

To test Creem integration, use Creem's test mode with test credit cards:

4242 4242 4242 4242 - Successful payment
4000 0000 0000 0002 - Payment failure

When using test mode (API keys starting with creem_test_), all transactions run in a sandbox environment with no real charges.

Best Practices

Protect API keys: Never expose your Creem API key in client-side code
Validate webhook signatures: Always verify the creem-signature of webhook events
Handle errors gracefully: Provide user-friendly error messages when payments fail
Test webhooks thoroughly: Make sure all webhook events are handled correctly

Environment Configuration

Table of Contents

Creem

Environment Configuration

Table of Contents