Creem

TanStarter uses Creem for payment processing, supporting both one-time payments and subscriptions. Creem is a Merchant of Record (MoR) payment platform designed for indie developers, with built-in global tax compliance across 190+ countries — no need to handle VAT/GST/sales tax yourself.

Setup

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

# Payment provider
VITE_PAYMENT_PROVIDER=creem

CREEM_API_KEY=creem_test_...
CREEM_WEBHOOK_SECRET=...

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

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

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,
      },
    },
  },
},

Core Features

• One-time payment for lifetime membership
• Recurring subscription payments (monthly/yearly)
• Free trial period support
• Built-in global tax compliance (automatic VAT/GST/sales tax across 190+ countries)
• Subscription management with customer portal integration
• Webhook handling for payment events
• Subscription status tracking and verification
• Built-in pricing components (table, card, button)
• Server-side actions for secure payment operations
• Multiple pricing plan support (free, pro, lifetime)
• Built-in affiliate program and revenue sharing
• Automatic license key generation and distribution

Development

For local development, you need to use ngrok or a similar tool to expose your local server to the internet so Creem can send webhook events:

ngrok http 3000

Then add the ngrok HTTPS URL as the Webhook URL in the Creem Dashboard:

• Go to Creem Dashboard > Developers > Webhooks
• Add Webhook URL: https://YOUR-NGROK-URL/api/webhooks/creem

Finally, you can make payment operations on the website to test whether the event processing flow works as expected.

Production

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

Webhook Events

Creem supports the following webhook events:

Webhook Signature Verification

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

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

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;
}

Webhook Retry Mechanism

If a webhook delivery fails, Creem automatically retries with the following intervals:

• First retry after 30 seconds
• Second retry after 1 minute
• Third retry after 5 minutes
• Fourth retry after 1 hour

You can also manually resend events from the Developers section in the Creem Dashboard.

Customer Portal

After every successful payment, your customers will receive an email with a link to their Customer Portal. The 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 and test credit cards:

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

Creem vs Stripe

Best Practices

1. Protect API keys: Never expose your Creem API key in client-side code
2. Validate webhook signatures: Always verify the creem-signature of webhook events
3. Use subscription.paid event: Use this event to activate user access, not subscription.active
4. Handle errors gracefully: Provide user-friendly error messages when payments fail
5. Test webhooks thoroughly: Ensure all webhook events are handled correctly

References

• Creem Documentation
• Creem API Reference
• Creem Webhooks Guide