@ fanbasis/ 检查出- 核心
Fanbasis SDK的核心支付取出功能. 这个软件包提供了基础JavaScript库,用于将FanBasis的取出整合到任何网络应用程序.
QQ 快速启动
安装
npm install @fanbasis/checkout-core
基本用途
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 配置
所需参数
interface CheckoutConfig {
creatorId: string; // Your creator identifier
productId: string; // The product to sell
checkoutSessionSecret: string; // Session secret for security
environment: 'sandbox' | 'production';
}
可选参数
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. 配置对象
const checkout = PaymentCheckout.create({
creatorId: 'creator_123',
productId: 'product_456',
checkoutSessionSecret: 'secret_789',
environment: 'sandbox'
});
2. 流利建设者
const checkout = PaymentCheckout.create()
.creatorId('creator_123')
.productId('product_456')
.checkoutSessionSecret('secret_789')
.environment('sandbox')
.theme({
theme: 'dark',
accent_color: '#ff6b6b'
})
.build();
3. 数据属性(Embed)
<div data-checkout
data-creator-id="creator_123"
data-product-id="product_456"
data-checkout-session-secret="secret_789"
data-environment="sandbox">
</div>
事件处理
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:
<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
- 完整文档 - 综合指南和API参考
- 托管的 JavaScript 快速启动 - CDN一体化指南
- JavaScript 库指南 - 详细的API文档
- 移徙指南 - 从旧版本升级
测试
# 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 构建
# Development build
npm run build
# Production build
npm run build:prod
# CDN build
npm run build:cdn
++ Bundle 分析
# Analyze bundle size
npm run analyze
# Check size limits
npm run size
许可证
这个包裹是"FanBasis Pays SDK"的一部分. 许可证信息参见主要项目.
++ 辅助
- 文档数字 : 文件:fanbasis.com
- 问题数字 : GitHub 问题
- 支助数字 : 支持@ fanbasis.com
大小:~50KB(弹出)
依赖关系编辑器3
浏览器支持: 有ES2020+支持的现代浏览器