What with Android making more headway in the world, I’ve been seeing more and more QR codes lately. If you don’t know what a QR code is, then here is an example:

QR code

Scan this to buy Otto a beer. Seriously.

Android phones have this sort of thing built in, as it’s used for their version of the “app store”. iPhones can download apps to read them and act on them (NeoReader is a free and easy one to use).

Basically, QR Codes are like visual links. You take a picture of them using the application in question, and it either gives you some text or sends you to a website.

Anyway, while reading Google Reader today, I saw somebody mentioning “Portapayments”. A quick search and test showed me how it worked, but I don’t really care for their implementation. I prefer to roll my own, sort of thing. So here’s how you do it.

Make the Donation Link

Let’s assume you’re using PayPal. It’s quite possible to do this with any payment service that can provide you with a payment link, but PayPal is relatively easy.

First, log into Paypal, and go to their “Merchant Center”. There, you’ll click on “Website Payments Standard”. Finally, you’ll make a “Donate button”.

Fill in the bits, and you can ignore most of them. In this case, we’re making a link, not a button, so we don’t care how it really looks. Put in the fixed amount you want the link to be for, then make the button.

On the final screen, there’s a tab that says “Email”. The purpose of this is to give you a link you can email to other people. When clicked, it goes to PayPal with the info already filled in. All the user has to do is confirm the donation. That’s the link we need. Copy it somewhere for now. You can test it out too, if you like, to make sure it works.

Shortlink it

Now we’ll need to turn that into a shortlink. Why? Well, QR codes work better with shorter links. As the amount of information the code holds gets longer, it gets more pixels in it, and thus it gets harder for the readers to read. Thus we want to keep the amount of data in it as short as possible.

You can use any shortlink service you like for this purpose. bit.ly is the most common. I have my domain on Google Apps and I used their shortlink system to allow me to keep it under my own domain’s control that way. So my shortlink ended up being http://sl.ottodestruct.com/beer . :)

Note: There is an advantage to using a shortlink system you control entirely here. If you want to change the payment link, then you can do it without changing the shortlink. This is useful because changing the shortlink after you generate the QR code may not be an option. What if you make t-shirts with the QR code on it? That link that you put into the code needs to be pretty darned permanent and not subject to change. If you control where the link goes, then you can change the content at that link easily anytime.

Whatever you prefer, just make that shortlink.

Make the QR Code

Finally, the easy part. Take your final shortlink and put it at the end of this URL:

http://chart.apis.google.com/chart?cht=qr&chs=192×192&choe=UTF-8&chl=

That’s using the Google Chart API to generate the QR code for you. The result is an image. You can put it on your pages however you like.

Example of my final image link:

http://chart.apis.google.com/chart?cht=qr&chs=192×192&choe=UTF-8&chl=http://sl.ottodestruct.com/beer

So it’s pretty straightforward, really. When somebody scans that with any code reading app, then it’ll send them to Paypal to complete the donation for the amount you set in the first place.

Neat.

Shortlink:

12 Comments

  1. Otto,

    I am really interested in how you created your shortlink service on Google APIs with your own domain. I have a few domains lying around. I’d like to use one.

    • I use Google Apps on my domain. This gives me things like GMail, Docs and Spreadsheets, Calendar, Sites, Chat, Contacts, etc.. all on my own domain. Basically it’s like a private version of all these Google services, separate from the normal ones.

      One of the “apps” they have is called Short Links, and it’s basically just a simple short link service. All you have to do is to attach it to a subdomain (they have you set up a CNAME record), then you have a shortlink service on that subdomain. It’s a pretty basic service, no automation or API or anything, but it’s handy from time to time.

  2. Hi Otto,

    Looks like a neat service, but it’s not working for me. I scanned your QR image and was redirected to a google page where it asked me to login in to OttoDestruct.com. It looks like it may be the main page for your Google Sites account. Here is the link:

    https://www.google.com/a/ottodestruct.com/ServiceLogin?service=ah&passive=true&continue=http://sl.ottodestruct.com/_ah/login%3Fcontinue%3Dhttp://sl.ottodestruct.com/a/ottodestruct.com%253Fcontinue%253Dhttp%25253A//sl.ottodestruct.com/beer&ltmpl=&sig=8abebd9581e319dd1990fe5e90c7aa09

    I tried just clicking your shortlink above and got the same result. Shouldn’t it be directing me to Paypal?

  3. Fun idea! I guess then Paypal has a mobile friendly interface? That’s something I’m going to make a tshirt with :)

    • They don’t have a specific mobile interface that I know of, but then I wouldn’t know anyway as I have an iPhone. I just see their full site. They don’t have an iPhone specific interface, I think. They do have an iPhone App, but it doesn’t have all of their possible functionality.

      • I was really excited about this, unfortunately everything works EXCEPT PayPal. Unless I download a special app for my Blackberry it just takes me to a very basic site, not the donation link. How many non-iPhone people are really going to have a PayPal app already installed?

        • No idea. I don’t use a Blackberry.

          Smart phones are the only way to go nowadays anyway. Almost everybody has either an iPhone or an Android or some device capable of viewing the unadulterated web…

          Anyway, the instructions I gave basically just have it go to your own shortlink. If a better way comes along, I can change where that link goes to without having to regenerate the image.

  4. I like it too hahaha.
    Is there a website where we can order t-shirts with custom creation of a QR code, cheap and good quality?

    • CafePress would probably be the cheapest and easiest way.

    • Very late to come across this article, so sorry for being behind the times… This is an awesome idea, which we have considered for some of our 3rd sector clients. It may need some fine tuning, but the principle is great!

      We have just launched QRazystuff.com, which is an online QR Tag Clothing retailer, so if anyone wants a T-Shirt or Hoodie with your personalized QR Tag, please visit the web site and place an order. Our QR Tags, are indirect codes, which enable you to change the destination of the Tag whenever you want (no need to print a new T-Shirt, just update the destination)…

  5. […] second feature we came across during our research really hit the mark for us.  The OttoPress Blog provides a step by step guide to creating a PayPal donation link for a specified value.  Once […]

Leave a Reply

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>

Need to post PHP code? Wrap it in [php] and [/php] tags.