Een online winkel bouwen: producten, winkelwagen, afrekenen en voorraad

Om een online winkel te bouwen heb je een productcatalogus, een winkelwagen, een afrekenproces dat betalingen verwerkt via een provider zoals Stripe, een manier om bestellingen vast te leggen en de voorraad te verlagen, en een beheerweergave om ze te verwerken. Een AI-appbouwer kan dat allemaal samenstellen op basis van een duidelijke beschrijving. Waar je het meest over moet nadenken is niet de winkelpagina, maar de onderdelen rond het geld: wanneer een bestelling als betaald geldt, hoe voorraad wordt gereserveerd, en hoe je btw, verzending en terugbetalingen afhandelt.

Eigen winkel of Shopify? Beslis eerst

Wees hier eerlijk over voordat je iets bouwt.

Een gehost commerceplatform (Shopify, Squarespace Commerce, WooCommerce en vergelijkbare) is meestal beter wanneer:

• Je fysieke producten verkoopt met verzendtarieven, labels en retouren
• Je btw over veel regio's moet berekenen
• Een team zonder technische kennis dagelijks producten toevoegt en bestellingen verwerkt
• Je een app-winkel met add-ons wilt: reviews, e-mailmarketing, loyaliteit
• Je via meerdere kanalen verkoopt en één voorraadteller nodig hebt

De abonnementen van Shopify zijn maandelijks, met korting bij jaarbetaling, en kaartbetalingen brengen daar verwerkingskosten bovenop. Controleer de prijspagina voor jouw land, want de prijzen verschillen per regio.

Een eigen winkel wint meestal wanneer:

• Het product ongewoon is: configurators op maat, afspraken plus producten, digitale downloads met licenties, B2B-prijslijsten per klant
• De winkel een onderdeel is van een grotere app (een cursusplatform, een ledenomgeving, een marktplaats)
• Je een kleine catalogus verkoopt en volledige controle wilt over het ontwerp en de afrekenstroom
• Je de code zelf wilt bezitten en platformafhankelijkheid wilt vermijden

Veel kleine verkopers zijn het best af met een platform. Als je behoeften gewoon zijn, is dat een goede zaak. Neem de snelle weg.

Wat een online winkel nodig heeft

Gegevens

Sla de prijs op het moment van aankoop op bij elke bestelregel. Als je volgende maand een prijs wijzigt, moeten oude bestellingen nog steeds laten zien wat de klant heeft betaald.

Pagina's

• Storefront: home, categorie- of collectiepagina's, productpagina's, winkelwagen, doorverwijzing naar de checkout, orderbevestiging.
• Beheer: producten en voorraad, bestellingen met status (betaald, ingepakt, verzonden, terugbetaald), klanten, eenvoudige verkoopcijfers.
• Juridisch en beleid: verzending, retouren, privacy en voorwaarden. Shoppers kijken hier naar voordat ze kopen, en veel regio's schrijven sommige ervan wettelijk voor.

Rechten

Laat shoppers kopen zonder account. Gastcheckout haalt een stap weg, en accounts kunnen later komen. Alleen beheerders mogen bestellingen zien en producten bewerken. Bescherm het beheergedeelte met echte inlog en controles aan de serverkant.

Hoe de afrekening moet werken

Het veiligste patroon voor een eigen winkel is een gehoste checkoutpagina. Met Stripe gaat dat zo:

1. De shopper klikt op Afrekenen. Je server controleert prijzen en voorraad opnieuw in de database, en vertrouwt nooit op wat de browser stuurt, en maakt een Stripe Checkout-sessie aan.
2. De shopper betaalt op de pagina van Stripe. Kaartgegevens bereiken je server nooit.
3. Stripe roept het webhook-eindpunt van je app aan om te melden dat de betaling is geslaagd. Pas dan markeer je de bestelling als betaald en verlaag je de voorraad.
4. De shopper komt op je bevestigingspagina terecht, en jij stuurt een bevestigingsmail.

Twee fouten om te vermijden: de bestelling als "betaald" aanmaken op basis van de redirect naar de succespagina (mensen sluiten tabbladen, en redirects kunnen worden vervalst), en het totaalbedrag in de browser berekenen. Beide fouten maakt een AI gemakkelijk, tenzij je het expliciet vraagt.

De standaardprijs van Stripe is een percentage plus een vast bedrag per geslaagde kaartbetaling, zonder opstart- of maandkosten (per september 2026). Het exacte tarief hangt af van je land en de kaart. Bouw alles eerst in de testmodus van Stripe met de testkaartnummers. Onze gids over betalingen toevoegen aan je app behandelt sleutels, testmodus en webhooks.

Beslissingen over btw, verzending en voorraad

Dit zijn zakelijke beslissingen die de AI niet voor je kan nemen:

• Btw. Of je btw (of omzetbelasting) moet rekenen, en tegen welk tarief, hangt af van waar jij en je klanten zitten. Stripe biedt hiervoor een product (Stripe Tax), of je kunt vaste tarieven instellen als je situatie eenvoudig is. Vraag een accountant als je het niet zeker weet.
• Verzending. Begin met enkele vaste tarieven (binnenland, internationaal, gratis boven een drempelbedrag). Realtime tarieven van vervoerders en het printen van labels zijn waar platforms als Shopify veel werk besparen.
• Voorraad. Beslis of voorraad wordt gereserveerd zodra de checkout start, of pas wanneer de betaling slaagt. Voor kleine winkels is het eenvoudiger om de voorraad te verlagen bij betaling en opnieuw te controleren vlak voor de checkout. Dan kan het af en toe gebeuren dat je het laatste exemplaar dubbel verkoopt, dus bepaal vooraf hoe je dat afhandelt. Voor voorraadbeheer buiten de winkel, zie hoe je een app voor voorraadbeheer bouwt.

Een eerste prompt die werkt

Bouw een online winkel voor Loam & Clay, een kleine keramiekstudio die mokken, kommen en vazen verkoopt. Storefront: homepage met uitgelichte producten, een winkelpagina met categoriefilters, productpagina's met een afbeeldingengalerij, kleurvarianten en voorraadstatus, en een uitschuifbare winkelwagen. Sla producten, varianten, bestellingen en bestelregels op in een database en vul die met 10 realistische producten. Beheergedeelte (inloggen vereist) om producten toe te voegen en te bewerken, afbeeldingen te uploaden, voorraad te wijzigen en bestellingen met status betaald / ingepakt / verzonden te bekijken. De checkoutknop mag voorlopig een plaatshouder zijn, we voegen Stripe Checkout hierna toe. Warm, minimaal ontwerp, mobile-first. Geen verzonnen reviews of beweringen als "gratis verzending wereldwijd".

Beginnen met een plaatshouder voor de checkout is bewust. Maak eerst de catalogus en het beheer goed, en koppel daarna de betalingen in een aparte stap die je goed kunt testen.

Bouwstappen

1. Catalogus en productpagina's, met echte productnamen, prijzen en foto's.
2. Winkelwagen die een paginaverversing overleeft.
3. Beheer: producten, varianten, voorraad, afbeeldingen uploaden. Bescherm het met inloggen.
4. Stripe Checkout in testmodus, met de server die prijzen en voorraad opnieuw controleert.
5. Webhook die bestellingen als betaald markeert en de voorraad verlaagt. Test het van begin tot eind met een testkaart.
6. Bestelmails naar de klant en naar jou.
7. Beleid en SEO: pagina's voor verzending en retouren, producttitels en -beschrijvingen, deelafbeeldingen. Zie SEO voor met AI gebouwde websites.
8. Live gaan: schakel over naar live Stripe-sleutels, plaats zelf een kleine echte bestelling en geef die terug.

Veelgemaakte fouten

• Prijzen uit de browser vertrouwen. Bereken altijd opnieuw op de server.
• Bestellingen als betaald markeren op de succespagina in plaats van via de webhook.
• Voorraadgetallen overschrijven in plaats van bewegingen te registreren. Dan verlies je de geschiedenis van waarom de voorraad veranderde.
• Lanceren zonder pagina's voor verzending en retouren.
• Enorme productafbeeldingen. Comprimeer ze en serveer ze vanuit bestandsopslag, niet in de code.
• Wenslijsten, reviews en loyaliteitspunten bouwen voordat de eerste verkoop er is.

Lopende kosten

Reken op: hosting en een database, betalingskosten bij elke verkoop, een domein, een e-mailprovider voor bestelbevestigingen, en mogelijk een btw-dienst. Een eigen winkel bespaart een platformabonnement en appkosten, maar je neemt het onderhoud op je. Als er iets misgaat bij de checkout, ben jij degene die het moet oplossen.

Als je verkopers naast jezelf wilt, die elk worden uitbetaald, dan is dat een marktplaats, met andere betaalregels. Zie hoe je een marktplaats bouwt.

Bouwen met Mythex

Op Mythex beschrijf je de winkel en bouwt de agent de catalogus, winkelwagen en het beheer in een live preview, met een Postgres-database voor producten en bestellingen en bestandsopslag voor productafbeeldingen. De winkelcasus in de docs beveelt precies de volgorde hierboven aan: eerst de catalogus, later de checkout.

Betalingen gebruiken je eigen Stripe-account. Je voegt je Stripe-sleutels toe als projectgeheimen en vraagt de agent om Checkout toe te voegen. Daarna test je met de testkaarten van Stripe in de preview (Stripe-recept). Webhooks hebben een publieke URL nodig, dus publiceer voordat je Stripe ernaar laat wijzen (webhook-recept). Btw, verzending en voorraadsynchronisatie zijn geen ingebouwde Mythex-functies, en er is geen native Shopify-integratie. Als je die als kant-en-klaar product nodig hebt, is Shopify de betere keuze. Als startpunt zijn er de winkelsjablonen, zoals de webwinkel.

Veelgestelde vragen