Written by

I had an interesting conversation today. As I was waiting in line for dinner at a networking event in Manila, someone asked me how you build a website.

So I broke it down for him. I used the food truck we were waiting for as an example of a company that needs to accept online orders.

I talked about how programming actually teaches you how to think and solve problems. And I solved the problem of a missing online order form right there in line.

First, you’ll need a way for your customers to actually tell you what they want to eat. Should that be done over the phone? By email? By an online form? Or maybe an app?

For this particular example, we went with an online form. So now you need to get the appropriate information. What is that exactly? Your name? Maybe an email address or phone number to update the customer on their order, or provide confirmation.

How can this food truck get paid? Should they accept credit cards or will they only take cash (pretty common in Asia).

If accepting cash only, you risk not getting paid for your food. This could be from many reasons: maybe the customer can’t find you (I regularly can’t find specific shops), or because they forgot or had an emergency, or the person could intentionally fake an order for fun or malice.

Whatever the reason, requiring payment by credit card means you don’t make food for anyone who hasn’t already paid for it.

Say this food truck goes with a credit card payment. Which processor should they use? PayPal? Stripe? Native integration requiring PCI compliance?

Which one is best would depend on the needs of the food truck. Native integration is really expensive and can carry extremely harsh fines if implemented incorrectly, so this is best for medium to large companies with at least many thousands of transactions per month.

Stripe makes customization really seamless and can work very well with custom interfaces and designs. But for a food truck, this may be more complex than necessary.

Let’s go with PayPal. Lots of people use it and you don’t have to enter your credit card details just to get dinner!

All right, so now we have our basic form. Simple, clean. And a button that gives the merchant everything they need to get their food to the right customer.

So how does the form know what the customer wants to eat?

They probably want more than one dish, so the customer will need to select something from a menu. Maybe they’re ordering food for more than one person, so they need to be able to select more than one of the same item.

These things will need to be saved in the browser, so the user doesn’t lose their progress and so the form will send the correct order to the food truck.

You’ll need to keep track of exactly what foods are needed and how many of each.

The customer will add these dishes to a shopping cart, and this list will be used on the form to send data to PayPal.

So now that we have our menu, we need to style it and make it look nice. We can do this with CSS. Let’s make the input fields and buttons nice and big so users on smartphones can easily add something to their shopping cart.

The shopping cart (with item count) should be visible at all times so the user can immediately go there to change their order or finish and pay for their food. Let’s fix this to the top right, so they can find it easily and can scroll anywhere on the page and still see it.

We should add the food truck’s logo to the page too, so the customer knows they’re in the right place. Let’s put this in the top left where it’s most commonly found.

Now the customer can pick their food from an online menu, add it to a shopping cart, and pay for it. The customer will save time by ordering it online rather than waiting in line, ordering it at the front, and having to wait even longer for the food to be prepared.

This seems like a lot of work just to shave off a few minutes for your customers, huh? It is, but here’s the best part: it only needs to be built once and it will last you for potentially forever! Your customers will thank you for it in the long run.

Not every business needs a cutting edge experience, but when you want exceptional quality front-end web development work, remember me. Send me an email and we can talk about the details.

Get new posts by email 😎

Unsubscribe anytime. Privacy protected.