> 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-in-app-integration.md).

# 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.

```javascript
//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.

```javascript
// 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.

```javascript
// 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.

```javascript
// 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.

```javascript
// 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.

```javascript
// 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. |