FirmhouseCartProvider

Props

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

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

<FirmhouseCartProvider 
    apiToken={apiToken} 
    cartToken={cartToken} 
    locale={locale ?? 'en'}
    fallback={<div>Loading...</div>}
    availableCountries={["BE", "NL"]}
    translations={translations}
  >
    <CheckoutForm fields={fields} inputClassName="input" />
  </FirmhouseCartProvider>;