Stop building static checkout components that don’t 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.

Real-time Data

Access live cart data, customer information, and checkout state. Components update automatically when data changes.

Easy Integration

Simple React hooks that work with any component structure. No complex state management required.

​
Essential Hooks

Problem: Need access to cart contents and customer information
useCheckoutSession Hook
import { useCheckoutSession } from '@ollie-shop/sdk';

export default function CartSummary() {
  const { cart, customer, addToCart, removeFromCart } = useCheckoutSession();
  
  return (
    <div>
      <h3>Hello {customer.firstName}!</h3>
      <p>Items: {cart.items.length}</p>
      <p>Total: ${(cart.total / 100).toFixed(2)}</p>
      
      {cart.items.map(item => (
        <div key={item.id}>
          <span>{item.name} (${(item.price / 100).toFixed(2)})</span>
          <button onClick={() => removeFromCart(item.id)}>Remove</button>
        </div>
      ))}
    </div>
  );
}
What you get:
  • ✅ Live cart data (items, totals, discounts)
  • ✅ Customer information (name, email, type)
  • ✅ Cart actions (add, remove, update quantities)
  • ✅ Coupon management (apply, remove codes)

​
Quick Usage Patterns

​
Basic Component Structure

Component with Multiple Hooks
import { useCheckoutSession, useStoreInfo } from '@ollie-shop/sdk';

export default function MyComponent() {
  const { cart, customer } = useCheckoutSession();
  const { theme, messages } = useStoreInfo();
  
  // Always check for loading/undefined states
  if (!cart || !customer) {
    return <div>Loading...</div>;
  }
  
  return (
    <div style={{ color: theme.colors.primary }}>
      <h3>{messages.checkout.welcome}</h3>
      <p>Hello {customer.firstName}!</p>
      <p>Cart total: ${(cart.total / 100).toFixed(2)}</p>
    </div>
  );
}

​
Installation & Setup

# SDK is included in all Ollie Shop projects
npm install @ollie-shop/sdk

​
TypeScript Support

// Import types for better development experience
import type { Cart, Customer, PaymentMethod } from '@ollie-shop/sdk';
import { useCheckoutSession } from '@ollie-shop/sdk';

export default function TypedComponent() {
  const { cart, customer }: { cart: Cart, customer: Customer } = useCheckoutSession();
  
  return <div>{/* Your component */}</div>;
}

​
Next Steps

Component Examples

See practical examples using these hooks

Function Examples

Learn how functions access the same data

Getting Started

Build and deploy your first component

Components Guide

Understanding the component system
Pro Tip: All hooks automatically update when the underlying data changes. Your components will re-render with fresh data when customers add items, change shipping, or update their information.