Space Box: How I turned Stripe into Paypal in 5 Days

Last Thursday, just before our podcast was recorded live, I had a conversation with my pal Adam Stacoviak. He mentioned he needed a way to accept payments, but didn’t want to use PayPal. I told him to use Stripe and his life would be complete. But like for most people, Stripe is just too low-level to use. It’s a developer tool and it does a great job at that. However, there is no simple way to accept payments without any setup and development work required on your end. PayPal, however, does have this feature. So at that moment I decided: “I’m gonna build this.” Then I did. It’s called Space Box.

During that podcast recording, I designed most of the app. Then I finished it up later that night. I worked on it Friday and Saturday, took Sunday off and was back on it Monday. Tuesdays are my other day off. Living here in Southern California, Tuesdays are perfect for hitting up Disneyland, LegoLand and the zoo with the family. Zero crowds on Tuesdays! I was back on it Wednesday and launched it on Thursday. Six days in total, but I was also working on other projects during those days. So considering Thursday was a half day, and the other days weren’t full-time on Space Box either, I’ll go with a five-day development cycle. Five days is my new personal record for app development. Previously it was nine days when I built Build It With Me back in 2009. Something interesting I’ve noticed from building numerous things is that apps where I handle every aspect (design & development) always go quickest.

An Overview

Space Box makes accepting payments with the Stripe platform quick and easy. On of the big benefits is that there is no coding necessary to start accepting payments. Space Box enables you to set up payment forms super fast. You can then use the forms to accept payments from clients, accept donations, etc. Space Box also automatically sends receipt emails to anyone who makes a payment to you. It’s a great way to move off PayPal and onto Stripe for those who don’t want to (or don’t know how to) write a custom payment form using Stripe’s API.

Speedy Development

The development cycle went quickly because the app is small. The actual app itself is only one page. I forced myself to work only on one page because I didn’t want to take time to design and code out internal pages. This is sometimes called “being lazy.” But in this case, I’d like to think that it was “being smart.” The homepage is a super simple one-page site that describes the service and prompts the visitor to sign up. That’s it.

By forcing myself to build things quickly, and thus choosing to minimize the number of pages I had to build, it enabled me to spend more time on the interactions. Which was fun. If you sign up you’ll notice them here and there, like this one.

On average I spent about five to six hours during the day on Space Box, and another 3 hours at night. I always get off work at 5pm everyday to hang out with the family. When I am working hard on a project I usually get another couple hours of work in after the kiddos go to bed. The main thing that surprised me about this build was: it wasn’t a “hack-a-thon”. I wasn’t killing myself and never sleeping. Instead, it was just super normal days. Loved it!

The Design

I actually was super jazzed to design this because for a while, I’ve wanted to make something really bright and loud. This was a perfect opportunity to to make something very original. What’s funny is, it turned out to be the opposite. Once I was finished with the design, I moved into the front-end development with HTML and CSS (SASS). While coding, I thought “wow, this is ridiculously similar to Lumo” (an app I’m on the verge of launching). So I failed, but then again, I didn’t. By creating something similar to a previous app I had already coded, I got to re-use TONS of code. TONS!

The design used zero images. Instead, everything is rendered in CSS. I uses my Pictos Server to display the icons. By not using images, and instead using SASS and the Pictos Server, development time sped up to 88MPH – which we all know takes us to the future… so that’s kinda cool.

The Tech

Speaking of re-using code, I did the same for the back-end. I personally like to build a fully custom backend for each app I make. I’m not a fan of MVC or using JSON templaters (I built one back in 2008). I have a code-base that I have refined and re-used for a few different apps. It’s awesome. Extraordinarily light-weight, JSON API by default, full of abstractions to make re-using it super easy. It’s built-in PHP, since that is what I am best at. Though my favorite language is Javascript by far. I also really like using Node.js.

Space Box has a RESTful JSON API built-in PHP and stores stuff in a MYSQL database. Old skool! I also use AES encryption for customer data. Space Box never stores or processes credit card information. That is all handled by Stripe, which is amazing.

All the JavaScript is custom, other than using jQuery. Writing custom JS is always best since you have full control over everything. Not to mention, you can always make things run faster when you don’t have additional overhead. Most people say “JSON templaters make for quick prototyping and development.” I say “bah humbug! Just get better at JavaScript!” But whatever, this is my preference and it works pretty well for me.

The service is hosted on MediaTemple. I’ve setup a custom box and installed some cool things on it like GIT. So code deployment is a breeze thanks to the good folks at GitHub for making it even easier!

One day I might open source the PHP framework I’ve built and been using, but there’s no telling when that will happen.

The Best Part

My son named the app! He is two years old and is in love with outer space. He builds with legos a lot… a lot. He usually builds rocket ships and space capsules. But a few days prior to starting Space Box, he brought me a lego build and said “It’s a Space Box!” I immediately thought “I’m totally using that as an app name for something in the future” I didn’t realize it’d be so soon!

So there you have it. A look at what went into creating Space Box. I hope you check it out and free yourself from the Paying of the Pals (aka PayPal)!

Good Design is Thorough Down to the Last Detail

What I Would Wear on My Wrist

Metis NYC Product Design Bootcamp: Acquire Skills, Build a Career

Good Design is Long-Lasting (Part 7)

Good Design is Honest (Part 6)

Windy Uses 3D Audio and Parallax to Immerse You In Relaxation

Good Design is Unobtrusive (Part 5)