Architecture
This page explains the technical architecture of WCPOS for developers and advanced users.
Two-Part System
WCPOS is designed as a two-part system:
-
PHP Plugin: Hosted on your server, this is a relatively small plugin which extends the WooCommerce REST API.
-
JavaScript Client: This runs locally in your browser or the desktop app, and later on iOS and Android apps.
You can think of it as two separate worlds:
- The PHP world is where data management happens using WordPress and WooCommerce.
- The JavaScript world replicates your WooCommerce store locally, optimised for fast searching and offline use.
Data Synchronization
Data is fetched from WooCommerce using the WooCommerce REST API. This means the POS has to download every product, variation, product category, customer, tax rate, and more to store them locally.
Although this can be time-consuming initially, once downloaded, they're available instantly without the need to continually fetch from the server.
What Gets Synced?
- Products and variations
- Product categories and tags
- Customers
- Tax rates and tax classes
- Payment gateways (for checkout)
- Orders (for order history in Pro)
Sync Strategy
WCPOS uses an incremental sync strategy:
- Initial sync: Downloads all data on first load
- Incremental updates: Only fetches changes since the last sync
- Background sync: Periodically checks for updates
- Manual sync: User can trigger a sync at any time
Architecture Pros and Cons
| Good 😊 | Bad 😟 |
|---|---|
| Searching local data is instant | Keeping data in sync is challenging |
| Cached data available offline | Limited by the WooCommerce REST API |
| Ability to create better native apps for desktop, iOS, and Android | WordPress themes and hooks cannot customise the POS app |
Local Database
The JavaScript client stores data in IndexedDB, a browser-based database. This provides:
- Persistence: Data survives browser restarts
- Performance: Fast queries without network latency
- Offline browsing: Cached data remains accessible without internet
Checkout Architecture
The checkout process uses an iframe/webview that loads the WooCommerce Order Pay page. This approach:
- Leverages existing payment gateways: Any WooCommerce payment gateway can work in the POS
- Maintains security: Payment processing happens through WooCommerce's secure infrastructure
- Reduces complexity: No need to re-implement payment gateway integrations
API Extensions
The PHP plugin extends the WooCommerce REST API with additional endpoints for POS-specific functionality. See WooCommerce REST API for details.