We’ve set up quite a few sites that use authorize.net recently, and I thought I’d share some of the lessons we’ve learned to save you some time and headaches.

There are 4 different states you can be in while using Authorize.net: (1) live server, (2) live server in test mode, (3) sandbox server, and (4) sandbox server in test mode. Any API keys you generate while in one of these states will only work in that state. So if you generate a transaction key in test mode and then switch back to live mode, you will need to generate a new one and update your code base accordingly.

Sandbox in Test Mode: As far as I can tell, you will never need to use this.

Sandbox Server: When you sign up for a test/sandbox account, you can checkout with a few different card numbers that they will send you. This test account is completely separate from your live account.

Live Server in Test Mode: You can put your account in test mode in order to make some purchases on your site. I know that the Visa test number 4111 1111 1111 1111 works in test mode, but I’m unsure if there are other test numbers that work. As far as I can tell though, transactions put through in test mode won’t show up when you are using the Transaction Details API.

Live Server: Transactions here will be put in the “unsettled” transactions for up to a day before clearing. In order to test code using the transaction details API, we often put through a real transaction on the live server, and then void it after we test.

Common Errors

There are several cryptic error codes we have come across; here are a couple that we eventually were able to fix.

 The merchant API Login ID is invalid or the account is inactive.

This is what happened for us when we generated an API transaction key when in test mode, and tried to use it in live mode. The solution was to just regenerate the transaction key.

  The Nova Bank Number or Terminal ID is incorrect. Call Merchant Service Provider.

If the Merchant Service Provider isn’t set up within Authorize.net, you will get this error. The good thing is that this has nothing to do with your code or API setup.

If you’ve got any other tips and tricks for working with Authorize.net, please post them in the comments below.

Wojo Design

A while back I posted a script that used cookies to simulate the localStorage interface for the HTML5 spec. While building simpleCart(js) v3, I revisited this script with the hopes achieving the same goal without using cookies. For the impatient, the 1.2kb script can be found on github.

Motivation

While using cookies for cross browser client-side storage was a clever workaround a few years ago, it just isn’t an acceptable method anymore for several reasons:

EU Cookie Law: the EU has created a directive that requires websites to ask permission to store every cookie. While this is still being heavily debated, it’s a good reason to tread lightly when it comes to overusing cookies.

Performance: web performance optimization, thankfully, has become an important consideration for every website. Cookies are sent along with every request, so the more data we store, the larger our requests. This has a much larger impact when we consider sites with heavy ajax requests, where the majority of the size of the requests can be in the headers. With a lot of local storage data, you could easily be adding 4K or more to every request. These performance issues are nothing new, so we should avoid using cookies for storage whenever possible.

Implementation

Currently, localStorage is supported by Firefox 3.5+, Safari 4+, IE8+, and Chrome. To fill in the older browsers, we used userData for IE6-7 and globalStorage for FF2.x & 3. The interface is identical, regardless of how it is being implemented. This is very important, so code can be consistent as support for older browsers is dropped. Once all major browsers support the spec, the script can just be removed.

localStorage.setItem( key , value );
// saves a new name/value pair if the key doesn't exist, otherwise updates the value

localStorage.getItem( key );
// returns the value associated with the given key, if it exists
// returns null if the key doesn't exist

localStorage.length;
// the number of unique keys stored

localStorage.removeItem( key );
// deletes the name/value pair with the given key, if it exists
// if it does not exist, exits

localStorage.clear();
// delete all name/value pairs currently stored

localStorage.key( n );
// returns the name of the nth key in the list, will return null if n is
// greater than or equal to localStorage.length

You can get the code on github – simply add the script to your page and you’re all set.

Wojo Design

We’re looking to hire a Web Design Intern for a 4 month position. This is a paid opportunity at $12/hour, working an average of 20 hours per week. Please see this post for the details and send us a résumé with some examples of your work if you’re interested. We prefer individuals located in Ann Arbor.

The full intern listing has been posted below. Please submit your application to

Wojo Design is a full-service web agency that helps clients at every stage from initial website design to online marketing and social media campaign implementation. We are seeking an ambitious and self-motivated web design intern who can take on a wide range of responsibilities.

RESPONSIBILITIES;

• Building basic HTML websites.
• Creating basic web design compositions.
• Formatting and editing images to be used on client websites.
• Cross-browser testing.
• Updating client websites.
• Performing keyword research for search engine optimization campaigns.
• Building links to internal and client websites.
• Updating social media sites internally and for clients.
• Reviewing and proofreading proposals.

REQUIREMENTS;

• Proficiency in Adobe Photoshop
• Know your way around Microsoft Excel
• The ability to upload files with an FTP Client (Transmit, FileZilla, etc.)
• A good understanding of HTML and CSS and the ability to turn a simple design into a web page.

BONUS POINTS;

• JavaScript
• PHP experience

This internship position will provide an excellent learning opportunity as you will work on a wide variety of projects and tasks. During the course of the internship you will become proficient with several content management systems, work on many web design and web development projects, participate in online marketing campaigns at all stages, and work closely with the company founders.

DETAILS
This position is open immediately and will be filled once the appropriate candidate is found. This is a 4-month internship with the possibility for extension. You are expected to work around 20 hours a week on average, however, we can be flexible to meet the needs of your schedule. You will be paid $12/hour.

We have an office in Ann Arbor that you may work out of, and at times you will be expected to meet there. However, if preferable you can also work from home on a regular basis. We are very easy to work with, and as long as you get the job done and work hard, we’re happy to be very accommodating.

Please send any examples of past web design and/or development work.

Wojo Design

We are proud to announce that simpleCart(js) version 3 is ready for beta testing! We have learned a lot about what our users need and want over the past 3 years, and version 3 is a huge improvement that we hope you are going to love.

For the impatient, you can view the new code on the v3 branch on github: http://github.com/wojodesign/simplecart-js/tree/v3

Whats New?

The code has been rewritten from the ground up, and there are too many improvements to cover in this article. Some of the best updates include completely cookie-less storage with HTML5 localStorage, lots of events to handle all the customizations you could think of, plugins and extensions, more flexible formatting, more checkout options, better language and currency support, better performance, and easier syntax

How can I help?

The easiest way to help is to periodically visit http://swarm.simplecartjs.com and click “Join the Swarm”. We are striving to make sure simpleCart(js) works with other libraries and in every major browser; by simply visiting this page TestSwarm will run our tests in your browser to help achieve this.

You can also help by trying out the new code on a site. We have already tested a lot of the basic features, but getting the code on more sites will help us track down bugs and improve the usability and features. The documentation is a work in progress, but here are a few big points about using the new code:

New Options and Syntax

When setting options for simpleCart(js) v3, you simply send a settings object to a simpleCart() function:

  simpleCart({
    tax: 0.08,
    shipping: 10,
    currency: "USD"
  });

The option formats have changed a bit; you can see all the available options in the README.

jQuery, Prototype, or Mootools

simpleCart(js) v3 will require a library, such as jQuery, Prototype, and Mootools. A lot of thought has gone into how to work with every library and keep simpleCart(js) small and manageable. It turns out, almost every site that is using simpleCart(js) is also using one of these three libraries, so it made sense to use the expertise and hard work that goes into those great libraries to handle things like DOM manipulation, CSS selectors, and event handling.

The best part is that you can use any of these libraries interchangeably, and simpleCart(js) will simply figure out whats included and use it. Right now, these libraries seemed to cover the majority of sites, but if there is a strong request for others, we will try to include support.

Wojo Design

We are proud to announce a brand new version of Motionspire – the world's premiere motion graphics inspiration gallery. Motionspire is the best place to go when you want to see the best motion graphics work available online.

We launched Motionspire 3 years ago, and we've been pleased with its growth over the years. Today we are launching a brand new video submission process that makes it easier than ever to submit your work. Many motion graphics pros already have their work available on Vimeo, and if you submit a link we'll automatically pull in all the information and queue the video for review. If you'd prefer to upload your video directly, we accept .mov, .mp4, .m4v, and .flv files up to 50MB in size.

Another new feature makes it much easier to find the inspiration you are looking for. You can select multiple categories at the same time, so if you want to see 2D Title Sequences or 3D Commercials with a Typography focus, it's just a few clicks away.

We have big plans for Motionspire's future as well, including keyword search, custom user portfolios and a job board for motion graphics professionals. Keep checking back at Motionspire.com for new developments, and while you're at it, take a look at some of the best motion graphics videos ever made.

Wojo Design

Over the years we have made some big transitions at The Wojo Group. Although we used to be primarily concerned with client work, over time we have directed more and more of our effort towards internal projects. Some of these projects have included Motionspire.com, a motion graphics gallery we launched a couple years ago, and SimpleCart(js), the open-source javascript shopping cart that turned out to be quite popular.

However, another project we’ve had in the works for quite some time is HelloRent.com, an apartment finder that doesn’t suck (in our humble opinion). We’re really excited about this project and we believe it has the potential to shake up the industry. Recently we have been focusing almost all of our efforts towards HelloRent. Thus, we have not been able to devote any significant time to development of our other projects, blogging, or client work.

Although we wish we could do it all, we have to be realistic with our time constraints and our abilities. Thanks to everyone who has supported us so far, either by reading this blog, visiting one of our creations, or spreading the word about what we’re up to here at The Wojo Group. We do plan to eventually return to more frequent blogging, and someday we will hopefully have the time to continue developing our other projects. In the meantime, though, please feel free to head over to HelloRent.com, subscribe to our email newsletter, and request an invite if you are interested in giving it a try. As always, we’d love to hear your feedback.

Thanks again for your support.

AQGZPS5S8DH6

Wojo Design

This year’s javascript trick involves taking individual words on your page and let them float or creep away.  Every time the user does not move their mouse for 5 seconds (you can change this interval), the words will start to creep.  Once they move their mouse again, the words will return to their original spot.

Simply add this script tag in your header:

<script src="http://wojodesign.com/creep.js" type="text/javascript"></script>

And start the creep with the body onload function with the argument being the desired delay (in seconds) before the words start creeping (default is 5 seconds):

<body onload="creepify(1000)">

I haven’t been able to test this on many browsers, and there are some quirks depending on the content of your page. If you are using a javascript library like JQuery, you may want to use the $(document).onload or equivalent in order to call the creepify() function. Happy April Fools!

START THE CREEP

Note: This script will probably mess up some of your styling, so test it out first to see what happens.

Wojo Design

I have been wanting to use HTML5′s local storage for a while, but I haven’t had a project where I can just ignore the older browsers.  So I put together a little ( <1Kb gzipped ) script that checks for HTML5′s local storage API, and simulates the method for browsers that do not support it. For those browsers, the script implements a nearly identical interface to localStorage for persistent storage of name/value pairs, except it uses cookies.  For the impatient types, you can see the repo at github or download the script. Below is a description of usage:

localStorage.setItem( key , value );
// saves a new name/value pair if the key doesn't exist, otherwise
// updates the value

localStorage.getItem( key );
// returns the value associated with the given key, if it exists
// returns null if the key doesn't exist

localStorage.length;
// the number of unique keys stored

localStorage.removeItem( key );
// deletes the name/value pair with the given key, if it exists
// if it does not exist, exits

localStorage.clear();
// delete all name/value pairs currently stored

localStorage.key( n );
// returns the name of the nth key in the list, will return null if n is
// greater than or equal to localStorage.length

If the localStorage object is available, the setup script exits and allows the method to work normally.  Otherwise, it will use the same interface to create a string of name/value pairs to store in cookies.  You can use all the methods described above, but it does not support direct access to data, such as ‘localStorage.name = “bob” ;’.  One issue is that the older browsers with slow performance will experience another setback when storing large amounts of data, because the cookies will be included in headers.

There are two types of storage methods in the new Web Storage Specification: localStorage and sessionStorage.  The sessionStorage data will only persist for the life of the browser window, whereas localStorage will last indefinitely, depending on the browser.  This script uses the localStorage, but can be switched to sessionStorage pretty easily.  There are a few resources out there already where you can learn a little bit more.  Currently, the specification is supported by IE8, Firefox3.5, Safari4, and Chrome (localStorage only).

Download or Check out the repo on github.

[Note: I've done some brief testing on most browsers, but if you run into a problem, let me know]

Wojo Design

We are happy to announce the release of simpleCart(js) version 2.0 today.  We have been working hard to add several features that you all have requested, and we’re excited to get this script in your hands.  There are several new features, including GoogleCheckout, easy currency settings, tax, shipping, and a new method for adding items to your cart that requires no javascript, and allows for different inputs and options. There is also a brand new site to go along with this update: simplecartjs.com .  Please take a minute to check out all the new features, documentation, and demo.  Thanks to all those who have been helping test for the past few weeks, we couldn’t have released this new version without your help.

Upgrading your version

If you are already using simpleCart(js), the only thing you need to change to use the new script is how you add it to your page:

<script src="simpleCart.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    simpleCart.email = "you@yours.com";
//]]>
</script>

Check out the website, simplecartjs.com to learn about the new features, and let us know what you think!

Wojo Design

While working on simpleCart(js) 2.0 and a few shopping carts for clients, I found myself writing several helper functions for formatting strings and numbers.  One of the most useful helpers was a toCurrency() method for numbers:

var myNumber = 8.3;

alert( myNumber.toCurrency() );   //alerts "$8.30"

myNumber = 119427.23529;

alert( myNumber.toCurrency() );    //alerts "$119,427.24"

myNumber = 1231;

alert( myNumber.toCurrency( "€" ) );   //alerts "€1,231.00"

The dollar sign is default, but you can replace it with any symbol in the function call.

Just copy this code to your js file and enjoy! (This code also implements a reverse() method for strings that you might find useful.)

String.prototype.reverse=function(){
    return this.split("").reverse().join("");
}
Number.prototype.withCommas=function(){
    var x=6,y=parseFloat(this).toFixed(2).toString().reverse();
    while(x<y.length){y=y.substring(0,x)+","+y.substring(x);x+=4;}
    return y.reverse();
}
Number.prototype.toCurrency=function(){
    return(arguments[0]?arguments[0]:"$")+this.withCommas();
}

Wojo Design