LogoTanStarter 文档
LogoTanStarter 文档
首页模板介绍代码库快速开始环境配置部署网站
网站配置

功能集成

Cloudflare数据库存储身份验证邮件
支付
StripeCreem
AI邮件订阅通知分析聊天框联盟营销

功能定制

元数据页面落地页博客组件用户管理密钥管理

代码库

项目结构代码检查编辑器设置更新代码库

产品示例

MkImage
X (Twitter)

支付

学习如何在 TanStarter 中设置和使用支付

TanStarter 支持多种支付提供商,您可以根据需要选择合适的支付方案。

支付提供商

Stripe

全球最流行的支付平台,支持一次性支付和订阅

Creem

面向独立开发者的支付平台,内置税务合规和订阅管理

自定义支付提供商

TanStarter 支持扩展新的支付提供商:

  1. 在 src/payment/provider 目录中创建新的文件
  2. 从 types.ts 实现 PaymentProvider 接口
  3. 在 index.ts 中的 providerRegistry 注册新的提供商

新的支付服务提供商的示例实现:

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

然后在 index.ts 中的 providerRegistry 注册新的提供商:

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(),
};

邮件

学习如何使用 Resend 或 Cloudflare Email Service 和 React Email 模板设置和使用邮件功能

Stripe

如何设置和使用 Stripe 处理支付和订阅

目录

支付提供商
自定义支付提供商