Stripe-fizetős űrlap létrehozása

A Stripe Gateway egyszeri és ismétlődő fizetésre is használható: termék, jegy, tagság, foglalás, bérlés, adomány vagy nagykereskedelmi rendelőűrlap mögé is bekapcsolható. Ez a fejezet egy példán mutatja végig a teljes utat: egy online kurzusra jelentkező űrlap, amely a beküldés után a Stripe fizetőoldalára visz.

Amit a Stripe Gateway tud

• Egyszeri és ismétlődő, megadott gyakoriságú fizetés.
• Közvetlen (AJAX-os) átirányítás a Stripe fizetőoldalára.
• Különböző fizetési módok: bankkártya, Apple Pay, Google Pay és más, a Stripe-ban engedélyezett módok.
• Akciók a fizetés előtt és után (Akciók és események).
• Globális vagy űrlaponkénti Stripe-kulcsok, többmárkás oldalhoz vagy fejlesztői és éles környezethez.
• A Stripe visszahívásai (webhook) szinkronban tartják a WordPresst.
• Egy helyen követhető fizetések és állapotaik.
• Sandbox (teszt) mód, amelyben a pénzmozgás is kipróbálható.
• Az űrlapon a látogató kiválaszthatja a csomagot vagy gyakoriságot (hó, év), és annak megfelelően számláz a rendszer.
• Pénznem megadása a Stripe által támogatott kódok közül.
• Egykattintásos visszatérítés a WordPressből: a Stripe-nak azonnal átadódik, és mindkét helyen látszik.

A többi JetPluginnal együtt:

• egyedi köszönő oldalra irányíthatsz,
• átjárót választathatsz a látogatóval,
• a makrókkal (%gateway_amount%, %gateway_status%, %field_name%) egyedi sikeres és sikertelen üzenetet írhatsz,
• a Calculated Field mezővel a végösszeg automatikusan számolódik a választott opciókból,
• a feltételes láthatósággal mezőket jeleníthetsz meg vagy rejthetsz el a választások szerint.

Előkészületek

Ezek legyenek telepítve és aktívak:

• JetFormBuilder: az űrlap, a beküldés utáni akciók és az opcionális CAPTCHA.
• JetEngine: ha egyéni bejegyzéstípust (CPT) és metamezőket akarsz létrehozni a jelentkezők adataihoz.
• Elementor (ingyenes) vagy a Gutenberg blokkszerkesztő: az űrlap oldalra helyezéséhez és formázásához.

Előbb állítsd be az átjárót: Fizetési átjárók beállítása.

1. Egyéni bejegyzéstípus (opcionális)

Ha a jelentkezők adatait bejegyzésként akarod tárolni:

1. Menj ide: JetEngine → Post Types.
2. Kattints az Add New gombra, vagy nyiss meg egy meglévő típust.
3. A General Settings után görgess a Meta fields fülre, és vedd fel azokat a mezőket, amelyeket az űrlap is kitölt majd.
4. Kattints az Add/Update Post Type gombra.

2. Az űrlap felépítése

1. Menj ide: JetFormBuilder → Új űrlap hozzáadása.
2. Adj címet az űrlapnak (például „Online kurzus jelentkezés”).
3. Az első Text Field mezőnél a Field Label legyen „Felhasználónév”, a Form field name pedig user_name.
4. Adj hozzá még egy Text Field mezőt e-mail-címnek: állítsd be a címkét, a mezőnevet, és a Field Settings között válaszd ki az e-mail mezőtípust.
5. Szükség szerint vegyél fel további mezőket (például jelszót).
6. Az ár tárolásához kattints az Add Block gombra, és válaszd a Hidden Field blokkot. A Form field name legyen price, az értékforrása pedig Manual Input (a szerkesztőben „Kézi bevitel” látszik). A Value mezőbe írd be az összeget, pl. 15000.
7. Cseréld ki a küldőgomb feliratát (például „Jelentkezés és fizetés”).

https://minta-bolt.hu/wp-admin/post.php?post=4&action=edit

A képen az elkészült űrlap látszik: a rejtett price mező a szerkesztőben a „Kézi bevitel: 15000” sorral jelenik meg.

Az árat biztonságosabbá teheted, ha kikapcsolod a Render in HTML beállítást a Hidden Field mezőn: így a rejtett mező nem kerül bele az oldal HTML-jébe. Bekapcsolt Secure payment amount mellett ez szükséges is (lásd Fizetési átjárók beállítása).

Hasonló módon készíthetsz Stripe-fizetős kapcsolatfelvételi, előfizetési, regisztrációs, profil-, foglalási, jelentkezési, RSVP-, adományozó, ajánlatkérő és más űrlapokat is, a megfelelő mezőkkel.

3. Beküldés utáni akciók

1. Nyisd meg a JetForm fület, és a Gateways Settings szakaszban jelöld ki a Stripe Checkout lehetőséget.
2. Nyisd le a Post Submit Actions szakaszt. A New Action gombbal vehetsz fel akciókat, például Send Email, Register User, Insert/Update Post, Redirect to Page, Call Webhook.
3. Ha azt akarod, hogy a felhasználó regisztráljon az oldalra, add hozzá a Register User akciót, és állítsd be.
4. Az akciókhoz eseményeket rendelhetsz, így megadhatod, mi fusson a fizetés előtt, sikeres fizetés után és sikertelen fizetés után: Akciók és események.

Például a bejegyzés létrehozását és a felhasználó regisztrációját rendelheted a DEFAULT.PROCESS eseményhez (a fizetés előtt), vagy a GATEWAY.SUCCESS eseményhez (csak sikeres fizetés után).

4. A Stripe Checkout beállítása

1. A Gateways Settings szakaszban kattints a Stripe Checkout melletti Edit gombra.
2. Add meg vagy töltsd be a kulcsokat (Use Global Settings), és kattints a Sync Access Token gombra.
3. Válaszd ki a GATEWAY ACTION értékét (Pay Now egyszeri fizetéshez).
4. Írd be a CURRENCY CODE mezőbe a pénznem háromjegyű kódját (például HUF).
5. A PRICE/AMOUNT FIELD listából válaszd ki az árat tartalmazó mezőt (itt a price).
6. Töltsd ki a PAYMENT SUCCESS MESSAGE és a PAYMENT FAILED MESSAGE mezőt.
7. Kattints az Update gombra.

A beállítóablak minden mezőjét a Beállítás fejezet írja le.

Alapból a JetFormBuilder a fizetés után ugyanarra az oldalra viszi vissza a látogatót, ahol az űrlap volt. Ha másik oldalra akarod irányítani, add hozzá a Redirect to Page akciót, és kapcsold be a Redirect to a page kapcsolót.

Tedd kötelezővé azokat a mezőket, amelyeknek ki kell tölteniük, majd az űrlap tetején mentsd az űrlapot.

5. Az űrlap az oldalra kerül

Elementor:

1. Menj ide: Oldalak, és nyiss meg vagy hozz létre egy oldalt Elementorral.
2. Keresd meg a JetForm widgetet, és húzd az oldalra.
3. A Choose Form mezőben válaszd ki az űrlapot.
4. A következő fülön formázd meg az űrlapot az oldalad megjelenéséhez.

Gutenberg: nyisd meg az oldalt az alapértelmezett szerkesztőben, és adj hozzá egy JetForm blokkot.

6. Az eredmény

Nyisd meg az oldalt a nyilvános felületen, töltsd ki a mezőket, és kattints a küldőgombra. A kötelező mezők helyes kitöltése után a Stripe fizetőoldalára kerülsz, ahol a látogató megadja a fizetéshez szükséges adatokat.

Hibaelhárítás

Teszt és éles mód

A Stripe Sandbox módja a hivatalos teszt mód: valódi pénzmozgás nélkül szimulálhatsz fizetést. A Stripe Gateway ebben a módban is működik. Az előfizetési csomag létrehozása mindkét módban azonos. Használj Sandbox kulcsokat a teszthez, éles indulásnál pedig cseréld őket az éles fiók kulcsaira.

Pénznem eltérése

A pénznem eltérését két dolog okozhatja:

• a CURRENCY CODE mezőben megadott pénznem nem egyezik a termékeid, kuponjaid vagy a Stripe-fiókod alapértelmezett pénznemével,
• a vásárló kártyájára bank- vagy kártyakorlátozás vonatkozik.

Stripe webhook hibák

Ha a webhook nem működik:

1. A Stripe vezérlőpultján nyisd meg a Developers → Webhooks oldalt, és nézd meg az adott végpont naplóját.
2. Ellenőrizd és szükség esetén frissítsd a végpont URL-jét.
3. Gondoskodj róla, hogy a szervered 10 másodpercen belül 200 OK státuszkódot adjon vissza.

Gyakori kérdések

Használhatom egy űrlapon a PayPalt és a Stripe-ot is? Igen: állítsd be mindkét átjárót, válaszd a Manual lehetőséget, és add hozzá a fizetési módok blokkot. Lásd: Fizetési átjárók beállítása.

Hogyan frissítem a Stripe Gateway kiegészítőt? A Bővítmények → Telepített bővítmények oldalon a frissítési linkkel automatikusan, vagy a bővítmény zipjének kézi feltöltésével.

Hogyan hozok létre egyszeri és ismétlődő fizetést? Egyszeri fizetéshez a GATEWAY ACTION értéke Pay Now (lásd Beállítás), ismétlődőhöz az Előfizetés (lásd Használat).

Működik a kiegészítő más JetPluginokkal? Igen, minden JetPluginnal használható. Például WooCommerce-boltban a fizetési élményt is bővítheted az űrlapokkal.