Ouch II: The Brainhurtening

I’m surfacing for air briefly so you guys know what I’m up to. 2 biggies:

First, the USSC gunboat has actually been more or less finished for the past few days. 15mm and 28mm sizes both. Second, there was a good reason for that post a while back about online shopping being unnecessarily sucky. 🙂

I’ve spent the last several days up to my elbows in some pretty cutting-edge stuff. HTML5, CSS3, AJAX, PayPal’s brain-hurting APIs for Express Checkout and Digital Goods, and more. I wanted to see, as an experiment, what I could do with that kind of power at my fingertips. So, it’s not really a production environment, it’s more of an experimental testbed that pushes the envelope.

I don’t want to bore you people with another textwall of dry technical details, so let’s just go to a couple of screen captures and go over the high points. Below, you can see a snapshot of the partially completed front page, with placeholder graphics. Just to give you a sense of where things will be visually.

Nothing too special there, just some news posts on the left side and what will eventually be a list of the last X new releases ordered from newest to oldest.

Okay, here’s the part that really made me work for it. This is the product page–ignore the placeholder graphics. I basically just grabbed the first promo on my hard drive and used it as a placeholder all over the place. This is where the fun stuff starts.

Below the header, on the right side of the nav strip, is a location widget. Instead of filling in crap at checkout, you just set your location on the nav strip. The first thing you’ll see is a dropdown selector for countries, then if you happen to select a country that has states or provinces associated with it, a second dropdown selector will magically appear next to it. That’s all it needs from you, a country and sometimes a state or province.

Below that, on the right side, you’ll see a price and a PayPal button. This deceptively simple looking arrangement required a staggeringly disproportionate amount of work to set up. Here’s why:

When you click it, the next thing you’ll see is a PayPal dialog right there on the same page.

When you click the Log In button, it pops up a secure mini-browser:

Then once you’ve logged in, it takes you right to the confirmation step:

Clicking on “Pay Now” returns you to the store, immediately displaying a summary dialog with a download link:

Note that I did NOT leave out any intermediate steps. What you just saw is literally what a PayPal account holder will see, step by step. I’m not kidding. That’s all there is to it. No forms to fill, just a simple PayPal login and a couple of simple button clicks. In fact, if you let it remember you, you can collapse the purchasing process into two clicks. Well, three, if you count closing that last confirmation dialog.

Okay, here’s another surprise. There is zero user account management. You don’t register or log in or anything like that. This part makes use of some pretty fun HTML5 functionality. Your download links, when you buy something, are saved to local storage on your own machine. It starts right after you buy something (note how the buy button has been replaced by a direct download link):

It’ll stay exactly like that, and the links don’t disappear unless you happen to delete your cookies and flush your browser cache. You don’t log in at all, you just visit the page and it’s all there for you. Now, if you deleted your cookies and flushed your cache, or you’re just accessing your stuff from a different computer, this is what you would see:

Uh-oh, no downloads found. However, here’s the other fun bit: syncing your downloads. All you have to do in order to sync your downloads is enter your PayPal email address and any invoice ID from any previous order:

Bam, just like that, your download shows up in your collection again:

Anyway, this is all a work in progress, and it’s very much an experiment. I don’t know how much of it is going to be practical in a production environment, and I’m pretty sure it won’t play nice with older browsers and what have you. But if you’re using a current version of a modern browser, it’s a fun peek into the future.

Some of the stuff under the hood, mostly to do with the PayPal API backend, will likely make it into the next version of the WorldWorks storefront, and having a separate experimental storefront lets me play around with some ideas and prototypes that we wouldn’t normally dare implement on a production storefront. 😀

10 thoughts on “Ouch II: The Brainhurtening

  1. capricorn

    Mel, I’m honestly impressed. That must be the more consequent and ballsy move I saw from a blogger.

    Post one “This is how i want my world”. Post two “I’m making my world”

    Awesome. BRAVO! 😀

  2. Magpiestear

    So can you buy/download more than one item at a time, or does it do separate transaction for every purchase?

    Looks great mind.

  3. Christopher Roe Post author

    Capricorn, WW8: 😆

    Glenn: Not this afternoon. I intend to have the latest releases widget working before bed, though. 😀

    Magpiestear: Strictly one item at a time, but from an user experience standpoint, that’s actually not anywhere nearly as bad as it may sound. The perceived flow is significantly accelerated compared to the old “add a bunch of stuff to a cart then fill out a bunch of nosey forms and then check out and wait for an email then faff around with logins and what have you” kind of experience that’s more the norm.

    This also isn’t intended to be a production shopping cart system anyway, it’s a testbed for all the interesting bits I want to play with, and 90% of what you see up above is actually just scaffolding and machinery to support the real core of the experiment: PayPal’s new-ish support for in-context digital goods microtransactions.

    The primary use case for that system isn’t a typical shopping cart, it’s more like something that lets you monetize little bits of content in-place, without leaving the page. For example, a newspaper article with a teaser and then a buy link that displays the rest of it when you feed a quarter into the meter, or a similar scenario with photos or whatever.

    Ultimately, when I get around to developing a genuine production-quality app powered by that PayPal backend, the user experience will probably be significantly different enough that people aren’t going to be missing a shopping cart. 🙂

  4. Alexio

    Wow. This looks great, I can’t wait to test it (next month, when I have discretionary cash). Other people talk about the problems of selling, you actually DO something about it. Big ups!


  5. Carl Fishman

    It does look pretty darn cool! Much nicer than what I experience at some sites. And of course I’d be more than willing to help you test it out by buying the space fighter!

  6. Magpiestear

    Actually Mel I wasn’t worried about missing the shopping cart, instant purchase of stuff as I stumble across them is fine by me.
    My concern was that the vendor would get hit with lots of transaction charges from paypal, thus reducing their ‘take home’ money.

    Oh and speaking of instant purchases, you might like to take a look over at Wargames Vault’s ‘Trick or Treat’ promotion, there are some rather nice freebies lurking behind the 10 hidden pumpkins, well worth a look. (RPGNow also have 13 pumpkins hiding different stuff!!)

  7. Christopher Roe Post author

    Alexio/Carl: 🙂

    Magpiestear: Ah! I see what you mean now. The great thing about the new setup I have with PayPal is that transactions under $12 are now assessed at a different rate–5% plus 5 cents, rather than the normal 2.9% + 30 cents. When I upgraded my account to a business account and set it up to use Express Checkout/Digital Goods, they’ changed the fee schedule to automatically charge me the cheaper of the two rates for any given transaction.

    So, a $1 paper model costs me 10 cents to sell, now, whereas the same $1 model would have cost me 43 cents to sell before implementing the new system.

  8. SSG Snuffy

    That’s awesome! I’m loving the new micro-transaction setup, and I’m just as happy that it’s more streamlined and more profitable for you (means you can crank out more models, right?).

Leave a Reply

Your email address will not be published.