Reading list Switch to dark mode

    Laravel eCommerce Point of Sale

    Updated 20 September 2023

    Laravel eCommerce Point of Sale Extension provides a wide range of functionality to the admin through which they can easily create the multi-stores with keep tracking of their day to day sales along with the proper customer management.

    The physical stores will have a POS front-end for which the admin can assign a POS agent who can easily manage the daily sales with their respective customers. The POS system can work both online and offline mode in case of poor connectivity.

    **Note:

    • Laravel eCommerce Point of Sales module is supported by Bagisto version, 1.5.1

    Which printer and scanner support Bagisto POS?

    Bagisto point of sale system supports Epson TM-T82 Thermal POS Receipt Printer and the paper width and roll diameter are 79.5 ± 0.5 (W) × dia. 83.0; 57.5 ± 0.5 (W) × dia. 83.0.And mostly barcode scanner support bagisto POS system like Retsol Ls450.

    Check a brief overview of the POS terminal workflow –

    Start your headless eCommerce
    now.
    Find out More
    7gjobytCnsg

    Check a brief overview of the POS backend configuration –  

    ynAxK7tlmLs

    Features Of Laravel eCommerce Point of Sale

    • Admin can manage the online store along with physical stores.

    • The POS user can also apply discount offers as per fixed amount or percent (%) value on the cart.

    • A user of POS can also create an order for registered and new customers.

    •  Hold the cart and proceed to the next transaction whenever required can also be done.

    • Generate a barcode for simple and configurable products.

    • Laravel eCommerce Point of Sale module supports  Simple, Configurable, Downloadable, Virtual, Bundle, Grouped, Booking, and Custom product.

    • The admin can filter the POS sales report by order id, grand total, customer name, and order date. 

    • Multiple stores can also be created.

    •  The admin can also assign multiple users of POS in a single store.

    • Admin can also assign agents for the store to manage the day to day sales and customers at their POS front end.

    • The POS agent can also add or change the customer on the POS front end.

    •  An agent can also work offline in case of poor connectivity.

    • POS agent can automatically synchronize all the offline data whenever going online.

    • Barcode readers can also be used to add products to the cart.

    • Hassle-free payment and checkout system.

    • The agent can also select the currency for the store.

    • A POS agent can also select the locale for the store.

    • POS agents can check the sales history, hold sales, and also offline sales.

    • POS agents can also sell a custom product that is not available on the POS front end.

    • An agent can also send the request for the low stock product.

    • POS agent can set the minimum unit of quantity for the low stock product to get notified when the product is low in quantity.

    • POS agent can add or edit the discount on their front end.

    • Multiple carts can be created from the front end by the POS user.

    • Admin can manage the product inventory separately by assigning the inventory source to the store.

    • Pos customer can return and exchange the ordered product.
    • Cash and Card payment available at the front-end.

    •  
    • Barcode prefix option added into module configuration.

    Installation of Laravel eCommerce Point of Sale

    The customer will get a zip folder after purchasing the Laravel eCommerce Point of Sale Extension. After that, “Unzip” the respective extension then merge the “packages”  folder into the project root directory.

    B2B stripe

    • Goto config/app.php file then add the following line under “providers”

    ‘Webkul\Pos\Providers\PosServiceProvider::Class

    Screenshot(5)

    • Goto config/auth.php file then make the below changes :
      • add the following line under ‘guards’
        • ‘posuser’ => [
          ‘driver’ => ‘session’,
          ‘provider’ => ‘posusers’
          ],

    pos installation

      • add the following line under ‘providers’
        • ‘posusers’ => [
          ‘driver’ => ‘eloquent’,
          ‘model’ => Webkul\Pos\Models\PosUser::class,
          ],

    POS installation process

      • add following line under ‘passwords’
        • ‘posusers’ => [
          provider’ => ‘posusers’,
          ‘table’ => ‘pos_user_password_resets’,
          ‘expire’ => 60,
          ],

    pos installation

    • Goto composer.json file then add the following line under ‘psr-4’

    Screenshot

    Now, Run these commands below to complete the setup in the bagisto root directory.

    composer dump-autoload
    php artisan migrate
    php artisan route:cache
    php artisan vendor:publish
    -> press 0 then press enter to publish all assets and configurations
    

    Once all the commands have been executed successfully, then you will see the POS icon on the left-hand side in the menu bar.

    Laravel eCommerce Point of Sale PNG Image 1296 × 620 pixels

    Laravel eCommerce Point of Sale Configuration

    Once you are on the Admin dashboard, click the “Configure > Point of Sale” option which is also there on the left-hand side in the menu bar following which you will be redirected to the POS Configuration page.

    General Settings

    The fields below depicting [Default] refer to the setting of the default channel and English locale.

    Let’s go through with the Configuration Settings one by one:

    Status 

    Here Admin can also active or inactive the POS status.

    Heading On Login 

    Enter the POS heading which will also be visible on the POS login panel.

    Sub-Heading on Login

     Enter the Sub-Heading which will be visible on the POS login panel.

    Footer Content

    Enter the footer content which will be displayed in the footer section of the POS login panel.

    Footer Note 

    Enter the footer note.

    Footer Link Text

    Enter the footer link text here.

    Footer Link 

    Enter the footer link here.

    POS Logo

    Upload the logo image which will be shown on the landing page of POS at the front end and will also displayed over the bill receipt.

    Screenshot-5

    Barcode 

    Barcode Image Type 

    The admin can select the barcode image type from the drop-down. Barcodes can be printed horizontally or vertically.

    Print Product Name With Barcode 

    Admin can also select Yes in the option if they want toprint the product name with the product barcode.

    Barcode Size [Width of the barcode in pixels]

    Here admin can enter the width size of the barcode.

    Barcode Size [Height of the barcode in pixels]

    Here admin can enter the height of the barcode.

    Generate Barcode With

    Admin can generate the barcode with the Product ID or with Product SKU(Stock keeping unit) from the drop-down.

    Generate Barcode Prefix [Left blank if don’t want to add prefix]

    The admin can also add a “Prefix” if they want.

    The POS agent can also search the product by “Product Name & SKU” else can search the product at the front end by the “Barcode” of the product.

    Hide Barcode Icon

    The admin can also active or inactive the section as per their need.

    Screenshot-1-4

    POS Product

    Allow Sku For Custom Product

    Once the admin active this section, at the front end the POS agent can add the Custom Product SKU while adding the product to the customer cart.

    Bill Receipt

    Show Logo On Bill Receipt

    If admin sets the status as active then the POS logo will be displayed over the bill receipt.

    Bill Receipt Logo

    Here the admin can upload logo for bill receipt.

    Use Custom Address On Bill Receipt

     If set inactive, then the POS store’s address will show on the bill receipt otherwise Custom address will show.

    Store Name 

    The admin can also enter the store name here.

    Store Address

    If the admin sets inactive, then the POS store’s address will show on the bill receipt otherwise Custom address will show. So the admin can enter their custom address.

    Email Address

    Here admin can also add the email address

    Website

    The admin can also add the website of their store to show over the bill receipt

    Phone Number

    The admin can add the phone number to show on the bill receipt

    Customer Care Number

    The admin can also add the customer care number here which will be displayed on the bill receipt

    GSTIN Number

    Admin can add the GSTIN number of their store to show over the bill receipt

    Show Order Barcode On Bill Receipt

    If the status is active, the Order’s Barcode will be showing on the bill receipt

    Provide Footer Custom Note On Bill Receipt

    Under this section, the admin can add the Custom Footer Note which will be shown on the bill receipt 

    192.168.15.17_pos_public_admin_configuration_pos_configuration

    Enable Order Print Confirmation Options 

    If you enable this toggle button under the configuration section, then the POS user will find the below pop-up while making a payment to print the order.

    Screenshot-82 

    Laravel eCommerce Point of Sale – Admin View

    On the admin dashboard, click the POS icon which is there on the left-hand side to check on for the features available in the backend for admin.

    • Agents: Here you will find the list of multiple users that have been created by the admin.

    Screenshot-2-3

    Add User

    The admin can add the agents by clicking on the”Add User” button.

    Here, the admin needs to enter the below details:

    Username

    The admin can enter the username of the user.

    First name 

    Here the admin can enter the first name of the user.

    Lastname

     The admin needs to enter the last name of the user.

    Email 

    The admin can enter the email ID of a user.

    User Avatar 

     Here admin can use any icon or figure to represent the user.

    Add Image

    Add an image to represent the user.

    Password

    The admin can set the password for the user.

    192.168.15.17_pos_public_admin_pos_users_create

    Outlet

      Select the store from the drop-down.

    Status

    Admin can active or inactive the store status from the drop-down.

    Lastly, hit the Save User button to save the user configuration successfully.

    Screenshot-3-1

    Stores

    Here you will find the list of multiple POS stores.

    Screenshot-4-4

    The admin can also add the store by clicking on the “Add Store” button.

    Here, the admin needs to enter some details –

    Store Name

    The admin needs to enter the name of the store in the field.

    Status 

    The admin can active or inactive the store status from the drop-down.

    Store Address

    The address of the store will be provided in this section.

    Country

     The admin can select the country of the store.

    Store State 

    The admin needs to select the state of the store.

    Store City

    Need to select the city of the store.

    Store PostCode

     Need to enter the postcode of the store.

    Inventory Source

    The admin has to choose the separate inventory for each store from the drop-down.

    Receipts

    The admin needs to select the US receipts or Indian receipts from the drop-down.

    Lastly, hit the Save Store button to save the store configuration successfully.

    192.168.15.17_pos_public_admin_pos_outlets_create

    After creating the store, the admin will Manage the Product in the store by hitting the below icon shown in the image.

    Screenshot-5-1

    Manage Products

    Now, under the Manage Products tab, the admin will assign the products to the store by enabling the products for the store. Assigned products will be displayed on the POS front end.

    Screenshot-6

    **Note:

    However, In POS Inventory is Centralised.

    This centralized inventory will depict that any inventory changes done on the website will be reflected in the POS end or vice versa.

    Likewise, if the online stock of the product is 200, then all the POS store stock will be the same i.e. 200. The stock will automatically decrease on each sale from the online store or the POS store accordingly.

    Barcode Product List

    Here admin can view all the products associated with his store accordingly They can generate barcodes for the products to be used by the POS agent to add a product to the cart during the check-out process.

    Screenshot-7

    Generate Barcode

    Now, the admin can generate a barcode by clicking “POS>Barcode Products” and will select the products for which they want to generate the barcode then select the barcode option to Generate Barcode from the drop-down then click on the submit button to generate barcodes.

    Screenshot-8

    After that now admin is allowing POS users to easily print a barcode for a product in a required quantity by clicking on the Print Barcode button available on the product.

    Here admin will first select the products for which they also want to set the barcode quantity. Then they will select the barcode option to “Print the Barcode” from the drop-down then click on the submit button.

    Screenshot-9

    Now, the admin will also add the quantity of the barcode to print.

    Screenshot-10-1

    Orders

    Here admin can view all the POS orders in a given list or they can view any order details by simply clicking on the order as shown in the image below.

    Screenshot-11

    By clicking on the eye icon as shown in the above image, the admin can easily check the order information.

    192.168.15.17_pos_public_admin_sales_orders_view_13

    Request Product

    Under the Request Product tab, the admin will check the “Low stock product request” sent by the POS user.

    Screenshot-12

    Admin can click on the action button shown in the above image the open tab will show all information like User, store details, the required quantity and inventory source.

    Admin can select the request status from the drop-down and then complete the product request by assigning the requested quantity to the respective store.

    Screenshot-13

    Bank Details 

    Under this section, the admin can add the bank details for the successful payment process on his POS store.

    Also in the section admin can see his Bank List.

    Screenshot-14 

    Once the admin clicks on the “Add Bank” button they will find the below snapshot, under that he will enter the information about his bank details. 

    General 

    Bank Name: The admin needs to enter the bank name.

    Bank address: Needs to enter the bank address 

    Email: Needs to enter the email ID 

    Phone Numer: The admin can enter the phone number 

    POS Agent & Bank Status 

    Assign POS Agent: Here admin can assign the bank to the POS agent 

    Bank Status: Select the Bank Status, Active/Inactive

    Screenshot-15

    Now at the POS store once the customer pays the bill the POS agent can select the preferred bank from the below Select Bank drop-down.

    Screenshot-16

    Detailed Sales Report 

    This section allows the admin to check his detailed sales report for his POS and website. As you can see in the below image the admin can easily filter the sales report based on Banks and Sales Type.

    Screenshot-17

    Receipts

    Here the admin can manage receipts according to their requirement such as adding new receipts, editing receipts, and previewing receipts.

    Screenshot-18

    Add Recepit

    The admin can add a new receipt by clicking on “Add Receipt”.

    • Title: The admin can enter the title of the receipt.
    • Status: The admin can enable or disable receipt status.
    • Display Store Name: By enabling this the admin can display the store name.
    • Display Date: By enabling this option the admin can display the date on receipt.
    • Display Order ID: The admin can display the order ID on receipt by enabling this.
    • Order ID Label: The admin can enter the order ID label.
    • Display Customer Name: By enabling this the admin can display the customer name on the receipt.
    • Display Sub Total: The admin can display the subtotal on receipt by enabling this.
    • Sub-Total Label- The admin can enter the sub-total label.
    • Display Tax: By enabling this the admin can display tax on the receipt.
    • Tax Label: The admin can enter the tax label.
    • Display Credit Amount:  By enabling this admin can display the credit amount on the receipt.
    • Credit Amount Label: The admin enters the credit amount label.
    • Display Change Amount: The admin can display the change amount by enabling this.
    • Change Amount Label: The admin can enter the change amount label.
    • Display Cashier Name: By enabling this the admin can display the cashier’s name on the receipt.
    • Cashier Name Label: The admin can enter the cashier name label.
    • Display Store Address: By enabling this the admin can display the store address on receipt.
    • Grand Total Label: The admin can enter the grand total label.
    • Display Discount Amount: By enabling this the admin can display the discount amount on the receipt.
    • Discount Label: The admin can enter the discount label.
    • Display Logo: By enabling this the admin can display the logo on the receipt.
    • Upload/Remove/Set Size of Logo: The admin can upload, remove and resize a logo.
    • Header/Footer Content: The admin can enter header or footer content on receipt.

    192.168.15.17_pos_public_admin_pos_receipt_create

    Laravel eCommerce Point of Sale Front-end

    The user can easily log in to the POS System by using the Username (email address) and Password.

    Screenshot-24-1

    After signing in to the POS system, the POS Users will be redirected to the POS panel as shown in the below image.

    Screenshot-23-1

    Once you have made any changes in the admin end, make sure you refresh the POS front end to reflect the changes.

    However, you can do this by hitting the refresh button which you can see at the top of the right-hand side of the below snapshot.

    Screenshot-23-2

    POS Cash Drawer Amount

    After logging into the POS System, the user has to enter some cash drawer amount. A pop-up comes which will ask the user to enter the Drawer Opening Amount as shown below along with the Remark section. The POS user has to enter the drawer opening amount, for example, $200 as shown in the image, which is the required amount set for that particular day.

     
    Screenshot-25-1

    After login, the POS user will see the panel, where all the products are displayed that are assigned by the admin to the particular store. The user will also see the Cart section where the POS user will manage the customer orders.

    Screenshot-27-2

    The POS user can easily search for any product from the search bar.

    Moreover, the POS agent can add the bulk product(s) to the cart by scanning the barcode of the products from a single search bar.

    POS-user-product-search

    POS users can also look out for the products available in their respective categories as shown in the below image.

    Screenshot-28-1

    By clicking on the small arrow icon under the small box specified in the below image, the POS user will view the category lists through which the POS user can also select a category to choose the product from a specific category.

    Screenshot-28-2

    The below image shows all categories listed in the POS.

    Screenshot-29-1

    POS – Custom Product

    The POS user can also add a product in the cart which is not available in their POS but the product is available in the physical store. POS user will have to click on the button as shown in the below image.

    Screenshot-32-2

    Here, the POS user will have to enter the product details and then add the product to the cart by clicking on the Add to Cart button.

    Screenshot-31-6

    After that, the POS user can proceed with the order as normal.

    POS – Cashier Management

    Under the Cashier, The POS user manages the functionalities given below –

    • Close Counter
    • Today Cash
    • Sale History

    After clicking the Close Counter tab, the User will find Drawer Amount DetailsCounted Drawer Amount, and Closing Drawer Detail options.

    “Before closing the drawer opening amount was $10 and whenever in a day the POS agent closes the drawer all today’s total cash amount will be added to the opening amount and again current drawer sale will be zero. “

    • The Drawer Amount Details display the opening amount which is $90.00 here, today total cash sales are $80.00 and the expected amount in the drawer is $90.00
    • The Counted Drawer Amount displays the counted drawer amount which is $90. The POS agent may add the remarks as well.
    • Closing Drawer Details displays the difference between the opening and the closing amount(current drawer sale) which is $90.00.

    Screenshot-33-4

    Today Cash

    Under Cashier, there is another option Today Cash is available which displays the  Today Cash Sale and the Today Card Sale.

    The order ID, time, order total and the order payment mode details are also visible to the POS agent under the Today Cash option.

    Screenshot-34-2

    Sale History

    The POS user can view the sale history under the Sale History option. For a particular date, the cash sale and the card sale are listed under Sale History.

    Screenshot-35-1

    POS – Order Management

    The POS user can manage sales activity like adding products to the cart, adding customer details, putting the cart on hold to process it later, and paying for the order from his panel as shown below.

    Screenshot-36-1

    After adding the products to the cart the POS user will now add customer details by clicking on the default customer option and then following the steps as shown in the below image.

    Screenshot-37

    Note: The Pos user can search customers by their name or email as well.

    After clicking on the add customer button the below pop-up will be displayed.

    Screenshot-38-1

    The POS user can add a new customer step by step filling in the above fields as shown in the image and then clicking on the save button to proceed with the payment.

    Once the customer is selected the after POS user can also complete the order after a click on the pay button.

    If the customer has chosen the cash method then the customer will also provide some amount to pay for the order and the POS user will refund him the remaining money as shown in the screenshot below.

    Screenshot-39-1

    As shown in the above image Payment Method is Cash, the Total Order Amount is $110.00, the amount paid by the customer is $110.00 and the balance amount to be paid back to the customer is $0.00.

    Finally, click on the Confirm Payment button, After clicking on confirm payment below pop will be displayed to complete the payment successfully Click on the confirm button now.

    Screenshot-40-1

    Under the Sale History Section, POS users can print the invoice for the order and can continue further with other orders.

    Screenshot-41

    Customers can even pay via card, it depends on the customer’s wish. In the Card Payment method, the total amount of the order will be deducted from the customer’s card.

    POS Panel- Apply Discount

    The POS user can apply the discount to the cart.

    To apply the discount, the POS user will click the Cash Discount option available in the cart as shown below.

    Screenshot-42

    After clicking on the Cash Discount, the below pop-up will be displayed. The POS can easily choose the discount from the drop-down and then click on the apply discount button.

    Screenshot-44

    Once the POS user applies the discount, the chosen discount will be added to the cart as shown in the below image.

    Screenshot-45

    POS Panel- Cart on hold

    The POS user can put a cart On Hold to process it later by simply clicking on the Hold Cart option as shown below.

    Screenshot-46

    Clicking on the Hold option will display a below pop-up where the POS user will specify the reason for putting the cart on hold by adding a note. After adding the note, hit the Hold Order button as shown below.

    Screenshot-47

    After successfully holding the cart, the POS user can check the Hold Sale by navigating to POS > Sales > Hold Sale.

    Screenshot-48

    The above image displays the cart details of the product which has also been put on Hold. The Note entered by the POS user is also displayed under the Note section.

    Here POS user can:-

    • Click the “Add To Cart” button to add the order back to the cart to process it further.
    • Also, Click the “Remove” button to remove the hold cart.

    Split Payment 

    Now the customer can also split the order payment into Cash and Credit/Debit card at the checkout as shown in the below image.

    The agent can also choose the options as per their customer preference. 

    Screenshot-67

    POS Panel – Offline Sale

    The sales orders which got processed in the offline mode will be seen under POS > Sales > Offline Sales.

    Screenshot-68

    Once the POS System get connected to the internet, the POS user can synchronize offline sales with the online store.

    After syncing, the offline sale the POS user can see offline orders in the Sale History section.

    Screenshot-69

    Under Sale History, the POS User can –

    • View the complete list of the orders placed.
    • View the details of any order from the sales order list.
    • Search the order from the Search Order By ID panel at the top.
    • Print the invoice of the order by clicking the Print Invoice button.

    Product Return Feature

    The agent can also return the product if the customer wishes to return/exchange it. Scrolling to the sales, the agent can go to sales history and by choosing one he can see the option of returning.

    Screenshot-69

    After clicking on return, the pop-up will come in which the agent will add the quantity and after that will redirect to sales which will show the refunded amount.

    Screenshot-70

    POS Panel-Product Management

    The POS user can manage their Store Product under the Product Section.

    Here POS users can –

    • Set the minimum unit of quantity for the low-stock product by navigating to POS>Products>Setting as shown in the below image.

    Screenshot-71

    • The POS user can check the low stock product under the Low Stock Product section as shown in the below image.

    Screenshot-72

    • The POS user can send the request for Low Stock Products by clicking on the Send Request button as shown in the above image.

    After clicking on the Send Request button below pop-up will be displayed. The POS user can mention the required quantity for the particular product along with the comment then hit the done button.

    Screenshot-73

    Once the request is done, the POS user can also manage the Product Request by Clicking on Pencil or Cross icon as shown in the below image.

    Screenshot-74

    • The POS user can also check the sent requests of the low-stock product under the Requested Product section along with the request status by navigating to POS>Products>Requested Product as shown in the below image.

    Screenshot-75

    POS Panel- Setting

    The POS user can also navigate to POS > Settings to edit settings for the account and POS settings as shown below. Under the profile setting POS user can also update the Profile.

    Here, the POS user will –

      • First Name – enter the first name of the POS user.
      • Last Name – enter the second name of the POS user.
      • Account Email – enter the email address.
      • Previous Password – enter the previously saved password of the POS account.
      • New Password – enter the new password for the POS account.
      • Confirm Password – reenter the new password of the POS account to confirm it.

    And, lastly hit the Done button to save the configuration successfully.

    Screenshot-76

    • Under the Basic Settings tab, the POS user can configure the basic settings as shown below.
    • Here, the POS user will –

        • Select the locale for the store from the drop-down.
        • Select the currency for the store from the drop-down.

    Screenshot-77

    • And lastly, under the Loyalty Discount tab, the POS user can add the discount by clicking on the Plus icon.

    Screenshot-78

    After clicking on the Plus icon, the below pop-up will be displayed to the POS user.

    Here POS user can:-

    • Enter the Offer Name.
    • Enter From Price – To Price.
    • Discount Type- Percentage
    • Discount can be added on two types percentage wise or fixed discount.
    • Enter the Value.

    Screenshot-79

    After hitting the done button the Percentage Discount will be added as shown in the below image.

    Screenshot-80

    With the same process, the POS user can add the Fixed Discount.

    Here POS user can:-

    • Enter the Offer Name.
    • Enter From Price – To Price.
    • Discount Type- Fixed
    • Enter the Value.

    Screenshot-81

    •  

    After hitting the done button Fixed Discount will be added, as shown in the below image.

    That’s all for Laravel eCommerce Point of Sale, still, have any issues feel free to add a ticket.

    Also, let us know your views on making the module Laravel eCommerce Point of Sale better https://bagisto.uvdesk.com/en/

    Current Product Version - 1.5.1

    Supported Framework Version - Bagisto v1.5.1

    Blog Version - Bagisto v1.5.1
    • Version Bagisto v1.5.1
    • Version Bagisto v1.3.3
    . . .

    Leave a Comment

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


    10 comments

  • Abhishek Yadav
    • saurav pathak (Moderator)
  • Lucas White
    • saurav pathak (Moderator)
  • Kristy Davis
    • saurav pathak (Moderator)
  • Andrew Campher
    • saurav pathak (Moderator)
  • Open Source Rocks
    • Prachi Chauhan (Moderator)
  • 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