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

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 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 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 fejezet írja le.

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:

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.

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.