CheckoutForm

The CheckoutForm component is a form component that allows users to fill in their details and place an order. You can use this component to build a custom checkout page.

Props

fields { title?: string, fields: CheckoutField[], type?: 'regular' | 'billing' }[]?

An array of field groups that contain the fields that you want to display in the form. Each field object should have a fields property that contains an array of CheckoutField objects. You can use this prop to customize the fields that are displayed in the form.

CheckoutField

• name: The name of the field. This is used to identify the field in the form.

• label: The label of the field. This is displayed next to the input element.

• type: The type of the field. This is used to determine the type of input element that is displayed in the form. The available types are text, dropdown, date, checkbox, email, tel, hidden, submit, and break.

• inputProps: Additional props that are passed to the input element. You can use this prop to customize the input element.

• id: This field is needed if you want to display an extra field in the form. You can find the id of the extra field in the Firmhouse Portal. You need to set both the id prop and name prop to the same value.

• name: The name of the field. This is used to identify the field in the form.

// Extra field example
{
  id: '1568',
  name: '1568',
  type: 'dropdown',
  label: 'How did you find us?',
  inputProps: {
    options: [
      { label: 'Friends', value: 'Friends' },
      { label: 'Social Media', value: 'Social Media' },
      { label: 'Email', value: 'Email' },
      { label: 'Search Engine', value: 'Search Engine' },
      { label: 'Ads', value: 'Ads' },
    ],
  },
}

By default, this component uses the defaultCheckoutFields array to display the fields. You can extend this array or provide your own fields using this prop.

inputClassName string?

The class name that is applied to the input elements in the form. This prop is optional, and it defaults to an empty string.

className string?

The class name that is applied to the form element. This prop is optional, and it defaults to an empty string.

fallback React.ReactNode?

A fallback component that is shown while the data is loading. This prop is optional, and it defaults to null.

TextInputComponent React.ComponentType<TextInputProps>?

A custom component that is used to render text input elements in the form. This prop is optional, and it defaults to the TextInput component.

CheckboxComponent React.ComponentType<CheckboxInputProps>?

A custom component that is used to render checkbox input elements in the form. This prop is optional, and it defaults to the CheckboxInput component.

DropdownComponent React.ComponentType<DropdownInputProps>?

A custom component that is used to render dropdown input elements in the form. This prop is optional, and it defaults to the DropdownInput component.

EmailInputComponent React.ComponentType<TextInputProps>?

A custom component that is used to render email input elements in the form. This prop is optional, and it defaults to the TextInput component.

PhoneNumberInputComponent React.ComponentType<TextInputProps>?

A custom component that is used to render phone number input elements in the form. This prop is optional, and it defaults to the TextInput component.

DateInputComponent React.ComponentType<DateInputProps>?

A custom component that is used to render date input elements in the form. This prop is optional, and it defaults to the DateInput component.

SubmitButtonComponent React.ComponentType<SubmitButtonProps>?

A custom component that is used to render the submit button in the form. This prop is optional, and it defaults to the SubmitButton component.

Example

const fields = [
  ...defaultCheckoutFields.slice(0, 3),
  {
    fields: [
      {
        name: "termsAccepted",
        label: <Translated value="checkout.fields.termsAccepted.label" />,
        inputProps: {
          className: styles.checkbox,
        },
      },
    ],
  },
  ...defaultCheckoutFields.slice(3),
];

<CheckoutForm fields={fields} />