Mobile Commerce with Ionic

Native mobile commerce (m-commerce) can be daunting for a web developer, with the mobile landscape being completely different to the world of web. The prospect of picking up an entirely new language and paradigm in order to launch your store can be a major barrier.

Thankfully, with Commerce.js and Ionic Framework, mobile commerce development is made simple.

What is Ionic?

Ionic Framework is a cross-platform development toolkit for developers to get up and running with native apps as quickly as possible, in a language you likely already know—JavaScript. It comes in multiple flavours (Angular, React, and Vue) so you can leverage the tooling you already know and build with that familiarity in mind. Ionic provides all the components, and renders them correctly based on the mobile platform, whether that's iOS or Android with Material UI styling.

Ionic also comes with Capacitor, an enterprise ready toolkit to run modern web applications natively. It provides simple access to the underlying native APIs, allowing you to work with elements like a device's camera for scanning QR or barcodes, or accessing Apple Pay for enhancing your checkout experience.

At the end of the process, you'll have a native binary, ready to be sent to the App Store. Combine this with the power and simplicity of Commerce.js, and you'll have your store shipped and making money in no time.

Why build a mobile native commerce application?

Mobile commerce sales are expected to hit 53.9% of all online sales by mid 2021. Innovation from mobile payment providers like Google Pay, Apple Pay, and PayPal, have made mobile payments for consumers effortless and instant. We all carry our phones around with us, making mobile the go-to preference for notifications, browsing, and buying.

So what benefits do native mobile apps have for businesses?

Here are just a few examples of using native mobile for your eCommerce:

Communication

If real-time conversations, SMS notifications, or story telling is core to your business, mobile apps are a natural channel to leverage. Chatbots (in-app or via SMS) can be used to educate your customers, inform them of promotions, and make product recommendations. Best of all, chatbots work around the clock and so paired with machine learning (ML) and AI, chatbots over time can interpret your customers intent and predict what the customer is looking for. Look into tools like Wotnot, Intercom, and Drift if you're interested in chatbots.

Augmented Reality (AR)

When customers can visualize a product in their context, they’re much more likely to buy it as it instantly becomes more real. Immersive purchasing experiences give customers reassurance that the product is right for them. From furniture to fashion, there are countless ways brands can use AR to engage customers in interactive ways:

• Product placements - Allows the customer to overlay your product in their home or office
• Virtual fittings - Enables the customer to try on your product using product filters
• Interactive manuals - Helps the customer to get more value out of your product post purchase

Check out Vuforia and Photoroom if your interested in exploring AR for your commerce.

Self-checkout instore

Long lines and cumbersome checkout experiences make shopping in COVID times less appealing for shoppers. If you’re looking to offer a safer and more streamlined experience for your customers, create a mobile application that allows customer to scan products to a cart and self checkout, all while in store.

ChopChop - Native to mobile

To help developers build mobile native commerce applications, we’ve rebuilt the ChopChop store in Ionic with React. Like the Next.js starter kit, this resource is also open-source and pre-integrated with Stripe so you can start accepting live orders instantly.

The ChopChop project has been beautifully recreated in Ionic, with native components used through Ionic's component library for elements like navigation, layout, and select lists.

The project replicates the flow of the checkout, so you can see how to integrate Ionic components with Commerce.js, as well as other popular libraries such as react-hook-form so you can create a beautiful, native, and integrated checkout experience for your mobile app.

All the code for this project can be found at in the GitHub repo. Check out the code yourself and follow the instructions in the README to get going.

Additional resources

Commerce.js community member Fernando Mendoza has created IonShop UI Headless, a fully functional eCommerce template built with Ionic, Angular, and Commerce.js. Learn more here.