# Ismétlődő Stripe-fizetés előfizetéses tartalomhoz

> Teljes példa: Stripe-termék létrehozása, kulcsok, regisztrációs és előfizetési űrlap, szerepkörváltás az események szerint, a fizetések és előfizetések követése.

Ez a fejezet egy teljes példát mutat: a látogató regisztrál az oldalon, majd havi vagy éves előfizetést köt, és ezután látja a prémium tartalmat. A példa a Stripe Sandbox (teszt) módját használja, így nem történik valódi fizetés.

A példában a **Stripe Gateway** kiegészítő mellett a **JetFormBuilder** bővítményt és a **JetEngine** bővítmény **Dynamic Visibility** moduljának bekapcsolását használjuk. A prémium tartalom listázásához a JetEngine kell, a fizetési rész önmagában a JetFormBuilderrel és a kiegészítővel is működik.

## Mit tud a kiegészítő előfizetésnél?

A kiegészítő a Stripe-ban előre létrehozott előfizetéseket köti az űrlaphoz. A díjat, a számlázási ciklust, a próbaidőt és a mennyiséget a Stripe-termék beállításai határozzák meg. A fizetéseket és az előfizetéseket a WordPressben két külön lista mutatja.

Az előfizetés változásaira saját események reagálnak, amelyeket a beküldés utáni akcióknál választhatsz ki:

| Esemény | Mikor fut le az akció |
|---|---|
| `STRIPE.RENEWAL.PAYMENT` | Az előfizetés megújulásakor, amikor a Stripe újra terhel. |
| `STRIPE.SUBSCRIPTION.CANCEL` | Az előfizetés lemondásakor. |
| `STRIPE.SUBSCRIPTION.EXPIRED` | Az előfizetés lejártakor. |
| `STRIPE.SUBSCRIPTION.SUSPENDED` | Az előfizetés felfüggesztésekor. |
| `STRIPE.SUBSCRIPTION.REACTIVATE` | Az előfizetés újraaktiválásakor. |

Ezekkel például lezárhatsz egy tartalmat, ha az előfizetés lejárt vagy lemondták. Az általános eseményekről (`GATEWAY.SUCCESS`, `GATEWAY.FAILED`) az [Akciók és események](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/elso-lepesek-akcio-esemenyek/) fejezetben olvashatsz.

## 1. A kiegészítő telepítése

1. Menj ide: **JetFormBuilder → Kiegészítők**.
2. Keresd meg a Stripe Payment Gateway kiegészítőt, és telepítsd.
3. A **Bővítmények** oldalon aktiváld. Másik lehetőség, hogy mint bármely más bővítményt, zip-fájlból tedd fel és aktiváld.

## 2. Termék létrehozása a Stripe-ban

1. Lépj be a Stripe-fiókodba, vagy regisztrálj. Az üdvözlő ablakot átugorhatod vagy végigvezetheted.
2. A vezérlőpult alapból **Sandbox** módban nyílik meg. Éles módra a jobb felső sarokban lévő gombbal válthatsz, vissza ugyanígy.
3. Nyisd meg a **Product catalog** fület, és kattints a jobb felső **Create product** gombra.
4. Add meg a **Name** mezőt (kötelező), és ha kell, a leírást és a képet.
5. Az ablak alján, a **More options** résznél válaszd a **Recurring** lehetőséget, add meg az **Amount** mezőben az összeget, válaszd ki a pénznemet és a **Billing period** értékét (például **Monthly** vagy **Yearly**).
6. Kattints az **Add product** gombra. A termék megjelenik a termékkatalógusban.

## 3. API-kulcsok

1. A Stripe vezérlőpulton nyisd meg a **Developers → API keys** fület.
2. Másold ki a **Publishable key** és a **Secret key** értékét.

## 4. A JetFormBuilder beállítása

1. Menj ide: **JetFormBuilder → Beállítások → Payments Gateways**.
2. Kapcsold be az **Enable Gateways** kapcsolót.
3. Teszteléshez kapcsold be az **Enable Test Mode** kapcsolót is. Ez a kapcsoló a PayPal átjárót érinti, a Stripe-nál a Sandbox kulcsok jelentik a tesztelést.
4. A **Stripe Gateway API** szakaszban írd be a **Public Key** és a **Secret Key** értékét, majd kattints a **Save** gombra.

A beállítóoldalt részletesen a [Fizetési átjárók beállítása](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/elso-lepesek-fizetesi-atjarok/) fejezet mutatja.

## 5. A fizetés utáni tartalom előkészítése

A példa a JetEngine segítségével két csoportra osztja a tartalmat: a nem prémium bejegyzéseket mindenki látja, a prémiumot csak az előfizetők.

### Egyedi bejegyzéstípus

1. Hozz létre egy egyedi bejegyzéstípust (itt: „Hírek”).
2. Vegyél fel egy **Radio**, **Checkbox**, **Switcher** vagy **Select** típusú meta mezőt két értékkel (itt a „Prémium” mező **yes** és **no** értékkel). A **yes** értékű bejegyzést csak az előfizetők láthatják.
3. Töltsd fel a bejegyzéstípust tartalommal, és állítsd be minden bejegyzésnél a mező értékét.

### Lekérdezés (Query Builder)

1. Menj ide: **JetEngine → Query Builder**, és hozz létre egy **Posts Query** típusú lekérdezést (itt: „Query for Premium”).
2. A **General** fülön a **Post Type** mezőben válaszd ki a bejegyzéstípust.
3. A **Meta Query** fülön kattints az **Add new clause** gombra. A **Field key/name** mezőnél a **Dynamic Tag** ikonnal válaszd a **JetEngine meta field** makrót, majd a **Field** listából a prémium mezőt, és kattints az **Apply** gombra.
4. A **Compare** értéke legyen **Like** vagy **In the list**, az **Value** pedig **no**: így a lekérdezés csak a nem prémium bejegyzéseket adja vissza.
5. Ha kell, a **Pagination** fülön a **Posts Per Page** mezővel korlátozd az oldalankénti darabszámot, majd mentsd a lekérdezést.

### Listaelem (Listing Item)

1. Menj ide: **JetEngine → Listings/Components**, és hozz létre listaelemet a bejegyzéstípushoz.
2. Jelenítsd meg a kívánt mezőket **Dynamic Field**, **Dynamic Image** vagy más elemekkel. A példában egy **Heading** elem jelzi a prémium bejegyzéseket.
3. A **Heading** elem **Advanced** fülén nyisd le a **Dynamic Visibility** blokkot, és kapcsold be.
4. Válaszd a **Show element if condition met** típust, a feltétel **Equal**, a mező a **Dynamic tag** ikonnal kiválasztott prémium mező, az érték **yes**.
5. Tedd közzé a listaelemet.

### Listák az oldalon

Az oldalon két **Listing Grid** elem lesz, ugyanazzal a listaelemmel (a példa Elementort használ):

1. Az első rácsnál a **Custom Query** fülön kapcsold be a **Use Custom Query** kapcsolót, és a **Custom Query** listából válaszd ki a lekérdezést. Az **Advanced → Dynamic Visibility** blokkban a típus **Hide element if condition met**, a feltétel **User Role is**, a szerepkör **Subscriber**. Így az előfizetők nem látják ezt a nem prémium listát.
2. A második rács ugyanazt a listaelemet mutatja lekérdezés nélkül, tehát minden bejegyzést. Az **Advanced → Dynamic Visibility** blokkban a típus **Show element if condition met**, a feltétel **User Role is**, a szerepkör **Subscriber**. Ezt csak az előfizetők látják.

## 6. A regisztrációs űrlap

A példa két űrlapot használ: az egyik regisztrál, a másik előfizettet. (A regisztrációt és a belépést egy űrlapba is kötheted, lásd a JetFormBuilder render állapotairól szóló leírását.)

1. Menj ide: **JetFormBuilder → Új űrlap hozzáadása**. Az űrlap a blokkszerkesztőben nyílik meg.
2. Válassz előre elkészített űrlapot a **Welcome** blokkban, vagy kezdd a nulláról. A példában a „Registration Form” nevű űrlap a **Start from scratch** gombbal készül, **Text**, **Media**, **Radio** mezőkkel és egy **Action Button** gombbal.
3. Nyisd meg a **Post Submit Actions** fület, kattints a **+ New Action** gombra, és válaszd a **Save Form Record** akciót (ha alapból ott van, a ceruza ikonnal nyisd meg a beállításait). Bekapcsolhatod például a **Store the IP address and other request headers** kapcsolót. Az **Update** gombbal zárd be.
4. Add hozzá a **Register User** akciót. A **FIELDS MAP** részben kösd az űrlap mezőit a felhasználó adataihoz.
5. Görgess lejjebb: a **USER ROLE** legyen **Contributor**, és kapcsold be a **Log In User after Register** kapcsolót. Az **Update** gombbal zárd be.
6. Állítsd be az akció eseményét: vidd az egeret a **Register User** akció fölé, és kattints a keresztezett nyilak ikonra. Az **Edit Action Conditions & Events** ablakban az **Events match** fülön az **ADD EVENT** listából válaszd a `DEFAULT.PROCESS` eseményt, és kattints az **Update** gombra.
7. Tedd közzé az űrlapot (**Publish**).

## 7. Az előfizetési űrlap

1. Hozz létre új űrlapot a nulláról.
2. Adj hozzá egy **Hidden Field** mezőt, és a **FIELD VALUE** legyen **Current User ID**. Erre azért van szükség, hogy az űrlap tudja, melyik felhasználót kell frissíteni.
3. Adj hozzá egy **Checkbox Field** mezőt, a **LABEL** legyen „Előfizetek”, a **VALUE** pedig **yes**.
4. Az **Action Button** szövege legyen „Előfizetek”.
5. A jobb oldali **JetForm** fülön, a **Gateways Settings** szakaszban kapcsold be a **Stripe Checkout** lehetőséget, és kattints az alatta lévő **Edit** gombra.
6. Az **Edit Stripe Checkout Settings** ablakban kapcsold be a **Use Global Settings** kapcsolót, hogy az űrlap a globális kulcsokat használja (külön kulcsot a **PUBLIC KEY** és a **SECRET KEY** mezőbe írhatsz).
7. Kattints a **Sync Access Token** gombra. Sikeres szinkron után megjelenik a **Refresh Plans From Stripe** gomb.
8. A **GATEWAY ACTION** értéke legyen **Előfizetés**. Az **ELŐFIZETÉSI CSOMAGHOZ TARTOZÓ MEZŐ** értéke **Manual Input**. Ha a Stripe-ban egyetlen csomagod van, az magától bekerül, egyébként az **ELŐFIZETÉSI CSOMAG** listából válaszd ki. Az ablak mezőit a [Használat](https://hub.hellowp.io/hu/plugins/jet-form-builder-stripe-gateway/hasznalat/) fejezet írja le.

![Az Edit Stripe Checkout Settings ablak Előfizetés beállítással](./kepek/stripe-ablak-elofizetes.webp)

*Az Edit Stripe Checkout Settings ablak Előfizetés beállítással* (https://minta-bolt.hu/wp-admin/post.php?post=4&action=edit)

A képen az **Előfizetés** művelet mezői láthatók, köztük az **ELŐFIZETÉSI CSOMAG**.

Ezután két **Update User** akció kell:

1. A **Post Submit Actions** fülön kattints a **+ New Action** gombra, és válaszd az **Update User** akciót. A **User ID (will update the user)** értékhez rendeld a **Hidden Field** mezőt (a felhasználó azonosítóját hordozza), a **USER ROLE** legyen **Subscriber**. Az **Update** gombbal zárd be.
2. Ennek az akciónak az eseménye: keresztezett nyilak ikon, **Events match** fül, **ADD EVENT** → `GATEWAY.SUCCESS`. Így a szerepkör akkor változik, amikor a fizetési rendszer jóváhagyta a fizetést.
3. Vegyél fel egy második **Update User** akciót ugyanazzal a **User ID** hozzárendeléssel, de **USER ROLE**: **Contributor**. Ez azt a szerepkört állítja be, amellyel a felhasználó a nem prémium tartalmat látja.
4. Ennek az eseménye legyen `STRIPE.RENEWAL.PAYMENT`.
5. Tedd közzé az űrlapot.

Az események miatt a felhasználó az első sikeres fizetés után előfizetői szerepkört kap. Ha az előfizetés megszűnik, a `STRIPE.SUBSCRIPTION.EXPIRED` vagy a `STRIPE.SUBSCRIPTION.CANCEL` eseményhez is köthetsz akciót, például a tartalom zárolására.

## 8. Az űrlapok az oldalra

Az oldalon, ahová a két listát tetted, helyezd el egymás alá a két űrlapot a **JetForm** elemmel. A JetForm elem Elementorban, a blokkszerkesztőben és Bricksben is elérhető.

## 9. Kipróbálás

1. Jelentkezz ki, majd a nyilvános oldalon töltsd ki a regisztrációs űrlapot, és küldd be.
2. Az oldal újratölt: megjelenik az előfizetési űrlap és a nem prémium bejegyzések listája.
3. Jelöld be az előfizetési jelölőnégyzetet, és kattints az előfizetés gombra. A látogató a Stripe fizetőoldalára kerül.
4. Add meg a fizetési adatokat (Sandbox módban teszt kártyát), és kattints a **Subscribe** gombra.
5. A rendszer visszairányít az oldalra, ahol az előfizetési űrlapok már nem látszanak, és a prémium bejegyzéseket is tartalmazó lista látható.

Az előfizetést a beküldés után csak egyszer kell jóváhagyni. Az ismétlődő terheléseket a Stripe a termék létrehozásakor megadott számlázási ciklus szerint végzi.

## Fizetések és előfizetések követése

A Stripe vezérlőpultján az **Subscriptions** fülön látszik az új előfizetés. A WordPressben két lista követi:

![A JetFormBuilder Subscriptions oldala](./kepek/elofizetesek-elofizetesek-lista.webp)

*A JetFormBuilder Subscriptions oldala* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-form-builder&page=jfb-subscriptions)

A **JetFormBuilder → Subscriptions** oldalon az előfizetések listája van: **Subscriber**, **Billing Cycle**, **Status**, **Létrehozva** és **ID** oszlopokkal. A képen a lista még üres.

![A JetFormBuilder Fizetések oldala](./kepek/elofizetesek-fizetesek.webp)

*A JetFormBuilder Fizetések oldala* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-form-builder&page=jfb-payments)

A **JetFormBuilder → Fizetések** oldalon minden fizetés megjelenik a **Fizetés típusa**, **Létrehozva**, **Állapot**, **Bruttó**, **Fizető**, **Subscription** és **ID** oszlopokkal. Az **Export** hivatkozással kiexportálhatod a listát.