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

​
Hooks

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