UI Components
The UI Components are a collection of granular, self-contained React components designed for building custom payment and checkout experiences. Unlike the high-level Checkout Components, which manage an entire payment flow, UI Components give you full control over the layout and user experience by providing the essential building blocks for your interface.
This approach allows you to integrate payment functionality seamlessly into your existing application design. You can combine these components to construct a checkout process that is tailored to your specific requirements.
Below is an overview of the core UI components available. Each component has its own detailed documentation page.
PricingTable#
The PricingTable component renders a structured, responsive table of your subscription plans and pricing options. It handles the logic for switching between billing intervals (e.g., monthly/yearly) and currencies, allowing users to make a selection before proceeding with a purchase.
Learn more about PricingTable »
PaymentSummary#
Use the PaymentSummary component to display a detailed breakdown of an order. It shows line items, quantities, pricing, trial period information, and the total amount due. This component is essential for providing transparency to the user during the checkout process.
Learn more about PaymentSummary »
Form Elements#
This is a suite of individual form inputs for collecting user data, such as billing addresses, phone numbers, and currency preferences. They include built-in validation and are designed to be composed into any form structure you need. Key form elements include:
- AddressForm: A pre-built form for collecting billing address details.
- PhoneInput: An international phone number input with country code selection.
- CountrySelect: A dropdown for selecting a country, with flags and search.
- CurrencySelector: A component for choosing the payment currency.
By combining these components, you can build a robust and user-friendly payment interface. To get started, we recommend exploring the documentation for the component that best fits your immediate needs.