LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironmentsDeployment
Configuration

Integrations

CloudflareDatabaseStorageAuthenticationEmail
Payment
AINewsletterNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase

Showcases

MkImage
X (Twitter)

Payment

Learn how to set up and use payment in TanStarter

TanStarter supports multiple payment providers, allowing you to choose the best payment solution for your needs.

Payment Providers

Stripe

The most popular global payment platform, supporting one-time payments and subscriptions

Creem

Payment platform for indie developers with built-in tax compliance and subscription management

Custom Payment Provider

TanStarter supports extending with new payment providers:

  1. Create a new file in the src/payment/provider directory
  2. Implement the PaymentProvider interface from types.ts
  3. Register the new provider in the providerRegistry in index.ts

Example implementation for a new payment provider:

src/payment/provider/my-provider.ts
import type {
  PaymentProvider,
  CreateCheckoutParams,
  CheckoutResult,
  CreatePortalParams,
  PortalResult,
} from '../types';

export class MyProvider implements PaymentProvider {
  getProviderName(): string {
    return 'my-provider';
  }

  public async createCheckout(params: CreateCheckoutParams): Promise<CheckoutResult> {
    // Create checkout session implementation
  }

  public async createCustomerPortal(params: CreatePortalParams): Promise<PortalResult> {
    // Create customer portal implementation
  }

  public async handleWebhookEvent(payload: string, signature: string): Promise<void> {
    // Handle webhook events implementation
  }
}

Then register the new provider in the providerRegistry in index.ts:

src/payment/index.ts
import { MyProvider } from './provider/my-provider';

const providerRegistry: Record<PaymentProviderName, ProviderFactory> = {
  stripe: () => new StripeProvider(),
  creem: () => new CreemProvider(),
  'my-provider': () => new MyProvider(),
};

Table of Contents

Payment Providers
Custom Payment Provider