Spendenformular mit PayPal.Me
Seit einiger Zeit hat PayPal den Dienst PayPal.Me ins Leben gerufen. PayPal.Me macht das Zahlen kinderleicht, weil keine Umwege über irgendwelche Formulare mehr notwendig sind. Wer Zahlungen an Freunde, Bekannte, aber auch geschäftlicher Natur senden möchte, kann diese im Formular einfach angeben und abschicken. Viel einfacher als über das Dashbaord von PayPal. Weil der Betrag dabei außerdem frei wählbar ist, liegt es nahe PayPal.Me auch für Spenden zu verwenden. Ich selbst hatte das vor einiger Zeit mal ausprobiert und ein entsprechendes Formular auf die Beine gestellt, mit dem Nutzer schon vorab einen Betrag eingeben konnten, um den Blog mit einer Zahlung zu unterstützen. Das ist eigentlich gar nicht schwer und darum geht es in diesem Artikel. Wie setzt ihr ein Spendenformular mit PayPal.Me um, bei dem der Betrag schon vorab eingegeben werden kann? Finden wir es heraus.
1. Als aller erstes habt ihr euren PayPal.Me Link, mit dem ihr arbeiten könnt. Dieser Link kann kann von Haus aus mit einer Zahl erweitert werden, sodass exakt diese Summe für die anschließende Zahlung verwendet wird. Aus “https://www.paypal.me/DaKe/” wird beispielsweise “https://www.paypal.me/DaKe/15”, um 15 Euro als Platzhalter einzusetzen, statt der üblichen null Euro. Ganz einfach.
2. Jetzt, wo ihr wisst, wie einfach verschiedene Werte mittels URL möglich sind, könnt ihr daraus ein Eingabefeld bauen, welches genau diesen Wert entsprechend manipuliert. So kann der Nutzer einfach eine Zahl angeben, die dann an die URL angehängt wird und entsprechend weiterleitet. Das Ganze sieht dann so aus:
<div class="spende">
<p>Hier bitte Trinkgeld einwerfen!</p>
<form onsubmit="location.href='https://www.paypal.me/DaKe/' + document.getElementById('euro').value; return false;">
<label>
<input id="euro" value="10" onKeyPress="return numbersonly(this, event)">
€ </label>
<button class="button-two" type="submit">Spenden</button>
</form>
</div>
3. Das Formular sollte nun noch etwas verschönert werden, was mit CSS problemlos möglich ist. Entweder ihr fügt es in eure vorhandene CSS ein, oder ihr nutzt die Style-Tags und integriert den Code direkt unter dem Formular. So oder so sind bei der Gestaltung keine Grenzen gesetzt. Ein Beispiel von mir wäre das hier:
<style>.spende{font-family:arial;font-weight:700;background:#1abc9c;color:#fff;padding:25px;border-radius:5px;text-align:center}.spende p{text-align:center}.spende input{width:25px;padding:9px 5px 8px 10px;border-radius:3px;font-size:15px;font-weight:700;color:#777}.spende button{font:700 17px/24px arial;cursor:pointer;background:#f1c40f;color:#fff;padding:5px;border:0;border-radius:3px;font-size:17px}</style>
4. Wer möchte kann mit einfachem Javascript nun noch dafür sorgen, dass im Formular ausschließlich Zahlen eingegeben werden können. Einen Beispielcode dafür findet ihr hier auf dieser Website. Den könnt ihr eigentlich 1 zu 1 übernehmen und ebenfalls unterhalb des Formulars hinzufügen.
5. Das war es dann auch schon. Jetzt sollte dort, wo ihr den gesamten Code integriert habt, ein Formular erscheinen, was so wie meines hier aussieht.
Einfach und vor allem effektiv
So lässt sich mit Hilfe von PayPal.Me sehr einfach ein Spendenformular aufbauen, bei dem Nutzer den Betrag frei wählen dürfen und dann nur noch “Spenden” klicken müssen. Das Ganze ist dabei sehr simpel gehalten und damit deutlich einfacher als eine ähnliche Variante mit dem normalen PayPal-Links. Außerdem ist PayPal.Me einfach zeitgemäß designt und macht die Zahlung deutlich angenehmer, als das altbackene Formular von PayPal selbst. Mir gefällt die Möglichkeit und euch hoffentlich auch. Sagt mir eure Meinung dazu in den Kommentaren, oder zeigt mir wie ihr eure Spenden-Buttons designt und umgesetzt habt.
