Customer Screen In-App 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.

//Initialize your custom Customer Screen by sending its URL to Easypay
const initCustomerScreen = () => {
    // Check if the updateCustomerDisplay handler is available
    if (window.updateCustomerDisplay) {
        const initRequest = {
            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 handler
            window.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 Integration
const addOrderLineInApp = () => {
    // Check if the updateCustomerDisplay handler is available
    if (window.updateCustomerDisplay) {
        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 {
            // Send the new order line request to Easypay's handler
            window.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 Integration
const updateOrderLineInApp = () => {
    // Check if the updateCustomerDisplay handler is available
    if (window.updateCustomerDisplay) {
        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 {
            // Send the update order line request to Easypay's handler
            window.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 Integration
const removeOrderLineInApp = () => {
    // Check if the updateCustomerDisplay handler is available
    if (window.updateCustomerDisplay) {
        const removeOrderLineRequest = {
            method: "removeOrderLine",
            id: 1 // ID of the product to be removed
        };
        
        try {
            // Send the remove order line request to Easypay's handler
            window.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 Integration
const createNewOrderInApp = () => {
    // Check if the updateCustomerDisplay handler is available
    if (window.updateCustomerDisplay) {
        const newOrderRequest = {
            method: "newOrder"
        };
        
        try {
            // Send the new order request to Easypay's handler
            window.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 Integration
const updateAllOrderLinesInApp = () => {
    // Check if the updateCustomerDisplay handler is available
    if (window.updateCustomerDisplay) {
        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 {
            // Send the update all order lines request to Easypay's handler
            window.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.

PreviousCustomer Screen WiFi IntegrationNextPrint Receipt Integration Guide

Last updated