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

Capabilities

@blocklet/payment-react is a React component library for Blocklet applications that provides payment infrastructure and supports payment processing, subscriptions, and tipping.

This document categorizes all components and capabilities to help developers quickly find their needs.

1. Context and State Management#

Provides context and hooks related to payments.

PaymentProvider#

Payment context provider, required for using Payment Kit services.

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

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

DonateProvider#

Donation configuration context, is required for integrating Payment Kit donation management.

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#

Theme provider for Payment Kit styling.

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

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

useSubscription#

Hook for listening to subscription events.

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#

Detect whether the current device is a mobile device.

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

2. Payment Flow Components#

Core functionality for payments, tipping, and price displays.

CheckoutForm#

Payment form supporting inline or popup modes, suitable for payment links or sessions.

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#

Pricing table

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

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

CheckoutDonate#

Donation widget with customizable amounts and beneficiaries. Enable now →

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

function DonationButton() {
return (
<PaymentProvider session={session} connect={connectApi}>
<DonateProvider mountLocation="your-unique-donate-instance" description="Help locate this donation instance">
<CheckoutDonate
settings={{
target: "post-123", // Required: Unique identifier
title: "Support Author", // Required: Modal title
description: "Buy me a coffee if this helped!", // Required: Description
reference: "https://your-site.com/posts/123", // Required: Reference link
beneficiaries: [{ address: "tip user did", share: "100" }], // Required: Beneficiaries
}}
/>
</DonateProvider>
</PaymentProvider>
);
}

OverdueInvoicePayment#

Managing Overdue Subscription Payments

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

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

3. History#

Display payment and bill history.

Customer Invoice List#

List the customer's billing history.

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

Customer Payment List#

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

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

4. Form Input Components#

Collects user input data, including payment forms.

Form Input#

Basic form input component.

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

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

PhoneInput#

Phone number input with country selection.

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

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

StripeForm#

Integrated Stripe payment form.

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#

Currency dropdown.

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#

Country dropdown.

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

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

5. Data Visualization Components#

Formats and displays payment information.

Live Mode#

Display the test mode status.

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

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

Truncated Text#

Truncate long text and display an ellipsis.

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

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

6. Interactive Components#

Provides UI elements for user interaction.

LoadingButton#

Button with a loading state.

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">
Pay
</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#

A toggle switch for changing states.

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

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

ConfirmDialog#

Confirmation dialog for user actions.

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

function Confirm() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
<ConfirmDialog
onConfirm={() => console.log("Confirmed")}
onCancel={() => setOpen(false)}
title="Confirm Action"
message="Are you sure?"
confirm="Yes"
/>
</>
);
}

Navigation links.

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

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

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

7. Transaction Components#

Handle transaction display.

Display the transaction link.

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

Transaction Gas#

Display the transaction gas fee.

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

Payment Beneficiaries#

List the payment beneficiaries and their respective revenue shares.

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

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

8. Tools and Utilities#

Provides tools for API calls, caching, and formatting.

CachedRequest#

Cache API requests.

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#

Multilingual support

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#

Lazy-loaded component.

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
Quick Start
你获得 0 积分