Creem (Payment)

This guide walks through adding Polar payments with Better Auth in a TanStack Start project, covering environment setup, webhooks, product creation, and a complete payment flow.

1. Set your environment variables

CREEM_API_KEY=
CREEM_WEBHOOK_SECRET=

2. Set webhook to creem

3. Configure the Subscriptions

Create your products and tiers inside the Creem dashboard. This produces the unique product ids needed for your subscription flow.

Copy these ids into your project config file to link your subscription logic with Creem.

// src/features/payments/creem/data.ts
export const subscriptionPlans = [
    {
        slug: "starter-monthly",
        productId: "xxxxxxxx-...",
        name: "Starter",
        //...
    },
    //...
];

4. Pricing Component

The pricing component presents your available plans and guides the visitor through the full subscription flow based on the values you placed in your subscription settings.

import { Pricing } from "@/components/payments/creem/Pricing";

<Pricing />;