> 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/components/firmhousecartprovider.md).

# FirmhouseCartProvider

### Props <a href="#props" id="props"></a>

#### **apiToken `string`**

The storefront access token that you can get from the Firmhouse Portal.

#### **cartToken `string?`**

The cart token that you can get from the Firmhouse SDK. This prop is optional, if you don't provide both `cartToken` and `initialFirmhouseCart` the cart will be initialized with an empty cart.

#### **paymentPageUrl `string?`**

The URL of the payment page where the user will be redirected if the payment is failed.

#### **paymentSuccessPageUrl `string?`**

The URL of the payment success page where the user will be redirected if the payment is successful.

#### **locale `string?`**

The locale of the user. This prop is optional, and it defaults to default locale for the country.

#### **fallback `React.ReactNode?`**

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

#### **availableCountries `string[]?`**

An array of country codes that will be available for the user to select. This prop is optional, and it defaults to `['NL', 'DE', 'BE', 'LU', 'AT', 'CH']`.

#### **translations `Record<string, Record<string, NestedTranslations>>?`**

An object that contains translations for the components. This prop is optional, and it defaults to an empty object. You can check the default translations in the [`src/translations.ts`](https://github.com/firmhouse/firmhouse-sdk/blob/alpha/packages/headless-react/src/lib/config/translations.tsx) file. These translations are used to translate the text in the components. You can also use the `Translated` component to provide translations for your components.

Example:

```jsx
const 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",
        },
      },
    },
  }
}

```

#### **initialFirmhouseCart** [**`FirmhouseCart`**](/sdks/firmhouse-sdk/reference/interfaces/firmhouse-cart.md)**`| null`**

The initial cart object that you can get from the Firmhouse SDK. If you would like to initialize the cart based on the data that you have, you can provide this prop. This prop is optional, and it defaults to `null`.

### Example

<pre class="language-jsx"><code class="lang-jsx"><strong>&#x3C;FirmhouseCartProvider 
</strong>    apiToken={apiToken} 
    cartToken={cartToken} 
    locale={locale ?? 'en'}
    fallback={&#x3C;div>Loading...&#x3C;/div>}
    availableCountries={["BE", "NL"]}
    translations={translations}
  >
    &#x3C;CheckoutForm fields={fields} inputClassName="input" />
  &#x3C;/FirmhouseCartProvider>;
</code></pre>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developer.firmhouse.com/sdks/headless-react/components/firmhousecartprovider.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.