The aim of this playbook

This playbook provides developers and technical decision makers with a high-level overview of the mobile self-checkout solution, and includes details on how to integrate it with your existing infrastructure and Moltin APIs.

Jamus Driscoll CEO at Moltin

At Moltin, we feel strongly that the next wave of commerce is experiential, frictionless, relevant, and in the moment. We set out to build a lightweight platform to enable innovative businesses with a builder mindset to be able to react to market trends quickly and create seamless transactional experiences that would delight customers, while capturing new business dollars.

Along this journey, we recognized a void between traditional eCommerce systems and POS solutions to enable in-store innovation and flexible retail selling beyond the store. Existing technologies simply could not stretch to fit the gap, and as a result exciting selling opportunities were left off roadmaps, innovation was sacrificed in favor of the status quo, and customer dollars were left on the table.

We saw a huge opportunity to help usher in this wave of retail innovation, and fill the gap. So we created our app-free mobile self-checkout.

Moltin mobile self-checkout - backed by our fast and flexible commerce APIs - is our answer to the market’s need for flex retail. In a world of flex retail, “stores” are no longer limited to buildings with four walls. You can literally sell anywhere. Events, trade shows, popups, trunk shows, via affiliates, in-store via BYOD or sales associate assisted - if your customers are there, we want to help you transact.

We are working hard to keep our customers on the forefront of digital commerce innovation, and partners like you are a critical part of that vision. This guide is intended to get you up and running - fast. Our goal is that businesses can turn around these selling experiences initially in as little as 4 weeks (and then in as little as 4 hours for each store after that). It’s an exciting time for commerce, and we can’t wait to see where you take it.

We look forward to working with you.

What is mobile self-checkout?

We created mobile self-checkout to remove friction from the physical buying experience, and allow brands and retailers to be reactive, adaptive, and flexible in where and how they sell. The initial impetus for the idea was simple: supplement in-store POS systems to offer a flexible checkout option on the shopper’s own device - reducing the staffing burden for stores and laying the foundation for in-store digitization and innovation. Ultimately, what we created was something that was capable of much more: a retail Swiss Army knife that unlocked a variety of use cases which were previously out of reach for many brands and retailers.

Tactically speaking, mobile self-checkout is a progressive web application (meaning browser-based experience - no downloads) that is capable of (1) scanning a product (using either a barcode or an image), (2) surfacing product data, and (3) processing a checkout (either via a digital wallet, shopper credit card, and/or a card reader). We built this as a “reference application” (essentially - a starter kit) with the intent of helping customers get 80% of the way there, leaving it to them to connect this into their existing architecture, customize to match their brand, and adjust any steps, pages or fields to meet the objectives of their specific use case (leveraging our commerce APIs behind the scenes).

What we’ve learned in the market was that this solution answers the need for a number of different flavors of flex retail:
- Tweaking the cart and adding a card reader quickly transformed it into an associate app.
- Linking it into eCommerce data morphed it into a powerful event retail solution.
- Omitting the cart page and adding a richer PDP made it more of an endless aisle application.
- Using it as a primary checkout option basically removed the need for a legacy POS in the first place.
We saw an appetite for a number of different non-traditional retail use cases - all powered by the same elegant reference application, and powerful and flexible commerce APIs under the covers.

What's in the box?

The mobile self-checkout repository has everything your team needs to get up and running with the application. This includes:

1. Example wireframes to share with your UX team, so they can update the experience for your brand and desired experience.

2. All of the code your developer team needs to update and launch the app, including:
- Ionic app setup - including code for all the hooks back into Moltin.
- Barcode scan and look-up package.
- Styling for all the pages.
- Payment gateway configuration (Stripe, by default), for fast payment processing integration.

With these “ingredients,” you’ll find your 80% of the way to the finish line of your mobile self-checkout project.

Developer Guide

1. Set up your Moltin store.

2. Set up your environment for mobile self-checkout.

3. Configure your look and feel in the app.

4. Integrations.

5. Sub-domain and launch.

1. Set up your Moltin store

Sign up for a new moltin.com account!

Make note of your API client ID and client secret. Once you’ve signed up, you’ll need the client ID to interact with Moltin from the mobile self-checkout application, and both the ID and the secret, if you want to set up any additional integrations, or access more privileged parts of the Moltin API from a secure place, such as a Node.js server.

You’ll now want to start adding products to your catalogue, ensuring that the SKU matches the barcode that you have for each product. You will want to give each product a price, some stock, and make it live. Once these are complete, the application will be able to scan your products! You could also extend your products with Flows, which allow you to add custom data to each product, so you can configure your applications data however you like.

2. Set up your environment for mobile self-checkout

The application will require some set up in order to make sure you can run it yourself before deploying to a production environment. Crucially, this means setting up your machine to run JS applications, and the Ionic framework - the instructions for which are contained in the repositories README file.

Additionally, if you would want to deploy somewhere, you may need to install additional elements to allow you to do such a thing. For example, we often deploy to heroku.com, and as such, recommend installing the heroku CLI tools, which will allow you to easily deploy to this environment (we’ve even included a Procfile for you to do just this!).

3. Configure your look and feel in the app

Each page of the application is self-contained in its own folder, and is configurable to however you like. As well as this, the application provides a CSS file with all the configurable variables that we recommend you to change, so you can change to look at the entire app in a few simple lines.

4. Integrations

Now that your app is ready, you can extend your applications capabilities by setting up integrations. An integration can listen for events from your application, such as an order being paid, and send a command to an external system to tell that to do something with this information. We often recommend that you set up an order receipt email to be fired off to your customer as soon as they have paid for an order, so you can do away with paper receipts altogether.

5. Assign domain and launch

Now, you can deploy your application! As mentioned, you could deploy to Heroku, but the application can be deployed to anywhere that can serve HTML. The application works well with systems such as AWS S3 and AWS CloudFront, or could even be deployed traditionally behind an NGINX or Apache server.

You’ll want to secure a domain for your application, such as “pay.company.com”, and point the domain to your applications CNAME, which you can get from the hosting service you have went with.

Congrats! You have now launched your self-checkout application!

Let's build something amazing with Moltin