Buy me a beer donation button with paypal integration
I made this example for fun and placed it on my website too. You can use the example and change the images to something you prefer. If you like it you can always make a donation 😉
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html> <head> <link rel="stylesheet" media="all" type="text/css" href="beer.css" /> </head> <body> <script> function getbeer(){ if (document.getElementById("beermoney").value == "") { document.getElementById("beermoney").value = 5;//code } } </script> <div id="beercanvas"> <img src="beer_glass.png"> <img class="beertext" src="buy_meBeer.png"> <div id="beerpayment"> <form action="https://www.paypal.com/cgi-bin/webscr" onsubmit="getbeer()" method="post" target="_top"> <span id="eurosign">$ </span><input id="beermoney" class="beer_balk" type="text" placeholder="5" name="amount"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="lc" value="ENG"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="no_note" value="0"> <input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest"> <input type="image" class="beer_button" src="send_btn.png" border="0" name="submit"> </form> </div> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
#beercanvas{ width:500px; } #beerpayment{ width:158px; position:absolute; top:70px; left:115px; } #eurosign{ background-color: #fbdc00 ; font-weight:bold; } .beertext{ position:absolute; top:35px; } .beer_balk{ border-style:none; height:19px; width:90px; background: #fbdc00 ; margin-top:2px; text-align:center; font-weight:bold; } .beer_button{ float:right; height:23px; } |
 Download jQuery Mobile example website here–> [download id=”13″] <-
The design is not made by me, only the code. If you like the design visit:
http://graphicblog.net/donation-buy-me-a-beer-paypal-button/
Hi! i like the code, simple… i’ll have a look at paypal to see how this all works, lets say i want to add a reason for donation or a note to user. do you know anything about that?
nevermind, there’s a simple button creator that provides us with the stuff needed. maybe include a link%??