> For the complete documentation index, see [llms.txt](https://docs.easypay.sa/easypay/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.easypay.sa/easypay/customer-screen-integration-guide/customer-screen-wifi-integration.md). # Customer Screen WiFi Integration ## Option 1: Using Your Own Customer Screen If you have a custom customer screen, you can initialize it by sending the URL link to Easypay. This allows your application to display your personalized interface for customer interactions. ```javascript //Initialize your custom Customer Screen by sending its URL to Easypay const initCustomerScreen = () => { const initRequest = { method: "initCustomerDisplayUrl", customerDisplayUrl: "https://your-customer-screen-url.com" // Replace with your customer screen URL }; try { socket.send(JSON.stringify(initRequest)); console.log("Initialized custom Customer Screen:", initRequest); } catch (error) { console.error("Failed to initialize Customer Screen:", error); // Optionally, implement retry logic or notify the user } }; // Example usage: initCustomerScreen(); ``` **Explanation:** * **Method:** `initCustomerDisplayUrl` * **Purpose:** Sends the URL of your custom Customer Screen to Easypay to initialize it. * **Parameters:** * `customerDisplayUrl`: The URL of your custom Customer Screen. ## Option 2: Using Easypay's Built-in Customer Screen Easypay's built-in Customer Screen allows you to manage order lines dynamically. Below are the methods to add, update, remove, and synchronize order lines. ### **Adding a New Order Line** To add a new product to the current order displayed on the Customer Screen, utilize the `newOrderLine` method. This allows you to specify product details such as image, name, quantity, and price. ```javascript //Function to add a new order line to the Customer Screen const addOrderLine = () => { const newOrderLineRequest = { method: "newOrderLine", product_image: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", id: 1, product_name: "Burger", quantity: 1, price: 35.00 }; try { socket.send(JSON.stringify(newOrderLineRequest)); console.log("Added new order line:", newOrderLineRequest); } catch (error) { console.error("Failed to add new order line:", error); // Optionally, implement retry logic or notify the user } }; // Example usage: addOrderLine(); ``` **Explanation:** * **Method:** `newOrderLine` * **Purpose:** Adds a new product to the current order displayed on the Customer Screen. * **Parameters:** * `product_image`: URL of the product image. * `id`: Unique identifier for the product. * `product_name`: Name of the product. * `quantity`: Quantity of the product. * `price`: Price per unit of the product. ### **Updating an Existing Order Line** To update the details of an existing product in the current order, use the `updateOrderLine` method. This allows modifications to the product's quantity, price, or other attributes. ```javascript // Function to update an existing order line on the Customer Screen const updateOrderLine = () => { const updateOrderLineRequest = { method: "updateOrderLine", product_image: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", id: 1, product_name: "Burger", quantity: 3, price: 35.00 }; try { socket.send(JSON.stringify(updateOrderLineRequest)); console.log("Updated order line:", updateOrderLineRequest); } catch (error) { console.error("Failed to update order line:", error); // Optionally, implement retry logic or notify the user } }; // Example usage: updateOrderLine(); ``` **Explanation:** * **Method:** `updateOrderLine` * **Purpose:** Updates the details of an existing product in the current order. * **Parameters:** * `product_image`: URL of the product image. * `id`: Unique identifier for the product to be updated. * `product_name`: Name of the product. * `quantity`: New quantity of the product. * `price`: Price per unit of the product. ### **Removing an Order Line** To remove a specific product from the current order, utilize the `removeOrderLine` method by specifying the product's unique identifier. ```javascript // Function to remove an order line from the Customer Screen const removeOrderLine = () => { const removeOrderLineRequest = { method: "removeOrderLine", id: 1 // ID of the product to be removed }; try { socket.send(JSON.stringify(removeOrderLineRequest)); console.log("Removed order line with ID:", removeOrderLineRequest.id); } catch (error) { console.error("Failed to remove order line:", error); // Optionally, implement retry logic or notify the user } }; // Example usage: removeOrderLine(); ``` **Explanation:** * **Method:** `removeOrderLine` * **Purpose:** Removes a specific product from the current order. * **Parameters:** * `id`: Unique identifier of the product to be removed. ### **Creating a New Order (Clearing Order Lines)** To initiate a new order and clear all existing order lines, use the `newOrder` method. This is useful when starting a fresh transaction. ```javascript // Function to create a new order by clearing all existing order lines const createNewOrder = () => { const newOrderRequest = { method: "newOrder" }; try { socket.send(JSON.stringify(newOrderRequest)); console.log("Created a new order and cleared all order lines."); } catch (error) { console.error("Failed to create a new order:", error); // Optionally, implement retry logic or notify the user } }; // Example usage: createNewOrder(); ``` **Explanation:** * **Method:** `newOrder` * **Purpose:** Initializes a new order by clearing all existing order lines on the Customer Screen. * **Parameters:** None. ### **Updating All Order Lines at Once** To efficiently update all order lines simultaneously, use the `UpdateAllOrderlines` method. This ensures synchronization between your POS system and the Customer Screen by sending the complete list of current order lines. ```javascript // Function to update all order lines on the Customer Screen const updateAllOrderLines = () => { const updateAllOrderlinesRequest = { method: "UpdateAllOrderlines", data: [ { id: 1, product_name: "Burger", quantity: 2, unit_price: 35.00, price: 70.00, product_image: "https://www.example.com/images/burger.png" }, { id: 2, product_name: "Fries", quantity: 1, unit_price: 20.00, price: 20.00, product_image: "https://www.example.com/images/fries.png" }, { id: 3, product_name: "Coke", quantity: 3, unit_price: 15.00, price: 45.00, product_image: "https://www.example.com/images/coke.png" } ] }; try { socket.send(JSON.stringify(updateAllOrderlinesRequest)); console.log("Updated all order lines:", updateAllOrderlinesRequest.data); } catch (error) { console.error("Failed to update all order lines:", error); // Optionally, implement retry logic or notify the user } }; // Example usage: updateAllOrderLines(); ``` **Explanation:** * **Method:** `UpdateAllOrderlines` * **Purpose:** Sends the complete list of current order lines to the Customer Screen, ensuring synchronization. * **Parameters:** * `data`: An array of order line objects, each containing: * `id`: Unique identifier for the product. * `product_name`: Name of the product. * `quantity`: Quantity of the product. * `unit_price`: Price per unit of the product. * `price`: Total price for the product (`unit_price` × `quantity`). * `product_image`: URL of the product image. ### **Summary of WiFi Integration Methods**
FunctionalityMethodDescription
Initialize Customer ScreeninitCustomerDisplayUrlInitializes your custom Customer Screen with a URL.
Add Order LinenewOrderLineAdds a new product to the current order.
Update Order LineupdateOrderLineUpdates details of an existing product in the order.
Remove Order LineremoveOrderLineRemoves a specific product from the order.
Create New OrdernewOrderClears all existing order lines to start a new order.
Update All Order LinesUpdateAllOrderlinesSynchronizes all order lines at once with the screen.