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.
//Initialize your custom Customer Screen by sending its URL to EasypayconstinitCustomerScreen= () => {// Check if the updateCustomerDisplay handler is availableif (window.updateCustomerDisplay) {constinitRequest= { method:"initCustomerDisplayUrl", customerDisplayUrl:"https://your-customer-screen-url.com"// Replace with your customer screen URL }; try {// Send the new order line request to Easypay's handlerwindow.updateCustomerDisplay.postMessage(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 } } else {console.error("updateCustomerDisplay handler is not available.");// Optionally, fallback to WebSocket Integration 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.
// Function to add a new order line using In-App IntegrationconstaddOrderLineInApp= () => {// Check if the updateCustomerDisplay handler is availableif (window.updateCustomerDisplay) {constnewOrderLineRequest= { 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 {// Send the new order line request to Easypay's handlerwindow.updateCustomerDisplay.postMessage(JSON.stringify(newOrderLineRequest));console.log("Added new order line (In-App):", newOrderLineRequest); } catch (error) {console.error("Failed to add new order line (In-App):", error);// Optionally, implement retry logic or notify the user } } else {console.error("updateCustomerDisplay handler is not available.");// Optionally, fallback to WebSocket Integration or notify the user }};// Example usage:addOrderLineInApp();
Explanation:
Method:newOrderLine
Purpose: Adds a new product to the current order displayed on the Customer Screen within the Easypay app.
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.
// Function to update an existing order line using In-App IntegrationconstupdateOrderLineInApp= () => {// Check if the updateCustomerDisplay handler is availableif (window.updateCustomerDisplay) {constupdateOrderLineRequest= { 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 {// Send the update order line request to Easypay's handlerwindow.updateCustomerDisplay.postMessage(JSON.stringify(updateOrderLineRequest));console.log("Updated order line (In-App):", updateOrderLineRequest); } catch (error) {console.error("Failed to update order line (In-App):", error);// Optionally, implement retry logic or notify the user } } else {console.error("updateCustomerDisplay handler is not available.");// Optionally, fallback to WebSocket Integration or notify the user }};// Example usage:updateOrderLineInApp();
Explanation:
Method:updateOrderLine
Purpose: Updates the details of an existing product in the current order within the Easypay app.
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.
// Function to remove an order line using In-App IntegrationconstremoveOrderLineInApp= () => {// Check if the updateCustomerDisplay handler is availableif (window.updateCustomerDisplay) {constremoveOrderLineRequest= { method:"removeOrderLine", id:1// ID of the product to be removed };try {// Send the remove order line request to Easypay's handlerwindow.updateCustomerDisplay.postMessage(JSON.stringify(removeOrderLineRequest));console.log("Removed order line (In-App) with ID:",removeOrderLineRequest.id); } catch (error) {console.error("Failed to remove order line (In-App):", error);// Optionally, implement retry logic or notify the user } } else {console.error("updateCustomerDisplay handler is not available.");// Optionally, fallback to WebSocket Integration or notify the user }};// Example usage:removeOrderLineInApp();
Explanation:
Method:removeOrderLine
Purpose: Removes a specific product from the current order within the Easypay app.
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.
// Function to create a new order by clearing all order lines using In-App IntegrationconstcreateNewOrderInApp= () => {// Check if the updateCustomerDisplay handler is availableif (window.updateCustomerDisplay) {constnewOrderRequest= { method:"newOrder" };try {// Send the new order request to Easypay's handlerwindow.updateCustomerDisplay.postMessage(JSON.stringify(newOrderRequest));console.log("Created a new order (In-App) and cleared all order lines."); } catch (error) {console.error("Failed to create a new order (In-App):", error);// Optionally, implement retry logic or notify the user } } else {console.error("updateCustomerDisplay handler is not available.");// Optionally, fallback to WebSocket Integration or notify the user }};// Example usage:createNewOrderInApp();
Explanation:
Method:newOrder
Purpose: Initializes a new order by clearing all existing order lines within the Easypay app.
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.
// Function to update all order lines using In-App IntegrationconstupdateAllOrderLinesInApp= () => {// Check if the updateCustomerDisplay handler is availableif (window.updateCustomerDisplay) {constupdateAllOrderlinesRequest= { 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 {// Send the update all order lines request to Easypay's handlerwindow.updateCustomerDisplay.postMessage(JSON.stringify(updateAllOrderlinesRequest));console.log("Updated all order lines (In-App):",updateAllOrderlinesRequest.data); } catch (error) {console.error("Failed to update all order lines (In-App):", error);// Optionally, implement retry logic or notify the user } } else {console.error("updateCustomerDisplay handler is not available.");// Optionally, fallback to WebSocket Integration or notify the user }};// Example usage:updateAllOrderLinesInApp();
Explanation:
Method:UpdateAllOrderlines
Purpose: Sends the complete list of current order lines to the Customer Screen, ensuring synchronization between your POS system and the display.
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 In-App Integration Methods
Functionality
Method
Description
Add Order Line
newOrderLine
Adds a new product to the current order.
Update Order Line
updateOrderLine
Updates details of an existing product in the order.
Remove Order Line
removeOrderLine
Removes a specific product from the order.
Create New Order
newOrder
Clears all existing order lines to start a new order.
Update All Order Lines
UpdateAllOrderlines
Synchronizes all order lines at once with the screen.