Donations Widget

Connect with other users about what to run on your webhosting (and how to run it) here.
Post Reply
Brewskii187
A semi-regular
A semi-regular
Posts: 22
https://www.youtube.com/channel/UC40BgXanDqOYoVCYFDSTfHA
Joined: Thu Mar 07, 2013 1:59 pm

Donations Widget

Post by Brewskii187 »

Hey everyone, I wrote this donations widget and figured I would share.

In my community I accept donations using the NFO donations system and give donor benefits on my game servers.

The script will check to make sure they actually entered something in the steam id box, and will automatically put it in the notes section.

also make sure you edit line 51 where it says YOUREMAIL@EMAIL.COM with the e-mail address of your NFO account!

Code: Select all

<!--Written by NineteenEleven for Kablowsion Inc.-->

<!DOCTYPE html>
<html>
	<head>
		<!-- Add jQuery -->
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
		<!-- Add jQuery UI -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
		<!-- CSS for the tooltip -->
		<style type="text/css">
			.ui-tooltip {
				padding: 8px;
				position: absolute;
				font-size: 15px;
				border-radius: 15px;
				background-color: rgba(82, 90, 87, 0.2);
				border: 1px solid black;
				z-index: 9999;
				max-width: 300px;
				-webkit-box-shadow: 0 0 5px #aaa;
				box-shadow: 0 0 5px #aaa;
			}
			#steamid-info{
				font-size: 10px;
				text-decoration: none;
				border-bottom: 1px dotted;
			}
		</style>
	</head>
	<body>
				<center>
					<img src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" alt="Donate using PayPal" id='button'></a>
				<br>
				<br> 
					Amount: $<input type="text" name="paypalamount" size="5" class="inputbox" value="5">
				<br>
					Steam ID:<input type="text" name="paypaloption1" value="STEAM_0:X:XXXXXX" id='id-box' title="Please enter your SteamID"> 
				<br />
				<a href="http://steamidfinder.com/" id='steamid-info' target='_blank'> Where do I find my Steam ID?</a>
				</center>
				<script type="text/javascript">
				$(document).ready(function() {
					$('#button').click(function(){
						var donateAmount = $('input[name=paypalamount]').val();
						var steamId = $('input[name=paypaloption1]').val();
						var steamDefault = "STEAM_0:X:XXXXXX";
							if(steamId === steamDefault){alert("If you would like donor benefits please enter a vaild Steam ID, If you are donating out of the kindness of your heart, just clear out the Steam ID field.");}
							else{
								window.location='https://www.nfoservers.com/donate.pl?force_recipient=1&recipient=YOUREMAIL@EMAIL.COM&force_amt=1&amt='+ donateAmount + '&force_note=1&note=' + steamId;}
					});
					$("#id-box").tooltip({
						show: {effect: "slideDown",delay: 250}
					});
				});

				</script>
	</body>
</html>
Top
IcEWoLF
This is my homepage
This is my homepage
Posts: 1192
Joined: Thu Aug 10, 2006 9:41 pm
Contact:
Contact IcEWoLF

Re: Donations Widget

Post by IcEWoLF »

Great post! Thanks for sharing!
Image
Image
Top
Brewskii187
A semi-regular
A semi-regular
Posts: 22
Joined: Thu Mar 07, 2013 1:59 pm

Re: Donations Widget

Post by Brewskii187 »

No problem.

I guess you cant edit posts, but I put up a working version here.

http://brewskii187.site.nfoservers.com/donations.html
Top
User avatar
soja
This is my homepage
This is my homepage
Posts: 2389
Joined: Fri May 18, 2012 3:20 pm

Re: Donations Widget

Post by soja »

Nice work!
Not a NFO employee
Top
Brewskii187
A semi-regular
A semi-regular
Posts: 22
Joined: Thu Mar 07, 2013 1:59 pm

Re: Donations Widget

Post by Brewskii187 »

I had a jquery conflict on my site with another plugin, so heres the code with pure javascript

Code: Select all

<!--Written by NineteenEleven for Kablowsion Inc.-->

<!DOCTYPE html>
<html>
  <body>
    <script type="text/javascript">
        var donateNFO = function(){
            var donateAmount = document.getElementById('paypalamount').value;
            var steamId = document.getElementById('paypaloption1').value;
            var steamDefault = "STEAM_0:X:XXXXXX";
              if(steamId === steamDefault){alert("If you would like donor benefits please enter a vaild Steam ID, If you are donating out of the kindness of your heart, just clear out the Steam ID field.");}
              else{
                //You need to add your NFO account name on the line below
                //where it says YOURNAME
                window.location='https://www.nfoservers.com/donate.pl?force_recipient=1&recipient=YOURNAME&force_amt=1&amt='+ donateAmount + '&force_note=1&note=' + steamId;}
        };

        </script>
        <center>
          <a href="#" onclick="donateNFO()"> <img src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" alt="Donate using PayPal"></a>
          <br />
          Amount: $<input type="text" id="paypalamount" size="5" class="inputbox" value="5">
        <br />
          Steam ID:<input type="text" id="paypaloption1" value="STEAM_0:X:XXXXXX" id='id-box' title="Please enter your SteamID"> 
        <br />
        <a href="http://steamidfinder.com/" style="font-size: 10px;text-decoration: none;border-bottom: 1px dotted;" target='_blank'> Where do I find my Steam ID?</a>
        </center>
        
  </body>
</html>
Top
Post Reply

Return to “Webhosting”