React + Vite

npm install @behio/storefront-sdk

import { BehioStorefront } from '@behio/storefront-sdk';

export const storefront = new BehioStorefront({
  apiKey: import.meta.env.VITE_BEHIO_API_KEY,
});

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BehioProvider } from '@behio/storefront-sdk/react';
import { storefront } from './lib/behio';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BehioProvider client={storefront}>
      <App />
    </BehioProvider>
  </React.StrictMode>
);

import { useProducts } from '@behio/storefront-sdk/react';

export function Products() {
  const { data, isLoading } = useProducts({ limit: 12 });

  if (isLoading) return <div>Loading...</div>;

  return (
    <div className="grid grid-cols-3 gap-4">
      {data.items.map(product => (
        <div key={product.id}>
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>{product.price} {product.currency}</p>
        </div>
      ))}
    </div>
  );
}

import { useAddToCart } from '@behio/storefront-sdk/react';

export function AddToCartButton({ productId }: { productId: string }) {
  const addItem = useAddToCart();

  return (
    <button
      onClick={() => addItem.mutateAsync({ productId, quantity: 1 })}
      disabled={addItem.isPending}
    >
      {addItem.isPending ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

import { useCart, useRemoveCartItem, useCheckout } from '@behio/storefront-sdk/react';
import { useNavigate } from 'react-router-dom';

export function Cart() {
  const { data: cart, isLoading } = useCart();
  const removeItem = useRemoveCartItem();
  const checkout = useCheckout();
  const navigate = useNavigate();

  if (isLoading) return <div>Loading...</div>;
  if (!cart || cart.items.length === 0) return <div>Cart is empty</div>;

  const handleCheckout = async () => {
    const order = await checkout.mutateAsync({
      email: '[email protected]',
      shippingAddress: {
        firstName: 'Jan',
        lastName: 'Novak',
        street: 'Vodickova 12',
        city: 'Praha',
        zip: '11000',
        country: 'CZ',
      },
    });
    navigate(`/thank-you?order=${order.orderNumber}`);
  };

  return (
    <div>
      {cart.items.map(item => (
        <div key={item.id}>
          <span>{item.productName} x{Number(item.quantity)}</span>
          <button onClick={() => removeItem.mutateAsync(item.id)}>Remove</button>
        </div>
      ))}
      <p>Total: {cart.grandTotal} {cart.currency}</p>
      <button onClick={handleCheckout} disabled={checkout.isPending}>
        {checkout.isPending ? 'Processing...' : 'Checkout'}
      </button>
    </div>
  );
}

import { useState } from 'react';
import { storefront } from '../lib/behio';

export function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const tokens = await storefront.auth.login({ email, password });
    // Tokens are auto-stored in the client
    // Persist to localStorage for page reloads
    localStorage.setItem('behio_tokens', JSON.stringify(tokens));
  };

  return (
    <form onSubmit={e => { e.preventDefault(); handleLogin(); }}>
      <input value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

VITE_BEHIO_API_KEY=pk_live_your_key