«

»

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"]
[/form]

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!

-EE

9 comments

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. whatsapp spy

    I love what you guys are up too. This kind of clever
    work and reporting! Keep up the good works guys I’ve you guys to my personal blogroll.

  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>