Payment (Creem)

The guide walks you through the process of adding Polar payments with Better Auth in a TanStack Start project. You will set up the required environment values, connect your webhook, create your products, and connect everything to your project so your payment flow works from end to end.

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