One-Page Checkout

This translation was generated automatically.

The design of the Bits und so website is getting pretty dated. Someone ought to do something about it.

A small first step is the new checkout page for the #bus350 online ticket.

The page is built on Twitter’s Bootstrap framework. It comes with lots of useful features, such as a ready-made grid system. Jony would probably cry at it as much as he would at felt underwear under the Christmas tree, but it’s wonderfully easy to use for arranging boxes across different screen widths.

The same page looks very different on an iPhone, iPad, and iMac. Where content gets cut off, I add little buttons to scroll to the next relevant spot.

Also included:

• PayPal Express Checkout for digital goods
• Direct credit card payment through Paymill
• Instant bank transfer using your bank PIN and TAN
• Or, if you prefer, you can use iTunes gift cards in the Bits und so app

Checkout happens entirely on this one page. No shopping cart, no nonsense. For credit-card payments, the next screen after clicking Buy is the personalized online ticket page. I wish more sites worked this way. Humble Bundle does it nicely too.

The buyer doesn’t get an account, just a personalized, signed link that they’re sent to after purchase. The link is also emailed. It’s inspired by Amazon S3’s authentication system, with a few changes.

For a sense of security™, the page now has an SSL certificate too. I never touch credit card details; Paymill handles them. Customer data exchanged with the other services is also always encrypted between servers, never between the browser and the checkout page.

Next step: rebuild bitsundso.de from scratch. After episode #350. That’s tomorrow. See you there!