Ionic 5 Angular Android iOS Apps For WooCommerce Using InAppBrowser Web Checkout

You may know that, right now, WooCommerce doesn’t have native API support to process payment directly from the app. That means, you have to reprogram your payment gateway with custom REST API endpoints based WordPress REST API standards so that you can communicate your payment gateway using API.

You are in the right place, here is the solution for all of your problems. Give the best experience to your vendors to manage their shop, attract more vendors to generate more revenue by selling more products.

Beside these, there are many WooCommerce websites that use hundreds of addon plugins to enhance it functions, to fulfill customers and vendors requirements. Most of these plugins are developed by third party developers and do not have REST API support at all. So all the product data you can see on the product details page, all the available options and so on, those data are not accessible using WooCommerce native REST API. As those data are not accessible using WooCommerce native REST API, you can not process those data and add it to order when you place an order from Android and iOS apps using API.

There are two solutions for this problems: The number one is, you have to create necessary rest api endpoints to make the product data available on the product details page and then process those data while placing an order. The problem with this approach is, you have to create too many custom rest api endpoints to make all data accessible using api that requires a dedicated team for your online store and every time the third party plugins bring change in database fields, you will need to adjust your api endpoints accordingly.

So what is the easiest way to figure this out? Ok, you can do it. It’s an InAppBrowser.

I implemented InAppBrowser WebCheckout in this app in such a way so that when a user is on the details page of the product, the user can click on the buy now button and instantly, the user will be landed to the product details page of the current product. There, users can make necessary selections and finally place orders just like a regular website but inside the app. No product data, order data or payment gateway needed to be handled using API. You are out of headache now.

Most interestingly, For a logged in user in app, user does not need to login in website using InAppBrowser. When the user lands on the product details page, it will automatically make the user login to the website. Besides these, when the user clicks on the buy now button from the app, it will check if the user is logged in or not. If the user is not logged in, then it will redirect the user to the login page.

As soon as order is placed successfully, InAppBrowser will be closed automatically and redirect the user to a thank you page. Now the user is back to the naive app again. Here users can browse more products to place another order or check his orders, view order details as well as there is a my account page where users can see his personal, billing and shipping information.

So this app is gonna remove all of your headache about placing orders directly from the app nonetheless of how many custom plugins are used in your WooCommerce Store or Whatever payment gateway you are using to process payment.

App Demo: A PWA Version of Demo can be found here Use Google Chrome or Firefox browser’s responsive design mode to get an experience about how does it look like. If you want an installable APK for android to test in real device, please use my user page contact form here and leave a message with your email ID, I will send you an APK package as soon as possible.

The full source code will be provided with a complete developer documentation so that the app can be easily rebranded to your choice. Also you are open to offer me to personalize the app for you with new functions, enhancements, theming or anything that needs to meet your business standards. Please use my user page contact form here and leave a message with your email ID, I will get back to you as soon as possible.

Key Features:

1. Compatible to WordPress REST API V2
2. Compatible to WooCommerce REST API V3
3. Products display, products by category, products by tags are implemented using WooCommerce API for fast loading experience
4. Infinite Scroll implemented for home page and order page to reduce loading time
5. Pull to refresh implemented on almost every pages
6. New user can register through app as a customer user role using WooCommerce API
7. Present customer can reset password from app
8. User login implemented using JWT auth plugin
9. Buy now button is protected using auth guard, user need to login to buy a product
10. Buy now button lands the user directly on product details page of relevant product using InAppBrowser
11. User can necessary shopping and place order using InAppBrowser just like an app
12. No headache to process any product data, order data or payment API because the user is using a regular website in Background. All data properly saved in the admin section
13. As soon as the order is successful, InAppBrowser will be closed automatically, and the user will be redirected to the app thank you page
14. User can see his profile information like personal details, billing information, shipping information directly from app
15. Finally ready to integrate with any WooCommerce Websites with V3 API

Home:

Default landing page View Details List Button: Takes you to product details page

Categories:

It shows all categories from shop, shows number of products belong to the category as a badge beside title.

Tags:

It pulls all of the tags of your shop, shows number of products belong to the tag as a badge

My Orders:

It pulls all of the rrders placed by you.

In Details View of an Order:

It shows order ID, order information per item, order total, order status, billing details and shipping details.

My Account:

It shows your personal, billing and shipping information.

App Tabs

All Products: This tab is actually the Home menu’s alias. Both are the same, added for ease of use.

My Order: This tab is actually the My Order menu’s alias. Both are the same, added for ease of use.

My Account: This tab is actually the My Account menu’s alias. Both are the same, added for ease of use.