Reading list Switch to dark mode

    Magento 2 Mobile POS App(Flutter POS App)

    Updated 11 January 2023

    What is Flutter POS App?

    Flutter POS App is a JS(Javascript) library created by Facebook. It’s used for building user interfaces for single-page applications. Flutter POS is also used for handling the view layer for web and mobile apps.

    Moreover, Magento 2 Mobile POS allows you to create reusable UI components as Flutter POS App is fast, scalable, and simple.

    Why use Flutter POS App?

    Flutter POS App allows us to create exciting mobile apps by just making use of Dart and is both supportable for Android and iOS platforms.

    Just create the code once, and the Flutter POS App is available for both the iOS & Android platforms, thus saving much of the development time.

    As it is an open-source framework, it will surely be compatible with other platforms like Windows and others that are there.

    Searching for an experienced
    Magento Company ?
    Find out More

    Also, if you know Flutter POS App, then the developer doesn’t need to learn Android or iOS-specific languages for development.

    The Flutter POS App Framework helps to serve both platforms(Android & iOS) in one go and provides a flutter app experience on each of these platforms.

    What this means is that it ends the war of selection for the developers on whether to go with Android or iOS development.

    Magento 2 Mobile POS App(Flutter-Based App)

    The Adobe Commerce Mobile POS(Point Of Sale) App is a Flutter-based mobile application for your Magento 2 online website.

    Using this flutter app, your cashiers can make use of this single application on their Android or iOS devices for your multiple physical stores.

    Check a brief overview of the backend configuration –  

    zGj3vQC1HYk

    Features

    • Real-Time Synchronization
    • Easy Product Search
    • Interactive Home Page
    • Flutter POS App
    • Offline/Online Mode
    • Print Invoice
    • Barcode Scanning(using device camera)
    • Order On Hold
    • Multi-Currency
    • Discount Coupon
    • Image For Cashier
    • Invoice Generation
    • SKU Product Search
    • Cash Drawer Printing
    • Order Return/Credit Memo
    • Customer Add/Edit Address

    Installation

    Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

    #2 Upload Folder

    Once the module zip is extracted, follow path src>app and then copy the app folder into the Adobe Commerce Cloud root directory on the server as shown below:

    Installation Of Show Price After Login for Magento2

    #3 Run Commands

    After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

    php bin/magento setup:upgrade
    php bin/magento setup:di:compile
    php bin/magento setup:static-content:deploy
    php bin/magento indexer:reindex
    php bin/magento cache:flush
     

    Home

    Opening the Store

    After opening the app, the login screen appears where the cashier can log in to the POS system by entering his email id and the password created by the admin and then tapping the Login button on the POS interface.

    Login Screen Magento 2 POS APP React Native

    Now, the cashier will have to select the Opening Balance for the Point Of Sale system. After entering the amount, the cashier will tap the Open Store button.

    Opening Balance Magento 2 POS APP React Native

    Now, the cashier can see the POS home screen. Here, the cashier will find the products displayed according to the selection made in the web configuration settings for the POS system.Flutter POS App

    You can also find the cart on the right-hand side, and you can toggle between the main options at the bottom panel – Home, Order, HoldCart, CashDrawer, and More.

    Home

    On the home page to add a product to the cart, tap on the respective product to add it to the cart. You can add multiple products by tapping them up. To delete all the products from the cart tap the delete button.

    Flutter POS App

    To increase the product count for a particular product in the cart, tap the numeric number to the left of the product.

    It brings up a pop-up to change the quantity of the product. Tap the + or buttons to increase or decrease the quantity of the product. After confirming the quantity, tap the Update Quantity button.

    Flutter POS App

    Here, you can also apply the discount by tapping the Discount button.  After tapping the button, a pop-up appears where the cashier can select the type of discount to be applied as –

    • Fixed or Percentage

    Flutter POS App

    After choosing the type of discount, the cashier can enter the discount amount as required and can tap the Apply button after that.

    Flutter POS App

    To clear the products from the cart one at a time,  swipe towards the left-hand side on the respective product, and you will see a delete button. Tap on the delete button to remove the product from the cart.

    Flutter POS App

    Category Selection

    To change the category, tap on the three horizontal lines on the top left-hand corner.

    Flutter POS App

    It brings up all the available categories. To reach a child category for a particular parent category, tap the right-pointing angle icon in front of that category.Flutter POS App

    Tapping the right-pointing angle icon brings up the sub-category, and then you can reach the last child as well.

    Flutter POS App

    Tapping the Watches will bring up the sub-child under that if any. Or the cashier can tap on the View Products in Watches to display all the products in Watches.

    Flutter POS App

    It displays a complete list of watches under Watches sub-child.

    Flutter POS App

    Note: To reset the category to the default selected one, tap the three horizontal lines.

    Search for Products

    The cashier can search for the products by –

    • Entering the Product SKU
    • Product Name/Characters and
    • By product Barcode Scan

    The cashier can easily search for the products by tapping on the area next to the search icon on the Home page.

    Flutter POS App

    Product SKU:

    Flutter POS App

    Product Name/Characters

    Within the search, tab enter the name of the product that you are searching for and it would display back the results for the same.

    Flutter POS App

    Barcode Scanner

    The cashier needs to tap on the Barcode Icon that is next to the search box for searching the products using the barcode. This opens the camera on the device and the cashier can easily scan the product barcode to add it to the cart easily.

    Flutter POS App

    Order

    Under this section, the cashier can check for the Online and offline orders that have been placed. To check the orders, tap the calendar and select the date range(Start and End date) for which you want to check the orders and the respective list of orders will get displayed.

    Online Orders

    Online_offlin_orders

    Tapping the start date brings up a pop-up. Set the starting date and click Set after that.

    Starting_date_Set

    To set the end date select the end date and then tap the Set button.

    end_date_set

    Now, you will see the list of all the orders that are placed. Tap a particular Order ID to display the order details for the same.

    Flutter POS App

    Here, the cashier can also print the invoice(depending on the option chosen – View PDF, WiFi Printer, or USB Printer) for a particular order by tapping the Print button a the top right-hand side.

    Print_details

    Offline Orders

    The cashier can even process a transaction in offline mode. This feature is great for areas where internet connectivity is weak. To check the offline orders for a particular date range, tap the start and end dates under the offline orders. After this, you can see the list of offline orders that have been placed.

    offline_orders

    Tap on an order number to check the details of the order. Here, the cashier can synchronize the offline orders by tapping the refresh button on the top right-hand end. This syncs the order with the server for a product update.

    Hold Cart – Process

    The cashier can easily put a cart on hold if the situation requires so. The cashier can put the current cart on-hold so as to process another customer. To do so, the cashier can put the current cart on hold by tapping the Pause button on the top right-hand corner.

    cart_on_hold

    Tapping the pause button brings up a pop-up confirming whether to move your Cart To Hold or not.cart_hold

    Tapping Yes, Move asks the cashier to add a note for putting the cart on hold. After entering the note tap the UPDATE NOTE button. This empties the current cart contents.

    add_note

    Now, the cashier can again add the hold-cart contents into the cart for checkout by first navigating to the Hold-Cart section and for the respective order tap the Cart Icon on the top. From here, the cashier can event delete a hold-cart by tapping the delete button.

    recart_hold_cart

    Tapping the re-cart button adds the hold-cart to your Cart. For this, the cashier will have to Select Yes, Replace.

    holdrecart

    After this, the hold-cart is added to the cart again.

    cart

    Checkout Process

    After adding the products to the cart the cashier can tap on the Pay button.

    checkout_page_tap_pay

    Here, the cashier can see the default customer that is added from the admin backend panel. The cashier can also add a new customer by tapping the Customer Icon.

    tap_customer

    This brings up a section and here the cashier can search for the customer or can add a new customer as well.

    select_customer

    To add a new customer tap the Customer Add button. This brings up the section to enter the customer details. After entering the details, tap the Tick icon to save the new customer.

    save_details

    This brings up the section where the cashier can tap the PLACE ORDER button to complete the order. Here, the customer has to pay the Grand Total amount in cash.

    payment_page_section

    Before proceeding further, the cashier can also edit the customer’s address by tapping the address on the left. After making the changes, the cashier can tap the Tick icon to update the customer’s address.

    edit_customer_address

    Note that, if the customer is low on cash and wants to make the remaining amount, then the cashier can make use of the credit card button to receive the remaining amount for the order to be placed.

    Moreover, the cashier will first enter the amount that the customer is paying out in cash by tapping the Cash button which brings up a pop-up.

    available_cash_with_customer

    Update payment Amount

    Here, the cashier will tap the Refresh button to update the amount that the customer is paying in cash and then tap the UPDATE PAYMENT button.

    refresh_update_cash_payment

    Now, this updates the amount that the customer is paying in Cash as shown below in the snapshot.

    cash_payment_updated

    The cashier can also apply the coupon code by tapping the Apply Coupon Code option. Here, enter the coupon code and then Tap Apply to apply it.

    coupon_code

    Moreover, after setting up the amount that the customer is paying in cash, the cashier can tap the CREDIT CARD button to enter the remaining amount to be received from the customer’s credit card.

    Here, enter the amount the customer is paying via credit card, enter the last 4 digits of the customer’s credit card, and tap the UPDATE PAYMENT button.

    update_credit_card_amount

    Now, the cashier can see the updated details showing the amount the customer is paying in cash and via cardCash Payment$100 and Card Payment$9.33

    Updated_page_for_checkout

    Before placing the order, the cashier can also add a note for the order to be placed. To do so, tap the Note menu option which brings up a pop-up to enter the note. After entering the note, tap the UPDATE NOTE button.

    update_note

    Lastly, tapping the PLACE ORDER button completes the order.

    order_complete

    Here, the cashier can also print the invoice by tapping the PRINT INVOICE button.

    print_invoice

    Order Return – Credit Memo

    It might happen that a customer sometimes wants to return the items within an order.  To do so, the cashier will navigate to the Order section. Here, select the order to create its credit memo and tap the Refresh button on the top.

    credit_1

    Tapping the refresh button brings an option to update the return quantity for the respective items in the order.

    credit_2

    Now, the cashier can easily update the return quantity for the items in the order as required. After updating the quantity, tap the Tick icon.

    return_quantity_changed

    After tapping the Tick icon, the credit memo gets generated.

    Magento2 Mobile POS_credit_3

    Moreover, the cashier can check the details of the same by tapping the Credit Memo List which brings up the details of the credit memo.

    credit_4

    Now, the cashier can check the details for the same.

    credit_5

    Tapping the short detail opens up the complete description of the credit memo.

    Flutter POS App

    Cash Drawer

    Under here, the cashier will be able to check the In Cash and Out Cash details for any of the days by making use of the calendar. Apart from that, the cashier can also check the Opening and Closing Balance.

    Flutter POS App

    To check the details of the cash drawer for a particular day in the calendar, tap the respective date and you can check the details for the In Cash, Out Cash, opening, and closing balance.

    Flutter POS App

    More Section

    Here, the cashier will be able to refresh the product list and the category list by tapping on the refresh icon that’s present in front of the respective options.

    To go back to the home page, the cashier can tap the <Home icon on the top left-hand corner, and log out tap the Icon on the top right-hand corner.

    Flutter POS App

    Under the Select Currency option, the cashier can change the currency of the POS system. After tapping on the drop-down option the cashier can see the different currencies to choose from and can select one as per need.

    Magento2 Mobile POS_select_currency

    Under the Printer option, the cashier can select the options to view the PDF, WiFi, and USB Printers.

    printer_selection

    After tapping the Printer drop-down selection, the cashier will be able to select –

    • View PDF – When this option is selected, then after placing the order, the cashier can view the PDF of the Invoice.
    • WiFi Printer – When this option is selected, then after placing the order the cashier can print the invoice using a WiFi-connected printer.
    • USB Printer – When this option is selected, then after placing the order the cashier can print the invoice using a USB-connected printer.

    However, that’s much about the Adobe Commerce Mobile POS App(Flutter POS App)  For any queries or doubts related to the app get back to us at [email protected] or raise a ticket at our HelpDesk System.

    
    
    
    
    
    

    
    
    

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    4 comments

  • ABSAR
    WE NEED SOURCE CODE
    • Zeba Hakim (Moderator)
      Hello Absar,

      Thanks for showing interest in our product.

      For this, you can purchase the application with source code from Buy Now!
      Post-purchase you can contact us on [email protected] or create a ticket- https://webkul.uvdesk.com/en/customer/create-ticket/.

      Thanks and Regards.

  • [email protected]
    Is the product ready for purchase ?
    • Nishad Bhan (Moderator)
      Hello Whileloops,

      The product is Live now, and you can purchase it from the store link – https://store.webkul.com/magento2-native-pos-app.html

      Also, a few features of the Web POS – the cash drawer and the RTL are in the process and shall be added to the app shortly and you will be getting regular updates over this.

      For any doubts, suggestions or clarifications regarding the application you can get back to us at [email protected]

  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content