Build your store with Lovable

Lovable makes good-looking sites, but a shop needs a back end it doesn’t have: prices, stock, tax, delivery, payments and orders. Your Tuppence store is that back end. Lovable builds the pages; every price, total and order comes from the Storefront API.

What you need

• Your store’s publishable key, pk_test_…, from Developers › API keys. It is public by design, so it can sit in the site’s code. Never give Lovable a secret key (sk_… or rk_…).
• At least one product online (Selling products online).

1. Tell Lovable the rules

Start the project with this prompt, your key in place of the placeholder. It sets the rules every later prompt keeps.

Build a shop front for my Tuppence store in React. Use the Tuppence Storefront API at
https://api.tuppence.ai/storefront/v1, described at
https://docs.tuppence.ai/docs/openapi.storefront.json. Send the header
Tuppence-Publishable-Key: pk_test_… on every call. It is the only 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.
- Keep the basket's cart_token in localStorage under tuppence_cart_<publishable key>.
- Take card details only through @tuppence/js. Never add a card number field.

2. Build it a page at a time

Use the prompt kit in order: the product grid, the product page, the basket, then the checkout. Each prompt there comes with the calls its code should make; if a page shows the wrong total, compare Lovable’s calls with them.

To keep the payment on your own site, the checkout prompt mounts @tuppence/js’s card fields. To keep it simpler, ask for a Checkout button that opens your Tuppence store’s own checkout for the same basket instead:

Make the basket's Checkout button open <my store's address>/checkout/c/<cart_token> in the
same tab. Get my store's address from GET /storefront/v1/site (its url).

3. Allow Lovable’s addresses

A browser may call the Storefront API only from the addresses listed under Store › Settings › Developers › Allowed origins. Add each address your site runs on:

• the published address, ending .lovable.app;
• the preview’s address while you build (open the preview in its own tab and copy the part up to the first / after the domain);
• your own domain, once you connect one.

Each is https:// with no path. Without it the site loads but the API answers 403 origin_not_allowed, with a link to the setting.

4. Apple Pay and Google Pay

Each allowed origin is set up for Apple Pay and Google Pay. Apple also needs one file on your site: ask Lovable to save a copy of Tuppence’s as public/.well-known/apple-developer-merchantid-domain-association. Without it Apple Pay simply doesn’t appear.

5. Go live

Once your account is live, add your addresses again in live mode, then ask Lovable to swap pk_test_… for your pk_live_… key and publish. Your products, prices and orders are the same store’s, in live mode.

Next

• Store prompt kit
• The Storefront API
• Build your store with v0