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

usePayment

Payment methods, selection, and installment options

useShipping

Shipping options, addresses, and delivery preferences

useStoreInfo

Store configuration, theme, and branding data

useCheckoutSession

The primary hook for accessing and modifying checkout data.
Access cart contents and totals
import { useCheckoutSession } 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

usePayment

Access payment methods and selection state.
Display available payment options
import { usePayment } from '@ollie-shop/sdk';

function PaymentMethods() {
  const { 
    availableMethods, 
    selectedMethod, 
    selectPayment 
  } = usePayment();
  
  return (
    <div>
      <h3>Choose Payment Method</h3>
      {availableMethods.map(method => (
        <button
          key={method.id}
          onClick={() => selectPayment(method.id)}
          className={selectedMethod?.id === method.id ? 'selected' : ''}
        >
          <img src={method.icon} alt={method.name} />
          {method.name}
          {method.fee > 0 && (
            <span>+${(method.fee / 100).toFixed(2)} fee</span>
          )}
        </button>
      ))}
    </div>
  );
}
PaymentMethod Properties:
PropertyTypeDescription
idstringUnique payment method ID
namestringDisplay name (Credit Card, PayPal)
typestringMethod type (card, wallet, bank)
iconstringPayment method icon URL
feenumberProcessing fee in cents
isAvailablebooleanWhether method is available

useShipping

Access shipping options and delivery preferences.
Display available shipping methods
import { useShipping } from '@ollie-shop/sdk';

function ShippingOptions() {
  const { 
    shippingOptions, 
    selectedOption, 
    selectShipping 
  } = useShipping();
  
  return (
    <div>
      <h3>Delivery Options</h3>
      {shippingOptions.map(option => (
        <div
          key={option.id}
          onClick={() => selectShipping(option.id)}
          className={`shipping-option ${
            selectedOption?.id === option.id ? 'selected' : ''
          }`}
        >
          <div className="option-info">
            <h4>{option.name}</h4>
            <p>{option.description}</p>
            <span className="delivery-time">
              Arrives {option.estimatedDelivery}
            </span>
          </div>
          <div className="option-price">
            {option.price === 0 ? (
              <span className="free">FREE</span>
            ) : (
              <span>${(option.price / 100).toFixed(2)}</span>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}
ShippingOption Properties:
PropertyTypeDescription
idstringUnique shipping method ID
namestringDisplay name (Standard, Express)
descriptionstringMethod description
pricenumberShipping cost in cents
estimatedDaysnumberDelivery time in days
estimatedDeliverystringFormatted delivery date
carrierstringShipping carrier name
isAvailablebooleanWhether option is available

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

TypeScript Support

All hooks come with full TypeScript support:
import { 
  useCheckoutSession, 
  CartItem, 
  Customer, 
  PaymentMethod 
} from '@ollie-shop/sdk';

// Types are automatically inferred
const { cart, customer, addToCart } = useCheckoutSession();

// Explicit typing when needed
const handleAddItem = async (item: CartItem) => {
  await addToCart(item);
};

// Type guards for optional data
const renderCustomerInfo = (customer: Customer) => {
  if (customer.isLoggedIn) {
    // TypeScript knows customer.name is available here
    return <p>Welcome, {customer.name}!</p>;
  }
  return <p>Welcome, Guest!</p>;
};

What’s Next?

Pro Tip: Start with useCheckoutSession for basic cart/customer data, then add other hooks as needed. The hooks are designed to work together seamlessly.