/ VÁLASZTHATÓ CSOMAGOK /
Annak már lefektettük az alapjait, hogy miként hozható létre egy olyan rendszer, ami automatizáltan együttműködik a PayPal-lal. Ennek keretében:
- A 2. leckében átnéztük a feladat elméleti alapjait, majd létrehoztunk a PayPal-nál egy próba-pénztárcát, aminél következmények nélkül tudjuk tesztelgetni a munkánkat, a valóságban nem létező játékpénzzel.
- A 3. leckében beszereztünk egy ingyenes tárhelyet PHP és MySQL támogatással.
- A 4. leckében pedig megírtunk egy olyan egyszerű rendszert, amely együttműködve a PayPal weboldalával képes feltölteni ezt a próba-pénztárcát.
Most innen folytatjuk a munkát, kicsit továbbfejlesztve a dolgot.
Ahhoz, hogy haladni tudjunk, meg kell lennie mindennek, amit az előző leckékben készítettünk.
Ugyebár ott hagytuk abba a munkát, hogy képesek vagyunk egyetlen tételt, egy 190 forintos cuccot kifizettetni a weblapunk látogatóival. Igen ám, de vajon mi a teendő akkor, ha nem egyetlen fix árut szeretnénk rájuk tukmálni, hanem választási lehetőséget is fel akarunk kínálni nekik? Ma ezt nézzük meg.
A lecke végére úgy fogjuk átalakítani a rendszerünket, hogy a látogatók egyetlen áru helyett öt különféle dolgot: fantázianevükön mondjuk az úgynevezett bronz, ezüst, arany, platina és gyémánt csomagunkat tudják majd megvásárolni tőlünk. Ezeknek az ára legyen mondjuk sorban 100, 500, 1.000, 5.000, és 10.000 Ft.
Ahhoz, hogy ezt megtehessük, az index.html fájlunkat kell átalakítanunk. Ez ugye most pillanatnyilag így néz ki (a http://paypalproba.uw.hu/ részt leszámítva, ami nálad a saját weblapod címe, valamint a [email protected] is a saját PayPal próba pénztárcád azonosítója kell, hogy legyen):
<html>
<head>
<title>Próba weblap</title>
</head>
<body>
<p>Tárhely teszt.</p>
<p>1 csomag, ár: 190</p>
<p>
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST" />
<input type="hidden" name="business" value="[email protected]" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="upload" value="1" />
<input type="hidden" name="item_name_1" value="190-es csomag" />
<input type="hidden" name="amount_1" value="190" />
<input type="hidden" name="currency_code" value="HUF" />
<input type="hidden" name="rm" value="2" />
<input type="hidden" name="return" value="http://paypalproba.uw.hu/kosz.html" />
<input type="hidden" name="cancel_return" value="http://paypalproba.uw.hu/megse.html" />
<input type="image" src="kepek/fizetek.gif" name="fizess" value="pay" />
</form>
</p>
</body>
</html>
Hogy ebben a kódban pontosan mi mit jelent, azt nagyon pontosan leírtam a 3. leckében. Most lépésről lépésre elmagyarázom, hogy mit írunk át benne, és miért.
<p>1 csomag, ár: 190</p>
Mivel mostantól a felhasználó fogja kiválasztani, hogy mit vásárol, a továbbiakban nincs értelme külön bejegyzésbe égetni az árról szóló tájékoztatást.
<p>Csomag vásárlás</p>
<input type="hidden" name="cmd" value="_cart" />
Ebben a sorban az _cart-ot átírjuk _xclick-re. Ezzel jelezzük a PayPal-nak, hogy nem egy előre összeállított bevásárlókosarat küldünk el a rendszerüknek, hanem ehelyett a vásárlónk a fizetést felkínáló űrlapon maga fogja kiválasztani, hogy melyik árut kívánja kifizetni.
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="upload" value="1" />
Ezt a sort teljesen kitöröljük, mivel a kosár adatainak feltöltésének csak kosár esetében van értelme, márpedig mi a továbbiakban nem kosárral dolgozunk.
<input type="hidden" name="item_name_1" value="190-es csomag" />
Itt az item_name_1 névből kitöröljük az _1 utótagot, mivel az ilyesfajta sorszámozásnak szintén csak kosár esetében van értelme (ahol több áru is lehet egyszerre a kosárban). Egyben a „190-es csomag” elnevezést is átírjuk, elvégre mostantól nem lesz fixen beégetve, hogy a vásárló mennyi pénzt fizet nekünk a „Fizetek” gombunkra való kattintással.
<input type="hidden" name="item_name" value="Teszt csomag" />
<input type="hidden" name="amount_1" value="190" />
Ezt ugye úgy kell átalakítanunk, hogy a továbbiakban ne fix 190 forint legyen az ár, hanem attól függően változzon, hogy a vásárló melyik csomagunkat akarja megvásárolni.
Ezt lenyíló listával fogjuk megoldani, mely a következőképpen fog kinézni:
Hogyan is tudunk ilyen lenyíló listát készíteni?
Nos, erre a <select> HTML tag szolgál.
Írjuk is meg ennek a nyitó és záró tagját.
<select>
</select>
A lenyíló lista egy-egy sorát az <option> HTML tag-gel hozzuk létre. Ennek kell adni valamilyen tetszőleges value tulajdonságot (ez lesz az azonosítója), majd pedig a záró tag-je előtt le kell írnunk azt a szöveget, amivel az adott sort a lenyíló listánkban szerepeltetni akarjuk.
Például a Bronz csomagunknál ez a következőképpen fog kinézni:
<option value="Bronz">Bronz csomag: 100 Ft</option>
Ezeket az <option> tageket a <select> tag-en belül kell elhelyeznünk. Valahogy így:
<select>
<option value="Bronz">Bronz csomag: 100 Ft</option>
<option value="Ezust">Ezüst csomag: 500 Ft</option>
<option value="Arany">Arany csomag: 1.000 Ft</option>
<option value="Platina">Platina csomag: 5.000 Ft</option>
<option value="Gyemant">Gyémánt csomag: 10.000 Ft</option>
</select>
Megjegyzés: a hagyományos HTML szabványban az <option> tag-et nem kell lezárni, de én a legújabb, XHTML nevű szabványt követem, mert manapság már azzal lehet a legeredményesebben dolgozni.
Ahhoz, hogy a lenyíló listánk adatait értelmezni tudja a PayPal rendszere, még adnunk kell a <select> tag-nek egy name tulajdonságot, os0 értékkel.
<select name="os0">
Itt az os az „option selection”, vagyis magyarul az opció kiválasztás kifejezést jelenti, a 0 pedig azt, hogy ez az első lenyíló listánk. (Ha több lenyíló listánk is lenne, a második neve os1 lenne, a harmadik neve os2, és így tovább.)
Teljes formájában tehát így néz ki a lenyíló listánk:
<select name="os0">
<option value="Bronz">Bronz csomag: 100 Ft</option>
<option value="Ezust">Ezüst csomag: 500 Ft</option>
<option value="Arany">Arany csomag: 1.000 Ft</option>
<option value="Platina">Platina csomag: 5.000 Ft</option>
<option value="Gyemant">Gyémánt csomag: 10.000 Ft</option>
</select>
Igen ám, de itt ugye felmerül a kérdés, hogy a PayPal rendszere mégis honnan fogja tudni az egyes csomagjaink árát. Az, hogy „platina” nyilván nem mond neki semmit, mint ahogy magától a „Platina csomag: 5.000 Ft” szövegből sem fogja tudni kihámozni, hogy ebben hol van az ár (ráadásul ez a szöveg egyáltalán el sem jut hozzá).
Hiába no, a PayPal-nál sem szuperintelligens terminátorok dolgozzák fel a weblapunk lekérdezéseit, hanem egyszerű, buta programok.
Nos, a megoldás annyi, hogy külön is megadjuk a PayPal-nak elküldendő adatok között, hogy melyik csomagunkhoz milyen ár tartozik. Ezt a következő módon fogjuk megtenni:
Ehhez elsőként szükségünk lesz egy option_index nevű rejtett mezőre, melynek tartalma azt fogja jelezni a PayPal számára, hogy a weblapunknak hányadik lenyíló listájában adják meg a felhasználók, hogy melyik csomagunkat akarják megvásárolni. Miután nekünk egyetlen egy lenyíló listánk van, és a sorszámozás nulláról kezdődik, ezért értelemszerűen ennek az option_index-nek 0 értéket kell adni. (Ugyanis: ha csak egy lista van, annak a sorszáma mindenképpen a 0.)
Valahogy így:
<input type="hidden" name="option_index" value="0" />
Ezután következhet annak a felsorolása, hogy a lenyíló listánk egyes soraihoz milyen árak tartoznak. A lenyíló lista minden egyes sorát két lépésben látjuk el árral. Elsőként hivatkozunk az adott sor azonosítójára, majd utána második lépésben ehhez az azonosítóhoz társítjuk az árat. Hogy pontosan megérthessük, mit is jelent ez, a legelső sorral, vagyis a Bronz csomaggal részletesen elmagyarázom ennek a menetét.
- 1. lépés: A lenyíló lista adott sorának azonosítása:
<input type="hidden" name="option_select0" value="Bronz" />
Ezzel megadjuk, hogy a lenyíló listánkban a „Bronz” nevű (vagyis pontosabban a Bronz 'value=' értékű) sorhoz a 0 azonosító tartozik.
Egyébként célszerű a legelső sort mindig 0-val jelölni, majd pedig a többit sorban 1, 2, 3, stb... azonosítóval.
- 2. lépés: Az ár megadása:
<input type="hidden" name="option_amount0" value="100" />
Ezzel meghatározzuk, hogy a lenyíló-listánknak az előző lépésben 0-val azonosított sorában lévő csomagunk ára 100 Ft. Ennyi. :)
Ennek megfelelően a lenyíló listánkban szereplő összes többi sorhoz a következő módon adjuk meg az árakat:
-
Ezüst csomaghoz 500 forintos ár megadása:
<input type="hidden" name="option_select1" value="Ezust" />
<input type="hidden" name="option_amount1" value="500" />
-
Arany csomaghoz 1.000 forintos ár megadása:
<input type="hidden" name="option_select2" value="Arany" />
<input type="hidden" name="option_amount2" value="1000" />
-
Platina csomaghoz 5.000 forintos ár megadása:
<input type="hidden" name="option_select3" value="Platina" />
<input type="hidden" name="option_amount3" value="5000" />
-
Gyémánt csomaghoz 10.000 forintos ár megadása:
<input type="hidden" name="option_select4" value="Gyemant" />
<input type="hidden" name="option_amount4" value="10000" />
Ezzel készen is volnánk.
Ugyebár ott tartottunk, hogy az előző leckében megírt index.html fájlunkban az árat meghatározó sor így nézett ki:
<input type="hidden" name="amount_1" value="190" />
Na, ezt a sort kell kicserélni arra a hosszú kódra, amit most írtunk meg.
<select name="os0">
<option value="Bronz">Bronz csomag: 100 Ft</option>
<option value="Ezust">Ezüst csomag: 500 Ft</option>
<option value="Arany">Arany csomag: 1.000 Ft</option>
<option value="Platina">Platina csomag: 5.000 Ft</option>
<option value="Gyemant">Gyémánt csomag: 10.000 Ft</option>
</select>
<input type="hidden" name="option_index" value="0" />
<input type="hidden" name="option_select0" value="Bronz" />
<input type="hidden" name="option_amount0" value="100" />
<input type="hidden" name="option_select1" value="Ezust" />
<input type="hidden" name="option_amount1" value="500" />
<input type="hidden" name="option_select2" value="Arany" />
<input type="hidden" name="option_amount2" value="1000" />
<input type="hidden" name="option_select3" value="Platina" />
<input type="hidden" name="option_amount3" value="5000" />
<input type="hidden" name="option_select4" value="Gyemant" />
<input type="hidden" name="option_amount4" value="10000" />
Ezzel voltaképpen készen is volnánk.
A mai leckében átírt index.html fájlunk most az alább látható módon néz ki (annyi különbséggel persze, hogy nálad a http://paypalproba.uw.hu/ a saját weboldalad címét jelöli, a [email protected] a pedig a saját PayPal próba pénztárcád azonosítója).
Sárgával jeleztem azt az extra sortörést (<br /> tag), amit azért raktam bele a kódba, hogy a „Fizetek” gombunk a lenyíló listánk alá kerüljün.
[ index.html ]
<html>
<head>
<title>Próba weblap</title>
</head>
<body>
<p>Tárhely teszt.</p>
<p>Csomag vásárlás</p>
<p>
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST" />
<input type="hidden" name="business" value="[email protected]" />
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="item_name" value="Teszt csomag" />
<select name="os0">
<option value="Bronz">Bronz csomag: 100 Ft</option>
<option value="Ezust">Ezüst csomag: 500 Ft</option>
<option value="Arany">Arany csomag: 1.000 Ft</option>
<option value="Platina">Platina csomag: 5.000 Ft</option>
<option value="Gyemant">Gyémánt csomag: 10.000 Ft</option>
</select>
<input type="hidden" name="option_index" value="0" />
<input type="hidden" name="option_select0" value="Bronz" />
<input type="hidden" name="option_amount0" value="100" />
<input type="hidden" name="option_select1" value="Ezust" />
<input type="hidden" name="option_amount1" value="500" />
<input type="hidden" name="option_select2" value="Arany" />
<input type="hidden" name="option_amount2" value="1000" />
<input type="hidden" name="option_select3" value="Platina" />
<input type="hidden" name="option_amount3" value="5000" />
<input type="hidden" name="option_select4" value="Gyemant" />
<input type="hidden" name="option_amount4" value="10000" />
<input type="hidden" name="currency_code" value="HUF" />
<input type="hidden" name="rm" value="2" />
<input type="hidden" name="return" value="http://paypalproba.uw.hu/kosz.html" />
<input type="hidden" name="cancel_return" value="http://paypalproba.uw.hu/megse.html" />
<br />
<input type="image" src="kepek/fizetek.gif" name="fizess" value="pay" />
</form>
</p>
</body>
Ennyi ez egész.
Tesztelés:
Mint már megszoktuk, a tesztelést ezúttal is azzal kell kezdenünk, hogy előbb bejelentkezünk a developer.paypal.com oldalon azzal a felhasználói névvel, és jelszóval, amivel regisztrálva vagyunk oda, majd pedig ezután megnyitjuk a weblapunkat, melynek címe nálam http://paypalproba.uw.hu.
Ha minden igaz, valami ilyesmit kell látnunk:
Próbaként válasszuk ki mondjuk a Gyémánt csomagot!
Ezután kattintsunk a lenyíló lista alatt a „Fizetek” gombra!
A PayPal oldalán máris láthatjuk, hogy jól dolgoztunk: a választásunknak megfelelően 10 ezer forintot kér tőlünk a rendszer.
Príma!
Most persze nem csináltunk mást, mint kiegészítettük az előző leckében elkészített rendszerünket egy újabb funkcióval: az eltérő áruk közötti választás lehetőségével. Azonban azokat a problémákat, melyeket a múltkor felvetettem, még mindig nem oldottuk meg.
- Hogyan tudjuk a fizetéseket automatikusan jóváírni a weboldalunk látogatóinál?
- Hogyan védjük ki a visszaéléseket?
A következő lecke már erről fog szólni.
By SoDI
címre, ha érdekelnek a SoDI-féle bírósági tudósítások.