@blocklet/payment-react
Version:
Reusable react components for payment kit v2
81 lines (62 loc) • 4.28 kB
Markdown
# Components
The `@blocklet/payment-react` library offers a comprehensive suite of pre-built React components designed to accelerate the development of payment, subscription, and donation features. These components are categorized to help you find the right tool for the job, whether you need a complete drop-in solution or fine-grained UI elements to build a custom experience.
All components are designed to work seamlessly within the `PaymentProvider` context, which handles state management and API communication.
## Component Architecture
The following diagram illustrates how the high-level components typically interact. User-facing components like `CheckoutTable` or `CheckoutDonate` act as entry points, which then utilize the core `CheckoutForm` to handle the final payment processing.
<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
<!-- DIAGRAM_IMAGE_END -->
## Component Categories
Explore our component categories to find the building blocks you need.
### Checkout Components
These are high-level components that provide complete, out-of-the-box payment experiences. Use them as the primary entry points for your payment flows.
<x-cards>
<x-card data-title="CheckoutForm" data-icon="lucide:credit-card" data-href="/components/checkout/checkout-form">
The primary component for handling payment links and checkout sessions.
</x-card>
<x-card data-title="CheckoutTable" data-icon="lucide:table" data-href="/components/checkout/checkout-table">
Renders a complete pricing table and handles the checkout flow.
</x-card>
<x-card data-title="CheckoutDonate" data-icon="lucide:heart-handshake" data-href="/components/checkout/checkout-donate">
Implement donation functionality with this flexible component.
</x-card>
</x-cards>
### UI Components
A collection of granular components for building custom payment forms and displays. Combine these blocks to create a user interface that perfectly matches your application's design.
<x-cards>
<x-card data-title="PricingTable" data-icon="lucide:layout-list" data-href="/components/ui/pricing-table">
Display subscription plans and pricing options in a structured table.
</x-card>
<x-card data-title="PaymentSummary" data-icon="lucide:receipt" data-href="/components/ui/payment-summary">
Show a detailed summary of an order, including line items and totals.
</x-card>
<x-card data-title="Form Elements" data-icon="lucide:pencil-ruler" data-href="/components/ui/form-elements">
A collection of inputs for building custom payment and contact forms.
</x-card>
</x-cards>
### Business Logic Components
Specialized components designed to handle complex business workflows, such as managing overdue invoices, resuming subscriptions, and configuring automatic credit top-ups.
<x-cards>
<x-card data-title="OverdueInvoicePayment" data-icon="lucide:file-warning" data-href="/components/business/overdue-invoice-payment">
Handle the payment of overdue invoices for a customer or subscription.
</x-card>
<x-card data-title="ResumeSubscription" data-icon="lucide:play-circle" data-href="/components/business/resume-subscription">
Allow users to resume a canceled subscription with ease.
</x-card>
<x-card data-title="Auto-Topup Components" data-icon="lucide:battery-charging" data-href="/components/business/auto-topup">
Manage and configure automatic credit top-up functionality.
</x-card>
</x-cards>
### History Components
Display historical payment and credit data to your users. These components make it easy to render lists of invoices, payments, and credit transactions.
<x-cards>
<x-card data-title="CustomerInvoiceList" data-icon="lucide:history" data-href="/components/history/invoice-list">
Render a list of a customer's invoices with details and status.
</x-card>
<x-card data-title="CustomerPaymentList" data-icon="lucide:landmark" data-href="/components/history/payment-list">
Display a customer's payment history, including transaction details.
</x-card>
<x-card data-title="CreditGrantsList" data-icon="lucide:award" data-href="/components/history/credit-grants-list">
Show a list of credit grants, including status and remaining amounts.
</x-card>
</x-cards>