Form Elements
The @blocklet/payment-react library provides a collection of granular input components designed to build custom payment and contact information forms. These components come with built-in validation, internationalization support, and a user-friendly interface, simplifying the process of collecting essential user data.
This section provides an overview of the key form elements. You can navigate to the detailed documentation for each component to learn about its specific props, usage examples, and integration patterns.
AddressForm#
The AddressForm component renders a pre-built form for collecting billing address details. It includes fields for address line, city, state, postal code, and country. Validation logic, such as postal code format, is automatically adjusted based on the selected country to ensure data integrity.
PhoneInput#
PhoneInput is a specialized input for capturing international phone numbers. It integrates a country selector with dial codes and provides real-time formatting and validation, making it easy for users to enter their phone number correctly regardless of their location.
CountrySelect#
The CountrySelect component is a flexible dropdown for selecting a country. It features a searchable list, country flags, and a responsive design that adapts to both desktop and mobile viewports, providing an intuitive user experience.
Learn more about CountrySelect
CurrencySelector#
Use the CurrencySelector to allow users to choose from a list of available payment currencies. The component displays each currency in a visually distinct card, showing its symbol, logo, and associated payment method, which helps users make an informed choice.
Learn more about CurrencySelector
Explore the detailed documentation for each component to see how they can be integrated into your forms. Start with the AddressForm to handle billing information.