0Pricing
Vibe Coding · Lekcja

Dodawanie płatności

Pobieraj opłaty za produkt za pomocą Stripe i AI

Dodawanie płatności to bezpłatna lekcja Vibe Coding na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vibe Coding, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vibe Coding zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Getting Paid

A validated product that people love can become a business — the moment you let them pay. Charging money is also the ultimate validation: nothing proves value like a credit card.

The good news: you don't need to be a payments expert. Stripe handles the hard, scary parts (cards, security, taxes), and AI can wire it into your app step by step. In this lesson you'll add payments the vibe-coding way.

Why Stripe

Stripe is the default choice for indie makers. It's developer-friendly, handles cards from around the world, manages security and compliance, and has world-class docs that AI tools know deeply.

You'll work with a few core ideas: Products (what you sell), Prices (how much, one-time or recurring), Checkout (the payment page), and webhooks (Stripe telling your app a payment happened).

You don't memorize these — you ask AI to set them up.

Start with a Payment Link

The absolute fastest way to get paid needs zero code: a Stripe Payment Link. You create a product in the Stripe dashboard, get a URL, and put it behind a button.

This is perfect for an early MVP — validate that people will actually pay before you build real billing into the app.

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.

One-Time vs Subscription

Decide how you charge before you build. One-time payments suit a single purchase (a template, a course, lifetime access). Subscriptions charge on a recurring schedule (monthly or yearly) — the model behind most SaaS.

Subscriptions give predictable, recurring revenue but add complexity: renewals, cancellations, failed payments. For a first paid product, many makers start with a simple monthly plan plus a discounted yearly option.

Add Stripe Checkout with AI

When you outgrow Payment Links, move to Stripe Checkout: a secure, Stripe-hosted page your app sends users to. Your server creates a "checkout session," and Stripe handles the rest.

Ask AI to scaffold both the backend route and the frontend button. Be specific about your stack so the code fits.

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.

Confirm Payments with Webhooks

How does your app know a payment succeeded? Stripe sends a webhook — an automatic message to your server when events happen (like checkout.session.completed).

This is where you flip a user to "Pro." Here's the shape of handling a webhook event in JavaScript — simplified so you can see the logic AI generates.

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));

Test Mode First, Always

Stripe has a test mode with fake API keys and fake cards (like 4242 4242 4242 4242). Never test with real money on yourself.

Build and verify the entire flow in test mode: checkout, webhook, the upgrade, and cancellation. Only switch to live keys once it all works. Ask AI for the test card numbers and how to trigger test webhooks.

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

Guard Your Keys

Your Stripe secret key can move real money — treat it like a password. It belongs only on your server, loaded from an environment variable, never in frontend code, never in a Git commit, and never pasted into a public prompt.

The frontend may use the publishable key (safe to expose). If a secret key ever leaks, roll it immediately in the Stripe dashboard. Ask AI to audit your code for accidentally exposed keys.

Gate Pro Features

Once a user is Pro, your app needs to unlock the right things. The pattern: store an isPro flag on the user, then check it before showing premium features or running paid actions.

Always enforce the check on the server too — a frontend-only gate can be bypassed. Ask AI to add the flag and the checks consistently across your app.

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?

Handle the Messy Cases

Real billing has edges: cards get declined, users cancel, subscriptions lapse, people ask for refunds. A trustworthy product handles these gracefully.

Plan for: failed renewals (downgrade after a grace period), cancellations (keep access until the period ends), and refunds (revoke Pro). Stripe sends webhooks for each. You don't have to handle every case on day one — but ask AI which ones matter most for your model and tackle those first.

Payments, the Indie Way

Your path to getting paid:

  • 1. Start with a no-code Payment Link to validate willingness to pay.
  • 2. Upgrade to Stripe Checkout when ready.
  • 3. Confirm payments with webhooks and flip users to Pro.
  • 4. Test everything in test mode first.
  • 5. Guard your secret key on the server only.
  • 6. Gate features and handle cancellations.

AI writes most of this for you — your job is to understand the flow and keep it secure.

Quick Check

Where should your Stripe secret key live?

Recap: Charge with Confidence

You learned to add payments with Stripe and AI:

  • Start with a no-code Payment Link to validate demand.
  • Choose one-time vs subscription pricing.
  • Use Stripe Checkout and webhooks for the full flow.
  • Always test in test mode before going live.
  • Keep your secret key server-side and gate Pro features.
  • Plan for cancellations, failed payments and refunds.

You can now make money. Final lesson: launching your SaaS to the world.

Często zadawane pytania

Czy lekcja „Dodawanie płatności” jest bezpłatna?

Tak — pełny tekst „Dodawanie płatności” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vibe Coding, przejdź na CoddyKit PRO. Kurs Vibe Coding zawiera 4 lekcji w sumie.

Co nauczysz się w „Dodawanie płatności”?

Pobieraj opłaty za produkt za pomocą Stripe i AI Ćwiczysz Vibe Coding z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vibe Coding?

Nie wymagamy żadnego doświadczenia. Vibe Coding w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Dodawanie płatności”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vibe Coding?

Tak. Każda lekcja Vibe Coding zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Od pomysłu do MVP w krótkim czasie
  2. Weryfikacja na podstawie opinii prawdziwych użytkowników
  3. Dodawanie płatności
  4. Uruchamianie usługi SaaS
← Powrót do Vibe Coding