Custom HTML in Receipt Editor **

The Receipt Editor's "Custom HTML" feature allows you to customize the appearance of receipts using JavaScript. Here are some built-in functions to simplify your work:

1. Custom Function

To access receipt data, use the custom function to read all receipt properties retrieved from the server.

How to Use:

window.custom = function(receipt) {
    console.log('Receipt Total: ' + receipt.total);

    for(var i = 0; i < receipt.items.length; i++) {
        console.log('Show Item number ' + (i+1) + ' name => ' + receipt.items[i].name);
    }
};

2. setInputValue

For controlled components, where events may not update the value as expected, use this function to set values in input fields under the receipt.

How to Use:

window.setInputValue($('#InputName')[0], '*VALUE*');

3. waitForElm

To wait for a specific element to appear on the receipt, use this function to perform actions when the desired element is available.

Example: Update Consent Popup Border

window.waitForElm('.ant-modal-title').then((elm) => {
    $(".ant-modal-content").css("border-radius", "20px");
});

Fields Interpolation

To include receipt values in your custom HTML, use the following formats:

Simple Fields

For string or number fields, use the format ${fieldName}. For example, ${total} will display the total amount from the receipt.

Array Fields

For array fields, you can:

• Use ${arrayField[*].value} or ${arrayField[].value} to access all items in the array.
• Use ${arrayField[index].value} to access a specific item by its index. For instance, ${payments[1].name} will display the name of the second payment (indexing starts from 0).

These features allow you to dynamically insert detailed information from your receipts, enhancing the personalization and informativeness of your content.