Skip to main content
All Layer React components are nested under the LayerProvider component. This component takes in the below properties.
<LayerProvider
  businessId="<layer_business_id>"
  businessAccessToken="<access_token>"
  environment={'sandbox'}
  onError={error => {
    console.error('Layer error:', error)
  }}
  eventCallbacks={{
    onTransactionCategorized: () => {
      console.log('Transaction categorized')
    },
  }}
>
  {...}
</LayerProvider>

Properties

businessId
string
required
The ID of the business whose information you’re showing.
businessAccessToken
string
required
Temporary authentication token scoped to this specific business. See the getting started guide for how to fetch these tokens on your backend.
Do not use your Layer API key as the token in production. Retrieve a business-scoped access token from the Layer API and pass that value here instead.
environment
'production' | 'sandbox'
The predefined Layer environment to connect to. Defaults to production. Use sandbox for development and testing. Cannot be used together with environmentConfigOverride.
environmentConfigOverride
EnvironmentConfigOverride
Custom configuration to override API and auth endpoints. Use this instead of environment when connecting to a non-standard deployment. Cannot be used together with environment.
theme
LayerThemeConfig
Customizes the look and feel of the components. See Styling for details.
usePlaidSandbox
boolean
Overrides whether Plaid sandbox mode is used for bank account linking. Useful for testing.
onError
(error: LayerError) => void
Callback to be notified about exceptions within the components. The LayerError object contains type (e.g., 'unauthenticated', 'api', 'render'), scope, and payload.
eventCallbacks
EventCallbacks
Callbacks that will be triggered for specific user events within the components.

Environment Configuration

There are two mutually exclusive ways to configure the Layer environment: Predefined environment:
<LayerProvider
  businessId="<layer_business_id>"
  businessAccessToken="<access_token>"
  environment="sandbox"
>
  {...}
</LayerProvider>
Custom URL override:
<LayerProvider
  businessId="<layer_business_id>"
  businessAccessToken="<access_token>"
  environmentConfigOverride={{
    environment: 'sandbox',
    apiUrl: 'https://custom-api.example.com',
    authUrl: 'https://custom-auth.example.com/token',
    scope: 'https://sandbox.layerfi.com/sandbox'
  }}
>
  {...}
</LayerProvider>