Integrations
v0 by Vercel

Integrating with v0 by Vercel

v0 generates React components with AI. It's great for building individual components of a storefront that connect to BareCommerceCore.

Getting Started

1. Create Your Store

Set up your store at barecommercecore.com (opens in a new tab) and get your API key. Also set up a payment provider (Stripe, PayPal, or Square).

2. Generate a Component in v0

Go to v0.dev (opens in a new tab) and describe what you want to build.

3. Add API Integration

Once v0 generates the component, you can modify it to call BareCommerceCore API for products and payment provider APIs for checkout.

Starter Prompts

Product Grid

Create a React component that displays a grid of products.
Fetch products from the BareCommerceCore API using the X-API-Key header.
Show product image, title, price, and an "Add to Cart" button.
Use Tailwind CSS for styling.

Product Detail Page

Build a product detail page component that:
- Takes a product ID as a prop
- Fetches product details from BareCommerceCore API
- Shows full description, images, price, and variants
- Has an "Add to Cart" button

Shopping Cart

Create a shopping cart component that:
- Stores items in React state
- Shows a list of items with quantity controls
- Calculates total price
- Has a "Checkout" button that sends the cart items and customer info to your backend
- The backend should create a Stripe PaymentIntent with the order data as metadata
- Display the Stripe payment form

Customer Dashboard

Build a dashboard component that shows:
- Recent orders fetched from BareCommerceCore API
- Customer profile information
- Order details in an expandable list

Important: Orders and Payments

Orders are created automatically from payment webhooks, not via API calls. Here's the correct flow:

  1. Customer adds items to cart in your component
  2. User clicks checkout
  3. Your backend creates a Stripe PaymentIntent with order data as metadata
  4. Frontend shows Stripe payment form
  5. Customer completes payment
  6. Stripe sends webhook to BareCommerceCore
  7. Order is automatically created in BareCommerceCore
  8. Display confirmation to customer

You don't create orders via code. They're created from payment provider webhooks.

Integrating Into Your Project

v0 components work great as building blocks. Here's how to use them:

  1. Generate UI components in v0 (product grid, cart, etc)
  2. Copy the code into your Next.js project
  3. Wire them together into a full app
  4. Connect payment processing for checkout (use Stripe, PayPal, or Square)
  5. Connect product fetching to BareCommerceCore API

Handling API Calls

When integrating BareCommerceCore API:

  1. Use your API key — Pass X-API-Key header with your BareCommerceCore API key
  2. Handle errors — Show error messages to the user if API calls fail
  3. Load states — Show loading spinners while fetching data

Example:

const response = await fetch(
  `https://api.barecommercecore.com/api/stores/${storeId}/products`,
  {
    headers: {
      'X-API-Key': process.env.NEXT_PUBLIC_BARECOMMERCE_API_KEY,
    },
  }
);
const { items } = await response.json();

Handling Payment

For payment processing, use Stripe, PayPal, or Square:

// Example: Create Stripe PaymentIntent on your backend
const paymentIntent = await stripe.paymentIntents.create({
  amount: totalInCents,
  currency: 'usd',
  metadata: {
    store_id: storeId,
    customer_id: customerId,
    items: JSON.stringify(cartItems),
    subtotal: subtotal.toString(),
    tax: tax.toString(),
    shipping: shipping.toString(),
  }
});
 
// Return clientSecret to frontend
// Frontend collects payment via Stripe Elements
// Payment success webhook creates order automatically

See Stripe Integration, PayPal Integration, or Square Integration for complete setup.

Tips

  • v0 is great for UI-first development. Focus on how it looks, then wire up the API.
  • Start with simple components (product card, button) before building complex flows.
  • Test API integration thoroughly—make sure real data loads correctly.
  • Remember: Don't try to create orders via API. Use payment provider webhooks instead.

Next Steps

LovableClaude AI