Adding a Tip Jar to Your Site – The Basics (2)

Substituting a URL for the Button Form

As noted in Part 1 of this Tip Jar tutorial, there’s a simpler code for the button form, or for achieving the same functionality as with the button form, that you can get from within Paypal. Log in to your account, go to “Profile/Selling Tools/Paypal Buttons,” choose “update,” and, this time, when you create your button, check the box under Step 2 to “Save button at Paypal.” (This menu up until quite recently was easier to reach via “Merchant Services” – and may soon be again, for all I know: If you have trouble finding it, you can just site-search Paypal for “Payment Button,” and the page should be among the first results.)

Creating a Hosted Button at Paypal

Creating a Hosted Button at Paypal

…after you’ve filled in whatever other pertinent details – don’t worry about them too much right now unless you feel you know what you want – you finish by clicking “Create Button.” On the next page, choose NOT to encrypt the code (something relevant for big e-commerce sites, not really for you and me I don’t think).

You’ll get code like the following as a first option for adding to your site…

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="9CNBQUH38CMD4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

When inserting the above in the middle of a post or page, you’ll have the same problems as with the raw form example in the prior tutorial – extra white spaces and other inconveniences – but an easy and flexible alternative is simply to use the URL you’ll find under the “Email” option – the alternative tab you’ll find after you’ve finished the button design process. When you click on the tab, you will get something like this:

saving_paypal_buttongiving you something like

https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9CNBQUH38CMD4

…with your own unique hosted_button_id number instead of the one bolded above. As you can see, the result is just a URL with a little bit of extra code.

A non-hosted version (which you would have gotten if you didn’t check the box under Step 2) is much longer, but also consists of just one URL (I’ve removed my merchant ID from the bracket portion – you could substitute yours if you wanted):

https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=[merchant-ID]=US&item_name=Unsaved%20BN&item_number=usb&button_subtype=services&no_note=0&cn=Add%20special%20instructions%20or%20message%3a&no_shipping=1&currency_code=USD&weight_unit=lbs&bn=PP%2dBuyNowBF%3abtn_buynowCC_LG%2egif%3aNonHosted

Sticking with the prior version – not least because it’s shorter – we could create a simple text link:

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9CNBQUH38CMD4">Please support us, we're starving to death!</a>

Yielding:

Please support us, we’re starving to death!

But you can also use the same link to produce a button identical with the one produced by the form in initial appearance, and completely identical in functionality:

In the code below, instead of showing the same Paypal credit card image again, I’m using it to link to the image-button I put together for part one of this tutorial.

<a class="sos_link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=9CNBQUH38CMD4"><img class="sos_img" title="SOS - Support Our Site" src="https://ckmacleod.com/wp-content/uploads/2014/07/support_our_site.png" alt="SOS - Support Our Site" /></a>

You could insert the above, replacing the Button ID number with your own, when editing your “About” page (while in the “Text” editing panel), and get something like this:

SOS - Support Our Site

You could then center and otherwise style the image (https://ckmacleod.com/wp-content/uploads/2014/07/support_our_site.png in the above) using the Visual Editor or, for more advanced effects, CSS. In the code sample, I’ve already added CSS class selectors (“sos_link” and “sos_img”) to aid in future styling. If you are handy with CSS already, you can also wrap the above in <div> tags, of course, and add whatever appropriate styling, after inserting it.

Alternatively, you can use the WordPress Media Library to upload your own button image, set the image to link to the email link/URL, and further format it (center it, re-size it, etc.) as you would any other image. If you want to use that image in your sidebar, you could just copy the code that appears on your Text Editor panel, and paste it into a Text Widget.

A Paypal Donation Button Tip Jar

Here’s a ready-to-use version that you can insert in a sidebar text widget or in an About page via the Text Editor, as is, and probably get pretty good results. It’s styled to be centered, and to take up up to 100% of the area afforded for it. Of course, if you want it to make donations to your site instead of to mine, you’ll have to create your own Paypal button, and substitute your own Button ID number.

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=9CNBQUH38CMD4"><img style="max-width: 100%; height: auto; margin: 16px auto; display: block;" src="https://ckmacleod.com/wp-content/uploads/2014/07/support_our_site.png" title="SOS - Support Our Site" alt="SOS - Support Our Site" /></a>

Producing:

SOS - Support Our Site

If you want it smaller or larger relative to the width of the widget area, adjust the percentage after max-width. If you don’t want it centered, delete everything from margin to block;. If you want more or less space above and below, adjust the number of pixels (px) or just zero them out (“0” is preferred, not “0 px”). Personally, I’m too shy to put a button that large in my sidebar – so the solution I will later implement for widget areas will be meeker – that is, smaller. You may be able to or feel you need to go bigger.

If you’re deeply concerned about display on ancient versions of Internet Explorer, then you’ll need a more advanced tutorial.

Now, there’s a lot more you can do with this code, now that you’ve started. There’s also a lot more you can do to customize what the User sees after clicking and after canceling or completing the routine (much of it to be handled via Paypal). We’ll leave such possibilities for some other time or your own imagination.

But what if we want users to fill in the amount first?

The last Tip Jar we’ll look at will allow users to fill in the donation amount “on the front side” – at your site, before clicking to Paypal. For this implementation, however, we’ll have to use a form, which means we’ll also have to deal in one way or another with the aforementioned formatting vagaries. It doesn’t hurt to have BOTH styles – simple donation URL and fill-in-the-amount form –  available, however.

You may also want to note – and it may be relevant to you if you’re going “beyond the Tip Jar” to more advanced implementations – that you do not need to use the Paypal “Donation”-style button (selected during “Step 1” of “Button Creation”) in order to create a fill-in-the-amount form like this one. If you generate a Buy Now or other button and want to make it “fill in the amount,” on the line in the code where a dollar amount is specified, empty it – instead of, say, "$5.00" it will be double quotes or "", and, if you want to put a suggested or example amount in the empty text box, you can add it on the same line.

In our examples here, the critical line looks like this: <input style="width: 90px;" name="amount" type="text" value="" placeholder="$xx.xx" title="Confirm or not on next page..." alt="Input amount" />

The style sets the width of the input box, which otherwise will tend to be set generically by your stylesheet, and often will take up all of the space available. The result will tend to look silly for a dollar amount – unless you happen to have mostly multi-billion dollar contributors. In addition to the placeholder, I’ve also added a title that will display when the user hovers over the input field with a mouse, and the “alt” “Input Amount” that will tell the visually impaired what’s there when their screen-readers pass over the content.

Beyond the nuts and bolts and into aesthetics, there are a number of ways, as ever, to achieve the final effect we want. For this version I’ve stretched the main image vertically (in an image editor) to open up some space, and am setting the image itself as a background with CSS, rather than placing it normally: It looks just the same, of course, at least when it exactly fills the space for it, something I’ve pre-set with height and width commands. Since it’s a background in a space (div) of known exact height and width, we can position the input form over it without relying on advanced CSS overlay functions and having to worry about cross-browser and cross-platform issues: It’s just simpler this way.

First, here’s the code:

<div style="background-image: url('https://ckmacleod.com/wp-content/uploads/2014/07/support_our_site_bg_amt.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 100%; max-width: 250px; min-height: 225px; display: block; margin: 0 auto; text-align: center;"><div style="margin: 107px auto 0; display: inline-block;"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_xclick" /><input name="business" type="hidden" value="[YOUR PAYPAL EMAIL ADDRESS OR MERCHANT ID" /><input name="lc" type="hidden" value="US" /><input name="item_name" type="hidden" value="Support Our Site!" /><input name="item_number" type="hidden" value="Donation" /><input name="button_subtype" type="hidden" value="services" /><input name="no_note" type="hidden" value="0" /><input name="cn" type="hidden" value="Add special instructions or message:" /><input name="no_shipping" type="hidden" value="1" /><input name="currency_code" type="hidden" value="USD" /><input name="weight_unit" type="hidden" value="lbs" /><input style="width: 90px;" name="amount" type="text" value="" placeholder="$xx.xx" title="Confirm or not on next page..." alt="Input amount" /><input style="margin: 0; padding: 3px 10px;" title="You know you wanna..." alt="Go to Paypal to complete" name="submit" type="submit" value="Do It!" /></form></div></div>

It gets you something like:
intended_sos_w_input
I say “something like” because the code, even with a lot of in-line CSS formatting – everything in parentheses after the word “style” – will display differently in different WordPress themes or with different stylesheets, which may be a good or a bad thing, but in either case will not be the same thing. The above is a non-functional image of what the button looks like when coded on this blog, in an up-to-date (as of this writing) browser. On this blog, for instance, I also use some CSS3 formatting to style input buttons like the “Do It” button, and I frequently find myself finagling with micro-adjustments trying to get the button as right as I can in different spots. All of the necessary code could probably be written “in-line,” but the code block would be even longer, a lot longer, and it’s already a bit much.

Also note that all of the usual warnings about switching between the WordPress Visual and Text editors will apply here: When you create code for a button like the one above, you need to add it in the Text editor, and you may lose key portions of it if you switch to the Visual editor, then save the post, now or in the future. There are various fixes for this problem – such as permanently disabling the Visual editor – but I’ve never found one whose defects didn’t outweigh its advantages.

Moving a little beyond the basics: Going to the Stylesheet

If you want your button to look exactly like my button, or as close as possible given browser variations, you may want to add code to your theme’s Stylesheet or, if you have it, to a separate application for adding CSS like Jetpack’s CSS Editor.

Adding CSS to your theme probably still qualifies as a beginner’s level task, if not a “beginning beginner” one. So, for moderately advanced beginners, here’s the code for a version that ought to look like the image above.

I’ll first provide the code for the button. The only change you’ll have to make is to substitute your Paypal email or Merchant ID number where indicated (with, of course, no [ ] brackets, just the email address or Merchant ID). It includes CSS selectors (“classes”) in place of in-line CSS. Then I’ll provide my styling:

The Button:

<div class="sos_button_div"><div class="sos_form_div"><form class="sos_form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_xclick" /><input name="business" type="hidden" value="[YOUR PAYPAL EMAIL ADDRESS OR MERCHANT ID]" /><input name="lc" type="hidden" value="US" /><input name="item_name" type="hidden" value="Support Our Site!" /><input name="item_number" type="hidden" value="Donation" /><input name="button_subtype" type="hidden" value="services" /><input name="no_note" type="hidden" value="0" /><input name="cn" type="hidden" value="Add special instructions or message:" /><input name="no_shipping" type="hidden" value="1" /><input name="currency_code" type="hidden" value="USD" /><input name="weight_unit" type="hidden" value="lbs" /><input class="sos_amount" name="amount" type="text" value="" placeholder="$xx.xx" title="Confirm or not when you get there..." /><input class="sos_submit" title="You know you wanna..." alt="Go to Paypal to complete" name="submit" type="submit" value="Do It!" /></form></div></div>

The CSS ((Corrected)):

/* SOS Button with User-Inputted Amount
-------------------------------------------------------------- */
/* Use 225x250px Button Image as Background Image */
.sos_button_div {
	background-image: url('https://ckmacleod.com/wp-content/uploads/2014/07/support_our_site_bg_amt.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
	height: 225px;
	margin: 0 auto;
	text-align: center;
	width: 250px;
}

/* Position form virtually centered */
.sos_form_div {
	display: block;
	margin: 0 auto;
	position: relative;
	top: 133px;
}

/* Set width of input box */
.sos_form_div input[type="text"] {
	width: 90px;
}

/* Style Submit Button in all browsers - code variants from http://www.colorzilla.com/gradient-editor/ */
.sos_submit[type="submit"] {
	background: #aaa394;
/* Old browsers */
	background: -moz-linear-gradient(top,#aaa394 0%,#f1f1f1 100%);
/* FF3.6+ */
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#aaa394),color-stop(100%,#f1f1f1));
/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,#aaa394 0%,#f1f1f1 100%);
/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,#aaa394 0%,#f1f1f1 100%);
/* Opera 11.10+ */
	background: -ms-linear-gradient(top,#aaa394 0%,#f1f1f1 100%);
/* IE10+ */
	background: linear-gradient(to bottom,#aaa394 0%,#f1f1f1 100%);
/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaa394',endColorstr='#f1f1f1',GradientType=0);
/* IE6-9 */
	border: 1px solid #dddddd;
	border-radius: 2px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
	color: #333333;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	margin: 0;
	padding: 3px 10px;
	text-decoration: none;
	text-shadow: 0 1px 0 #ffffff;
	vertical-align: middle;
	white-space: nowrap;
}

If you’re an advanced CSS’er, you may know of a variety of ways either to write the above better or to tweak it. (On the other hand, if you’re an advanced CSS’er, what are you doing here? This is for moderately advanced beginners!)

Fancier versions – combining and rotating multiple images, and adding further effects – may require different approaches, and another tutorial – culminating in the version I intend to implement on this site.

0 comments on “Adding a Tip Jar to Your Site – The Basics (2)

Commenting at CK MacLeod's

We are determined to encourage thoughtful discussion, so please be respectful to others. We also provide a set of Commenting Options - comment/commenter highlighting and ignoring, and commenter archives that you can access by clicking the commenter options button (). Go to our Commenting Guidelines page for more details, including how to report offensive and spam commenting.

    1 Pings/Trackbacks for "Adding a Tip Jar to Your Site – The Basics (2)"
    1. […] approaches, featuring, ahem, client-side amount specification and more up-to-date CSS3 stylings, in Part 2 of this tutorial. For now, here’s “Support Our Site!” code in grabbable form. I’ve added a […]

    Commenter Ignore Button by CK's Plug-Ins

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    *