SELECT wp_terms.term_id, wp_terms.name, wp_terms.slug FROM wp_terms,wp_term_taxonomy WHERE wp_terms.term_id = wp_term_taxonomy.term_id AND wp_term_taxonomy.taxonomy = 'category' AND wp_terms.term_id != 1 ORDER BY name ASC

In this example, I’m getting all categories that are not “uncategorized” from WordPress.

Happy coding!

Designing a Credit Card form for Flex – Inspiration & Background

For me, usability in a credit card form is really important.  If someone has their credit card out on table and they’re ready to give you money, they better not have to take any extra steps to send it in.  For years, every time I saw a credit card form, I always noticed they were designed differently.  Some people would have the expiration date say “01, 02, 03″, and others would say “January, February, March”… why?

One day I stumbled across Google Checkout’s credit card form, and I was really impressed:

This is a screen shot of Google's "add a new payment method" form

It looks pretty straightforward, right?  Well, there was some serious thought put into this form.  First, when you enter in your credit card, and tab out of the card number field, the form automatically recognizes your card type – no need to specify the card type, and it focuses on your card type… neat!  Did you know there’s an algorthim that lets you identify whether or not a credit card number is valid?  By that, I mean you can make sure a card number is legitimate before it’s sent off to be processed.  I don’t mean checking to make sure it’s a *real* card, I mean you can check to make sure it’s at least a valid set of numbers.  Here’s a great article on the topic.

Anyways, if you enter an invalid card type in Google’s form, this is what you get:

This is a screen shot of the ajax/javascript function which checks to see if you've entered a valid credit card

Remember, this is before I hit Save or Submit – a big time saver.

The next thing I like about this form is the expiration dates use numbers, not month names.  Makes sense – the user is looking at a card that has numbers on it, not month names.

The Flex Component & Running Example

After looking at Google’s great example, I implemented my own component in Flex.  Note – the example below was built in Flex 3, using mx components.  You could easily update it to run with spark components, but for the sake of time I haven’t modified the original component.

Features:

• When you tab out of the card number field, it automatically recognizes your card type and highlights your card type
• You can type the expiration date in.  You can enter a “1″, hit tab, and it will automatically change that to “01″.  Same goes for the year.
• The “what’s this?” text currently goes to Google Checkout.  I hope Google doesn’t get mad
• FYI – 4444 is a fake credit card that lets you override/test a payment.

Download the source code

Okay, So How Do I Actually Process the Credit Card?

This is where it gets complex.  I spent a few weeks a few years ago researching all of the different payment gateways (Like authorize.net).  One company stuck out because of their friendly team, honest feedback, and competitive pricing: Merchant Warehouse.  I began using Merchant Warehouse in 2007, and I integrated amfphp with their “SmartPayments” system (built by another company) with amfphp.  Basically, the gateway allows you to connect via soap.  I downloaded nusoap, wrote an amfphp class, and then my own methods to send the credit card data of SSL.  It works like a charm.  But, just recently, that completely changed.

If you’d like the amfphp classes and an example, feel free to contact me and I’d be happy to send it over.

Warning: PCI Compliance Completely Changes the Game

PCI compliance is a good thing for consumers.  Essentially, you’re not allowed to store people’s full card information, such as the card number or the CVC code.  You also (obviously) have to transmit everything over SSL, and your server has to be locked down.

But, as of July 2010, if you’re working on a small project or you’re a startup with a small budget, you are shit out of luck.  Basically, you can’t process credit cards in your application without being PCI compliant.  First, you have to hire a company to perform an audit.  If you’re a software provider, you cannot buy the cheap ~$200 audit service.  You have to spend $8-$15,000 just to have a 3rd party software team come in and make sure you are meeting PCI standards.  Then, you could spend serious resources (some companies mentioned spending $100-200k modifying their systems to become compliant), or just never obtain the compliance at all.

That said, having a sexy component for credit card payments in your Air application or Flex application can be a game changer.  PayPal and Google Checkout are great, but leaving your app to go to another site is just plain terrible for the user experience.  Some people just want to enter their card and get it done.

I still need to look into it, but I might be able to use PayPal’s advanced services or another gateway.

This Design Works, But It Can Be Improved

My startup company has processed over $400k in online transactions using this component.  It might not sound like alot, but our shopping cart abandonment rate is extremely low – less than 10%.  I’ve done hours of using testing on it, and many of the bugs and confusing areas have been ironed out.  That’s not to say it’s perfect – I’m sure I’ll be updating this form and making changes as I go… so subscribe to this post and I’ll keep you updated with new changes.  If you have any items that come up in user interviews, shoot me a comment!  I’d love feedback.

• Blank build path windows (when right clicking on a project’s properties) – having to manage the project files manually
• Weird generated asset errors

I think getting setup with Flex and eclipse requires an unnecessary amount of knowledge… hopefully this simplifies it.

I finally decided to find a solution – here it is:

1. Don’t install Flex Builder – install the eclipse plugin
2. Get eclipse 3.4
   • http://www.eclipse.org/downloads/
   • Scroll down to eclipse Classic
   • Click on “other downloads”
   • Or just go to http://download.eclipse.org/eclipse/downloads/
   • Download version 3.4, unzip it, and drop it in C:\Program Files (x86)\eclipse
3. Get the Flex Builder Plugin for Eclipse – http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3
4. When installing, make sure you choose the Eclipse folder (second step): C:\Program Files (x86)\eclipse
   
5. When you’re done, open up eclipse.exe, and then go to Window->Open Perspective, then choose Flex.

Conclusion

I hope Flash Builder 4 solves the 64-bit issues… this install is a pain in the ass!  Plus, too bad there’s not a 64-bit version of Flex Builder…

I know of two ways to cast something from one type to another:

1.  var myvar:Type1 = mything as Type1; // does not work

OR

2.  var myvar:Type1 = Type1 (mything); // works!

I was using the “as” keyword, and I couldn’t figure out why it wouldn’t cast my string to a number.  I finally drilled down, and replaced it with usage #2 above, and it fixed my issue.

So annoying!

It’s amazing what motivated people can  do.  We put it up online on March 9, and within 4 days:

We’re #1 result in Google for Pi Day Challenge
We’re on 1-2 page for “Pi Day”

We have 800 registered users
We have 2200 unique visitors from 28 countries

Check it out – Take The Challenge!!! www.pidaychallenge.com

I found some posts on LocalConnection, and this post… but the issue with LocalConnection is that you can only have on instance open at once.  So, if you build something and a user opens two tabs of it, it will fail to connect to the second instance.  Blarg!

The solution is actually simple: good old events. I tried this earlier but failed to add the “.content.add” piece.

Check out this example, and download the code.

This week I needed to build a customizable home/landing page in a web application built in Flex.  I wanted to give the user the ability to add, remove, and position different “widgets”.  I’ll upload my paper mockups early next week…

I looked all over the web for a solid sample of an iGoogle style example in Flex and really couldn’t find anything that was out-of-the-box usable.

I played around with flex mdi, but the out-of-the-box example was a little too heavy for me.  I don’t understand why it only highlights one window.  Anyways, I decided to make this sample out of pure laziness to learn flex mdi, plus I thought it would be fun.

Here’s some features to the component:

• Use custom grid sizes – you can specify what the grid layout will be with the GridCountWidth attribute.  For example, if you set GridCountWidth to 3, you’ll get a grid that is 3xn.   If you have a total of 9 windows, you’ll get a 3×3 grid.
• Automatically sizes and positions the panels – no matter how many things you send over, it sizes them to fit.  This is a limitation as well as a feature…
• Margins and Padding

Features I’m working on next:

• Once you delete a widget, the positions all need to be updated and the event needs to be dispatched.
• Minimizing and maximizing might be neat, but for now I’m going to hold off until a user requests that feature.
• The solid click/grid areas look bad… but I’m lazy right now and I don’t want to find a dotted-line canvas example…

Here are some known issues/oddities:

• You have to use the DraggablePanel class as the base class of your component.  I had it to you could use any base class that dispatched certain events, but I ran into an issue where I had to do a bunch of math and decided to can it and force the use of the DraggablePanel…
• Because of the automatic sizing, some components don’t look great.  I should probably make an automatic sizing or a static sizing version.
• The margins aren’t working correctly… they were but I broke it
• You have to use the DraggablePanel component as your base class when creating new widgets.

var tmpThis:Canvas= EV.target as Canvas;
var tmpHighest:Canvas= highestPanel;

removeChild (highestPanel);
removeChild (EV.target as Canvas);

addChild(tmpHighest);
addChild(tmpThis);

I’ve tried about 10 times to start a blog.  Each time I always run out of time to work on it, I get way to many spam messages… ehh whatever.

Now I’m going to do it.  This blog is mainly going to be about Flex, Flash, amf-php, and the web.  I’m also going to talk about entreprenuership, (dealing with) people, and whatever else is on my mind.

Here’s what’s on the table for my first two blog posts:

1.  amf-php authentication sample application

I told some people in the amf-php community that I’d post my sample application online.  That was July.  Well now I’m really going to do it!  Coming by Friday 11/28/08.

2.  using svn to auto-publish to your dev server, and backup your database…

This is a neat trick we use in-house to manage multiple-team-member web projects.  This trick is thanks to Tom Petr at Schedr (www.schedr.com).  I’ll do this in January.