Creating a PayPal Donation Button on Justin.TV/Twitch.TV

NOTE 4/6/13: Twitch.TV has since changed their layout. I’ve kept the original post behind the “Read more” link, for archival purposes, but you’ll want to go here for actual current instructions.

As of this writing, Twitch.TV does not support the “Form” HTML tag. As such, you have to pull some shenanigans to make the button that PayPal spits out at you work. Note that this presumes that you don’t want to use ChipIn to manage and track funds. ChipIn is very cool, but I’m presuming here that you, in particular, are looking to use a custom donation button (Like the one on my stream–scroll down a bit to see it–for instance) to try and stand out a little bit from the crowd.

So let’s get started. The first step is to get the button from PayPal. To do this, log into PayPal, then go to Merchants and Services. Under “Create Buttons”, select the button of your choice–probably a “Donate” button. Go through all the options, presumably using the “Customize Text or Appearance” option (If you’re not using a custom image, you’re probably better off just using ChipIn), and save the button at the end.

This will yield something like this (Replace all square brackets with braces):
[form action=”https://www.paypal.com/cgi-bin/webscr” method=”post”]
[input type=”hidden” name=”cmd” value=”_s-xclick”]
[input type=”hidden” name=”hosted_button_id” value=”ABCDEFGHIJKLM”]
[input type=”image” src=”http://photobucket.com/miscellaneous/Donate%20Button%20Test.png” 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]

Now, as mentioned, Justin/Twitch don’t support the “Form” tag, so we’ll have to do some converting to turn this into a regular clickable image. We want to turn the above into this (Again, replace all square brackets with braces):
[a rel=”nofollow” href=”https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ABCDEFGHIJKLM” target=”_blank”][img src=”http://photobucket.com/miscellaneous/Donate%20Button%Test.png” alt=”Donate! Thanks very much!” title=”Donate! Thanks very much!” /][/a]

Put the above into your “Long Bio” section on Twitch, and you should see the button next time you load your stream!

If you’re curious as to the nuts and bolts of this, here it is, line by line.
[a: Open a link tag.

rel=”nofollow”: Tells search engines not to influence the target link’s search engine ranking.

href=”https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ABCDEFGHIJKLM”: The target URL we’re linking to. What we’ve done is taken the first three attributes of the form tag and converted them to one URL. the ? after webscr says “Hey here are some attributes and what their values should be.” hosted_button_id points at your specific PayPal; I’m honestly not totally sure what the cmd is all about.

target=”_blank”]: Opens a new window when the person clicks to donate. Useful! You don’t want them leaving your stream altogether, after all.

[img src=”http://photobucket.com/miscellaneous/Donate%20Button%Test.png”: img src says “Hey take this image and actually display it.” What comes after that is the location of your image. I used a simple Photobucket address here; you can put the image on any of a number of image upload sites. Alternately, you can put it on your own website if you have one (My actual donation button is hosted here on emptyeye.com.). You may have noticed that we haven’t closed the link tag as yet; this is because we want to image to effectively be the link, as opposed to just having text there.

alt=”Donate! Thanks very much!”: If something goes wrong with the image, or if the person uses a screen reader, they’ll see/hear the alt text instead of the image. You can change this text to whatever you want, this is just what I chose. IE versions prior to 8 will also display this text if you hover over the image (This is actually not what the tag was designed for).

title=”Donate! Thanks very much!”: This, in contrast, is the tag designed to display text when you hover over the image. Putting it here will cause the text to display when you hover over the image in standards-compliant browsers (Firefox, IE8+, etc.)

/]: Closes the image tag

[/a]: Closes the link tag.

Note that you should probably have a text link as well, in case there’s an issue with the image. To do this, just use the above, but replace everything starting with “[img src…” with the text you want the link to display.

My thanks go to bgeorge in this topic on Twitch.TV’s Support Discussions; I modified his solution there to get my own button up and running, and essentially just generalized this instructions to create this guide.

-EE