Drop-in components

npm install @mercestack/commerce @mercestack/commerce-react

import {
  CommerceProvider,
  ProductGrid,
  CheckoutButton,
  BookingWidget,
  CourseList,
} from "@mercestack/commerce-react";

export default function Site() {
  return (
    <CommerceProvider publicKey="pk_live_…">
      <header><CheckoutButton /></header>
      <ProductGrid productHref={(product) => `/products/${product.handle}`} />
      <BookingWidget />          {/* or <BookingWidget handle="ada" /> */}
      <CourseList />
    </CommerceProvider>
  );
}

<style>
  :root {
    --ms-accent: #e11d48;          /* buttons and the selected state */
    --ms-accent-contrast: #fff;    /* text on the accent */
    --ms-radius: 999px;            /* corners */
    --ms-border: rgba(0,0,0,.1);
    --ms-muted: rgba(0,0,0,.55);
  }
  [data-ms="product-card"] { box-shadow: 0 8px 24px rgba(0,0,0,.06); }
</style>

const { products } = useProducts();
const { addToCart, count } = useCart();
const { pages } = useBookingPages();
const { slots } = useBookingSlots(handle, typeSlug, { from, to });
const { courses } = useCourses();