Form Elements

The @blocklet/payment-react library provides a collection of granular input components designed to simplify the creation of custom payment and contact information forms. These elements are built with validation and user experience in mind, integrating smoothly with react-hook-form to provide a robust and flexible solution for data collection.

Each component is designed to be a self-contained unit, allowing you to compose them into complex forms tailored to your specific requirements. Below is an overview of the available form elements.

Common Usage Pattern#

These form elements are intended to be used within a FormProvider from react-hook-form. You can compose them to build comprehensive forms that capture all the necessary information for a transaction. While each component has its own set of properties, they share a common integration pattern.

Here is a basic example of how you might combine several form elements to create a user information form:

MyCustomForm.tsx

import { FormProvider, useForm } from 'react-hook-form';
import { AddressForm, PhoneInput, CurrencySelector } from '@blocklet/payment-react';
import { Button, Stack } from '@mui/material';

// Assume `availableCurrencies` is fetched from your backend
const availableCurrencies = [
  {
    id: 'usd_xxx',
    name: 'USD',
    symbol: 'USD',
    logo: 'url/to/usd_logo.png',
    method: { id: 'stripe', name: 'Stripe' },
  },
  // ... other currencies
];

function MyCustomForm() {
  const methods = useForm({
    defaultValues: {
      currency: 'usd_xxx',
      phone_number: '',
      billing_address: {
        line1: '',
        city: '',
        state: '',

See all 29 lines

In this example, CurrencySelector, PhoneInput, and AddressForm are combined within a single form. CurrencySelector is used as a controlled component tied to the form's state, while PhoneInput and AddressForm are uncontrolled components that automatically register their fields and validation rules with the react-hook-form context.

Next Steps#

To learn more about the specific properties and implementation details of each component, please explore their individual documentation pages.

Start with the AddressForm to see how to collect billing information.

PaymentSummary
AddressForm