ClickarooProvider

A provider component that manages Clickaroo-related parameters at the outermost level of the application. It handles parameter storage, retrieval, and Sentry error tracking integration.

• It is recommended to load ClickarooProvider as early as possible in your application's initialization flow to ensure all URL parameters are captured correctly.
• Place it at the root level of your application, wrapping all other components that may need access to Clickaroo parameters.

Props

config

Configuration options for ClickarooProvider.

config?: ClickarooProviderConfig

ClickarooProviderConfig:

*children

React children to be wrapped by the provider.

children: ReactNode

Usage Examples

import { ClickarooProvider, CheckoutProvider, CheckoutPage } from '@clickaroo/checkout-ui';
 
function App() {
  const cart = [
    {
      sku: "TEST001",
      offerPricePoint: "OPP-TEST001",
    }
  ];
 
  return (
    <ClickarooProvider
      config={{
        params: ['clro_token', 'tssid'],
      }}
    >
      <CheckoutProvider
        baseUrl="https://api.clickaroo.io"
        cart={cart}
      >
        <CheckoutPage />
      </CheckoutProvider>
    </ClickarooProvider>
  );
}

Features

Parameter Management

ClickarooProvider automatically:

• Extracts parameters from URL query string
• Stores parameters in cookies/session/localStorage for persistence
• Provides access to parameters via context

Sentry Integration

When enableSentry is true:

• Initializes Sentry error tracking
• Automatically sets tssid as a Sentry tag for error correlation

Special Handling for tssid

The tssid parameter receives special handling:

• If not found in normal flow, falls back to window.$tracksity.tssid
• Automatically saved to state to prevent loss
• Set as Sentry tag for error tracking

Key Types

ClickarooSentryConfig

Sentry configuration type:

export type ClickarooSentryConfig = Partial<BrowserOptions>;

This is a partial type of Sentry's BrowserOptions. Common options include:

• dsn: Your Sentry DSN
• environment: Environment name (e.g., 'production', 'development')
• release: Release version
• tracesSampleRate: Sample rate for performance monitoring
• Other Sentry browser options

CookieOptions

Cookie configuration options:

interface CookieOptions {
  expires?: number;
  path?: string;
  sameSite?: 'strict' | 'lax' | 'none';
  secure?: boolean;
  domain?: string;
}