Vibe Coding · Lektion

Lägga till betalningar

Ta betalt för din produkt med Stripe och AI.

Lektion 3 av 413 steg

Lägga till betalningar är en gratis lektion i Vibe Coding på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vibe Coding, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vibe Coding innehåller totalt 4 lektioner.

Få betalt

En validerad produkt som människor tycker om kan bli ett företag – i samma ögonblick som ni låter dem betala. Att ta betalt är också den ultimata valideringen: inget bevisar värde som ett kreditkort.

Den goda nyheten är att ni inte behöver vara betalningsexperter. Stripe hanterar de svåra och skrämmande delarna (kort, säkerhet, skatter), och AI kan steg för steg koppla in det i er app. I den här lektionen lägger ni till betalningar på vibe-coding-sättet.

Varför Stripe

Stripe är standardvalet för indieutvecklare. Det är utvecklarvänligt, hanterar kort från hela världen, sköter säkerhet och regelefterlevnad och har dokumentation i världsklass som AI-verktyg känner väl.

Ni kommer att arbeta med några centrala begrepp: Products (det ni säljer), Prices (hur mycket, engångsbetalning eller återkommande), Checkout (betalningssidan) och webhooks (när Stripe meddelar er app att en betalning har genomförts).

Ni behöver inte memorera detta – be AI konfigurera det.

Börja med en betalningslänk

Det absolut snabbaste sättet att få betalt kräver ingen kod: en Payment Link från Stripe. Ni skapar en produkt i Stripe-instrumentpanelen, får en URL och kopplar den till en knapp.

Det här är perfekt för en tidig MVP – validera att människor faktiskt betalar innan ni bygger in riktig betalningshantering i appen.

I want the simplest possible way to charge $9/month for my web app's Pro plan.

- Walk me through creating a Stripe Payment Link in the dashboard (no coding)
- Show me how to add it as an 'Upgrade to Pro' button in my HTML
- Explain what happens after the user pays and how I'd know they paid

Keep it shippable today; I'll add automation later.

Engångsbetalning eller prenumeration

Bestäm hur du ska ta betalt innan du börjar bygga. Engångsbetalningar passar för ett enstaka köp (en mall, en kurs eller livstidsåtkomst). Prenumerationer debiteras återkommande (månadsvis eller årsvis) – modellen bakom de flesta SaaS-tjänster.

Prenumerationer ger förutsägbara, återkommande intäkter men innebär mer komplexitet: förnyelser, uppsägningar och misslyckade betalningar. För en första betalprodukt börjar många utvecklare med ett enkelt månadsabonnemang plus ett rabatterat årsabonnemang.

Lägg till Stripe Checkout med AI

När du har vuxit ur Payment Links kan du gå över till Stripe Checkout: en säker, Stripe-hostad sida som din app skickar användarna till. Din server skapar en "checkout session" och Stripe hanterar resten.

Be AI att skapa ett grundläggande backend-endpoint och frontend-knappen. Var specifik med din teknikstack så att koden passar.

Add Stripe Checkout to my app (Node.js + Express backend, plain JS frontend).

1. A backend route POST /create-checkout-session that creates a subscription Checkout session for my $9/month price.
2. A frontend 'Upgrade' button that calls it and redirects the user to Stripe.
3. Use my Stripe secret key from an environment variable, never hardcoded.
4. Explain each part as you go.

Bekräfta betalningar med webhooks

Hur vet din app att en betalning lyckades? Stripe skickar en webhook – ett automatiskt meddelande till din server när händelser inträffar (till exempel checkout.session.completed).

Det är här du uppgraderar en användare till "Pro". Så här kan hanteringen av en webhook-händelse i JavaScript se ut – förenklad så att du kan se logiken som AI genererar.

function handleStripeEvent(event) {
  if (event.type === 'checkout.session.completed') {
    const userId = event.data.object.client_reference_id;
    upgradeToPro(userId);
    return 'upgraded ' + userId;
  }
  return 'ignored ' + event.type;
}

function upgradeToPro(userId) {
  console.log('User', userId, 'is now Pro');
}

const fakeEvent = {
  type: 'checkout.session.completed',
  data: { object: { client_reference_id: 'user_42' } }
};
console.log(handleStripeEvent(fakeEvent));

Börja alltid i testläge

Stripe har ett testläge med falska API-nycklar och testkort (till exempel 4242 4242 4242 4242). Testa aldrig med riktiga pengar på dig själv.

Bygg och verifiera hela flödet i testläge: checkout, webhook, uppgraderingen och uppsägningen. Byt till live-nycklar först när allt fungerar. Be AI om testkortnummer och hur du utlöser testwebhooks.

I've added Stripe Checkout. Help me test it safely before going live.

- Confirm I'm using TEST keys, not live keys
- Give me Stripe's test card numbers for success and for a declined card
- Show me how to test that my webhook actually upgrades the user
- Give me a checklist to verify before flipping to live mode

Skydda dina nycklar

Din hemliga Stripe-nyckel kan flytta riktiga pengar – behandla den som ett lösenord. Den hör endast hemma på din server, laddad från en miljövariabel, aldrig i frontendkod, aldrig i en Git-commit och aldrig inklistrad i en offentlig prompt.

Frontend får använda den publicerbara nyckeln (som är säker att exponera). Om en hemlig nyckel någonsin läcker ska du omedelbart rotera den i Stripe-dashboarden. Be AI granska koden efter oavsiktligt exponerade nycklar.

Begränsa Pro-funktioner

När en användare är Pro behöver appen låsa upp rätt saker. Mönstret är att lagra flaggan isPro för användaren och sedan kontrollera den innan premiumfunktioner visas eller betalda åtgärder körs.

Gör alltid kontrollen på servern också – en begränsning som bara finns i frontend kan kringgås. Be AI lägga till flaggan och kontrollerna konsekvent i hela appen.

After a successful Stripe payment, my webhook sets user.isPro = true.

Now help me gate Pro features:
- Show the pattern for checking isPro before allowing a premium action
- Make sure the check runs on the SERVER, not just hidden in the UI
- Add a friendly 'Upgrade to unlock' message for free users
- Where should I store the isPro flag in my database?

Hantera de besvärliga fallen

Verklig betalningshantering har många specialfall: kort nekas, användare säger upp sina abonnemang, prenumerationer löper ut och personer begär återbetalningar. En pålitlig produkt hanterar detta smidigt.

Planera för: misslyckade förnyelser (nedgradera efter en respitperiod), uppsägningar (behåll åtkomsten tills perioden löper ut) och återbetalningar (ta bort Pro). Stripe skickar webhooks för varje fall. Du behöver inte hantera allt från dag ett – men be AI om hjälp att avgöra vilka fall som är viktigast för din modell och börja med dem.

Betalningar på indie-vis

Så här kommer du igång med att ta betalt:

1. Börja med en no-code Payment Link för att validera betalningsviljan.
2. Gå över till Stripe Checkout när du är redo.
3. Bekräfta betalningar med webhooks och uppgradera användare till Pro.
4. Testa allt i testläge först.
5. Skydda den hemliga nyckeln och använd den endast på servern.
6. Begränsa funktioner och hantera uppsägningar.

AI skriver det mesta åt dig – din uppgift är att förstå flödet och hålla det säkert.

Snabb kontroll

Var ska din hemliga Stripe-nyckel finnas?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Ta betalt med trygghet

Du har lärt dig att lägga till betalningar med Stripe och AI:

Börja med en no-code Payment Link för att validera efterfrågan.
Välj mellan engångsbetalning och prenumeration.
Använd Stripe Checkout och webhooks för hela flödet.
Testa alltid i testläge innan du går live.
Håll den hemliga nyckeln på serversidan och begränsa Pro-funktioner.
Planera för uppsägningar, misslyckade betalningar och återbetalningar.

Nu kan du börja tjäna pengar. Den sista lektionen handlar om att lansera din SaaS-tjänst i världen.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 25
Lektioner: 100

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Lägga till betalningar” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vibe Coding, inklusive ”Lägga till betalningar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vibe Coding innehåller totalt 4 lektioner.

Vad lär jag mig i ”Lägga till betalningar”?

Ta betalt för din produkt med Stripe och AI. Ni övar på Vibe Coding med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vibe Coding?

Du behöver inga förkunskaper. Utbildningen i Vibe Coding på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Lägga till betalningar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vibe Coding-lektionen?

Ja. Varje Vibe Coding-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vibe Coding