BizKitHub
Developer Guide

E-Shop Quickstart

Build your own e-commerce frontend from scratch using BizKitHub as your headless commerce backend.

This guide walks you through every step - from getting API credentials to processing your first order. By the end, you will have a fully functional e-shop connected to BizKitHub.

Architecture OverviewGet API Key

Prerequisites

Before you begin, make sure you have:

Step-by-Step Implementation

Follow these steps to build your e-commerce frontend with BizKitHub API.

1

Get Your API Credentials

Obtain your API key from BizKitHub admin panel. You will need this to authenticate all API requests.

Code
// Your API key format
const API_KEY = "PROD_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";

// API base URL
const API_BASE = "https://api.bizkithub.com/api/v1";
Tips
  • Use DEV_ prefixed keys for development
  • Never expose API keys in client-side code
  • Store keys in environment variables
2

Set Up Your Project

Create a new frontend project with your preferred framework. We recommend Next.js for production e-commerce.

Code
# Create a new Next.js project
npx create-next-app@latest my-eshop
cd my-eshop

# Install dependencies
npm install

# Create environment file
echo "BIZKITHUB_API_KEY=your_api_key_here" > .env.local
echo "BIZKITHUB_API_URL=https://api.bizkithub.com/api/v1" >> .env.local
Tips
  • Use .env.local for secrets
  • Add .env.local to .gitignore
  • Consider using TypeScript for better DX
3

Create API Client

Build a reusable API client to handle authentication and requests to BizKitHub.

Code
// lib/bizkithub.ts
const API_KEY = process.env.BIZKITHUB_API_KEY;
const API_URL = process.env.BIZKITHUB_API_URL;

export async function fetchFromAPI(endpoint: string, options: RequestInit = {}) {
  const response = await fetch(`${API_URL}${endpoint}`, {
    ...options,
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json',
      ...options.headers,
    },
  });

  if (!response.ok) {
    throw new Error(`API Error: ${response.status}`);
  }

  return response.json();
}

// Example: Fetch products
export async function getProducts() {
  return fetchFromAPI('/product');
}

// Example: Get single product
export async function getProduct(id: string) {
  return fetchFromAPI(`/product/${id}`);
}
Tips
  • Handle errors gracefully
  • Add request timeout handling
  • Consider implementing retry logic
4

Fetch and Display Products

Create pages to display your product catalog from BizKitHub.

Code
// app/products/page.tsx
import { getProducts } from '@/lib/bizkithub';

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <div className="grid grid-cols-3 gap-6">
      {products.data.map((product) => (
        <div key={product.id} className="border rounded-lg p-4">
          <img src={product.image} alt={product.name} />
          <h2 className="font-bold">{product.name}</h2>
          <p className="text-gray-600">{product.description}</p>
          <p className="text-xl font-semibold">
            {product.price} {product.currency}
          </p>
          <button className="bg-blue-600 text-white px-4 py-2 rounded">
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
}
Tips
  • Implement pagination for large catalogs
  • Add loading states
  • Consider ISR for better performance
5

Implement Shopping Cart

Use BizKitHub cart API to manage customer shopping carts.

Code
// lib/cart.ts
import { fetchFromAPI } from './bizkithub';

export async function createCart() {
  return fetchFromAPI('/cart', {
    method: 'POST',
  });
}

export async function addToCart(cartId: string, productId: string, quantity: number) {
  return fetchFromAPI(`/cart/${cartId}/items`, {
    method: 'POST',
    body: JSON.stringify({
      product_id: productId,
      quantity,
    }),
  });
}

export async function getCart(cartId: string) {
  return fetchFromAPI(`/cart/${cartId}`);
}

export async function updateCartItem(cartId: string, itemId: string, quantity: number) {
  return fetchFromAPI(`/cart/${cartId}/items/${itemId}`, {
    method: 'PATCH',
    body: JSON.stringify({ quantity }),
  });
}

export async function removeFromCart(cartId: string, itemId: string) {
  return fetchFromAPI(`/cart/${cartId}/items/${itemId}`, {
    method: 'DELETE',
  });
}
Tips
  • Store cart ID in cookies or localStorage
  • Sync cart with user account after login
  • Handle out-of-stock scenarios
6

Build Checkout Flow

Create the checkout process with order creation and payment handling.

Code
// lib/checkout.ts
import { fetchFromAPI } from './bizkithub';

export async function createOrder(cartId: string, customerData: CustomerData) {
  return fetchFromAPI('/order', {
    method: 'POST',
    body: JSON.stringify({
      cart_id: cartId,
      customer: customerData,
      shipping_address: customerData.address,
    }),
  });
}

export async function initiatePayment(orderId: string, paymentMethod: string) {
  return fetchFromAPI(`/payment`, {
    method: 'POST',
    body: JSON.stringify({
      order_id: orderId,
      payment_method: paymentMethod,
    }),
  });
}

// Checkout page component
export default function CheckoutPage() {
  async function handleCheckout(formData: FormData) {
    // 1. Create order from cart
    const order = await createOrder(cartId, {
      email: formData.get('email'),
      name: formData.get('name'),
      address: {
        street: formData.get('street'),
        city: formData.get('city'),
        zip: formData.get('zip'),
      },
    });

    // 2. Initiate payment
    const payment = await initiatePayment(order.id, 'card');

    // 3. Redirect to payment gateway
    window.location.href = payment.redirect_url;
  }

  return (
    <form action={handleCheckout}>
      {/* Checkout form fields */}
    </form>
  );
}
Tips
  • Validate all input on server side
  • Handle payment callbacks properly
  • Implement order confirmation page

Additional Features

Extend your e-shop with these additional BizKitHub API capabilities.

Customer Accounts

User registration and login

/customer

Order History

View past orders

/order

Wishlist

Save products for later

/customer/wishlist

Vouchers

Apply discount codes

/voucher

Search

Product search

/product/search

Categories

Product categories

/product/category

Best Practices

Follow these recommendations for a production-ready e-commerce application.

Security

  • Never expose API keys in client-side code
  • Use server-side API routes for sensitive operations
  • Implement CSRF protection
  • Validate all user input

Performance

  • Cache product data with ISR or SWR
  • Optimize images with next/image
  • Implement lazy loading for product lists
  • Use CDN for static assets

User Experience

  • Add loading states for all async operations
  • Implement optimistic UI updates
  • Handle errors gracefully with user-friendly messages
  • Support mobile-first responsive design

You are Ready to Build!

With these fundamentals in place, you have everything needed to create a fully functional e-commerce store powered by BizKitHub. Explore the API documentation for more endpoints.

API ReferenceGet API Key

Related Resources

Architecture OverviewAPI DocumentationError CodesRate Limiting