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
To install the package, you can run the following command:
npm install @firmhouse/firmhouse-sdk @firmhouse/headless-react
Usage
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.
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
FirmhouseCartProvider
: A provider component that wraps the other components and provides them with the necessary data and functionality.CheckoutForm
: 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
: 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
: 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
: A component that allows you to translate text in your components. You can use this component to provide translations for your components.
Last updated
Was this helpful?