SDK Reference - Ollie Shop

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

Hooks

Cart & Customer Data
Store Configuration
Session Data

Problem: Need access to cart contents and customer information

useCheckoutSession Hook

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

Problem: Need access to store theme and settings

useStoreInfo Hook

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

Problem: Need access to session data, provider data and to validate required fields

useStoreInfo Hook

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

​Hooks

Hooks