Build your store with v0

v0 generates Next.js pages; your Tuppence store supplies what a shop needs behind them: the catalogue, prices with tax, delivery options, payments and orders, all through the Storefront API and your publishable key.

What you need

• Your store’s publishable key, pk_test_…, from Developers › API keys. Never give v0 a secret key (sk_… or rk_…): a shop front never needs one.
• At least one product online (Selling products online).

1. Set the key

In the v0 project’s environment variables (and later the Vercel project’s), add NEXT_PUBLIC_TUPPENCE_PUBLISHABLE_KEY with your pk_test_… key.

2. Tell v0 the rules

Build a Next.js App Router shop front for my Tuppence store. Use the Tuppence Storefront API at
https://api.tuppence.ai/storefront/v1, described at
https://docs.tuppence.ai/docs/openapi.storefront.json, with the header
Tuppence-Publishable-Key from NEXT_PUBLIC_TUPPENCE_PUBLISHABLE_KEY.

- Load products in server components. Keep the basket in the browser: its cart_token in
  localStorage under tuppence_cart_<publishable key>.
- Show prices, totals, tax and delivery dates exactly as the API answers them. Never compute a
  price, a total, a tax or a delivery date yourself. Amounts are in minor units.
- Take card details only through @tuppence/js. Never add a card number field.

3. Build it a page at a time

Then the prompt kit’s prompts in order: the product grid, the product page, the basket and the checkout. Each one comes with the calls its code should make. Product pages built in server components need no allowed origin, so they work in v0’s preview straight away; the basket and checkout run in the browser and need step 4.

4. Allow your site’s addresses

Under Store › Settings › Developers › Allowed origins, add each address the site runs on, as https:// with no path:

• your Vercel address, such as https://candles.vercel.app;
• your own domain, once it points at Vercel;
• v0’s preview address if you want to try the basket there (open the preview in its own tab and copy the part up to the first / after the domain).

Without it the API answers the browser’s basket calls with 403 origin_not_allowed, with a link to the setting.

5. Apple Pay and Google Pay

Each allowed origin is set up for Apple Pay and Google Pay. Apple also needs one file on your domain. Ask v0 for a route handler at app/.well-known/apple-developer-merchantid-domain-association/route.ts that serves a copy of Tuppence’s as plain text. Without it Apple Pay simply doesn’t appear.

6. Go live

Once your account is live, add your addresses again in live mode, set NEXT_PUBLIC_TUPPENCE_PUBLISHABLE_KEY to your pk_live_… key in Vercel, and redeploy.

Next

• Store prompt kit
• The Storefront API
• Build your store with Claude Code