maj
23

Jak dodać formularz płatności PayPal na stronę www?

By halibucik // HTML & CSS, Tutorial // No Comments

Choć może to wydawać się skomplikowane, utworzenie formularza dla płatności PayPal nie jest wcale bardziej skomplikowane od stworzenia zwykłego formularza na stronę www. Przy nieco większym zaangażowaniu można dodać coś w stylu „Kup teraz” gdzie można zdefiniować za co i ile użytkownik płaci.

Jak to działa?

W najprostszym przypadku w formularzu jest tylko widoczny przycisk „Kup teraz”, a wszystkie inne pola z wartością zapłaty i tytułem są ukryte i na sztywno zdefiniowane. My chcemy czegoś bardziej zaawansawnego :)

Nasz przykład – chcemy dać użytkownikom możliwość wpłacenia dobrowolnie dowolnej kwoty za jego zdaniem ciekawy artykuł/tutorial – użytkownik wpisuje kwotę i wybiera tytuł artykułu. Można to łatwo zrobić przez zmianę ukrytych pól hidden na pola typu text i/lub select. Więc zaczynajmy.

Krok #1

Pierwszą rzeczą jest stworzenie strony, na którą zostanie przeniesiony użytkownik po zapłaceniu, gdzie przyjmie gratulacje z powodu udanej zapłaty.

Krok #2

Następnie zaloguj się na swoje konto PayPal i kliknij kartę Merchant Services – Usługi dla handlowców. Na dole z prawej zobaczysz łącze Przyciski Kup teraz – utworzymy własny guzik.

Wypełnij formularz wpisując w pozycji ID liczbę 1 oraz podobnie abstrakcyjne dane dla nazwy przedmiotu i ceny. Dane te ustawimy później. Upewnij się, że połączenie NIE JEST szyfrowane – wybierz ‘Użyj mojego podstawowego adresu e-mail . Pozostałe pola (waga itp.) mogą być puste. Na następnej stronie jest kod – jest on domyślnie zaszyfrowany, ale przyciskiem ponad polem można go odkodować – zróbmy to!

Krok #3

Oto kod, który otrzymałem od PayPal. Zauważ, że zachowując odpowiednie nazwy pól, możemy zmienić ich typ z hidden na text!

Oznacza to, że na przykład zamiast określania wartości kwoty na sztywne 9 PLN, możemy pozwolić użytkownikowi na wpisanie kwoty, które chcą zapłacić. Podobnie tytuł wpłaty item_name może być wprowadzony przez użytkownika.

Oto pola, które chcemy/możemy zmienić:

Item number – Jest to wartość, którą można zobaczyć na stronie PayPal po kliknięciu przycisku i rozwinięciu ‘strzałki’ – zobacz przykładowy formularz poniżej
Business – Jest to konto, na które zostanie przekazana wpłata. Upewnij się, że to Twój adres e-mail!
Currency code – Waluta, w której wpłacane są pieniądze. Możesz zbudować listę rozwijalną, jeżeli spodziewasz się wpłat z całego świata
Item name – tytuł wpłaty. Może być to lista rozwijalna lub pole typu text.
Amount – kwota. Musimy uważać, aby znalazła się ty tylko liczba, w innym przypadku PayPal zwróci błąd i nici z transakcji… Można użyć zaawansowanej walidacji JS (osobny artykuł) w naszym przykładzie dodamy za polem walutę PLN, co ma sugerować aby wpisać tylko liczbę.

Krok #4

Można zauważyć, że w kodzie nie ma tu adresu URL strony zwrotnej. Wystarczy dodać linię do formularza (zwrotny adres URL)

Jak widzisz, przycisk ma domyślny paypalowski nudny oklepany wygląd. Nie chcemy nudnego – chcemy jeszcze nudniejszy klasyczny przycisk – dokonamy tego zmieniając input type=”image” na input type=”submit”.

Krok #5

Najwyższa pora aby zbudować formularz:

Wesprzyj portal Dobre Wieści
Wypełnij formularz wybierając Twój ulubiony tutorial:

Możesz kliknąć teraz button i zobaczyć jak to w rzeczywistości wygląda. Nie obawiaj się, nie musisz nic wpłacać :)

Oto kompletny kod dla naszego przykładu:


Wesprzyj portal Dobre Wieści
Wypełnij formularz wybierając Twój ulubiony tutorial:





    Który tutorial chcesz docenić?


    Jak wiele chcesz wpłacić?
PLN