We are continually in search of creating the easiest digital ordering experience. We have had a dream of creating a one button order for several years. As we were considering what would be a good project for this hackathon, we realized that the Square Terminal was the perfect API and hardware to pair with a smart button to realize our one-button-order dream.
What it does
One button ordering is now a new ordering channel for the Flash Order platform. Via the Flash Order app a smart button is linked to the Square Terminal and is configured to order a specific menu item. When the button is pressed the ordering details are sent to the Flash Order cloud and routed to the Square Terminal for payment.
How we built it
We built a new user interface page inside our existing Flash Order iOS app. This page communicates with our server to create “button” objects. These objects have a name, menu item, square reader device code, url and optional callback url. Buttons can be configured to share a Square Terminal (ex: vending machine) or have their own (ex: upsell button at each table). Once a button is configured, a request to its url will trigger the server to submit an order and collect payment. The payment is collected by calling Square’s Terminal API with the device code assigned to that button. The Square Terminal then activates and attempts to collect payment. The result is sent back to our server by Square through a webhook where it can be logged and sent on to the KDS. In the future when Square’s Terminal API supports their Orders API, a proper order will be linked to the whole process, resulting in seamless reports, printing, and even loyalty rewards.
Challenges we ran into
The asynchronous nature of these types of interactions always poses a little bit of a challenge. The entire process takes place on six distinct pieces of hardware: Manager iPad, button, button-linked iPad/iPhone, server, Square Terminal, Square’s server(s). So, there are many places where things can go wrong, and where logging and error handling needs to be managed. It is also sometimes challenging to introduce new UI/UX without confusing and/or disrupting existing users.
An important part of the button experience is that it occurs very quickly so the user has feedback that something actually happened when they pushed the button. In this case it is the Square Terminal lighting up and prompting the user for the payment amount. Fortunately, we found Square's Terminal to be very responsive once we made the request to the API. Also, the flic button and corresponding app function even when the app is not running, and were regarded as "quick enough" as well. Using caching we were able to get our server delay to be minimal so the entire process from click to prompt takes between 1 and 3 seconds. In our limited end user testing we found this to be acceptable. If it were a problem in the future we might suggest linking the action to a button long-press or providing the audio feedback from the paired iOS device.
Accomplishments that we're proud of
We are very excited to finally realize one of our goals of making one button ordering a reality. We are proud of using a pure swift implementation--we were able to share data models and methods between the front end iOS app and the linux-powered backend. (It's also crazy fast!) Also, we are really proud of this being something not only truly viable, but something we that we will roll out to the public fairly soon!
What's next for Flash Order: One Button Ordering
We will make one button ordering widely available to the Square marketplace of sellers. We are excited to see all of the ways they innovate to use one button ordering to enhance their business.