@blocklet/payment-react

[ { "title": "Overview", "description": "An overview of the @blocklet/payment-react library, its key features, and how it helps in building payment flows.", "path": "/overview", "parentId": null, "sourceIds": [ "README.md", "src/index.ts" ], "icon": "lucide:book-open" }, { "title": "Getting Started", "description": "A step-by-step guide to installing the library and building a minimal, functional payment form.", "path": "/getting-started", "parentId": null, "sourceIds": [ "README.md", "src/contexts/payment.tsx", "src/checkout/form.tsx", "src/theme/index.tsx" ], "icon": "lucide:rocket" }, { "title": "Providers", "description": "Documentation for the context providers that are essential for wrapping your application and enabling payment functionalities.", "path": "/providers", "parentId": null, "sourceIds": [ "src/contexts/payment.tsx", "src/contexts/donate.tsx", "README.md" ], "icon": "lucide:package" }, { "title": "PaymentProvider", "description": "Detailed documentation for the `PaymentProvider` component, which is required to use most of the library's features.", "path": "/providers/payment-provider", "parentId": "/providers", "sourceIds": [ "src/contexts/payment.tsx", "README.md" ] }, { "title": "DonateProvider", "description": "Learn how to use the `DonateProvider` to manage state and settings for donation-related components.", "path": "/providers/donate-provider", "parentId": "/providers", "sourceIds": [ "src/contexts/donate.tsx", "README.md" ] }, { "title": "Components", "description": "Explore the core components for building different types of payment and checkout experiences.", "path": "/components", "parentId": null, "sourceIds": [ "src/index.ts", "README.md" ], "icon": "lucide:blocks" }, { "title": "Checkout Components", "description": "High-level components that serve as entry points for various checkout flows like standard payments, pricing tables, and donations.", "path": "/components/checkout", "parentId": "/components", "sourceIds": [ "src/checkout/form.tsx", "src/checkout/table.tsx", "src/checkout/donate.tsx" ] }, { "title": "CheckoutForm", "description": "The primary component for handling payment links and checkout sessions, supporting various modes like inline, standalone, and popup.", "path": "/components/checkout/checkout-form", "parentId": "/components/checkout", "sourceIds": [ "src/checkout/form.tsx", "src/payment/index.tsx", "src/types/index.ts", "src/payment/donation-form.tsx" ] }, { "title": "CheckoutTable", "description": "A component that renders a complete pricing table and handles the checkout flow when a user selects a plan.", "path": "/components/checkout/checkout-table", "parentId": "/components/checkout", "sourceIds": [ "src/checkout/table.tsx", "src/components/pricing-table.tsx" ] }, { "title": "CheckoutDonate", "description": "Implement donation functionality with this flexible component, supporting various display modes and customization options.", "path": "/components/checkout/checkout-donate", "parentId": "/components/checkout", "sourceIds": [ "src/checkout/donate.tsx", "src/contexts/donate.tsx", "README.md" ] }, { "title": "UI Components", "description": "Components designed to build specific parts of the payment UI, offering granular control over the user experience.", "path": "/components/ui", "parentId": "/components", "sourceIds": [ "src/components/pricing-table.tsx", "src/payment/summary.tsx", "src/payment/form/address.tsx", "src/payment/form/phone.tsx", "src/components/country-select.tsx", "src/payment/form/currency.tsx" ] }, { "title": "PricingTable", "description": "Display subscription plans and pricing options in a structured table, allowing users to select and proceed to checkout.", "path": "/components/ui/pricing-table", "parentId": "/components/ui", "sourceIds": [ "src/components/pricing-table.tsx", "src/contexts/payment.tsx" ] }, { "title": "PaymentSummary", "description": "Show a detailed summary of the order, including line items, totals, and trial information within the checkout flow.", "path": "/components/ui/payment-summary", "parentId": "/components/ui", "sourceIds": [ "src/payment/summary.tsx", "src/payment/product-item.tsx", "src/payment/amount.tsx" ] }, { "title": "Form Elements", "description": "A collection of granular input components for building custom payment and contact information forms.", "path": "/components/ui/form-elements", "parentId": "/components/ui", "sourceIds": [ "src/payment/form/address.tsx", "src/payment/form/phone.tsx", "src/components/country-select.tsx", "src/payment/form/currency.tsx", "src/components/input.tsx", "src/components/label.tsx" ] }, { "title": "AddressForm", "description": "A pre-built form for collecting billing address details, with validation based on the selected country.", "path": "/components/ui/form-elements/address-form", "parentId": "/components/ui/form-elements", "sourceIds": [ "src/payment/form/address.tsx", "src/components/country-select.tsx", "src/libs/validator.ts" ] }, { "title": "PhoneInput", "description": "An international phone number input with country code selection and validation.", "path": "/components/ui/form-elements/phone-input", "parentId": "/components/ui/form-elements", "sourceIds": [ "src/payment/form/phone.tsx", "src/libs/phone-validator.ts", "src/components/country-select.tsx" ] }, { "title": "CountrySelect", "description": "A dropdown component for selecting a country, complete with country flags and search functionality.", "path": "/components/ui/form-elements/country-select", "parentId": "/components/ui/form-elements", "sourceIds": [ "src/components/country-select.tsx" ] }, { "title": "CurrencySelector", "description": "A component that allows users to select their preferred payment currency from a list of available options.", "path": "/components/ui/form-elements/currency-selector", "parentId": "/components/ui/form-elements", "sourceIds": [ "src/payment/form/currency.tsx" ] }, { "title": "Business Logic Components", "description": "Specialized components that encapsulate complex business logic for subscription and invoice management.", "path": "/components/business", "parentId": "/components", "sourceIds": [ "src/components/over-due-invoice-payment.tsx", "src/components/resume-subscription.tsx", "src/components/auto-topup/index.tsx", "src/components/auto-topup/modal.tsx" ] }, { "title": "OverdueInvoicePayment", "description": "A component to handle the payment of overdue invoices for a specific customer or subscription.", "path": "/components/business/overdue-invoice-payment", "parentId": "/components/business", "sourceIds": [ "src/components/over-due-invoice-payment.tsx", "README.md" ] }, { "title": "ResumeSubscription", "description": "A component that allows users to resume a canceled subscription, including handling re-staking if required.", "path": "/components/business/resume-subscription", "parentId": "/components/business", "sourceIds": [ "src/components/resume-subscription.tsx", "README.md" ] }, { "title": "Auto-Topup Components", "description": "Components for managing and configuring the automatic credit top-up functionality, including a display card and a configuration modal.", "path": "/components/business/auto-topup", "parentId": "/components/business", "sourceIds": [ "README.md", "src/components/auto-topup/index.tsx", "src/components/auto-topup/modal.tsx", "src/components/auto-topup/product-card.tsx" ] }, { "title": "History Components", "description": "Components dedicated to displaying historical data such as invoices, payments, and credit grants.", "path": "/components/history", "parentId": "/components", "sourceIds": [ "src/history/invoice/list.tsx", "src/history/payment/list.tsx", "src/history/credit/grants-list.tsx", "src/history/credit/transactions-list.tsx" ] }, { "title": "CustomerInvoiceList", "description": "Render a list of a customer's invoices with details on status, amount, and creation date.", "path": "/components/history/invoice-list", "parentId": "/components/history", "sourceIds": [ "src/history/invoice/list.tsx", "README.md" ] }, { "title": "CustomerPaymentList", "description": "Display a customer's payment history, including transaction details and status.", "path": "/components/history/payment-list", "parentId": "/components/history", "sourceIds": [ "src/history/payment/list.tsx", "README.md" ] }, { "title": "CreditGrantsList", "description": "Show a list of credit grants for a customer, including status, remaining amount, and effective dates.", "path": "/components/history/credit-grants-list", "parentId": "/components/history", "sourceIds": [ "src/history/credit/grants-list.tsx" ] }, { "title": "CreditTransactionsList", "description": "List all credit transactions, providing a detailed log of credit usage and adjustments.", "path": "/components/history/credit-transactions-list", "parentId": "/components/history", "sourceIds": [ "src/history/credit/transactions-list.tsx" ] }, { "title": "Guides", "description": "Guides for advanced topics like theming, using utility functions, and other non-component features.", "path": "/guides", "parentId": null, "sourceIds": [ "src/theme/index.tsx", "src/libs/util.ts", "README.md" ], "icon": "lucide:book" }, { "title": "Theming", "description": "Learn how to customize the appearance of payment components using the built-in theme provider and Material-UI theme options.", "path": "/guides/theming", "parentId": "/guides", "sourceIds": [ "src/theme/index.tsx", "src/theme/index.css", "src/theme/typography.ts", "src/theme/types.ts", "README.md" ] }, { "title": "Utilities", "description": "A reference for utility functions provided by the library, including cached requests, and date formatting.", "path": "/guides/utilities", "parentId": "/guides", "sourceIds": [ "README.md", "src/libs/cached-request.ts", "src/libs/dayjs.ts", "src/libs/util.ts", "src/libs/validator.ts", "src/locales/index.tsx" ] }, { "title": "Hooks", "description": "Documentation for the custom React hooks provided by the library for handling specific functionalities.", "path": "/hooks", "parentId": null, "sourceIds": [ "src/hooks/subscription.ts", "src/hooks/mobile.ts", "README.md" ], "icon": "lucide:anchor" }, { "title": "useSubscription", "description": "A hook for subscribing to real-time events from the payment service, such as 'invoice.paid'.", "path": "/hooks/use-subscription", "parentId": "/hooks", "sourceIds": [ "src/hooks/subscription.ts", "README.md" ] }, { "title": "useMobile", "description": "A utility hook for detecting if the application is being viewed on a mobile device to enable responsive layouts.", "path": "/hooks/use-mobile", "parentId": "/hooks", "sourceIds": [ "src/hooks/mobile.ts", "README.md" ] } ]