Fizetés hozzáadása az appodhoz: fizetési oldal, előfizetések és webhookok
A legegyszerűbb módja annak, hogy fizetést adj az appodhoz, a Stripe: használj Payment Linket, ha csak egy „Vásárlás” gombra van szükséged, és a rendeléseket kézzel tudod kezelni; Stripe Checkoutot, ha az appodnak tudnia kell, ki fizetett, és automatikusan kell reagálnia; illetve Checkoutot előfizetési módban és a Stripe ügyfélportálját az ismétlődő számlázáshoz. A legegyszerűbb esetek kivételével mindenhol szükséged van egy webhookra is – ez egy szerveroldali végpont, amelyet a Stripe hív meg, amikor egy fizetés sikerül –, és minden funkciót a Stripe teszt-kulcsaival és teszt-kártyáival érdemes kipróbálni, mielőtt éles kulcsokra váltasz.
Ez az útmutató bemutatja az egyes lehetőségeket, a webhook részt, amelyet a legtöbb útmutató kihagy, és azt, mit kell ellenőrizni, mielőtt valódi pénzt fogadnál. A Stripe-adatok a Stripe saját dokumentációjából származnak, 2026 szeptemberi állapot szerint.
Miért használj egyáltalán fizetési szolgáltatót?
Soha ne gyűjts kártyaszámokat a saját űrlapjaidon. A kártyaadatok kezelése bevon a PCI DSS (a bankkártya-iparág biztonsági szabványa) hatókörébe, és komoly felelősséggel jár. Az olyan fizetési szolgáltató, mint a Stripe, tárolja a fizetési űrlapot, tárolja a kártyát, kezeli a bankos hitelesítést, és visszajelzi az appodnak az eredményt. Az appod csak azt látja: „X vásárló fizetett Y-ért”.
Ez az útmutató a Stripe-ot használja, mert széles körben elterjedt, jól dokumentált, és a legtöbb MI-alapú app-építő támogatja. Vannak más szolgáltatók is, és egyesek „merchant of record” modellben működnek, vagyis átveszik helyetted az értékesítési adó kezelését; ha az adómegfelelés aggaszt, érdemes ezt a modellt is összehasonlítani.
A három mód a fizetések fogadására a Stripe-pal
| Lehetőség | Szükséges kód | Tudja az appod, ki fizetett? | Legjobb ehhez |
|---|---|---|---|
| Payment Links | Nincs | Csak ha adsz hozzá webhookot | Néhány fix termék eladása, adományok, a kereslet tesztelése |
| Checkout (egyszeri) | Szerveroldali kód a munkamenet létrehozásához | Igen, webhookon keresztül | Boltok, letölthető termékek, egyszeri vásárlások |
| Checkout (előfizetés) | Szerveroldali kód plusz webhook-kezelés | Igen, webhookon keresztül | SaaS, tagságok, bármi ismétlődő |
Payment Linkek
A Payment Link egy Stripe által hosztolt fizetési oldal, amelyet kód nélkül hozol létre a Stripe irányítópultjában. Kapsz egy URL-t, amelyet egy gomb mögé tehetsz az appodban, e-mailben megoszthatsz, vagy QR-kódként megjeleníthetsz. A Stripe dokumentációja szerint a Payment Linkekkel terméket, előfizetést lehet eladni, vagy adományt lehet fogadni, és megengedhető, hogy a vásárló válassza ki, mennyit fizet, vagy korlátozható a vásárlások száma.
Az akadály: az appod nem tudja automatikusan, hogy egy adott bejelentkezett felhasználó fizetett. Adományoldalnál vagy kis boltnál, ahol a rendeléseket kézzel teljesíted a Stripe e-mail-értesítései alapján, ez rendben van. „Fizess a Pro funkciók feloldásához” típusú fizetésnél viszont nem jó.
Stripe Checkout
A Checkout egy fizetési oldal, amelyet a szervered igény szerint hoz létre egy adott vásárláshoz. A szervered megmondja a Stripe-nak, mit vesz a vásárló (és opcionálisan melyik vásárló vesz), a Stripe visszaad egy URL-t, és te oda küldöd a vásárlót. A Stripe dokumentációja szerint egyszeri és előfizetéses fizetést is támogat, akár teljes Stripe-hosztolt oldalként, akár a saját oldaladba ágyazva, akár beágyazott űrlapként.
A folyamat:
- A vásárló rákattint a Vásárlás gombra az appodban.
- A szervered létrehoz egy Checkout-munkamenetet a titkos kulcsoddal, és azonosítót csatol hozzá, amely összeköti a felhasználóddal vagy a rendeléseddel.
- A vásárlót átirányítják a Stripe-ra, és fizet.
- A Stripe visszairányítja a sikeres fizetés oldalra.
- A Stripe egy
checkout.session.completedeseményt küld a webhookodnak, a szervered pedig fizetettként jelöli a rendelést, vagy feloldja a hozzáférést.
A 2. lépést a szerveren kell végrehajtani, mert a titkos kulcsodat használja. Ez a fő oka annak, hogy a Checkouthoz háttérrendszer kell.
Előfizetések
Az előfizetések a Checkout előfizetési módját használják, egy olyan ismétlődő árral, amelyet a Stripe-ban állítottál be. Az első fizetés ugyanúgy működik, mint a fenti folyamat. Utána a megújítások, a sikertelen kártyás fizetések, a bővítések és a lemondások idővel történnek – gyakran akkor is, amikor a vásárló nincs az appodban –, ezért az appod csak webhookokon keresztül értesül róluk.
Az ügyfelek saját előfizetésének kezeléséhez a Stripe egy hosztolt ügyfélportált kínál. A Stripe dokumentációja szerint az ügyfelek ott frissíthetik a fizetési módjukat és számlázási adataikat, módosíthatják vagy lemondhatják az előfizetést, és megtekinthetik és letölthetik a számláikat. Az irányítópultban állítod be, és egy „Számlázás kezelése” gombot adsz hozzá, amely az ügyfelet oda küldi. Ez megspórolja, hogy magadnak kelljen megépíteni ezeket a képernyőket.
Webhookok: az a rész, amelyet nem hagyhatsz ki
A webhook egy HTTP-kérés, amelyet a Stripe küld a szerveredre, amikor valami történik. (Az általános elképzelésről lásd a mi a webhook útmutatót.) A Stripe teljesítési útmutatója egyértelmű: a rendeléseket nem teljesítheted kizárólag a sikeres fizetés oldalra támaszkodva, mert a vásárló fizethet úgy, hogy az oldal betöltődése előtt elveszíti a kapcsolatot. Előfizetésekhez és késleltetett fizetési módokhoz a webhookok kötelezőek.
Érdemes kezelni az eseményeket
| Esemény | Mit jelent | Mit csinál az appod |
|---|---|---|
checkout.session.completed | A Checkout befejeződött | Rendelést fizetettként jelöli, vagy elindítja a hozzáférést |
checkout.session.async_payment_succeeded | Egy késleltetett fizetési mód (például banki terhelés) később teljesült | Azonnal teljesít |
checkout.session.async_payment_failed | Ez a késleltetett fizetés sikertelen | Értesíti a vásárlót; nem teljesít |
invoice.paid | Egy előfizetési fizetés sikerült, a megújításokat is beleértve | Meghosszabbítja a hozzáférést |
invoice.payment_failed | Egy megújítás sikertelen | Figyelmezteti a felhasználót; a Stripe újrapróbálhatja |
customer.subscription.updated | A csomag megváltozott, vagy lemondás van ütemezve | Frissíti a felhasználó csomagját |
customer.subscription.deleted | Az előfizetés véget ért | Eltávolítja a fizetős hozzáférést |
A helyes webhookkezelő szabályai
Ezek közvetlenül a Stripe webhook-dokumentációjából valók, és az MI által generált kezelők néha kihagyják valamelyiket:
- Ellenőrizd az aláírást. Minden esemény tartalmaz egy
Stripe-Signaturefejlécet. A kezelőd a végpont aláíró titkával (ezwhsec_-kel kezdődik) ellenőrzi. Enélkül bárki küldhetne hamis „sikeres fizetés” üzenetet a szerveredre. - A nyers kérés törzsét használd. Az aláírás-ellenőrzés meghiúsul, ha a keretrendszer előbb feldolgozza vagy módosítja a törzset.
- Gyorsan adj 2xx választ, és a lassabb munkát utána végezd el. Az időtúllépés hibának számít.
- Kezeld az ismétlődéseket. A Stripe többször is kézbesítheti ugyanazt az eseményt. Jegyezd fel a feldolgozott esemény-azonosítókat, vagy tedd úgy a teljesítést, hogy kétszeri futtatása is biztonságos legyen.
- Ne feltételezz sorrendet. A Stripe nem garantálja, hogy az események abban a sorrendben érkeznek, ahogy történtek.
- Számolj az újrapróbálkozásokkal. Éles módban a Stripe akár három napig újrapróbálja a sikertelen kézbesítéseket, így a rövid kiesés nem veszít el fizetéseket – de a kezelődnek el kell bírnia a késve érkező eseményeket.
A webhookokhoz nyilvános HTTPS-cím kell, ezért általában csak akkor működnek, amikor az appod közzé van téve (a Stripe CLI helyi gépre is továbbíthatja az eseményeket fejlesztőknek).
Egy prompt, amely az egész folyamatot lefedi
Adj hozzá egyszeri vásárlást a Stripe Checkouttal a „Pro csomag” termékhez (ár-azonosító: STRIPE_PRICE_ID). A Checkout-munkamenetet a szerveren hozd létre a titkokban tárolt STRIPE_SECRET_KEY-jel, és a munkamenetbe tedd bele a bejelentkezett felhasználó azonosítóját. Adj hozzá egy POST /api/stripe/webhook végpontot, amely a Stripe-aláírást a STRIPE_WEBHOOK_SECRET-tel ellenőrzi a nyers kérés törzsén, kezeli a checkout.session.completed eseményt, és a felhasználót Pro csomaggal rendelkezőként jelöli meg. Legyen biztonságos, ha ugyanaz az esemény kétszer érkezik. Adj sikeres és megszakítás oldalt. A titkos kulcsot soha ne tedd elérhetővé a böngésző számára.
Előfizetéshez add hozzá: „Használj előfizetési módot a STRIPE_PRICE_ID-val. Kezeld az invoice.paid, invoice.payment_failed, customer.subscription.updated és customer.subscription.deleted eseményeket. Adj hozzá egy Számlázás kezelése gombot, amely megnyitja a Stripe ügyfélportálját.”
Tesztmód
A Stripe-nak külön homokozó (teszt) és éles környezete van, külön kulcsokkal. A teszt-kulcsok pk_test_, sk_test_ vagy rk_test_ előtaggal kezdődnek; az éles kulcsok pk_live_, sk_live_ vagy rk_live_ előtaggal. A teszttranzakciók nem mozgatnak pénzt.
Hasznos teszt-kártyák a Stripe tesztelési dokumentációjából (bármely jövőbeli lejárati dátum és bármely háromjegyű CVC-kód):
| Kártyaszám | Eredmény |
|---|---|
4242 4242 4242 4242 | A fizetés sikerül |
4000 0000 0000 0002 | A kártyát elutasítják |
4000 0000 0000 3220 | 3D Secure hitelesítést kér, utána sikerül |
Legalább ezeket teszteld:
- Egy sikeres fizetés a megfelelő dolgot oldja fel a megfelelő felhasználónak
- Az elutasított kártya világos üzenetet mutat, és semmit sem old fel
- Ha közvetlenül fizetés után bezárod a böngészőlapot, a hozzáférés akkor is megvan (ez bizonyítja, hogy a webhook működik, nem csak a sikeres fizetés oldal)
- A Stripe oldalon történő megszakítás visszairányítja a felhasználót az appba, és semmit sem terhel
- Előfizetésnél: mondd le az ügyfélportálon, és ellenőrizd, hogy a hozzáférés a megfelelő időpontban szűnik meg
Éles indítás
- Aktiváld a Stripe-fiókodat a vállalkozásod és a banki adataiddal.
- Cseréld az éles kulcsokra az appod titkaiban. A Stripe korlátozott kulcsokat javasol, amelyek csak az integrációdhoz szükséges jogosultságokkal rendelkeznek, nem pedig korlátlan titkos kulcsot.
- Hozz létre éles webhook-végpontot, amely a közzétett appodra mutat. Saját aláíró titka van, amely eltér a teszt-titoktól – ezt frissítsd.
- Hozd létre újra a termékeket és az árakat éles módban; a teszt-azonosítók ott nem léteznek.
- Végezz egy valódi, kis vásárlást, és térítsd vissza.
Minden kulcsot az appod titkaiban tarts, soha ne kódban vagy chatben. A biztonsági ellenőrzőlista AI-val épített appokhoz részletesebben foglalkozik a kulcsokkal és a webhook-ellenőrzéssel.
Adók, visszatérítések és az adminisztráció
A fizetések olyan kötelezettségekkel járnak, amelyeket a kód nem old meg. Ez nem adótanácsadás; kérdezd meg a könyvelődet.
- Értékesítési adó, áfa és GST. A te és a vásárlóid helyétől függően lehet, hogy regisztrálnod, felszámítanod és bevallanod kell az adót. A Stripe Tax kiszámíthatja és beszedheti az adót a fizetésnél, figyelemmel követheti, hol keletkezhet kötelezettséged, és segíthet a regisztrációban és a bevallásban – a felelősség azonban nálad marad. A merchant-of-record szolgáltatók alternatívát jelentenek, amelyek többet vállalnak át ebből.
- Visszatérítések és viták. Az indulás előtt döntsd el a visszatérítési szabályzatodat, és tedd közzé a honlapodon. A vitás terhelések (chargebackek) előfordulnak; vezess nyilvántartást arról, mit vettek és mit kaptak meg.
- Nyugták és számlák. A Stripe küldhet nyugtákat e-mailben; a vállalkozásoknak lehet, hogy rendes számlákra van szükségük.
- Díjak. Minden szolgáltató tranzakciónként számláz. A cikkek számaira támaszkodás helyett a szolgáltató aktuális árazási oldalát nézd meg.
Melyik beállítás illik az appodhoz
- Adományok vagy néhány termék: Payment Linkek. Lásd a nonprofit adományozó weboldal építése útmutatót.
- Kosaras bolt: Checkout tételsorokkal és webhookkal. Lásd az online bolt építése útmutatót.
- SaaS vagy tagság: Checkout előfizetési módban, webhookok és az ügyfélportál. Lásd a SaaS MVP építése és a SaaS termék árazása útmutatókat.
- Piactér, amely eladóknak fizet ki: más, szigorúbban szabályozott beállítás (Stripe Connect vagy hasonló). Ezt külön tervezd meg.
Fizetések hozzáadása a Mythexen
A Mythexen épített appokban a fizetések a saját Stripe-fiókodat és kulcsaidat használják; nincs egykattintásos „Stripe csatlakoztatása” az appodhoz. A szokásos folyamat:
- Szerezz Stripe teszt kulcsokat.
- Add hozzá a
STRIPE_SECRET_KEY-t (és később a webhook-titkot) a projekt titkaihoz – a/secretsoldalon, a projekt-beállításokban vagy abban a titokkártyában, amelyet az ügynök mutat, amikor kulcsra van szüksége. - Kérj a fenti promptokhoz hasonló szöveggel Checkoutot az ügynöktől.
- Teszteld az előnézetben teszt-kártyákkal. Tedd közzé az appot a webhook regisztrálása előtt, mert ahhoz a nyilvános URL-ed kell.
- Az éles kulcsokra váltás után tedd közzé újra az appot, hogy az éles app is átvegye őket.
Lásd a dokumentációban a Fizetések elfogadása a Stripe-pal és a Webhookok kezelése a háttérrendszerben részt.
Kérdések
Mi a legegyszerűbb módja a fizetések fogadásának egy appban?
A Stripe Payment Link nem igényel kódot: a Stripe irányítópultjában hozod létre, és az appodból linkeled. Ha az appodnak tudnia kell, ki fizetett, és automatikusan valamit fel kell oldania, használj Stripe Checkoutot webhookkal.
Szükségem van webhookra a fizetések fogadásához?
Ha az appodnak reagálnia kell egy fizetésre – fiók feloldása, rendelés fizetettként jelölése, megújítás kezelése –, akkor igen. A Stripe dokumentációja szerint nem lehet csak a sikeres fizetés oldalra támaszkodni, mert a vásárló előfordulhat, hogy soha nem jut el oda. Az előfizetésekhez a webhookok kötelezők.
Hogyan tesztelhetek fizetéseket valódi pénz nélkül?
Használd a Stripe homokozó (teszt) API-kulcsait és a teszt-kártyaszámokat, például a 4242 4242 4242 4242 számot, bármely jövőbeli lejárati dátummal és bármely háromjegyű CVC-kóddal. A teszttranzakciók nem mozgatnak valódi pénzt.
Kezeli helyettem a Stripe az áfát és az értékesítési adót?
A Stripe Tax képes kiszámítani és beszedni az adót a fizetésnél, és figyelemmel kíséri, hol kell esetleg regisztrálnod, de az adókötelezettségekért továbbra is te felelsz. A helyzetedről kérdezd meg a könyvelődet.