Components

import { useCheckoutSession, useStoreInfo } from "@ollie-shop/sdk";

export default function MyComponent() {
  // Access live checkout data
  const { session } = useCheckoutSession();
  const { theme } = useStoreInfo();
  const { currency, language } = session.locale;

  // Totals are in minor units (cents)
  const total = new Intl.NumberFormat(language, { style: "currency", currency })
    .format(session.totals.total / 100);

  return (
    // `theme` is a flat record of CSS tokens, e.g. theme?.["--color-primary"]
    <div style={{ color: theme?.["--color-primary"] }}>
      <h3>Welcome {session.customer?.firstName}!</h3>
      <p>Cart total: {total}</p>
    </div>
  );
}