In the past, we have had several clients approach us with the need to be able to provide members of their team with Episerver content in a mobile context. The use case for this tends to be events, trade shows, or conferences. In these scenarios, information needs to be shared, usually in short periods of time and without being in front of a computer. We determined the best way to achieve this was through a mobile application. We can build apps, and serve up existing content from Episerver that they can then show to potential customers.
The logical progression from this point was sales. Episerver provides an amazing framework for transactional e-commerce websites, but that's not the only way you can use it. We realized we could provide the client with much more value if we updated the customer engagement to go directly from interaction to sales, instead of interaction to follow up. Because our clients are already selling their products through their Episerver site, we wanted to utilize it for their mobile application as well.
Our mobile application setup
For ease of use for the end users, both client and customer, we wanted to create an iPad application. We felt that having an actual application versus viewing the site in a browser would be a cleaner experience. Also, it would prevent the user from navigating away from the client's content.
We achieved this by creating a mobile application that housed a web view. We specified a section of the page tree in Episerver that would be dedicated to the app. This section would not be publicly available, and we could point the web view to a "start page" in this section.
With a responsive design, hiding safari's navigation components, and configuring the app in Swift to ignore navigation requests outside of the site domain, we were able to create a native app experience.
From there its just a matter of creating pages to handle viewing products, and checking out.
Sounds simple, so whats the challenge?
The issue with this approach is user experience (UX). Because we wanted this to be a somewhat guided experience, where the client could walk customers through their products, we did not want to have the user need to fill out a standard web credit card form. Nor did we want them to have to give their card to our clients to enter that information for them.
The Solution
The solution is to use what every other iPad you see uses for transactions. A Square card reader. This would limit the amount of data the customer would need to enter to what the client needs (Name, email, etc) and not require them to enter all their card information. It would also contribute more to the native app "feel".
In order to accomplish this, we had to work around a pretty big constraint. When using the Square reader, you need to interact with it through the actual iOS application. This means that if a user swipes their card, we have no way of accessing that data on our site that is served through the web view.
Luckily, Swift has a way of accomplishing this. Swift has the ability to call JavaScript functions through the web view. You can also call functions that you previously registered in Swift through JavaScript in the web view. This allows information to flow from the checkout page to the JavaScript, to the App, to Square, and then back through in reverse order. Square does not pass credit card data for security purposes. So they pass what the call a nonce. Once we receive this nonce value, we can complete the checkout process through Episerver, and use the nonce value to confirm the transaction with Square.
The Results
For both our clients and us as partners, this has been really powerful. With our responsive first development mentality and a framework for our iOS application, we can spin up a mobile purchasing application for just about any of our clients.
What do you think? Do you have any potential use cases for selling products from your Episerver site in a mobile context? We are always looking for new ways to expand upon our solutions, so feel free to message us with any suggestions or ideas.
Top comments (0)