> For the complete documentation index, see [llms.txt](https://developer.firmhouse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.firmhouse.com/sdks/headless-react.md).

# Headless React

This package is a set of fully customizable React components that can be used to build a headless UI for a Firmhouse Storefront. For now, it only supports building a custom checkout page, but we are planning to add more components in the future.

### Installation <a href="#installation-1" id="installation-1"></a>

To install the package, you can run the following command:

```bash
npm install @firmhouse/firmhouse-sdk @firmhouse/headless-react
```

### Usage <a href="#usage-1" id="usage-1"></a>

To use the components, you need to wrap them in a `FirmhouseCartProvider` component and pass the `apiToken` prop. You should provide a storefront access token that you can get from the Firmhouse Portal.

```jsx

import { 
  CheckoutForm, 
  FirmhouseCartProvider, 
  OrderedProductsList, 
  OrderSummary,
  defaultCheckoutFields,
} from '@firmhouse/headless-react';

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

export default function CheckoutPage({apiToken, cartToken, locale}) {
  return (
    <FirmhouseCartProvider 
      apiToken={apiToken} 
      cartToken={cartToken} 
      locale={locale ?? 'en'}
      fallback={<div>Loading...</div>}
      availableCountries={["BE", "NL"]}
      translations={{
        en: {
          checkout: {
            title: "Checkout",
            fields: {
              termsAccepted: {
                label: "I accept the terms and conditions",
              },
              
            },
          },
        },
        nl: {
          checkout: {
            title: "Afrekenen",
            fields: {
              termsAccepted: {
                label: "Ik accepteer de algemene voorwaarden",
              },
              email: {
                label: "Emailadres",
                placeholder: "Emailadres",
              },
            },
          },
        }
      }}
    >
      <h1><Translated value="checkout.title" /></h1>
      <div>
        <CheckoutForm fields={fields} inputClassName="input" />
      </div>
      <div>
        <OrderedProductsList onlyOneTimeProducts />
        <br />
        <OrderedProductsList onlyRecurringProducts />
        <OrderSummary />
      </div>
    </FirmhouseCartProvider>;
  );
}
```

### Components <a href="#components" id="components"></a>

* [`FirmhouseCartProvider`](/sdks/headless-react/components/firmhousecartprovider.md): A provider component that wraps the other components and provides them with the necessary data and functionality.
* [`CheckoutForm`](/sdks/headless-react/components/checkoutform.md): A form component that allows users to fill in their details and place an order. This is the main component that you need to use to build a custom checkout page.
* [`OrderedProductsList`](/sdks/headless-react/components/orderedproductlist.md): A list component that displays the products that the user has ordered. You can use this component to show the products that the user has added to their cart.
* [`OrderSummary`](/sdks/headless-react/components/ordersummary.md): A summary component that displays the total price of the order. You can use this component to show the total price of the order.
* [`Translated`](/sdks/headless-react/components/translated.md): A component that allows you to translate text in your components. You can use this component to provide translations for your components.