Apr 06

Creating a PayPal Donation Button on Twitch.TV- The Update

Recently, Twitch.TV switched to a new layout that utilizes a language called Markdown in lieu of HTML. What this means is that my previous post on this topic is now outdated. I’ll leave it up for archival purposes, but obviously some things have changed with Twitch’s newest update.

Note that this update applies only to Twitch.TV specifically. Justin.TV may well work the same as before, but as I’ve moved over to Twitch.TV, I can’t say for sure (Both sites are owned by the same company, but are now effectively two different services outside of their chat servers).

The good news is that actually getting the button to work is quite easy with the new Twitch layout.

With that, let’s get started.

First, log into your paypal and actually get your Paypal donation link. To do this, log into PayPal, then go to Merchants and Services. Under “Create Buttons”, select the button of your choice. NOTE: Since I wrote the previous version of this guide, Paypal has since added a clause basically saying “If you use a donation button, you’d better be ready to verify that you’re putting your money toward a cause.” In light of that, you probably don’t want to use the “Donation” option anymore. 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"]

I’ve bolded the first three lines of the above because those are the tags we’re concerned with.

Next, go to your Twitch.TV Administration page by clicking “Admin” near the top of your stream, then “Edit”. Click the giant plus sign to add a panel. In the title, put whatever you want the title of the panel to be–I simply use “Donate!” Select whatever image you want to use as your donation button–Twitch now lets you simply pull these from your computer, which is nice.

Now is when we’ll use those three pieces of information I bolded. Where it says “Image links to”, put the following: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ABCDEFGHIJKLM

As you can see, what we did was join those first three elements. We joined elements 1 and 2 with a question mark, elements 2 and 3 with an &, and within each element, we joined the variable name with its value via an equal sign.

Now just click “Submit” below the panel and that’s it, you now have a donation button!

Note that you may want to have a text link to the donation URL in another panel. You should have the basic idea of Twitch panel creation now, but the specific way to create a link that has text is [displayed text](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ABCDEFGHIJKLM) . Don’t look at me, Markdown is wacky.

Hopefully that helps you with donation button creation!



1 ping

Skip to comment form

  1. Anonymous

    I did all of that and got “PayPal cannot process this transaction because of a problem with the seller’s website. Please contact the seller directly to resolve this problem.” after clicking on the link.

  2. Doesnt work

    Doesnt work

  3. emptyeye

    Hmm, this is an issue then. Is your issue the same as the first commenter’s, or something different?

  4. Mel

    Your code didn’t work on my broadcast page, but i suspect it’s because it’s a JTV site and i think they’re formatted more differently than twitch.

    I used this code and it worked perfectly well for me:

    Interestingly, this didn’t work with a .png file for me. I had to convert to .jpg first.

  5. Mel

    oopsy, lemme try again…

  6. Mel

    Comments won’t let me put up the code, but here’s an image of it: http://i.imgur.com/PXkiDuJ.jpg

  7. Nathan

    Is there a way around the paypal donate button if you dont have a cause? Like some other type of donate or chip in button.

  8. emptyeye

    Ah, thanks! I pretty much converted mine from the previous layout, and from what I know, that worked fine. Maybe it was broken this whole time? Who knows. Anyway, I now have an entirely different link for another week or two.

  9. master plumbing san diego

    Another problem takes place. You already have enough stress,
    so we offer a variety of these services are needed. Listed below are the
    plumbing services of ace contractors advantages of
    getting the pipeline installation. This is a forewarning of
    future breaks. It is a fact that leads to our house when there
    is a problem with your water pump is not functioning properly?
    There is a device called a” snake” and it’ll suck out any blockages in your pipes.

  10. askrion.Tumblr.com

    These sets are accessible at various outlets all over
    the globe and can be bought to make your cooking quicker and easy.
    Japanese chef’s knives are renowned for their high
    quality steel construction which provides for increased uniformity in cutting, sharpness and
    swiftness ‘ the ingredients for excellence in the kitchen. Professional
    chef’s seem to choose a 12 inch blade for their chef’s knife but the home cook can usually
    get away with ann 8 inch blade chef’s knige for all intensive purposes.

    my page – best kitchen knife ([askrion.Tumblr.com](http://askrion.Tumblr.com “askrion.Tumblr.com”))

  1. Creating a PayPal Donation Button on Justin.TV/Twitch.TV | Emptyeye

    [...] 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 [...]

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>