# 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`**](https://developer.firmhouse.com/sdks/firmhouse-sdk/reference/interfaces/firmhouse-cart)**`| 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>