We are continually in search of improving on delivering experiences that align with how customers want to order. We have received feedback from a number of restaurant clients that they would like a way to redeem gift cards via the Flash Order kiosk platform. However, bridging the gap between physical and digital cards and creating a seamless kiosk experience that didn’t require hand entering a 16 digit number into the kiosk interface was always a roadblock. As we were considering what would be a good project for this Hackathon, we realized that the Square Gift Card API made possible elegant solutions to the problem of issuing and redeeming Square gift cards in our Flash Order kiosk UI.
What It Does
The Gift Card API enables us to issue and redeem Square gift cards via the Flash Order self-order kiosk. In the Flash Order app a seller configures the tiers of gift cards they would like to sell. They also set the style for how the gift card will be displayed to their customers. Self-order kiosk customers can then place an order for a gift card and collect it electronically via SMS. They can then share, save, or view the gift card in a number of ways, including saving to Apple Wallet for easy future access. Also, they can redeem their gift card (physical or digital) via the kiosk. Customers tap a new gift card tender type in the Flash Order checkout order flow and scan ether the QR code on their digital gift card or the gift card number on their physical gift card to apply the balance to their purchase.
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 set the gift card tiers and gift card style (background color, banner image, and seller brand icon). These settings save to the Flash Order server and then flow to any device running the Flash Order kiosk.
Gift Card Purchase
New UI walks a customer through the purchase of a gift card. Once the transaction is complete:
- The Flash Order server calls the Square Gift Card API to create a new gift card.
- Square Gift Card API sends back a GAN and Card ID.
- The Flash Order server then asks the Square Gift Card API to activate it with a connection to the amount corresponding to the line item in the order. Since Orders API is used for the transaction we are able to fully leverage Square’s infrastructure relating to the order.
- The customer sends themselves a link with a server generated html interface for the customer to manage gift card redemption and Apple Wallet download.
- If the customer chooses to add a corresponding pass to their Apple Wallet the Flash Order server generates one on demand. It also provides Apple with a registration link where the pass can register for push notifications. This allows us to update their balance as it changes! (Note: we finished this last minute so it didn’t make it into our video.)
Gift Card Redemption
Updated Flash Order UI includes a new gift card tender type at checkout. When gift card is selected as the payment type:
- A custom camera scanner is launched that scans and interprets either the QR code from the Flash Order URL, or the same QR code from the customer’s Apple wallet, or uses AI to read the card number from a Square issued digital gift card or the Card number from the back of the Square issued physical gift card.
- The GAN from the gift card is validated using Square Gift Card API and the balance is displayed for the customer to use as payment.
- As payment completes the Flash Order server routes gift card details and amount redeemed to the Square via Gift Card API, Apple databases to update the Apple pass (ie Apple wallet) gift card amount, and to Flash Order’s internal database.
Challenges We Faced
The asynchronous nature of these types of interactions always poses a little bit of a challenge. The entire process takes place on at least eight distinct server/database pieces of hardware: Manager iPad, Flash Order self-order kiosk, customer device (iPhone/iPad, etc), unknown gift card recipient’s device, Square’s server(s), Flash Order servers, Apple server(s), and Twilio for SMS. 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 features without confusing and/or disrupting existing users.
Accomplishments We Are Proud Of
We are very excited about bringing to market the QR code/card number scanner. We think it makes gift cards via self-ordering an experience that we can be proud of. Also, we are really energized about the integration with Apple Wallet. A virtual wallet for gift cards makes it so much easier for customers to manage and use their gift cards. Last, we are really proud of this being something that is truly viable, and that we will roll out to the public fairly soon!
What’s Next for Flash Order gift card Ordering
As of this submission, Flash Order gift card ordering is already available to our beta customers. We anticipate it going live to our entire customer base and via the Square App Marketplace in the next 2-4 weeks.