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

> Végigvezetés egy online kurzusra jelentkező, Stripe-on fizetős űrlap elkészítésén, az oldalra helyezésen és a gyakori Stripe-hibák elhárításán.

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](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/elso-lepesek-akcio-esemenyek/)).
- 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](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/elso-lepesek-fizetesi-atjarok/).

## 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”).

![Az űrlapszerkesztő a felhasználónév, az e-mail, a rejtett ármező és a küldőgomb mezőkkel](./kepek/elso-lepesek-urlap-szerkeszto.webp)

*Az űrlapszerkesztő a felhasználónév, az e-mail, a rejtett ármező és a küldőgomb mezőkkel* (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](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/elso-lepesek-fizetesi-atjarok/)).

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](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/elso-lepesek-akcio-esemenyek/).

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](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/beallitas/) 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](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/elso-lepesek-fizetesi-atjarok/).

**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](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/beallitas/)), ismétlődőhöz az **Előfizetés** (lásd [Használat](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/hasznalat/)).

**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.