PaceUI

Blocks
MCPComponentsTemplatesChartsStarter
Docs
IntroductionInstallationChangelog
Starter
OverviewGetting StartedFolder StructureAIAuth BasicAuth OAuthDatabaseDocumentationEmail ResendPayment CreemPayment PolarStorage

Build faster with Pro

Unlock all premium blocks, templates, and support future updates.

Get Full Access

Polar (Payment)

PreviousNext

Configure and use the Polar payment system.

Learn how to integrate Polar payments with Better Auth in a TanStack Start project. The guide covers environment setup, webhook configuration, product creation, and full payment flow integration.

1. Set your environment variables

POLAR_ACCESS_TOKEN=
POLAR_WEBHOOK_SECRET=

2. Set webhook to polar

Register the full route from your project inside the Webhooks area of the Polar dashboard.
Store the Polar webhook secret inside your environment values.

3. Configure the Subscriptions

Create your products and tiers inside the Polar 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 Polar.

// src/features/payments/polar/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/polar/Pricing";

<Pricing />;

PaceUI

The ultimate toolkit empowering your designers and developers to launch their next big idea without ever settling on quality

Pages

ComponentsBlocksMCPTemplatesStarter

Account

ManageLicensesPricing

Support

AffiliateContact UsPrivacy PolicyTerms of ServiceDocs

© 2026 PaceUI. All rights reserved. Built by indie developer, Denish

PACEUI