Used to check for browser translation.
用于检测浏览器翻译。
ブラウザの翻訳を検出する

能力介绍

@blocklet/payment-react 是一个为 Blocklet 应用设计的 React 支付组件库，集成支付基础设施，支持支付流程、订阅管理和打赏系统。

以下是所有组件和能力的分类归集，方便开发者快速定位。

1. 上下文与状态管理#

提供支付相关的上下文和钩子。

PaymentProvider#

支付上下文提供者： 如果要使用Payment Kit 服务，必须提供 PaymentProvider。

import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';

function App() {
return (
<PaymentProvider session={session} connect={connectApi}>
<CheckoutForm id="plink_xxx" />
</PaymentProvider>
);
}

DonateProvider#

打赏配置上下文： 如果要集成 Payment Kit 打赏配置管理， 必须提供 DonateProvider。

import { PaymentProvider, DonateProvider, CheckoutDonate } from '@blocklet/payment-react';

function DonatePage() {
return (
<PaymentProvider session={session} connect={connectApi}>
<DonateProvider mountLocation="xx-blocklet-donate" descriprion="xx blocklet donate config">
<CheckoutDonate ...donateProps />
</DonateProvider>
</PaymentProvider>
);
}

PaymentThemeProvider#

Payment KIt 样式主题

import { PaymentThemeProvider, CheckoutForm } from '@blocklet/payment-react';

function ThemedApp() {
return (
<PaymentThemeProvider>
...
</PaymentThemeProvider>
);
}

useSubscription#

订阅事件监听。

const subscription = useSubscription('events');

useEffect(() => {
if (subscription && customer_id) {
subscription.on('invoice.paid', ({ response }: { response: TInvoiceExpanded }) => {
if (response.customer_id === customer_id) {
handleInvoicePaid();
}
});
}
}, [subscription]);

useMobile#

检测是否为移动设备。

const isMobile = useMobile(mobilePoint?: 'md' | 'sm' | 'lg' | 'xl' | 'xs')


2. 支付流程组件#

用于实现支付、打赏和定价展示的核心功能。

CheckoutForm#

支付表单，支持内嵌或弹窗模式，适用于支付链接或会话

import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';
function Payment() {
return (
<PaymentProvider session={session} connect={connectApi}>
<CheckoutForm id="plink_xxx" mode="inline" onChange={(state) => console.log(state)} />
</PaymentProvider>
);
}

CheckoutTable#

展示产品定价的表格

import { PaymentProvider, CheckoutTable } from '@blocklet/payment-react';

function Pricing() {
return (
<PaymentProvider session={session} connect={connectApi}>
<CheckoutTable id="prctbl_xxx" />
</PaymentProvider>
);
}

CheckoutDonate#

打赏控件，支持自定义金额和受益人。快速开启 ->

import { PaymentProvider, DonateProvider, CheckoutDonate } from '@blocklet/payment-react';

function DonationButton() {
return (
<PaymentProvider session={session} connect={connectApi}>
<DonateProvider
mountLocation="your-unique-donate-instance" // 必填，打赏实例的挂载位置标识符
description="帮助定位此打赏实例" // 可选，描述挂载位置的作用
>
<CheckoutDonate
settings={{
target: "post-123", // 必填，打赏实例的唯一标识符
title: "支持作者", // 必填，打赏弹窗标题
description: "如果这篇文章对你有帮助，不妨请我喝杯咖啡", // 必填，打赏描述
reference: "https://your-site.com/posts/123", // 必填，打赏参考链接
beneficiaries: [
{
address: "tip user did", // 必填，受益人地址（替换为实际 DID）
share: "100", // 必填，分享百分比
},
],
}}
/>
</DonateProvider>
</PaymentProvider>
);
}

export default DonationButton;

OverdueInvoicePayment#

处理订阅中的逾期账单

import { PaymentProvider, OverdueInvoicePayment } from '@blocklet/payment-react';

function Invoice() {
return (
<PaymentProvider session={session} connect={connectApi}>
<OverdueInvoicePayment subscriptionId="sub_xxx" onPaid={() => console.log("已支付")} />
</PaymentProvider>
);
}


3. 历史记录组件#

展示支付和账单历史。

CustomerInvoiceList#

列出客户账单历史。

import { PaymentProvider, CustomerInvoiceList } from '@blocklet/payment-react';

function Invoices() {
return (
<PaymentProvider session={session} connect={connectApi}>
<CustomerInvoiceList
subscription_id="sub_xxx"
customer_id="cus_xxx"
type="table"
include_staking
status="open,paid,uncollectible,void"
/>
</PaymentProvider>
);
}

CustomerPaymentList#

import { PaymentProvider, CustomerPaymentList } from '@blocklet/payment-react';

function Payments() {
return (
<PaymentProvider session={session} connect={connectApi}>
<CustomerPaymentList status="completed" />
</PaymentProvider>
);
}


4. 表单输入组件#

用于收集用户输入数据，支持支付相关表单。

FormInput#

基础表单输入组件。

import { FormInput } from '@blocklet/payment-react';

function Input() {
return <FormInput label="用户名" name="name" />;
}

PhoneInput#

电话号码输入(支持选择国家)。

import { PhoneInput } from '@blocklet/payment-react';

function Phone() {
return <PhoneInput name="phone" countryFieldName="address.country" errorPosition="right" />;
}

StripeForm#

集成 Stripe 的支付表单。

import { PaymentProvider, StripeForm } from '@blocklet/payment-react';

function Stripe() {
return (
<PaymentProvider session={session} connect={connectApi}>
<StripeForm
clientSecret={secretKey}
intentType="payment_intent"
publicKey={publicKey}
customer={state.customer as TCustomer}
mode="setup"
onConfirm={onStripeConfirm}
onCancel={onStripeCancel}
returnUrl={window.location.href.replace(/\/[^/]+$/, '')}
/>
</PaymentProvider>
);
}

CurrencySelector#

货币选择下拉菜单。

import { CurrencySelector } from '@blocklet/payment-react';

function Currency() {
return <CurrencySelector currencies={[{symbol: 'ABT', logo: '', method: {name: 'Arcblock'}}]} value="0" onChange={(currencyIndex) => console.log(currencyIndex)} />;
}

CountrySelect#

国家选择下拉菜单。

import { CountrySelect } from '@blocklet/payment-react';

function Country() {
return <CountrySelect name="country" onChange={(country) => console.log(country)} />;
}


5. 数据展示组件#

用于格式化显示支付相关信息。

Livemode#

显示测试模式状态。

import { Livemode } from '@blocklet/payment-react';

function Mode() {
return <Livemode />;
}

TruncatedText#

截断长文本并显示省略号。

import { TruncatedText } from '@blocklet/payment-react';

function Text() {
return <TruncatedText maxLength={10} text="这是一个很长的文本" />;
}


6. 交互组件#

提供用户交互的 UI 元素。

LoadingButton#

带加载状态的按钮。

import { LoadingButton } from '@blocklet/payment-react';
import { useState } from 'react';

function Button() {
const [loading, setLoading] = useState(false);
return (
<LoadingButton loading={loading} onClick={() => setLoading(true)} loadingPosition="end">
支付
</LoadingButton>
);
}

// LoadingButton Props
interface LoadingButtonProps extends ButtonProps {
loading?: boolean;
loadingIndicator?: React.ReactNode;
loadingPosition?: 'start' | 'center' | 'end';
loadingProps?: Partial<CircularProgressProps>; // can custom Loading style
loadingOnly?: boolean; // hide text if loadingOnly is true
}

Switch#

开关按钮，用于状态切换。

import { Switch } from '@blocklet/payment-react';

function Toggle() {
return <Switch checked={true} onChange={(checked) => console.log(checked)} />;
}

ConfirmDialog#

确认对话框，用于用户确认操作。

import { ConfirmDialog } from '@blocklet/payment-react';
import { useState } from 'react';

function Confirm() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>打开</button>
<ConfirmDialog
onConfirm={() => console.log("确认")}
onCancel={() => setOpen(false)}
title="确认操作"
message="确认是否执行？"
confirm="确定"
/>
</>
);
}

导航链接。

import { Link } from '@blocklet/payment-react';

// use navigate
<Link to="/demo" target="_blank">
跳转
</Link>

// window.open
<Link to="https://example.com" target="_blank">
跳转
</Link>


7. 交易相关组件#

处理交易信息展示。

显示交易链接。

import { TxLink } from '@blocklet/payment-react';
import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';

function Transaction() {
return <TxLink detail={detail as PaymentDetails} method={method as TPaymentMethod} />;
}

TxGas#

显示交易 gas 费。

import { TxGas } from '@blocklet/payment-react';
import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';

function Transaction() {
return <TxGas detail={detail as PaymentDetails} method={method as TPaymentMethod} />;
}

PaymentBeneficiaries#

列出支付受益人及其分成比例。

import { PaymentBeneficiaries } from '@blocklet/payment-react';

function Beneficiaries() {
return <PaymentBeneficiaries totalAmount="10000" beneficiaries={[{ address: "did_123", name: 'hhh', percent: 100 }]} />;
}


8. 工具与实用功能#

提供 API 调用、缓存和格式化工具。

CachedRequest#

缓存 API 请求。

import { CachedRequest } from '@blocklet/payment-react';

// 1. Choose appropriate cache strategy
const shortLivedCache = new CachedRequest('key', fetchData, {
strategy: 'memory',
ttl: 60 * 1000 // 1 minute
});

const persistentCache = new CachedRequest('key', fetchData, {
strategy: 'local',
ttl: 24 * 60 * 60 * 1000 // 1 day
});

// 2. Clear cache when data changes
async function updateData() {
await api.post('/api/data', newData);
await cache.fetch(true); // Force refresh
}

// 3. Handle cache errors
try {
const data = await cache.fetch();
} catch (err) {
console.error('Cache error:', err);
// Fallback to fresh data
const fresh = await cache.fetch(true);
}

translations #

多语言支持

import { translations as extraTranslations } from '@blocklet/payment-react';
import merge from 'lodash/merge';

import en from './en';
import zh from './zh';

export const translations = merge(
{
zh,
en,
},
extraTranslations
);

createLazyComponent#

延迟加载组件。

import { createLazyComponent } from '@blocklet/payment-react';

export default LazyComponent<React.ComponentType<StripeCheckoutProps>, StripeCheckoutProps>(async () => {
const [lodash] = await Promise.all([import('lodash')]); // import lazy package

window.__Lodash = {
lodash
};

const { default: Component } = await import('./form');
return Component;
});

// form.tsx
const { lodash } = (globalThis as any).__Lodash;
export function Form(){
// use lodash
return (
...
)
}



previous
@blocklet/payment-react
next
快速上手
你获得 0 积分