Skip to main content
These hooks give your components access to live checkout data and the ability to modify the checkout experience. All hooks are TypeScript-ready with full type definitions.

​
Quick Reference

useCheckoutSession

Access cart data, customer info, and modify cart contents

useStoreInfo

Store configuration, theme, and branding data

useCheckoutSession

Ecommerce Provider Data, Ollie Data, session validation

​
useCheckoutSession

The primary hook for accessing and modifying checkout data.
Access cart contents and totals
import { useCheckoutAction } from '@ollie-shop/sdk';

function CartDisplay() {
  const { cart } = useCheckoutSession();
  
  return (
    <div>
      <h3>Cart Summary</h3>
      <p>Items: {cart.items.length}</p>
      <p>Subtotal: ${(cart.subtotal / 100).toFixed(2)}</p>
      <p>Shipping: ${(cart.shipping / 100).toFixed(2)}</p>
      <p>Tax: ${(cart.tax / 100).toFixed(2)}</p>
      <p>Total: ${(cart.total / 100).toFixed(2)}</p>
      
      {cart.items.map(item => (
        <div key={item.id}>
          {item.name} - Qty: {item.quantity} - ${(item.price / 100).toFixed(2)}
        </div>
      ))}
    </div>
  );
}
Cart Properties:
PropertyTypeDescription
itemsCartItem[]Array of products in cart
totalnumberTotal amount in cents
subtotalnumberSubtotal before shipping/tax
shippingnumberShipping cost in cents
taxnumberTax amount in cents
discountnumberTotal discount amount
currencystringCurrency code (USD, EUR, etc.)
CartItem Properties:
PropertyTypeDescription
idstringUnique product identifier
namestringProduct name
pricenumberPrice per unit in cents
quantitynumberQuantity in cart
imagestringProduct image URL
categorystringProduct category
skustringStock keeping unit

​
useStoreInfo

Access store configuration, theme, and branding information.
Use store theme in your components
import { useStoreInfo } from '@ollie-shop/sdk';

function ThemedComponent() {
  const { theme, store } = useStoreInfo();
  
  return (
    <div
      style={{
        backgroundColor: theme.colors.background,
        color: theme.colors.text,
        fontFamily: theme.fonts.body
      }}
    >
      <h2 style={{ 
        color: theme.colors.primary,
        fontFamily: theme.fonts.heading 
      }}>
        Welcome to {store.name}
      </h2>
      
      <button
        style={{
          backgroundColor: theme.colors.primary,
          color: theme.colors.onPrimary,
          borderRadius: theme.borderRadius,
          padding: theme.spacing.medium
        }}
      >
        Shop Now
      </button>
    </div>
  );
}
Theme Properties:
PropertyTypeDescription
colors.primarystringPrimary brand color
colors.secondarystringSecondary color
colors.backgroundstringBackground color
colors.textstringText color
colors.onPrimarystringText color on primary background
fonts.headingstringHeading font family
fonts.bodystringBody text font family
spacing.smallstringSmall spacing value
spacing.mediumstringMedium spacing value
spacing.largestringLarge spacing value
borderRadiusstringDefault border radius

​
Hook Usage Patterns

Use multiple hooks together for rich components:
import { useCheckoutSession, usePayment, useShipping, useStoreInfo } from '@ollie-shop/sdk';

function ComprehensiveCheckoutSummary() {
  const { cart, customer } = useCheckoutSession();
  const { selectedMethod } = usePayment();
  const { selectedOption } = useShipping();
  const { store } = useStoreInfo();
  
  return (
    <div>
      <h2>Order Summary - {store.name}</h2>
      
      <div className="customer-info">
        {customer.isLoggedIn ? (
          <p>Order for: {customer.name}</p>
        ) : (
          <p>Guest order</p>
        )}
      </div>
      
      <div className="cart-summary">
        <p>Items ({cart.items.length}): ${(cart.subtotal / 100).toFixed(2)}</p>
        <p>Shipping ({selectedOption?.name}): ${(cart.shipping / 100).toFixed(2)}</p>
        <p>Payment method: {selectedMethod?.name}</p>
        <p><strong>Total: ${(cart.total / 100).toFixed(2)}</strong></p>
      </div>
    </div>
  );
}
Optimize hook usage for better performance:
import { useCheckoutSession } from '@ollie-shop/sdk';
import { useMemo } from 'react';

function OptimizedComponent() {
  const { cart } = useCheckoutSession();
  
  // Memoize expensive calculations
  const cartSummary = useMemo(() => {
    return {
      totalItems: cart.items.reduce((sum, item) => sum + item.quantity, 0),
      totalSavings: cart.items.reduce((sum, item) => sum + (item.originalPrice - item.price), 0),
      averageItemPrice: cart.subtotal / cart.items.length
    };
  }, [cart.items, cart.subtotal]);
  
  // Only re-render when needed
  return (
    <div>
      <p>Total items: {cartSummary.totalItems}</p>
      <p>Total savings: ${(cartSummary.totalSavings / 100).toFixed(2)}</p>
      <p>Average item price: ${(cartSummary.averageItemPrice / 100).toFixed(2)}</p>
    </div>
  );
}
Handle loading states and errors gracefully:
import { useCheckoutSession } from '@ollie-shop/sdk';
import { useState } from 'react';

function RobustComponent() {
  const { addToCart } = useCheckoutSession();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const handleAddToCart = async (item) => {
    setLoading(true);
    setError(null);
    
    try {
      await addToCart(item);
    } catch (err) {
      setError('Failed to add item to cart. Please try again.');
      console.error('Add to cart error:', err);
    } finally {
      setLoading(false);
    }
  };
  
  if (error) {
    return (
      <div className="error">
        <p>{error}</p>
        <button onClick={() => setError(null)}>Dismiss</button>
      </div>
    );
  }
  
  return (
    <button 
      onClick={() => handleAddToCart(someItem)}
      disabled={loading}
    >
      {loading ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}