# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.