/ ELSŐ LÉPÉSEK /
Öveket becsatolni, indul a valódi móka! Az előző három leckében voltaképp még semmit sem csináltunk, ami közvetlenül a blog-tanfolyam címéről, vagyis a PayPal-al való automatizált együttműködésről szólna. Ma viszont már felépítünk egy nagyon egyszerű rendszert, ami éppen ezt kezdi megvalósítani – akár élesben is!
Ám nem kell aggódni, bőven marad még téma a további leckékhez, ugyanis elképesztően tág a lehetőségeink tárháza, melyeknek ma még szinte a felszínét sem karcoljuk meg.
Lássuk tehát, „miből élünk”. :-)
ELŐZMÉNYEK:
Ahhoz, hogy követni tudjuk a mai lecke anyagát, meg kell tennünk néhány lépést. Ha ezekből valamelyiket kihagytuk az előző leckék folyamán, ugorjunk vissza az adott helyre, és pótoljuk az elmaradásunkat!
- A 2. leckében regisztráltuk magunkat a developer.paypal.com oldalon, és ennek segítségével készítettünk egy próba hozzáférést, próba pénztárcát.
- A 3. leckében beszereztünk egy ingyenes uw.hu tárhelyet PHP és MySQL támogatással, valamint feltöltöttünk erre egy próba HTML fájlt.
AZ INDEX.HTML folytatása:
Szóval tegnap ott tartottunk, hogy van egy nagyon egyszerű HTML oldalunk, amit index.html néven mentettünk el. Ma ezen fogunk tovább dolgozni.
Ebben most egy bekezdés (<p></p>) rész található, mely alá most egy újabb bekezdést szúrunk be. Így:
<p>1 csomag, ár: 190</p>
Így tehát a vonatkozó kódrészünk ezek után így néz ki:
<p>Tárhely teszt.</p>
<p>1 csomag, ár: 190</p>
Ezen két bekezdés alá fogjuk elhelyezni a saját készítésű „fizetés” gombunkat, aminek segítségével abban a pillanatban, hogy a látogatónk rákattintott, a weblap el tudja majd küldeni a vásárlás minden fontos információját a PayPal-nak.
[HTML] - AZ ŰRLAPOKRÓL
A weblapok legtöbbször úgynevezett űrlapok segítségével szoktak adatokat küldeni. Naponta találkozhatsz ilyen űrlapokkal, amikor egy fórumba beírod a hozzászólásodat, és elküldöd. Most mi is ilyen űrlapot készítünk, ami viszont abban különbözik a legtöbb helyen megszokottól, hogy kizárólag egyetlen gombból áll.
A hagyományos szövegbeviteli mezőket pedig úgynevezett rejtett mezőkkel váltjuk ki. Ezek a rejtett mezők lényegében ugyanolyan szövegmezők, mint amibe egy weblapon a felhasználói nevünket, jelszavunkat, vagy a hozzászólásunkat szoktuk beírni, annyi különbséggel, hogy ezeket - mivel rejtettek - a felhasználó egyáltalán nem fogja látni.
Igen - kérdezhetnéd - de ha ezek a szövegmezők nem jelennek meg a weblapon, akkor mégis honnan kerül beléjük bármilyen tartalom? Nos, a rejtett mezők tartalmát begépelés helyett a weblap fejlesztőjeként mi magunk határozzuk majd meg előre.
Kell tehát egy űrlap. Az űrlapokat a <form> HTML tag-gel hozzuk létre. Ezt a hozzá tartozó </form> záró taggel együtt most egy újabb bekezdésen (<p></p>) belül írjuk meg. Valahogy így:
<p>
<form>
</form>
</p>
Ez az űrlap persze így még nem csinál semmit. Meg kell adni a működéséhez néhány fontos adatot. Elsőként azt kell megmondanunk neki, hogy hova küldje el a vásárlás információit. Értelemszerűen a PayPal-nak kell elküldenie. A PayPal fogadó weblapját most az űrlap (<form> tag) „action” tulajdonságában tudjuk beállítani.
[HTML] - TAG-ek tulajdonságai
A tulajdonság egy olyan dolog, amit egy HTML nyitó tagen belül adhatunk meg a tag neve után. Elsőként leírjuk a tulajdonság nevét, majd pedig egyenlőségjel után, idézőjelek között a tulajdonság leírását. (Valahogy így: tulajdonságnév="tulajdonság leírása")
Képzeljük el, hogy létezik egy „macska” nevű HTML tag, aminek a „szin” tulajdonságát szürkére akarjuk állítani. Ez így nézne ki:
<macska szín="szürke">… </macska>
A HTML nyelv jelenlegi verzióiban természetesen nem hozhatunk létre önkényesen tetszőleges, mondjuk „macska” vagy „kutya” nevű HTML tageket, ez csupán illusztráció.
FORM - ACTION tulajdonság
Szóval ott tartottunk, hogy be akarjuk állítani az űrlap célját. Ehhez a <form> tag „action” tulajdonságánál kell megadnunk a PayPal weblapját, ahol az fogadni tudja tőlünk az adatokat. A meglévő <form> tagunkat ekként kell átírnunk:
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr">
A fent megadott címben a sandbox előtag azt jelenti, hogy a fizetés nem a valódi, éles PayPal rendszerhez, hanem csupán a tesztrendszerükhöz fog befutni. Valójában később elegendő lesz jóformán ezt az előtagot kitörölni ahhoz, hogy onnantól élesben, valódi pénzzel is működjön, amit leprogramoztunk. Viszont egyelőre ezt még ne tegyük meg, biztonságosabb kockázat nélkül játszani. :)
De menjünk is tovább, mert még nincs kész a <form> nyitó tagünk.
Az „action” tulajdonság után a „method” tulajdonságot kell beállítanunk. Erről most elegendő annyit tudnunk, hogy az űrlapadatok továbbításának technikai módját határozza meg. Mi most a „POST” nevű technikai módot választjuk ki. Hogy ez a POST pontosan mit jelent, az most számunkra mellékes.
A <form> tagunkat tehát ki kell egészítenünk az előző után egy method=”POST” tulajdonság-leírással.
Valahogy így:
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST">
Ezzel a <form> nyitó tagünket el is láttuk minden fontos információval. A következő lépés a fizetési gombunk elkészítése. Ez az alább látható módon fog kinézni (de természetesen rajzolhatunk sajátot is):
Készítsünk az előző leckében létrehozott „paypal” nevű mappánkba az index.html mellé egy „kepek” nevű mappát, és mentsük el oda ezt a képet innen!
Ezt fogjuk beállítani a fizetési gombunk kinézeteként.
[HTML] - INPUT ELEMEK
Az űrlapon belül minden fontosabb elemet <input> tag-on belül helyezünk el, így ezt is. Erről azt kell tudni, hogy NEM használunk hozzá </input> záró taget, hanem helyette a nyitó tag-et zárjuk le a végén, valahogy így:
<input />
Ezt kell tehát most kiegészítenünk különféle tulajdonságokkal ahhoz, hogy a képünket tartalmazó gombként működhessen.
Elsőként azt a tényt kell beállítanunk, hogy egy képet fogunk belerakni. Más szóval a típusát képre kell állítanunk. Megint más szóval: a type tulajdonságának image értéket kell adnunk.
Valahogy így:
<input type="image" />
INPUT - SRC tulajdonság
Ezek után meg kell adnunk a képünk relatív helyét az src nevű tulajdonságon belül. Hogy mi az a relatív hely, relatív hivatkozás?
Nos, egy relatív hivatkozás attól lesz „relatív”, hogy nem „http://” szöveggel kezdődik, tehát nem a kép teljes webcímét adjuk meg benne a legelejétől, hanem ehelyett csupán az aktuális dokumentumhoz képest (esetünkben az index.html-hez képest) írjuk le a hivatkozott fájl relatív, tehát viszonylagos helyét.
Miután az előbb egy „kepek” nevű mappát hoztunk létre az index.html fájl mellé, és ebbe mentettük el a fizetek.gif nevű képfájlt, ezért ennek a relatív hivatkozása az index.html-ből az előbb leírtak alapján így néz ki: kepek/fizetek.gif
Rakjuk is be ezt egy src tulajdonság értékeként az input tag-ünkbe:
<input type="image" src="kepek/fizetek.gif" />
Príma! Adjunk még a képünknek egy azonosítót a name tulajdonsággal. Ennek majd később lesz jelentősége.
<input type="image" src="kepek/fizetek.gif" name="fizess" />
Végül állítsuk be a value nevű tulajdonság értékét pay-re. Ez egy formaság a PayPal számára, most nem szükséges megértenünk, miért van rá szükség.
<input type="image" src="kepek/fizetek.gif" name="fizess" value="pay" />
No, hát készen is vagyunk a gombbal.
Jelen pillanatban tehát így néz ki a fájlunk:
<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="image" src="kepek/fizetek.gif" name="fizess" value="pay" />
</form>
</p>
</body>
</html>
Igen ám, de ezzel még közel sem vagyunk készen.
A PAYPAL speciális mezői
Néhány tulajdonságot ugyanis mindenképp szükséges megadnunk ahhoz, hogy a PayPal fel tudja dolgozni az űrlapunkat. Most készítjük el tehát a fentebb már említett rejtett mezőket.
Ezek olyan speciális mezők, melyeket a PayPal rendszere előre beállítottan vár tőlünk, és amelyeket így remekül megért.
Voltaképpen ezt úgy kell elképzelni, hogy a PayPal mérnökei előre megmondták nekünk, hogy milyen szavakat ért meg a PayPal. Nekünk tehát mindenképp szükséges megtanulnunk a PayPal „nyelvét” ahhoz, hogy beszélgetni tudjunk vele.
Egy-egy szót egy-egy <input> tag-gel közölhetünk a PayPal-lal. Sok ilyen <input> tagből áll össze az űrlap, ami így egy kerek mondat lesz. Egy olyan kerek mondat, amit már remekül tud értelmezni a PayPal.
Ezek a PayPal-nak szóló „szavak” tehát mind olyan <input> tag-ek lesznek, melyeket elsőként rejtett típusúra állítunk (vagyis a type tulajdonságának hidden értéket adunk).
<input type="hidden" />
Ezek után következik name tulajdonságon belül annak az azonosítása, hogy milyen adatot küldünk az adott <input> mezőnkkel a PayPal-nak.
<input type="hidden" name="Milyen PayPal adat" />
Legvégül pedig a value tulajdonság értékénél állítjuk be, hogy az adott adathoz milyen értéket küldünk el.
<input type="hidden" name="Milyen PayPal adat" value="Milyen értékket küldünk ez az adott PayPal adathoz" />
Alább ezeket a szükséges rejtett mezőket, PayPal adatokat vesszük sorra.
Ezek a rejtett mezők a <form> nyitó tag, és a „fizetek” szöveggel ellátott képünket tartalmazó <input> tag közé kell, hogy jöjjenek.
- business
Az üzletünk neve. Jelen esetben ez megegyezik a developer.paypal.com alatt a Test accounts-nál létrehozott próba pénztárcánk nevével (esetemben ez [email protected])
(Egyébként pedig élesben majd a rendes PayPal azonosítónkat kell megadnunk ezen a helyen. Voltaképpen az szerepel itt, hogy ki kapja a pénzt)
<input type="hidden" name="business" value="[email protected]" />
- cmd
Annak a meghatározása, hogy milyen típusú weblapról érkezik a vásárló. Hogy milyen típusú weblapok léteznek, azzal majd máskor foglalkozunk. Most legegyszerűbb itt _cart-ot, azaz bevásárlókosarat megadni.
<input type="hidden" name="cmd" value="_cart" />
- upload
Annak a meghatározása, hogy feltöltjük-e a PayPal-hoz a bevásárlókosarunk különféle kiegészítő elemeit (például a boltunk saját logóját). Ennek majd a további leckékben lesz jelentősége. Egyelőre úgy a helyes, ha ennek az értékét 1-re állítjuk.
<input type="hidden" name="upload" value="1" />
- item_name_[szám]
A megvásárolt áru neve.
Ha több különböző áru van, akkor a [szám] helyére 1, 2, 3. stb... jön. Ha csak egyfajta áru, akkor pedig az 1-es szám.
<input type="hidden" name="item_name_1" value="190-es csomag" />
- amount_[szám]
A megvásárolt áru ára.
Ha több különböző áru van, akkor a [szám] helyére 1, 2, 3. stb... jön. Ha csak egyfajta áru, akkor pedig az 1-es szám.
<input type="hidden" name="amount" value="190" />
- currency_code
A fizetés pénzneme. Forint esetén HUF.
<input type="hidden" name="currency_code" value="HUF" />
- rm
Return method.
A PayPal és a saját weblapunk közötti kommunikáció módját határozza meg. Értéke lehet 1 és 2. Hogy ez mit jelent, abba most a teljes megértéshez felesleges részletesen is belemennünk. A lényeg, hogy a 2-es szám a POST nevű kommunikációs technikát jelenti. Nekünk éppen ez kell, tehát a 2-es változatot állítjuk be.
<input type="hidden" name="rm" value="2" />
- return
Az a weblap, ahova sikeres fizetés után visszaérkezik látogató.
Ez legyen a [weblapunk helye]/kosz.html - mely hely nálam http://paypalproba.uw.hu/kosz.html
Ezt a kosz.php-t később írjuk meg.
<input type="hidden" name="return" value="http://paypalproba.uw.hu/kosz.html" />
- cancel_return
Az a weblap, ahova akkor érkezik vissza a látogató, ha mégsem akar fizetni.
Ez legyen a [weblapunk helye]/megse.html - ez a hely nálam http://paypalproba.uw.hu/megse.html
A megse.php-t később írjuk meg.
<input type="hidden" name="cancel_return" value="http://paypalproba.uw.hu/megse.html" />
Ezzel készen is vagyunk.
Az index.html most így néz ki (annyi eltéréssel, hogy a Te weblapod címe más, mint az enyém):
<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>
EGYÉB FÁJLJAINK:
Ezek után készítsük el a „kosz.html” fájlunkat!
[HTML] - a tag
Ebben az egyetlen új elem a <a> HTML tag lesz, mellyel linkeket, hiperhivatkozásokat hozhatunk létre (ez egy olyan szöveget jelent, amire kattintani lehet). Az <a> tag href tulajdonságának értékeként kell megadni, hogy hova mutasson a link. Ezek után a <a> nyitó és </a> záró tagek közé kell beszúrni a link szövegét.
Valahogy így:
<a href="http://sodi.freeblog.hu/">Ez a link SoDI blogjára mutat</a>
kosz.html
Nézzük tehát, hogyan is nézzen ki a kosz.html fájlunk, amit az index.html fájl mellé kell elmentenünk:
<html>
<head>
<title>Sikeres fizetés</html>
</head>
<body>
<p>Sikeresen fizettél!</p>
<a href=”index.php”>Tovább…</a>
</body>
</html>
megse.html
Végül az ugyanide kerülő „megse.html” fájlunk is hasonlóan néz ki, csak a benne szereplő szöveg lesz más.
<html>
<head>
<title>Visszavont fizetés</html>
</head>
<body>
<p>Nem történt fizetés.</p>
<a href=”index.php”>Tovább…</a>
</body>
</html>
Tehát ezt a két fájlt („kosz.html” és „megse.html”) a már meglévő index.html mellé kell elmentenünk, és az egészet feltölteni a tárhelyünkre.
KIPRÓBÁLÁS:
MEGJEGYZÉS:
A PayPal tesztrendszerében való fizetéshez, vagyis a kipróbáláshoz előbb be kell jelentkeznünk oda. Mindenképp tegyük meg ehhez az alábbiakat!
- Nyissuk meg a http://developer.paypal.com/ oldalt!
- Jelentkezzünk be azzal a felhasználói névvel és jelszóval, mellyel korábban ide regisztráltuk magunkat!
- Csak ezután nyissuk meg a weblapunkat a fizetés teszteléséhez!
Ezek után nincs más hátra, mint kipróbálni a művünket. Ha meg van nyitva a frissen elkészített weblapunk, akkor kattintsunk a „Fizetés” gombra.
Ekkor a PayPal weblapjára jutunk. Mint látjuk, a böngésző címsorában paypal.com helyett sandbox.paypal.com szerepel. Mint már többször megbeszéltük, ez azt jelenti, hogy nyugodtan megadhatjuk akár a valódi bankkártya-adatainkat is a próba-fizetéshez, ugyanis ennek nyomán garantáltan nem fog történni semmiféle valódi pénzmozgás.
Teszt fizetésnél én a valódi adataimat adtam meg.
A következő lépés az összegző képernyő. Ha mindent rendben levőnek találunk, a Pay Now! gombbal tudunk fizetni. Ne feledjük, most csak a játék pénztárcánkat töltjük fel játékpénzzel, tehát nyugodtan rákattinthatunk, nem lesz semmi következménye.
Miután befejeztük a fizetést a „Return to ... Strore” gombra való kattintással térhetünk vissza a weblapunkra.
Ekkor esetleg kaphatunk egy üzenetet arról, hogy a PayPal titkosított weblapjáról egy hagyományos weblapra lépünk vissza. Ez egyelőre teljesen rendben van így, tehát nyugodtan kattintsunk a folytatásra.
Ezek után máris olvashatjuk, hogy sikeres volt a fizetés.
Ideje megnéznünk, hogy ez valóban így van-e. Ha minden igaz, a korábbi leckében regisztrált próba pénztárcánkban meg kellett jelennie 190 forintnak. Be kell tehát jelentkeznünk a developer.paypal.com oldalon azzal a felhasználói névvel és jelszóval, mellyel a múltkor ott regisztráltunk. Ezek után a „Test accounts” menüpont alatt kattintsunk a „Enter test site” gombra, végül az új ablakban megnyíló PayPal tesztoldalon jelentkezzünk be a múltkor létrehozott próba hozzáférésünk (próba pénztárcánk) adataival. (Pontosan ugyanúgy, ahogyan a múltkori leckében is csináltuk.)
Ha itt vagyunk, rögtön láthatjuk is a végeredményt: megérkezett a számlánkra (a játék-tárcánkba) az iménti 190 forint játékpénz! SIKER! :-)
Igen ám, de ezzel még nem oldottuk meg a teljes automatizálást. Valójában még mindig nem csináltunk sokkal többet mintha egy egyszerű, hagyományos PayPal gombot raknánk ki a weblapunkra. A teljes automatizáláshoz ugyanis még meg kell oldanunk az alábbi kérdéseket:
-
honnan fogja tudni a weblapunk, hogy pontosan melyik felhasználónk fizetett nekünk?
-
hogyan kerülhetjük el, hogy csalók elhitessék a weblapunkkal, hogy fizettek nekünk, pedig valójában nem?
-
hogyan oldjuk meg, hogy technikai hiba miatt még véletlenül se kerülhessenek téves adatok a sikeres fizetések listájába?
A következő leckékben ezeket a kérdéseket vesszük sorra.
By SoDI
Egyébként hogy 
