> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK Reference

> Essential React hooks for accessing checkout data and building dynamic components that respond to customer actions

The SDK provides React hooks that give you real-time access to cart data, payment methods, shipping options, and store configuration.

## Hooks

<Tabs>
  <Tab title="Cart & Customer Data">
    **Problem:** Need access to cart contents and customer information

    ```typescript useCheckoutSession Hook theme={"system"}
    import { useCheckoutSession, useCheckoutAction } from '@ollie-shop/sdk';

    export default function CartSummary() {
      const { session } = useCheckoutSession();
      const { execute: executeRemoveItems } = useCheckoutAction("REMOVE_ITEMS");
      
      const { currency, language } = session.locale;
      
      // Format price utility function
      const formatPrice = (price: number) => {
        return new Intl.NumberFormat(language, {
          style: "currency",
          currency: currency,
        }).format(price / 100);
      };
      
      return (
        <div>
          <h3>Hello {session.customer?.firstName}!</h3>
          <p>Items: {session.cartItems.length}</p>
          <p>Total: {formatPrice(session.totals.items || 0)}</p>

          {session.cartItems.map((item) => (
            <div key={item.id}>
              <span>{item.name} ({formatPrice(item.price)})</span>
              <button onClick={() => executeRemoveItems([item.index])}>Remove</button>
            </div>
          ))}
        </div>
      );
    }
    ```

    **What you get:**

    * Session data (cart items, customer profile, totals)
    * Locale information (currency, language)
    * Access to raw session data from e-commerce provider
    * Real-time updates when session changes
  </Tab>

  <Tab title="Store Configuration">
    **Problem:** Need access to store theme and settings

    ```typescript useStoreInfo Hook theme={"system"}
    import { useStoreInfo } from '@ollie-shop/sdk';

    export default function ThemedComponent() {
      const { platformStoreId, logo, theme, props } = useStoreInfo();

      // `theme` is a flat record of CSS-variable-style tokens
      // (Record<string, string>), not a nested object.
      return (
        <div
          style={{
            backgroundColor: theme?.['--color-primary'],
            color: theme?.['--color-text'],
          }}
        >
          <h1>{platformStoreId}</h1>
          {logo && <img src={logo} alt="Store logo" />}

          {props?.flags?.showCouponCodeInputOpened && (
            <p>Coupon input is opened by default</p>
          )}
        </div>
      );
    }
    ```

    **What you get:**

    * Store metadata (`storeId`, `platformStoreId`, `logo`, `versionId`, `template`)
    * Theme tokens (`theme` as a flat `Record<string, string>`)
    * Feature flags and configuration via `props` and `settings`
    * The injected custom `components` for this store
  </Tab>

  <Tab title="Session Data">
    **Problem:** Need access to session data, provider data and to validate required fields

    ```typescript useStoreInfo Hook theme={"system"}
    import { useCheckoutSession } from '@ollie-shop/sdk';

    export const function PageShipping {
      const { sessionValidity } = useCheckoutSession();

      // Extract address validation errors if they exist
      const missingAddressFields =
        sessionValidity && "errors" in sessionValidity
          ? sessionValidity.errors?.shipping?.addresses
          : undefined;

      // Component rendering...
      return (
        <form onSubmit={() => {}}>
            <button type="submit">
                Next to {missingAddressFields ? 'address' : 'payment'}
            </button>
        </form>
      )
    }
    ```

    **What you get:**

    * Raw data from the e-commerce provider
    * Ollie Session data
    * Validate required fields
  </Tab>
</Tabs>