Skip to main content
Proceed with caution

Supplying configuration other than the initializationConfig is not recommended for regular use of the marketplace. Proceed with caution!
The MarketProvider component can be configured with a variety of options to customize the behavior and appearance of the market. The MarketProvider component accepts the following props: 
interface MarketProviderProps {
    children: React.ReactNode;
    initializationConfig: InitializationConfig;
    initialState?: MarketInitialState;
    themeOverride?: Theme;
    configOverride?: Config;
}

​
initializationConfig

The initializationConfig prop is required and contains the following properties: 
interface InitializationConfig {
    partnerId: string;
    alwaysOpen?: boolean;
    fullscreenMobile?: boolean;
    flat?: boolean;
}
  • partnerId (required): The partner ID.
  • alwaysOpen (optional): If set to true, the market will always be open and the isOpen state will be ignored.
  • fullscreenMobile (optional): If set to true, the market will be displayed in fullscreen mode on mobile devices.
  • flat (optional): If set to true, the market will be displayed in flat mode. It will not float over the page content.

​
initialState

The initialState prop is optional and contains the following properties: 
interface MarketInitialState {
    isOpen?: boolean;
    pageNumber?: number;
    height?: number;
    searchQuery?: string;
    marketListings?: MarketListing[];
    basket?: MarketBasketItem | null;
    orderId?: string | null;
    currencyEstimates?: CurrencyEstimate[];
    selectedCurrency?: string;
    pages?: ReactElement[];
    seconds?: number;
    isMobile?: boolean;
    opacity?: number;
    transitionSpeed?: number;
}
  • isOpen (optional): If set to true, the market will be open by default.
  • pageNumber (optional): The page number to display when the market is opened.
  • height (optional): The height of the market when it is open.
  • searchQuery (optional): The search query to display when the market is opened.
  • marketListings (optional): The market listings to display when the market is opened.
  • basket (optional): The basket to display in checkout when the market is opened.
  • orderId (optional): The order ID when the market is opened.
  • currencyEstimates (optional): The currency estimates to display when the market is opened.
  • selectedCurrency (optional): The selected currency to display when the market is opened.
  • pages (optional): The pages of the modal when the market is opened.
  • seconds (optional): The seconds to display on the currency estimation timer when the market is opened.
  • isMobile (optional): If set to true, the market will be displayed in mobile mode.
  • opacity (optional): The opacity of the market when it is open.
  • transitionSpeed (optional): The transition speed of the market when it is open.

​
themeOverride

The themeOverride prop is optional and can be used to override the theme. It contains the following properties: 
interface Theme {
    primaryColor?: string;
    secondaryColor?: string;
    backgroundColor?: string;
    overlayBackgroundColor?: string;
    textColor?: string;
    backgroundColorSecondary?: string;
    inputBorderColor?: string;
    inputBorderColorFocus?: string;
    inputFontFamily?: string;
    inputFontColor?: string;
    inputPlaceholder?: string;
    darkTheme: boolean;
}
  • primaryColor (optional): The primary color of the theme.
  • secondaryColor (optional): The secondary color of the theme.
  • backgroundColor (optional): The background color of the theme.
  • overlayBackgroundColor (optional): The overlay background color of the theme.
  • textColor (optional): The text color of the theme.
  • backgroundColorSecondary (optional): The secondary background color of the theme.
  • inputBorderColor (optional): The input border color of the theme.
  • inputBorderColorFocus (optional): The input border color when focused of the theme.
  • inputFontFamily (optional): The input font family of the theme.
  • inputFontColor (optional): The input font color of the theme.
  • inputPlaceholder (optional): The input placeholder of the theme.
  • darkTheme (required): If set to true, the dark theme will be used.

​
configOverride

The configOverride prop is optional and can be used to override the configuration. It contains the following properties: 
interface Config {
    apiUrl?: string;
    markets: string[];
    fiat?: boolean;
    cryptocurrencies: string[];
    stripe: {
        connectedAccountId: string;
    };
    skipPayment: boolean;
}
  • apiUrl (optional): The API URL of the marketplace.
  • markets (required): The domain markets of the marketplace.
  • fiat (optional): If set to true, fiat currency will be available.
  • cryptocurrencies (required): The cryptocurrencies of the marketplace.
  • stripe (required): The Stripe configuration of the marketplace.
    • connectedAccountId (required): The Stripe connected account ID of the partner.
  • skipPayment (optional): If set to true, payment will be skipped.
⌘I