@hanzo/shop.js

Complete e-commerce shop solution. Combines @hanzo/commerce + @hanzo/checkout for a full shopping experience.

Installation

npm install @hanzo/shop.js

Quick Start

import {
  // Commerce components
  ProductCard,
  AddToCartWidget,
  CartPanel,
  
  // Checkout components
  CheckoutProvider,
  CheckoutForm,
  
  // Checkout client
  createCheckout
} from '@hanzo/shop.js'

function Shop({ products }) {
  return (
    <CheckoutProvider options={{ apiKey: 'pk_live_xxx' }}>
      {/* Product listing */}
      <div className="products">
        {products.map(product => (
          <ProductCard key={product.id} product={product}>
            <AddToCartWidget sku={product.sku} />
          </ProductCard>
        ))}
      </div>
      
      {/* Cart sidebar */}
      <CartPanel />
      
      {/* Checkout form */}
      <CheckoutForm />
    </CheckoutProvider>
  )
}

Subpath Exports

/cart - Cart-only components

import { CartPanel, AddToCartWidget } from '@hanzo/shop.js/cart'

/checkout - Checkout-only components

import { CheckoutProvider, CheckoutForm, useCheckout } from '@hanzo/shop.js/checkout'

What's Included

From @hanzo/commerce

• ProductCard - Product display
• AddToCartWidget - Add to cart button
• CartPanel - Shopping cart
• CarouselBuyCard - Product carousel
• PaymentStepForm - Payment form
• ShippingStepForm - Shipping form
• Icons - Commerce icons

From @hanzo/checkout

• CheckoutProvider - Checkout context
• CheckoutForm - Complete checkout form
• useCheckout - Checkout hook
• createCheckout - Programmatic checkout client
• HanzoCheckout - Checkout class

License

BSD-3-Clause