Sell your Sokko catalogue on a site you already run

1. 1

   Install

   React 18 or 19 is the only peer. The package is ESM only.

   npmpnpmyarnbun

   Copy

   npm install @sokkoke/storefront-react

2. 2

   Create the client

   Once, at module scope. That one id is the whole setup.

   src/lib/store.jsCopy

   import {
     createStorefront,
     createCartStore
   } from '@sokkoke/storefront-react';
   
   export const storefront = createStorefront({
     storefrontId: 'your-storefront-id'
   });
   
   export const cart = createCartStore({
     namespace: 'your-site'
   });

   No API key and no server step. The package speaks only to Sokko public storefront endpoints.

   Your own id, with this snippet already filled in, is in your Sokko dashboard under Settings, Developers.

3. 3

   Show your products

   Each hook is the headless version of one storefront component. You write the markup.

   src/StoreListing.jsxCopy

   import { useCatalogue } from '@sokkoke/storefront-react';
   import { storefront } from './lib/store';
   
   export function StoreListing() {
     const { status, products } = useCatalogue(storefront);
   
     if (status !== 'ready') return <YourSkeleton />;
   
     return (
       <ul>
         {products.map((product) => (
           <ProductTile key={product.id} product={product} />
         ))}
       </ul>
     );
   }

4. 4

   Hand off to checkout

   Buyers finish on Sokko, so payment, installments and delivery stay with us.

   src/BuyButton.jsxCopy

   import {
     useProductPurchase,
     checkoutNoticeFor,
     formatPrice
   } from '@sokkoke/storefront-react';
   import { storefront, cart } from './lib/store';
   
   export function BuyButton({ product }) {
     const { selectedVariant, buyNow, checkoutStatus } =
       useProductPurchase(storefront, cart, product);
   
     const busy = checkoutStatus === 'working';
   
     return (
       <>
         <button
           disabled={!selectedVariant || busy}
           onClick={() => buyNow()}
         >
           {selectedVariant
             ? `Buy ${formatPrice(selectedVariant.priceAmount)}`
             : 'Select an option'}
         </button>
         <p>{checkoutNoticeFor(product)}</p>
       </>
     );
   }

   Checkout is a full navigation to a Sokko address. Tell buyers where they are going: an unannounced change of site reads as a broken link. checkoutNoticeFor(product) is written copy for exactly that, with the installment line added for items that qualify.

Each hook is the headless version of one storefront component. Compose them under your own markup.

Store listinguseCatalogue

Fetch state (loading, ready, error) and your products.

Product tileuseProductTile

Primary image, srcSet, the "from" price, and whether the product has options.

Product pageuseProduct, useProductPurchase, useGallery, useRelatedProducts

Load and missing states, variant selection, clamped quantity, add to basket, buy now, gallery, and a related strip drawn from your own catalogue.

Cart dockuseCartDock

Drawer open and close, totals, checkout, and the modal contract: Escape closes, Tab cycles, focus returns, scroll locks.

Charisma runs the package on their own site, in their own type and colour. The cards, the prices under them and the basket count in their header all come from the hooks.

Every hook, the API facts worth knowing, and a product page in about twenty lines are in the package readme.