Build a small online shop that takes orders and payment slips, with AI

You already sell something — home-made cookies, hand-made soap, printed T-shirts — and every order arrives as a chat message. After a while you can no longer tell who ordered what, who has paid and who has not. You would like a shop page of your own where customers pick products, place an order and attach their payment slip, without paying a monthly fee to a big shop platform.

This article walks you through building a small online shop with AI, from the first prompt to a live site on BrewInTH: product pages, a cart, an order form, payment-slip upload and an admin page where you confirm orders. It also says plainly which parts you can do yourself and which parts deserve an expert.

In short
🛍️ A "transfer, then attach the slip" shop is a one-day job with AI; no card processing needed
🛍️ Products and orders live in the database, pictures and slips in /bw-data, the admin password in App settings
🛍️ Try it for free; for real sales a Starter package or higher (more space, your own domain, a shop mailbox)
🛍️ Card payments or large amounts of customer data should be reviewed by an expert before launch
🛍️ Three prompts to copy and a six-point checklist before you open

Which shops this suits

The approach here suits a small shop with a few dozen products, customers who already pay by bank transfer or PromptPay, and an owner who does not mind checking slips a few times a day.

You own the storefront, design it however you like, pay no per-order platform fee, and your customers' data sits in your own database.

If you take hundreds of orders a day, need automatic card charging, several couriers or complex tax rules, a ready-made shop platform or a development team will serve you better.

How the shop works: five steps of one order

1. The customer picks products, adds them to the cart and adjusts quantities
2. Enters delivery details — name, address, phone — and places the order, getting an order number
3. Transfers the money and attaches the slip; the page shows the amount and the shop's account
4. The shop checks the slip in the admin page against the real bank account and confirms
5. The shop ships, adds the tracking number, and the customer can look up the status with the order number

Step 4 is the heart of it. Never trust a slip picture on its own — fake slips are easy to make. Open your bank app and compare the amount and time every time before you confirm.

What goes where

• Products, orders, customers → the database; PostgreSQL or MySQL when you create the project
• Product pictures and slips → persistent storage at /bw-data, or they disappear with every new release
• The admin password and keys of other services → the project's App settings tab, never in the code
• Order emails → a shop mailbox such as shop@yourshop.com; it needs your own domain and a package with mailboxes (Starter or higher), then *Use in the app (write `MAIL_`)** on the Email page. Not ready yet? Skip it; customers follow their order by number instead.

Building it step by step

Step 1: Create the project

In the console, create a new project. For technology choose Let the platform decide (recommended), for the database PostgreSQL, give it a free site name after your shop, then create a link and token for your AI.

Step 2: Ask the AI for the storefront

Copy this prompt and change the shop name and products to yours.

Build a small online shop called "Cookie House" selling 8 kinds of cookies.
- Home page: product list with picture, name, price and an add-to-cart button; works well on phones
- Cart: change quantities, remove items, show the total plus a flat ฿50 delivery fee
- Checkout: name, phone, delivery address, note; then create an order number
- Always compute the amount on the server from prices in the database; never trust prices sent by the browser
- After checkout show the amount to transfer and the shop's bank details (read from SHOP_BANK_TEXT)
- Order tracking page: enter order number + phone to see the status
Store products and orders in the project's database.

Step 3: Slips and the admin page

Add to the shop:
- On the order tracking page the customer can attach a slip (JPG, PNG or PDF only, max 5 MB).
  Store files under /bw-data/slips and keep only the file name in the database.
- An admin page at /admin, signed in with the password from ADMIN_PASSWORD:
  - latest orders, filtered by status: awaiting payment / to check / confirmed / shipped / cancelled
  - view the slip (admins only), a confirm-payment button, a tracking number field
  - add/edit products, upload product pictures under /bw-data/products, switch a product on/off
  - download orders as CSV
- Limit failed sign-in attempts and use secure HTTPS cookies.
Before releasing, use storage_set so the data folders are on persistent storage.

Step 4: Put the shop's values in App settings

Open the project's App settings tab and add ADMIN_PASSWORD (long, hard to guess) and SHOP_BANK_TEXT (account name, number and bank). New values take effect when the app restarts, so ask the AI to release once more after changing them. An AI agent can set these values too, but set the admin password yourself in the console.

Step 5: Shop once as a customer

Place a real order from your phone, attach a test slip, confirm it in the admin page, add a tracking number and watch the status change on the tracking page. Then have the AI release again and open the same slip: if it is still there, files are stored in the right place.

Want cards or automatic QR payments?

The shop in this article does not take money itself. To let customers pay by card or QR and confirm orders automatically, sign up with a payment gateway and connect it to the site.

• Use the provider's hosted checkout page rather than collecting card numbers on your own site
• Keep the provider's secret key in App settings only
• Confirm payment from a signature-checked webhook, not from the page the customer returns to

The AI can write this part, but anything that moves real money should be reviewed by an expert before launch, and fully tried in the provider's test mode first.

A six-point checklist before you open

1. Totals are computed on the server — change a cart price in the browser and check that the order amount does not move
2. Check slips against the bank app every time before confirming
3. The admin password is in App settings, not in the code, and not a password you use elsewhere
4. Pictures and slips are in /bw-data — test by releasing again and opening them
5. Policy pages: privacy (you keep customers' names, addresses and phone numbers) and returns. Let the AI draft them and read them yourself; this article is not legal advice
6. Backups: the Backups add-on (฿99/month) backs up the database daily and the /bw-data storage too — or at least download the order CSV regularly

Which package

• Free is enough to build and try the whole shop, but 20 MB of file space holds few pictures and slips, and you cannot use your own domain
• Starter at ฿99/month gives 200 MB of file space, your own domain and three mailboxes — a good fit when you start selling
• Shops with many product pictures or lots of visitors: see Maker and up on the packages page

Ask the AI to resize product pictures before storing them (e.g. at most 1,200 px wide): it saves space and the shop loads faster on phones.

FAQ

Do I have to write code?

No. The AI writes it. Your job is to say clearly what the shop must do, test it as a customer and check real slips.

Must customers sign up before ordering?

Not necessarily. Most small shops do fine with order number + phone for tracking. Accounts can come later, once you have regulars.

Can I do it all from my phone?

Having the AI build and release the site needs a coding agent on a computer. Running the shop — the admin page, orders, slips — works comfortably from a phone.

If the AI breaks the admin page, are orders lost?

Orders live in the database and survive new releases. But if new code deletes or changes data by mistake, you need a backup: the Backups add-on or the CSV files you downloaded.

How can I be told about new orders?

The simplest is an email from the shop's mailbox (Starter or higher). For a chat-app notification, have the AI connect the messaging service you use and keep its token in App settings.

Summary

A small "transfer and attach the slip" shop is a one-day job with AI: products and orders in the database, pictures and slips in /bw-data, passwords in App settings — and every slip checked against your bank app. Start for free, then move to Starter with your shop's own domain when you are ready to sell.

Start your first project for free →

Related articles

• Build a sales or course landing page with AI in one day
• Keep API keys and passwords safe with project secrets