# @fanbasis/checkout-core 中文文档

规范地址：https://npmcn.com/package/%40fanbasis/checkout-core/

版本：0\.6\.0
npm 元数据更新时间：2026-10-09T14:45:29.134Z
中文译文更新时间：2026-11-14T09:41:30.833Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fanbasis/checkout-core
原文对照：https://npmcn.com/package/%40fanbasis/checkout-core/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：472 kB，32 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：typescript \>=5\.0\.0
- 首次发布：2025-10-15T20:50:07.829Z
- 最新版本发布：2026-10-09T14:45:28.940Z
- 近 30 天下载量：10620（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 7 个）

## 中文简介

Fanbasis SDK 的核心支付结账功能

## 安装

```sh
npm install @fanbasis/checkout-core
```

也可以使用：`pnpm add @fanbasis/checkout-core`、`yarn add @fanbasis/checkout-core`、`bun add @fanbasis/checkout-core`

## README

# @ fanbasis/ 检查出- 核心

Fanbasis SDK的核心支付取出功能. 这个软件包提供了基础JavaScript库,用于将FanBasis的取出整合到任何网络应用程序.

## QQ 快速启动

### 安装

```bash
npm install @fanbasis/checkout-core
```

### 基本用途

```javascript
import { PaymentCheckout } from '@fanbasis/checkout-core';

const checkout = PaymentCheckout.create({
  creatorId: 'your-creator-id',
  productId: 'your-product-id',
  checkoutSessionSecret: 'your-session-secret',
  environment: 'sandbox'
});

// Attach to DOM element and initialize
const container = document.getElementById('checkout-container');
checkout.attachToElement(container);
await checkout.init();
```

## 软件包内容

### 核心出口

-   **`PaymentCheckout`** - 用于创建和管理离职情况的主要离职类别
-   **`EventEmitter`** - 处理检查周期事件的事件系统
-   **类型定义** - 完整的类型脚本支持

### 嵌入导出

-   **`/embed`** - CDN集成的主机JavaScript解决方案
-   **全球API** - 说吧 `window.PaymentCheckout` 浏览器环境
-   **属性解析** - 从 HTML 数据属性自动配置

## 关键特性

-   **框架不可知论** - 与JavaScript框架或香草JS合作
-   **类型脚本支持** - 包括全部类型定义
-   **事件系统** - 全面处理离职生命周期事件
-   **主题自定义** - 广泛的样式和布局选择
-   **多种融合方法** - 配置对象、流利构建器、数据属性
-   **托管解决方案** - CDN已准备好用于快速整合的嵌入脚本
-   **生产准备** - 内设错误处理、验证和安全功能

## QQ 配置

### 所需参数

```typescript
interface CheckoutConfig {
  creatorId: string;              // Your creator identifier
  productId: string;              // The product to sell
  checkoutSessionSecret: string;  // Session secret for security
  environment: 'sandbox' | 'production';
}
```

### 可选参数

```typescript
interface CheckoutConfig {
  // Additional products to offer
  bumpProductIds?: string[];
  
  // Pre-applied coupon and affiliate tracking
  couponCode?: string;
  affiliateCode?: string;
  
  // Custom API endpoint
  overrideBaseUrl?: string;
  
  // Theme customization
  theme?: CustomizationParams;
  
  // Container styling
  containerOptions?: {
    width?: string;
    height?: string;
  };
  
  // Redirect behavior
  redirectSettings?: RedirectSettings;
  
  // Submit button control
  showSubmitButton?: boolean;
}
```

## 综合方法

### 1\. 配置对象

```javascript
const checkout = PaymentCheckout.create({
  creatorId: 'creator_123',
  productId: 'product_456',
  checkoutSessionSecret: 'secret_789',
  environment: 'sandbox'
});
```

### 2\. 流利建设者

```javascript
const checkout = PaymentCheckout.create()
  .creatorId('creator_123')
  .productId('product_456')
  .checkoutSessionSecret('secret_789')
  .environment('sandbox')
  .theme({
    theme: 'dark',
    accent_color: '#ff6b6b'
  })
  .build();
```

### 3\. 数据属性(Embed)

```html
<div data-checkout
     data-creator-id="creator_123"
     data-product-id="product_456"
     data-checkout-session-secret="secret_789"
     data-environment="sandbox">
</div>
```

## 事件处理

```javascript
checkout.on('checkout:opened', () => {
  console.log('Checkout opened');
});

checkout.on('checkout:success', (data) => {
  console.log('Payment successful:', data.transactionId);
});

checkout.on('checkout:error', (error) => {
  console.error('Payment failed:', error.message);
});
```

## QQ 主机JavaScript

对于没有构建进程的快速集成,请使用主机JavaScript:

```html
<script src="https://cdn.embedded.fanbasis.io/embed/index.js"></script>
<script>
  PaymentCheckout.create({
    creatorId: 'creator_123',
    productId: 'product_456',
    checkoutSessionSecret: 'secret_789',
    environment: 'sandbox'
  }).attachTo(document.getElementById('checkout-container'));
</script>
```

## 页:1

-   **[完整文档](https://demo.embedded.fanbasis.io/docs)** - 综合指南和API参考
-   **[托管的 JavaScript 快速启动](https://demo.embedded.fanbasis.io/docs/hosted-javascript)** - CDN一体化指南
-   **[JavaScript 库指南](https://demo.embedded.fanbasis.io/docs/javascript-sdk)** - 详细的API文档
-   **[移徙指南](https://npmcn.com/package/%40fanbasis/checkout-core/docs/migration-guide.md)** - 从旧版本升级

## 测试

```bash
# Run unit tests
npm test

# Run tests in watch mode
npm run test:watch

# Run integration tests
npm run test:e2e

# Run with coverage
npm run test:coverage
```

## QQ 构建

```bash
# Development build
npm run build

# Production build
npm run build:prod

# CDN build
npm run build:cdn
```

## ++ Bundle 分析

```bash
# Analyze bundle size
npm run analyze

# Check size limits
npm run size
```

## 许可证

这个包裹是"FanBasis Pays SDK"的一部分. 许可证信息参见主要项目.

## ++ 辅助

-   **文档**数字 : [文件:fanbasis.com](https://docs.fanbasis.com/)
-   **问题**数字 : [GitHub 问题](https://github.com/fanbasis/payments-sdk/issues)
-   **支助**数字 : [支持@ fanbasis.com](mailto:support@fanbasis.com)

* * *

**大小**:~50KB(弹出)  
**依赖关系**编辑器3  
**浏览器支持**: 有ES2020+支持的现代浏览器

## 常见问题

### @fanbasis/checkout-core 是什么？

Fanbasis SDK 的核心支付结账功能

### 如何安装 @fanbasis/checkout-core？

在项目目录运行 npm install @fanbasis/checkout-core，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：typescript（\>=5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fanbasis/checkout-core 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fanbasis/checkout-core 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fanbasis/checkout-core 可以商用吗？

@fanbasis/checkout-core 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @fanbasis/checkout-core 的下载量有多少？

根据 npm 官方下载统计，@fanbasis/checkout-core 在 2026/10/14 – 2026/11/12 这 30 天内被下载 10,620 次，日均约 354 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fanbasis/checkout-core 还在维护吗？

最新版本 0\.6\.0 发布于 2026/10/09（1 个月前）；至今共发布 8 个版本，其中过去 12 个月发布了 7 个；首次发布于 2025/10/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。